بهینه سازی وب سایت های وردپرس

بهینه سازی یک سایت وردپرسی و بهبود نتایج در Gtmetrix

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

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

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

بعد از اینکه سه گام بالا انجام شد، بررسی و بهینه‌سازی سایت طبق موارد زیر انجام خواهد شد:

اولین مورد برای بهینه‌سازی یک سایت، بررسی سایت توسط gtmetrix.comاست. 

در این آموزش، یک سایت توسط gtmetrix‌ آنالیز شده است که نتیجه اولیه آنالیز این سایت به صورت تصویر زیر است:

 دو بخشی که می‌خواهیم آنها را بهبود بدهیم، بخش Structure و قسمت Performance هستند.  برای بهبود نتیجه این دو قسمت، ابتدا به بررسی لینک‌های سایت و مواردی که باعث کندی سرعت شده‌اند می‌پردازیم. برای مشاهده این لینک‌ها به بخش Waterfall می‌رویم.

برای سایت بررسی شده، نتیجه به صورت تصویر زیر است:

همانطور که قابل مشاهده است، بخش اولی که باعث کندی سرعت شده است، ریدایرکت سایت از آدرس http به https می‌باشد.

طولانی شدن این قسمت به چند دلیل اتفاق می‌افتد. دلیل اول، عدم وجود ریدایرکت مستقیم از http به https است. مورد دوم، لود بالای وب‌سرور و مشکلات سمت سرور است. دلیل سوم می‌تواند به علت بهینه نبودن سایت باشد.

موارد بعدی که باعث کند شدن لود سایت می‌شوند، لینک مربوط به نماد الکترونیکی سایت است. یکی دیگر از موارد کندی سایت، کد مربوط به refreshed fragmented می‌باشد.

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

RewriteEngine On
 RewriteCond %{SERVER_PORT} 80
 RewriteRule ^(.*)$ https://www.yourdomain.com/$1 [R,L]

با قرار دادن تکه کد بالا در ابتدای فایل htaccess مربوط به سایت، ریدایرکت مستقیم از http به https انجام می‌شود. همچنین به جای www.yourdomain.com در این تکه کد، باید از آدرس دامنه سایت استفاده شود.

3- اضافه کردن کدهای  زیر در فایل wp-config.php

/* Compression */
 define( 'COMPRESS_CSS', true );
 define( 'COMPRESS_SCRIPTS', true );
 define( 'CONCATENATE_SCRIPTS', true );
 define( 'ENFORCE_GZIP', true );

اضافه کردن کدهای فوق علاوه بر تاثیر مثبت بر قالب سایت، بر هسته وردپرس نیز تاثیر می‌گذارد و همانطور که مشخص است، برای فشرده‌سازی فایل‌های CSS استفاده می‌شوند. همانطور که در تصویر زیر مشخص است، بهترین بخش برای قرار دادن کدهای فوق در فایل wp-config.php قبل از فراخوانی فایل wp-setting.php است. با قرار دادن کدها، قبل از فراخوانی فایل تنظیمات، این فایل‌ها تاثیر خود را بر هسته وردپرس خواهند گذاشت. در نظر داشته باشید که کامنت اولیه کدها را برای خوانایی بهتر آن فراموش نکنید و از حذف آن خودداری کنید:

4- تنظیمات سمت افزونه WP-Rocket و یا سایر افزونه های بهینه‌سازی دیگر مانند Litespeed Cache، WP-Fastest Cache.

به صورت کلی نمی‌توان برای تمامی سایت‌ها یک افزونه بهینه‌سازی را پیشنهاد کرد که باعث بهینه‌سازی آنها شود. برای هر سایت ممکن است، تاثیر یک افزونه بهینه‌سازی بهتر از سایر افزونه‌ها باشد و فرمول دقیقی برای این موضوع وجود ندارد. پیشنهاد خود سایت gtmetrix استفاده از افزونه WP-Fastest-Cache می‌باشد. اما به صورت جامع‌تر استفاده از افزونه WP-Rocket پیشنهاد می‌شود.

5- بروز رسانی تک به تک افزونه های خیلی خیلی قدیمی

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

به صورت کلی، افزونه‌‌های مهم مثل صفحه‌سازها، ووکامرس و … ممکن است بعد از بروزرسانی با هم در تداخل باشند.

6- بروزرسانی هسته وردپرس

7-  بررسی Enamad

در صورتی که کندی مربوط به لینک Enamad باشد، می‌توانیم از افزونه لوگوی نماد الکترونیکی و یا افزونه Logo Manager For Enama استفاده کنیم.

این افزونه ها، حالت نمایش ای‌نماد را تغییر می‌دهد و باعث رفع مشکل کندی لود آن خواهد شد.

8- سایر موارد بهینه سازی

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

https://gtmetrix.com/wordpress-optimization-guide.html

