چگونه یک سایت بهینه سازی شده گوتنبرگ ایجاد کنیم و با استفاده از Qubely آن را سریعتر کنیم


همه یک وب سایت سریع را دوست دارند. پیمایش بسیار نرم و روان است. هک ، حتی گوگل یک وب سایت را سریع و روان دوست دارد! این سایت شما را در رتبه بندی نتایج جستجو بالاتر شاخص می کند. اما چگونه می توانید سایت خود را سریعتر کنید؟

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

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

ایالت گوتنبرگ در سال 2021

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

ما متوجه شده ایم که گوتنبرگ نسبت به عملکرد نسبت به فرم تعصب دارد. بنابراین ، این یک مزیت ذاتی نسبت به پلاگین های Page Builder مانند Elementor ، Divi و اکسیژن دارد. مواردی که بیشتر به سبک نگاه داشتن تمرکز می کنند تا صفحات ایجاد شده.

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

چگونه می توان بارهای سریع بار را در گوتنبرگ حفظ کرد

Qubely یک مجموعه ابزار کامل است که هدف آن ایجاد بهترین ابزار صفحه سازی گوتنبرگ برای صفحات مدرن وردپرس است. دارای 35+ بلوک بسیار قابل تنظیم است که می تواند برای ایجاد یک وب سایت وردپرس دارای ویژگی های خاص مورد استفاده قرار گیرد. در کنار آن ، بسته های شروع کننده و بخش های آماده برای شروع سریع زمان توسعه پروژه دارید.

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

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

چگونه بارهای بار را بهبود بخشیم

در زیر لیستی از پیشرفت هایی را مشاهده می کنید که می توانند برای سرعت بخشیدن به وب سایت وردپرس موجود به راحتی انجام شوند.

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

استفاده از سرور حافظه پنهان

ذخیره وردپرس یک روش بسیار ساده و در عین حال موثر برای ایجاد مسیری سریعتر بین وب سایت و بازدید کنندگان است. در علوم رایانه ای ، حافظه پنهان هنگامی است که داده هایی که اغلب به آنها دسترسی می یابند ، در یک لایه قابل دسترسی تر از حافظه ذخیره می شوند. به طوری که وقتی کاربران به آن دسترسی پیدا می کنند ، سرویس دهی آن خیلی سریعتر از حالت عادی ذخیره شده است. در وردپرس ، حافظه پنهان به 3 روش مختلف کار می کند:

سطح ذخیره سرور: این زمانی است که از تکنیک هایی مانند Redis ، caching page و Memcached در سرورهای میزبان استفاده می شود که امکان سرویس دهی داده ها را فراهم می کند. حافظه پنهان سطح سرور معمولاً با پایگاه داده back-end ، داده های پویا و بهینه سازی پرس و جو سروکار دارد. این بستگی زیادی به ارائه دهنده میزبانی دارد. اما بیشتر اوقات ، این ابزارها را به هر میزبانی مدیریت شده وردپرس ارائه می دهند.

توجه داشته باشید: اینها را توصیه می کنیم ارائه دهندگان میزبانی برای خدمات سریع و قابل اعتماد وردپرس.

CDN: CDN اساساً از یک دسته سرورهای حافظه پنهان برای محتوای سنگین مانند تصاویر ، فیلم ها و سایر رسانه ها استفاده می کند. آنها از یک شبکه توزیع شده از سرورها در سراسر جهان استفاده می کنند که تمام این مطالب در آنها ذخیره می شود و بسته به موقعیت جغرافیایی کاربر ، از نزدیکترین مکان ارائه می شود.

این زمان بارگیری را کاهش می دهد زیرا تأخیر تا حد زیادی به موقعیت جغرافیایی بستگی دارد. آنها همچنین پاداش نگه داشتن “عکس فوری” از وب سایت شما را دارند. برای زمانی که وب سایت شما آفلاین است. برخی از CDN های قابل اعتماد و در عین حال ارزان عبارتند از:

  • ابر شکن
  • Cloudfront توسط آمازون
  • Cloud CDN توسط Google
  • KeyCDN و موارد دیگر

CMS Caching: این به حافظه پنهان سطح CMS متکی است و می تواند با استفاده از چندین افزونه ، رایگان و ممتاز پیکربندی شود. درست مانند ذخیره سازی سطح سرور با داده های پویا و پویا ، حافظه پنهان CMS با داده های ایستایی جلویی و ایستا مانند ورق های سبک و فایل های HTML کار می کند. همچنین به فشرده سازی فایل های CSS و JS متکی است.

