وردپرس گوتنبرگ عملکرد سایت را بهبود بخشید

ناشر افزونه ذخیره سازی وردپرس WP Rocket سایت خود را با Gutenberg دوباره طراحی کرد و عملکرد سایت را بهبود بخشید. آنها دریافتند که گوتنبرگ به طرز شگفت انگیزی کد نوری می نویسد اما به اشتراک گذاشتند که چند نکته وجود دارد که باید مراقب آنها بود.

عکس صفحه نمره PageSpeed ​​Insights

ویرایش در گوتنبرگ آسان تر است

هدف گوتنبرگ به طور مداوم ایجاد یک رابط ویرایش بوده است که ناشران از هر سطح مهارت را قادر به انتشار وب سایت ها می کنند.

ایجاد یک رابط بصری مانع ورود را کاهش می دهد ، تقریباً هر کسی را قادر می سازد تا به راحتی یک حضور وب ایجاد کند و از همه مهمتر ، به تولیدکنندگان محتوا کمک می کند تا به جای اینکه بخواهند کدی را بسازند و نگران نباشند ، روی ایجاد محتوا تمرکز کنند.

بر اساس صفحه رسمی وردپرس گوتنبرگ:

“بدون اینکه یک توسعه دهنده متخصص باشید ، می توانید پست ها و صفحات سفارشی خود را بسازید.”

صفحه توسعه دهنده وردپرس چشم انداز گوتنبرگ را ترسیم می کند مثل این:

“گوتنبرگ ویرایشگر را به ابزاری تغییر می دهد كه به کاربران اجازه می دهد پست های غنی را بنویسند و با چند کلیک طرح های زیبا بسازند – نیازی به دانش فنی نیست. وردپرس به ابزاری قدرتمند و قابل انعطاف تبدیل می شود که برای همه قابل دسترسی است. “

ویرایشگر از مفهومی به نام “بلوک” استفاده می کند که می تواند برای تشکیل یک طرح سفارشی مرتب شود.

این تمرکز بر آسان ساختن تمرکز بر روی مطالب برای هرکسی توضیح می دهد که چرا تیم بازاریابی در WP Rocket فوراً از رابط کاربری جدید استقبال می کنند.

با توجه به WP Rocket:

“تغییر از ویرایشگر کلاسیک به گوتنبرگ برای تیم بازاریابی بدون دردسر بوده است. علاوه بر این ، ما از برخی از ویژگی هایی که کار ما را آسان تر و سریعتر می کند لذت می بریم. “

صفحه تصویر امتیاز بینش سرعت صفحه اصلی

ساختمان با عملکرد بهتر گوتنبرگ

WP Rocket گزارش می دهد که ساخت یک سایت با گوتنبرگ به یک وب سایت سریعتر و با عملکرد بهتر منجر شده است.

دو دلیل برای عملکرد فوق العاده صفحات WP Rocket ساخته شده با گوتنبرگ وجود داشت:

1. HTML سبک تر (ساخته شده در گوتنبرگ)
2. CSS و جاوا اسکریپت On-Demand (از ویژگی های گوتنبرگ نیست)

کد HTML سبک تر برای گوتنبرگ یک ویژگی خارج از جعبه است.

در سمت پایین ، بارگذاری CSS غیرضروری نیز یکی از ویژگی های پخته شده گوتنبرگ است. به همین دلیل ، WP Rocket یک راه حل ایجاد کرد تا بتواند CSS مورد نیاز را به طور خودکار انجام دهد.

گوتنبرگ برای بارگذاری تمام CSS های لازم برای هر بلوک سبک طراحی شده است. بنابراین اولین چالش ایجاد راهی برای بارگیری جاوا اسکریپت و CSS به صورت خودکار و فقط در صورت لزوم بود.

گوتنبرگ به طرز شگفت آوری قوی است

صادقانه بگویم ، من کمی شگفت زده شدم که WP Rocket همه کار را در مورد گوتنبرگ انجام داد. دلیل حیرت من این بود که گوتنبرگ کاملاً تمام نشده است.

تجربه کامل ویرایش سایت تا ژوئن 2021 ارائه نمی شود. با این حال WP Rocket دریافت که طراحی مجدد وب سایت خود با گوتنبرگ دوباره انتخاب شده است.

من از تیم WP Rocket خواستم تا تجربه خود را به اشتراک بگذارند.

مصاحبه با WP Rocket

آیا تیم توسعه با چالش هایی روبرو شده بود و مجبور به ایجاد راه حل هایی برای مقابله با آنها بود؟

“آره!

اولاً ، ما با بلوک های سفارشی گوتنبرگ تجربه توسعه صفر داشتیم و همه آنچه که در این زمینه می خوانیم بسیار ناامید کننده بود.

نیازی به گفتن نیست که منحنی یادگیری کاملاً شیب دار بود.

برای موارد خاص: به عنوان یک پلاگین حافظه پنهان ، یکی از مهمترین نگرانیهای توسعه ما نیاز به عملکرد بود. در این رابطه ، یک اشکال در مورد گوتنبرگ وجود دارد: سبک پیش فرض شامل تمام CSS بلوک های بومی است.

این مسئله از آنجایی که CSS استفاده نشده در همه صفحات بارگیری می شود (و این از توصیه “حذف منابع CSS استفاده نشده” PageSpeed ​​Insights پیروی نمی کند) این یک مسئله بود.

در مورد ما ، ما چندین بلوک را که استفاده نشده است ، منسوخ کردیم. ما یک سیستم enqueue سفارشی ایجاد کردیم تا CSS & JS بلوک بارگذاری شده فقط در صورت لزوم داشته باشد. فقط چند دقیقه طول کشید تا این سیستم را توسعه دهیم.