پس از انجام موارد بالا، نتیجه بررسی در سایت gtmetrix به شرح زیر تغییر کرد. با وجود بهبود، هنوز به نتیجه دلخواه نرسیدیم و بهینه‌سازی را با انجام تنظیمات بیشتر توسط WP-Rocket پیش می‌بریم:

9- تنظیمات و بهینه‌سازی توسط افزونه  WP-Rocket

اولین کاری که بعد از نصب افزونه Rocket باید انجام دهیم، قرار دادن کد زیر در فایل wp-config.php است. بهتر است که این کد در ابتدای این فایل و بعد از تگ php اضافه شود:

define('WP_CACHE', true);

بعد از قرار دادن کد فوق در فایل wp-config.php به سراغ تنظیمات افزونه راکت می‌رویم.

این افزونه Tab های مختلفی برای بهینه‌سازی سایت دارد که برای شروع ابتدا به سراغ تب Cache می‌رویم:

در این Tab، تنظیمات مربوط به کش شدن وجود دارد که تغییر زیادی احتیاج ندارد و حالت پیش‌فرض آن برای اکثر سایت‌ها کفایت می‌کند.

Tab بعدی که اهمیت خیلی زیادی دارد، بخش مربوط به File Optimaztion است. پس از ورود به این بخش، می‌توانیم تمامی گزینه‌های Minify را انتخاب کنیم. این Minify کردن‌ها، باعث بهبود خیلی زیاد سرعت سایت خواهد شد. اما معمولا مشکلاتی را به همراه دارد. برای سایت نمونه ای که مورد بررسی قرار گرفت، تمامی تیک‌های مربوط به Minify فعال شد.

همانطور که در تصویر زیر قابل مشاهده است، تغییرات فوق باعث بهبود عالی در سرعت سایت و نتایج gtmetrix شده است:

در نظر داشته باشید که تعدادی از قالب‌‌ها در تنظیمات خود گزینه Minify کردن فایل های جاوا اسکریپت را دارند و تغییرات در راکت باعث بهم ریختگی سایت آنها خواهد شد.

بخش بعدی که مربوط به دیتابیس است، تب Database است که در این قسمت می‌توانیم دیتابیس را بهینه سازی کنیم. گزینه هایی مثل Revision وجود دارد که رونوشت‌های مربوط به پست‌ها است، Auto Draft مربوط به ذخیره خودکار پیش‌نویس پست‌ها می‌باشد. در قسمت Transients اطلاعاتی که به صورت موقتی در دیتابیس ذخیره می‌شوند مانند نوتیفیکیشن‌ها، جایجایی در صفحات و … . در انتهای این بخش نیز گزینه Optimize Tables وجود دارد که جداول دیتابیس را بهینه‌سازی می‌کند. قبل از انجام این تغییرات حتما تاییدیه حذف رونوشت‌ها و بهینه سازی جداول را از مشتری بگیرید.

در نهایت باید گزینه Optimize را در پایین صفحه انتخاب کنید تا حذف فایل‌های اضافی از دیتابیس و بهینه‌سازی های لازم انجام شود.

بخش بعدی تب HeartBeat است. heartbeat api وردپرس ارتباط بین real-time data  و سرور را برقرار می کند مثل یک پستی که می نویسیم  و داده ها بدون انتشار ذخیره می شوند و یا revision  های از اطلاعات را نگهداری می کند و یا نوتیفیکشن های که در داشبورد مشاهده می شود به وسیله این api  مدیریت می شود ما نمیتوانیم کلا این api را غیرفعال کنیم اما میتوانیم فعالیت را تا حدالامکان کاهش دهیم. که بسیار به cpu  و لود اولیه سایت کمک میکند. برای کاهش آن افزونه ای به همین اسم وجود دارد که میتوانیم فعالیت ها را در بخش داشبورد و فرانت سایت مدیریت کنیم . تنظیمات این بخش را می‌توان به صورت تصویر زیر انجام داد:

پس از انجام تغییرات فوق و بهینه‌سازی دیتابیس، عملکرد در gtmetrix باز هم بهبود پیدا کرد و نتیجه به صورت تصویر زیر می‌باشد:

تب بعدی Image Optimization است که بهتر است به جای این بخش از افزونه Smush استفاده شود.

رفع کندی لینک ajax مربوط به refreshed fragmented:

برای رفع کندی این بخش دو راه وجود دارد:

1- تغییرات در ووکامرس: برای اعمال تغییرات وارد بخش ووکامرس، پیکربندی و تب محصولات می‌شویم. سپس تیک  گزینه مربوطه را مطابق تصویر غیرفعال می‌کنیم:

2- تغییرات در فایل funxtion.php مربوط به قالب

افزونه راکت یکی از بهترین افزونه‌‌های بهینه‌سازی است که با تنظیمات آسان، توانسته کار بسیاری از کاربران را ساده کند. اما مسئله موجود این است که همیشه کارساز نیست و طبق تجربه و مستندات موجود در راکت، برخی اوقات با توجه به زیرساخت قالب، بهینه‌سازی‌ها مخصوصا در Minify کردن ها، فایل های Style و جاوا اسکریپت‌ها در برخی از کلاس ها و استایل ها بهم میریزد و از کار می افتد.