اکثر آنها از تکنیک هایی مانند فشرده سازی gzip ، ذخیره صفحه و فعال کردن تصاویر دارای تنبل برای کاهش زمان بارگیری استفاده می کنند. اینها عملاً به هیچ عملی دستی احتیاج ندارند ، زیرا برای انجام خودکار همه کارها ساخته شده اند. تنها کاری که باید انجام دهید فعال کردن ویژگی های آنهاست. چند مورد از بهترین افزونه ها برای سرعت بخشیدن به وردپرس عبارتند از:

  • موشک WP
  • WP Super Cache
  • W3 Total Cache
  • بهینه سازی خودکار

از مضامین بهینه شده گوتنبرگ استفاده کنید

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

تصاویر خود را بهینه کنید

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

سوالی که ممکن است بسیاری از افراد داشته باشند این است: چه اتفاقی می افتد که آن تصویر را روی صفحه نمایش با وضوح بالا بارگذاری کنیم؟ آیا پیکسلی به نظر نمی رسد؟ خوب ، Qubely با افزودن تصاویر جداگانه با وضوح بالا که فقط برای دستگاه هایی که از نمایشگرهای با وضوح بالا استفاده می کنند ، این کار را دور می زند.

گام دیگر برای بهبود زمان بارگذاری تصویر استفاده از تصاویر فشرده است. برای این منظور ، ما رای اعتماد خود را به “تصاویر JPEG و PNG را فشرده کنید”، یک پلاگین توسط TinyPNG ، یک سرویس فشرده سازی آنلاین آنلاین بسیار معروف. در حالی که وب سایت آنها کاملا رایگان است و شما می توانید همزمان 20 تصویر را فشرده کنید. با این حال ، پلاگین آنها به شما امکان می دهد تا حدود 100 تصویر را به صورت فشرده بصورت انبوه انجام دهید. همچنین می توانید حساب حق بیمه آنها را دریافت کرده و این محدودیت را حذف کنید.

به عنوان یک قانون کلی ، شما همیشه باید از تصاویر PNG برای هنرهای گرافیکی دیجیتال ، تصاویر شفاف و تصاویر برداری استفاده کنید. از طرف دیگر ، شما همیشه باید از تصاویر JPG برای تصاویر واقعی استفاده کنید.

از یک بستر میزبانی وب سریعتر استفاده کنید

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

در اینجا یک لیست ارائه دهندگان خدمات میزبانی برای بهینه سازی وردپرس برای همه نیازهای خود!

فیلم های خود را بهینه کنید

فشرده سازی فیلم موضوعی عظیم است که می توان ساعت ها به توضیح جزئیات ریز و درشت آن پرداخت ، اما ما سعی می کنیم آن را در یک درس سریع خلاصه کنیم. برای امروز ، ما از ابزاری رایگان به نام استفاده خواهیم کرد ترمز دستی که ابزاری برای کدگذاری ویدیو است. می توان از آن برای ایجاد فیلم های فوق العاده کارآمد برای یک وب سایت بهینه شده وردپرس استفاده کرد.

پس از نصب آن ، می توانید به راحتی فیلم را روی آن بکشید و رها کرده و تنظیمات را انجام دهید. با استفاده از برگه ابعاد می توانید اندازه تصاویر را تغییر دهید. برای فشرده سازی فیلم ، به تب ویدیو بروید و این تنظیمات را انجام دهید. H.264 را انتخاب کرده و Encoder Profile را روی High تنظیم کنید. برای فیلم های 720p ، ما کیفیت ثابت 18-20 را توصیه می کنیم در حالی که برای فیلم های 1080p ، استفاده از 22-24 را توصیه می کنیم.

یاد آوردن: هرچه مقدار کمتر باشد ، اندازه پرونده بالاتر است. همچنین می توانید از پانل سمت راست از پیش تنظیمات استفاده کنید. پس از انتخاب تنظیمات ، تنها گزینه “شروع رمزگذاری” را فشار دهید تا ویدیوی فشرده شده شما ارائه شود.

راهنمای گام به گام برای بهینه سازی با گوتنبرگ و Qubely

در اینجا راهنمایی در مورد چگونگی بهینه سازی سایت وردپرس خود با Gutenberg & Qubely خواهید یافت.

روش آزمایشی که ما استفاده کردیم