همچنین تصمیم گرفتیم از پرونده CSS Gutenberg استفاده نکنیم. درعوض ، ما CSS مورد نیاز خود را به درون صفحه سبک خود ، در یک فایل اختصاصی CSS ، “مهاجرت” کردیم. این کلاهبرداری را انجام داد. “

آیا گوتنبرگ احساس می کند کامل است و برای سایت های تولید آماده است؟

“خوب ، ما موفق شدیم سایت خود را با Gutenberg (نوار هدر و پاورقی) بسازیم. من فکر می کنم این چیزی در مورد چگونگی تکامل گوتنبرگ و آمادگی آن می گوید.

با ویرایش کامل سایت در ژوئن 2021 برنامه ریزی شده است، من معتقدم که شخص توانایی ویرایش همه عناصر یک سایت را با استفاده از بلوک های گوتنبرگ خواهد داشت. “

آیا استفاده از آن منحنی یادگیری داشت؟

“کاملا. و من فکر می کنم این مورد مخصوصاً در مورد کسانی که به سازندگان صفحه بصری عادت دارند ، بیشتر خواهد بود.

با این اوصاف ، ما واقعاً از چگونگی بصری بودن گوتنبرگ تعجب کردیم. قسمت انتهایی پیش نمایش خوبی از نمای جلویی دارد به این معنی که حتی برای افراد غیرتکنیکی – مانند خودم – ایجاد برخی تغییرات در یک صفحه یا ساختن صفحات جدید از ابتدا آسان است. “

با دانش به دست آمده از تجربه خود ، چه توصیه ای برای کسانی که می خواهند به گوتنبرگ روی بیاورند ، دارید؟

“به دنبال آن برو!

دو اقدام اصلی ما موارد زیر بود:

1. با در نظر گرفتن گوتنبرگ روی طراحی وب جدید خود شروع کنید. این باعث صرفه جویی در وقت شما می شود و در نهایت کارآیی بیشتری خواهید داشت. (این کاری نیست که ما انجام دهیم زیرا ما طراحی خود را بدون تصمیم گیری درباره ویراستار آغاز کردیم …)
2. با توجه به مشاغل خود به تعداد بلوک های مورد نیاز دقت کنید. به این فکر کنید که آیا همه آنها باید سفارشی باشند یا نه. بلوک ها در استفاده از گوتنبرگ تفاوت واقعی ایجاد می کنند. (ما با بیش از 20 بلوک سفارشی مواجه شدیم که از حد متوسط ​​دور است. شما ممکن است فقط به یک زن و شوهر نیاز داشته باشید).

قبل از روی آوردن به گوتنبرگ ، مهمترین ملاحظاتی که باید به آنها فکر کرد چیست؟

“گوتنبرگ لزوما برای همه مناسب نیست.

اگر با تم رایگان همانطور که هست خوب هستید ، بسیار عالی است. شما می توانید تمام بلوک های مورد نظر خود را ایجاد کنید و از گوتنبرگ لذت ببرید.

با این حال ، اگر می خواهید یک طراحی خاص و بلوک های خاص داشته باشید ، به یک توسعه دهنده نیاز دارید تا در طرح بندی به شما کمک کند. احتمالاً به اندازه زمان ما وقت شما را نخواهد گرفت.

هنوز هم ، ایجاد وب سایت جدید شما طولانی تر و گرانتر از حد معمول خواهد بود ، زیرا به کمک نیاز خواهید داشت. همچنین باید از منحنی یادگیری شیب دار پیش روی خود آگاه باشید.

همانطور که گفته شد ، گوتنبرگ واقعاً در قلب وردپرس است و هر روز ، همکاران برای بهبود آن تلاش می کنند.

هنگام انتخاب گزینه دیگری ، هنگام تغییر در وردپرس احتمال بروزرسانی نشدن آن وجود دارد. همچنین ، یافتن کسی برای کمک به شما در یک سایت وردپرس ساخته شده با گوتنبرگ همیشه آسان تر خواهد بود.

ما معتقدیم که گوتنبرگ آینده وردپرس است ، به علاوه رایگان و منبع باز است. “

چه نوع ناشری باید درباره تغییر رویه به گوتنبرگ دوبار فکر کنند؟

“این چیزی است که ما در پست وبلاگ خود به آن اشاره می کنیم:

اگر فریلنسر هستید یا یک شرکت کوچک را اداره می کنید ، باز هم می توانید با یک صفحه ساز که به هیچ کمک توسعه دهنده یا هزینه اضافی احتیاج ندارد ، خوب باشید.

اگر شرکت بزرگتری را اداره می کنید و به توسعه خاصی نیاز دارید – پس بله ، گوتنبرگ راه حل مناسبی برای شماست ، و دیگر هیچ تردیدی نخواهید داشت. “

وردپرس گوتنبرگ آینده است

WP Rocket وقتی اظهار کنند که گوتنبرگ آینده است ، یک نکته معتبر را بیان می کند. هدف این است که به ناشران اجازه دهیم کمتر روی کد و بیشتر بر روی محتوا تمرکز کنند. در حال حاضر ویرایش کامل سایت گوتنبرگ قرار است در ژوئن 2021 آغاز شود.

با تشکر از WP Rocket که یکی را برای تیم در نظر گرفت ، اکنون می دانیم که گوتنبرگ واقعاً یک رابط کاربری امیدوار کننده برای ویرایش دارد و ممکن است به بهبود عملکرد سایت کمک کند.

استناد

مقاله WP Rocket را در مورد طراحی مجدد وب سایت خود با استفاده از گوتنبرگ بخوانید:

چرا WP Rocket گوتنبرگ را انتخاب کرد و چگونه عملکرد بهبود یافت