در این بخش میخواهیم با مهمترین کلاس های جاوا اسکریپت که با ممکن است با Minify کردن بهم بریزد، آشنا شویم.

• یکی از مهمترین جاوا اسکریپت هایی که دچار مشکل می‌شود، کلاس add to cart ووکامرس است که بصورت خطای موجود در عکس زیر، در بخش inspect  قابل مشاهده است:

که بسیار ساه به روش زیر قابل رفع است :

وارد بخش delay javascript در بخش optimization می شوید و کلاس زیر

/jquery-?[0-9.]*(.min|.slim|.slim.min)?.js

را در بخش exclude قرار می دهید. یعنی برای زمانیکه ما داریم از cdn ایرانسرور برای بهینه سازی استفاده می کنیم باید توجه داشته باشیم که کلاس فوق را بهیچ عنوانminify نکنیم و delay  هم قرار ندهیم.

دیگر کلاس های مهم جاوا اسکریپت که باید توجه داشت بهش به شرح زیر است:

/wp-includes/js/jquery/jquery.min.js

مورد فوق باید در بخش combine java script  ها قرار بگیرد.

/jquery-?[0-9.]*(.min|.slim|.slim.min)?.js

در بخش load javascript

باید به موارد فوق جی کوئری مهم را نیز اضافه کرد که باید در بخش exclude  قرار دهیم:

wc-ajax=get_refreshed_fragments

این مورد بسیاری در سایت های که از ووکامرس دارند دیده می شود و باعث لود و زمانبر شدن بارگزاری اولیه سایت شود برای رفع آن نیز راهکار های وجود دارد ُ کار این ماژول ایجکسی این است که هنگامی که سایت لود می شود بررسی میکند که آیا سبد خرید فعال است و خریدی وجود دارد یاخیر با غیرفعال بودن آن نیز مشکلی ایجاد نمی شود و اگر فایل وجود داشته باشد با توجه به کلاس های جاوا هندل می شود. درصورتی که بخواهید حذف کنید کامل افزونه ای برای این مورد وجود دارد و در صورتی که بخواهید بصورت کد این ماژول را غیرفعال کنید کد زیر را کافی است در فانکشن های قالب قرار دهید:

** Disable Ajax Call from WooCommerce *add_action( ‘wp_enqueue_scripts’, ‘dequeue_woocommerce_cart_fragments’, 11); function dequeue_woocommerce_cart_fragments() { if (is_front_page()) wp_dequeue_script(‘wc-cart-fragments’); }

درصورتی که بخواهیم فقط از post ها و صفحه اصلی حذف کنیم میتوانیم دستور زیر را در فانکشن قرار می دهیم:

/** Disable Ajax Call from WooCommerce on front page and posts*/add_action( ‘wp_enqueue_scripts’, ‘dequeue_woocommerce_cart_fragments’, 11);function dequeue_woocommerce_cart_fragments() {if (is_front_page() || is_single() ) wp_dequeue_script(‘wc-cart-fragments’);}

این مورد نیز میتواند یکی از گزینه های cdn ایرانسرور باشد که بسیار بر روی سرعت سایت های فروشگاهی تاثیر گذار است.

موارد دیگری که میتوانیم به بخش cdn اضافه کنیم :

Disale lazy load عکس ها با فانکشن ها می باشد که موارد را میتوانیم در بخش function.php  قالب ها اضافه کرد :

فانکش زیر lazy load را بر روی تمام صفحات  و نوشته های وردپرس غیرفعال می کند:

function deactivate_on_page() {

if ( is_page() ) {

add_filter( ‘do_rocket_lazyload’, ‘__return_false’ );

}

}

add_filter( ‘wp’, __NAMESPACE__ . ‘\deactivate_on_page’ );

فانکشن زیر lazy load را در صفحه اصلی یا main  غیرفعال می کند:

function deactivate_on_front_page() {      if ( is_front_page() ) {            add_filter( ‘do_rocket_lazyload’, ‘__return_false’ );      }}add_filter( ‘wp’, __NAMESPACE__ . ‘\deactivate_on_front_page’ );

برای غیرفعال سازی lazy load در صفحه بلاگ می توانیم از فانکشن زیر استفاده کنیم:

function deactivate_on_blog_page() {      if ( is_home() ) {            add_filter( ‘do_rocket_lazyload’, ‘__return_false’ );      }}add_filter( ‘wp’, __NAMESPACE__ . ‘\deactivate_on_blog_page’ );

موارد فوق میتوانید بصورت selected باتن به بخش فانکشن قالب اضافه شود . هنوز مشکلی در اضافه شدن فانکشن ها به قالب ها بصورت تجربی دیده نشده اما در صورتی که بصورت انتخابی باشد در صورت خرابی میتوانیم غیرفعال کنیم.