برای این راهنما ، ما از ابزار داخلی Google Chrome ، Lighthouse برای اندازه گیری عملکرد استفاده خواهیم کرد. در طول هر مرحله از فرآیند ، ما 3 گزارش را با استفاده از Lighthouse خواهیم گرفت و پیشرفت های عملکرد را اندازه گیری می کنیم.

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

مرحله 1: محیط و نتایج مرجع را پیکربندی کنید

در مورد صفحه وب آزمون ، ما یک صفحه از یکی از بسته های شروع Qubely که با استفاده از بلوک های مدرن گوتنبرگ ساخته شده اند ، وارد خواهیم کرد. بدیهی است که برای آن به Qubely نیاز خواهیم داشت ، بنابراین پیش بروید و آن را از صفحه وردپرس backend نصب کنید.

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

اکنون می توانیم 3 مقدار را با استفاده از 3 بار “ایجاد گزارش” و یادداشت کردن مقادیر ، شروع کنیم.

مرحله 2: نصب وردپرس را تنظیم کنید

ما فرآیند بهینه سازی را با نصب یک پلاگین حافظه پنهان همانطور که قبلاً بحث کردیم شروع می کنیم. برای انجام این کار ، به WP Admin> Plugins> Add New و یک پلاگین ترجیحی را جستجو کنید.

ما از W3 Total Cache استفاده خواهیم کرد که یک افزونه رایگان است و می توانید آن را در فهرست وردپرس پیدا کنید. پس از نصب و فعال کردن آن ، می توانید وارد تنظیمات شوید و تمام تنظیمات را تغییر دهید.

ما به شما پیشنهاد می دهیم وقت خود را صرف بازی در این زمینه کنید ، با این کار می توانید هر تنظیم را یکی یکی بررسی کنید که آیا نتیجه مثبتی دارد. قطعاً چیزهای زیادی یاد خواهید گرفت!

بعد از اینکه از آن راضی بودید ، بیایید 3 اندازه گیری خود را برای این مرحله انجام دهیم و آنها را دوباره یادداشت کنیم.

مرحله 3: پلاگین Qubely خود را بهینه کنید

برای مرحله بعدی ، برخی از ویژگی های Qubely را بهینه سازی می کنیم که ممکن است باعث کند شدن سرعت بار شود حتی اگر از آن استفاده نمی شود. برای انجام این کار ، به مدیر WP> Qubely> تنظیمات> پیشرفته و Load FontAwesome و CSS را روی “نه” تنظیم کنید.

لطفا توجه داشته باشید که اگر موضوع شما FontAwesome یا Google Fonts را به خودی خود بارگیری کند ، این کار باید انجام شود. اگر اینگونه نباشد ، غیرفعال کردن آنها ممکن است باعث از دست رفتن آیکون ها یا قلم ها شود

پس از آن ، می توانیم صفحه آزمون را بارگیری کرده و مجموعه دیگری از اندازه گیری ها را یادداشت کنیم.

مرحله 4: اندازه چند رسانه ای را تغییر اندازه و فشرده کنید

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

برای بهینه سازی تصاویر ، همه آنها را بارگیری می کنیم و سپس بسته به قالب اصلی تصویر با استفاده از TinyPNG یا TinyJPG فشرده می شویم. در صورت لزوم ، می توانیم با تغییر اندازه تصاویر نمایشی ، این مورد را بیشتر بهینه کنیم.

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

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

1 را اجرا کنید اجرای 2 اجرای 3
مرحله 1 68 65 63
گام 2 78 83 84
مرحله 3 88 92 94
مرحله 3 100 99 100
گوتنبرگ معیارهای وب سایت وردپرس را بهینه کرد
بارگیری پس از بهینه سازی Qubely

بسته بندی کردن

خب! حالا شما مالک آن هستید! یک راهنمای کامل برای ایجاد یک وب سایت وردپرس بهینه شده گوتنبرگ. و با استفاده از گوتنبرگ و Qubely یک سایت سریعتر ایجاد کنید. ما متوجه شده ایم که ممکن است برای تازه واردان وردپرس دلهره آور به نظر برسد ، اما مطمئن باشید زمانی که برای یادگیری نحوه بهینه سازی یک صفحه اختصاص می دهید کاملاً ارزش وقت گذاشتن را دارد! طبق معمول ، ما مشتاقانه می خواهیم هر گونه بازخورد شما را بشنویم. بنابراین اگر گیج هستید یا نظری دارید که می خواهید آن را به اشتراک بگذارید ، به ما اطلاع دهید.





منبع

مطالب مرتبط

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *