هنگام اجرای تستهای سرعت برای بررسی عملکرد، گزینههای زیادی وجود دارد که شما به عنوان مالک وب سایت دارید. امروز میخواهیم نحوه استفاده و درک بهتر دادههای این ابزار تست سرعت محبوب را بررسی کنیم و ببینیم آیا بهینه سازی سرعت سایت در جی تی متریکس ممکن است یا خیر؟ ابزارهایی مانند این به سیستمهای درجهبندی و امتیازات، همراه با هشدارهایی در مورد آنچه ممکن است در سایت شما اشتباه باشد، متکی هستند.
گاهی اوقات اینها میتوانند کاملاً گیج کننده باشند؛ بنابراین وقت گذاشتن برای تفسیر معنای واقعی آنها میتواند به شما کمک کند نه تنها امتیازات خود را افزایش دهید، بلکه عملکرد سایت خود را هم افزایش دهید که این در نهایت منجر به بهبود تجربه کاربری میشود که واقعاً مهم است.
جی تی متریکس توسط GT.net، یک شرکت مستقر در کانادا، به عنوان ابزاری برای مشتریان میزبان خود توسعه داده شد تا به راحتی عملکرد سایت خود را تعیین کنند. علاوه بر Pingdom، احتمالاً یکی از شناخته شدهترین و مورد استفادهترین ابزارهای تست سرعت در وب است!
در واقع، دلیل نوشتن این مطلب این است که ما کاربران زیادی داریم که همیشه از ما میپرسند که چگونه از توصیههایی که در گزارشهای GTmetrix خود میبینند پیروی کنند. در مقایسه با سایر ابزارهای توسعه دهنده، استفاده از GTmetrix بسیار آسان است و افراد مبتدی هم میتوانند خیلی سریع از آن استفاده کنند، این ابزار از ترکیب Google PageSpeed Insights و YSlow برای ایجاد امتیاز و توصیهها استفاده میکند. برای شروع بهینه سازی سرعت سایت در جی تی متریکس آمادهاید؟ بیایید شروع کنیم.
تنظیمات GTmetrix
نسخه اصلی جی تی متریکس کاملا رایگان است و شما میتوانید به سادگی با ثبت نام در یک حساب کاربری به تعدادی از گزینهها دسترسی داشته باشید. آنها همچنین برنامههای پرمیوم دارند، اما در پست امروز، ما از نسخه رایگان استفاده خواهیم کرد. اگر حساب کاربری دارید، میتوانید از تعیین تعدادی گزینه تجزیه و تحلیل اضافی استفاده کنید.
اولین مورد، امکان انتخاب مکانی است که می خواهید URL خود را در آن آزمایش کنید، مکان فیزیکی که انتخاب میکنید در واقع بسیار مهم است؛ زیرا مربوط به مکانی است که وب سایت شما واقعاً میزبانی شده است، هرچه تأخیر کمتر باشد، زمان بارگذاری شما سریعتر است. مکانهای موجود در حال حاضر عبارتاند از :
- دالاس، ایالات متحده آمریکا
- هنگ کنگ، چین
- لندن، انگلستان
- بمبئی، هند
- سیدنی، استرالیا
- سائو پائولو، برزیل
- ونکوور، کانادا
علاوه بر این شما میتوانید انتخاب کنید که از چه مرورگری میخواهید استفاده کنید، میتوانید با Chrome (Desktop) و Firefox (Desktop) تست کنید. نسخههای تلفن همراه در برنامه های پریمیوم آنها موجود است؛ همچنین به شما اجازه میدهند سرعت اتصال را تغییر دهید، به این معنی که میتوانید انواع مختلف اتصال را شبیه سازی کنید تا ببینید چگونه بر بارگذاری صفحه شما تأثیر میگذارد.
گزینههای اضافی شامل توانایی ایجاد یک ویدیو است، این میتواند به شما در رفع اشکال مشکلات کمک کند؛ زیرا میتوانید نحوه نمایش صفحه را مشاهده کنید. AdBlock Plus یک ویژگی خوب است. اگر از یک شبکه تبلیغاتی شخص ثالث مانند Google Adsense استفاده میکنید، میتوانید این گزینه را فعال کنید تا تأثیر کامل تبلیغات را بر زمان بارگذاری خود مشاهده کنید.
گزینههای اضافی شامل: توقف بارگذاری آزمایشی (که بعداً به آن خواهیم پرداخت)، امکان ارسال یک کوکی همراه با درخواست شما، استفاده از احراز هویت HTTP، امکان قرار دادن آدرسهای اینترنتی در لیست سیاه و سفید، وضوح صفحه نمایش و نسبت پیکسل دستگاه و نادیده گرفتن عامل کاربر میباشد.
بهینه سازی سرعت سایت در جی تی متریکس
یک صفحه وب از عناصر مختلفی مانند HTML، جاوا اسکریپت،CSS و تصاویر تشکیل شده است، هر یک از این موارد درخواستهایی برای ارائه آنچه در وب سایت خود میبینید، ایجاد میکند. به طور معمول هر چه تعداد درخواستهای شما بیشتر باشد، سرعت بارگذاری وب سایت شما کمتر میشود همیشه اینطور نیست، اما بیشتر اوقات درست است.
در ادامه میخواهیم هر بخش GTmetrix را تقسیم کنیم و با جزئیات بیشتری توضیح دهیم که اطلاعات مربوط به عملکرد کلی وبسایت شما چیست و در مورد توصیهها چه باید کرد. به یاد داشته باشید که روی نمرات زیاد وسواس نکنید، بلکه روی بهبود سرعت واقعی سایت خود تمرکز کنید؛ چون سرورهای موجود هیچکدام در ایران نیستند و در نهایت تجربه یک کیس واقعی را نمیتوان مشاهده کرد، اما میتوان با توجه به سنجههای موجود، بهبودهایی را ایجاد کرد.
برای تست سرعت سایت خود از طریق سرورهای داخلی میتوانید از ابزار ایرانیِ واکاو (پیشنهاد لینک خارجی به https://www.wakav.ir) استفاده کنید. در هنگام بهینه سازی سرعت سایت در جی تی متریکس با قسمتهای مختلفی روبرو خواهید شد.
بخشهای مختلف گزارش جی تی متریکس :
- خلاصه
- عملکرد
- ساختار
- نمودار آبشاری
- ویدئو
- تاریخچه
خلاصه
هنگامی که وب سایت وردپرسیِ خود را از طریق GTmetrix آنالیز میکنید، یک گزارش عملکرد تولید میکند که شامل «GTmetrix Grade» و «Web Vitals» شماست. امتیاز GTmetrix با توجه به دو معیار عملکرد و ساختار محاسبه میشود.
- GTmetrix Performance امتیاز عملکرد از ابزار ممیزی سایت Lighthouse است.
- GTmetrix Structure یک معیار عملکرد اختصاصی است که عملکرد کلی یک صفحه را اندازه گیری میکند.
در سال 2020، گوگل مجموعه استاندارد شدهای از معیارهای عملکرد وب و تجربه کاربر به نام Web Vitals را معرفی کرد. Web Vitals از معیارهای مختلفی تشکیل شده است، اما مواردی که GTmetrix در نظر میگیرد، عبارتاند از :
- Largest Contentful Paint: این ویژگی که به اختصار LCP هم نامیده میشود، مقدار زمانی را که طول میکشد تا بزرگترین قسمت صفحه شما بارگذاری شود را نشان میدهد. برای برخی از سایتها، LCP میتواند یک تصویر بسیار بزرگ باشد، در حالی که در سایتهای دیگر، LCP ممکن است به متن اصلی اشاره کند.
- Total Blocking Time: مدت زمانی است که یک صفحه قبل از اینکه کاربر بتواند با آن ارتباط برقرار کند مسدود میشود. Render-blocking CSS & JS میتواند تاثیر زیادی بر TBT داشته باشد.
- Cumulative Layout Shift: به جابجایی عناصر در حین بارگذاری صفحه اشاره دارد. برای مثال، چیدمان یک صفحه حاوی توییتهای تعبیهشده میتواند بهطور چشمگیری با بارگیری صفحه تغییر کند.
در مثال خود، از دامنه مطالعه موردی خود یعنی afzaliwp.com استفاده میکنیم، در اولین تست سرعت ما، سایت ما آمار زیر را ثبت کرد.
- درجه A
- عملکرد 94%
- ساختار 86%
- LCP 1.3s
- TBT 5ms
- CLS 0
سپس یک آزمایش اضافی انجام دادیم و اکنون درجه GTmetrix ما “A” است! جریان چیست؟ اگر چندین بار وب سایت خود را از طریق ابزار تست سرعت GTmetrix اجرا میکنید، ممکن است متوجه این موضوع شوید، یکی از دلایلی که این اتفاق میافتد، حافظه پنهان یا کش است، هم ذخیرهسازی DNS و هم حافظه پنهان سرور. علت را در ادامه در بخش تجزیه و تحلیل نمودار بیابید.
صفحه خلاصه GTmetrix همچنین حاوی تجسم سرعت است که جدول زمانی رویدادهای کلیدی را در طول بارگذاری صفحه نشان میدهد. در اسکرین شات زیر، میتوانید TTFB، FCP، LCP، زمان بارگذاری، زمان تعامل و زمان بارگذاری کامل برای دامنه afzaliwp.com را مشاهده کنید.
عملکرد یا Performance
این مرحله از عملیات بهینه سازی سرعت سایت در جی تی متریکس، تب “عملکرد” GTmetrix است که تعدادی از معیارهای مفید را نشان میدهد که از دادههای Lighthouse نشات میگیرند. علاوه بر LCP، TBT و CLS نشان داده شده در صفحه خلاصه، بخش «معیارهای عملکرد» همچنین شاخص سرعت (SI)، زمان تعامل (TTI) و اولین رنگ محتوایی (FCP) را نشان میدهد.
در حالی که بخش «سنجشهای عملکرد» دقیقاً آنچه را که باید اصلاح کنید به شما نشان نمیدهد، اما نمای کلی خوبی درباره معیارهای کلیدی تجربه کاربر ارائه میدهد که میتوانید آن را بهبود ببخشید. در پایینتر صفحه، GTmetrix همچنین چند آمار سنتی «زمانبندی مرورگر» از جمله زمان بارگذاری، زمان اولین بایت، زمان بارگذاری کامل و موارد دیگر را نشان میدهد. در گذشته، این معیارهای سنتی بسیار مهم بودند.
با این حال، با توجه به اینکه گوگل راه را با معیارهای استاندارد شده با Web Vitals هموار میکند، توصیه میکنیم در عوض بهینه سازی را برای آنها انجام دهید. در بیشتر موارد، متوجه خواهید شد که بهینه سازی برای Web Vitals به معیارهای زمانبندی خوب مرورگر هم منجر میشود و میتواند در بهینه سازی سرعت سایت در جی تی متریکس تاثیرگذار باشد.
ساختار
تب “ساختار” جایی است که میتوانید مسائل خاصی را که بر عملکرد سایت شما تأثیر میگذارد مشاهده کنید. این صفحه بسیار مفید است؛ زیرا اطلاعات کاربردی مانند “حذف منابع مسدود کننده رندر” و “کوچک کردن CSS” را برای شروع بهینه سازی سایت در اختیار شما قرار میدهد. ما سعی خواهیم کرد رایجترین و محبوبترین مواردی را که صاحبان سایتهای وردپرس با آنها دست و پنجه نرم میکنند، پوشش دهیم.
حتماً این پست را بوکمارک کنید؛ چون ما دائماً آن را به روز خواهیم کرد. به طور کلی، اگر این موارد را در سایت خود بهبود بخشید، باید شاهد افزایش عملکرد و بهینه سازی سرعت سایت در جی تی متریکس باشید.
Serve Scaled Images
وقتی صحبت از کار با تصاویر در وب سایت شما میشود، همیشه باید سعی کنید اجازه ندهید CSS اندازه آنها را تغییر دهد. اگر این کار را نکنید، در نهایت با توصیه تصاویر مقیاسبندی شده مواجه خواهید شد. اگر از وردپرس استفاده میکنید، بهطور پیشفرض، اندازه تصاویر شما را هنگام آپلود در کتابخانه رسانه تغییر میدهد.
این تنظیمات را میتوانید در قسمت «تنظیمات > رسانه» پیدا کنید. باید اطمینان حاصل کنید که حداکثر عرض به عرض سایت شما نزدیک است، به این ترتیب CSS سعی نمیکند اندازه تصویر شما را برای جا دادن در داخل تغییر دهد؛ همچنین میتوانید با یک افزونه بهینهسازی تصویر، اندازه آنها را بهطور خودکار تغییر دهید.
Inline Small CSS
اینلاین کردن CSS معمولاً توصیه نمیشود؛ زیرا حجم کلی صفحه شما را افزایش میدهد، با این حال، اگر سایت شما کوچک است، با حداقل درخواست، میتواند عملکرد شما را بهبود بخشد.
برای اینکه به راحتی CSS خود را اینلاین کنید، میتوانید از یک افزونه رایگان مانند Autoptimize استفاده کنید. به سادگی “Inline all CSS” را انتخاب کنید و سپس مطمئن شوید که فایلهای CSS اضافی را که داخل خط نیستید حذف کردهاید.
Inline Small JavaScript
درست مانند درونسازی CSS، همین مورد برای جاوا اسکریپت هم صدق میکند. معمولاً توصیه نمیشود؛ زیرا حجم کلی دانلود درخواست صفحه شما را افزایش میدهد. با این حال، اگر سایت شما کوچک است، با حداقل درخواست، میتواند عملکرد شما را بهبود بخشد. باز هم میتوانید از تنظیمات جاوا اسکریپت Autoptimize استفاده کنید.
Leverage Browser Caching
اهرم کش مرورگر توصیه بسیار رایجی است که مردم با آن مشکل دارند. این به دلیل نداشتن هدرهای کش HTTP صحیح در سرور وب شما ایجاد میشود. شما فقط میتوانید این مشکل را در منابعی که کنترل میکنید، برطرف کنید. به عنوان مثال، اگر این مورد را در شبکههای تبلیغاتی شخص ثالث مشاهده میکنید، هیچ کاری نمیتوانید انجام دهید.
برای اصلاح این بخش 3 متد مختلف وجود دارد که ما یکی از آنها را به شما نشان خواهیم داد :
Cache-Control و Expires Headers را اضافه کنید
دو هدر مربوط به کش مرورگر وجود دارد Cache-Control و Expires Headers. حداقل یکی باید برای فعال کردن کش مرورگر سایت شما وجود داشته باشد؛ زیرا مرورگرها به این ترتیب تعیین میکنند که قبل از بازخوانی منابع، چه مدت باید منابع را حفظ کنند.
در حالی که هدر Cache-Control ذخیره سازی سمت سرویس گیرنده را روشن میکند و حداکثر سن یک منبع را تعیین میکند، سربرگ Expires برای تعیین نقطهای از زمان استفاده میشود که منبع دیگر معتبر نیست. لزوماً لازم نیست هر دو را اضافه کنید؛ زیرا ممکن است اضافی باشد.
Cache-Control جدیدتر است و معمولاً روش توصیه شده است؛ با این حال، برخی از ابزارهای عملکرد وب، مانند GTmetrix، هنوز هدرهای Expires را بررسی میکنند. قبل از انجام مراحل زیر حتماً از سایت خود نسخه پشتیبان تهیه کنید؛ زیرا اگر مراقب نباشید، ویرایش htaccess میتواند سایت شما را خراب کند. این بخش هم در بهینه سازی سرعت سایت در جی تی متریکس بسیار موثر خواهد بود. پس آن را جدی بگیرید.
در Nginx، میتوانید موارد زیر را به فایل پیکربندی سرور خود اضافه کنید :
location ~* \.(js|css|png|jpg|jpeg|gif|svg|ico)$ {
expires 30d;
add_header Cache-Control “public, no-transform”;
}
این به سرور شما میگوید که انواع فایلهای مشخص شده حداقل به مدت 30 روز تغییر نمیکنند، فایلهای مربوطه را قبل از بازخوانی برای آن مدت زمان ذخیره میکند.
اگر یک سرور آپاچی دارید، میتوانید کد زیر را به فایل .htaccess خود اضافه کنید :
<filesMatch “.(ico|pdf|flv|jpg|jpeg|png|gif|svg|js|css|swf)$”>
Header set Cache-Control “max-age=84600, public”
</filesMatch>
این قطعه باید قبل از “#BEGIN WordPress” یا بعد از “#END WordPress” اضافه شود. در این حالت، کش پس از 84600 ثانیه منقضی میشود.
می توانید با افزودن موارد زیر به بلوک سرور خود، هدرهای Expires را در Nginx اضافه کنید. در این مثال، میتوانید نحوه تعیین زمانهای مختلف انقضا را بر اساس انواع فایل مشاهده کنید :
location ~* \.(jpg|jpeg|gif|png|svg)$ {
expires 365d;
}
location ~* \.(pdf|css|html|js|swf)$ {
expires 2d;
}
میتوانید با افزودن موارد زیر به فایل htaccess. سرصفحههای Expires را در آپاچی اضافه کنید :
EXPIRES HEADER CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg “access 1 year”
ExpiresByType image/jpeg “access 1 year”
ExpiresByType image/gif “access 1 year”
ExpiresByType image/png “access 1 year”
ExpiresByType image/svg “access 1 year”
ExpiresByType text/css “access 1 month”
ExpiresByType application/pdf “access 1 month”
ExpiresByType application/javascript “access 1 month”
ExpiresByType application/x-javascript “access 1 month”
ExpiresByType application/x-shockwave-flash “access 1 month”
ExpiresByType image/x-icon “access 1 year”
ExpiresDefault “access 2 days”
</IfModule>
## EXPIRES HEADER CACHING ##
سپس میتوانید با اجرای مجدد سایت خود از طریق جی تی متریکس و مشاهده اینکه آیا هشدار ادامه دارد، هدرهای خود را بررسی کنید.
Serve Resources From a Consistent URL
اگر منابع سرویس را از یک URL ثابت میبینید، به احتمال زیاد منابع یکسانی دارید که از همان URL ارائه میشود. در بسیاری از مواقع این اتفاق میافتد که رشتههای کوئری درگیر باشند. نحوه حذف رشتههای کوئری از منابع استاتیک را بررسی کنید، وقتی آنها از بین رفتند، دیگر نباید آن را دو بار بارگذاری کنید.
اما چطور این کار را انجام دهیم؟
پاک کردن Query Strings از منابع استاتیک با کد
شما می توانید به راحتی رشتههای کوئری را با چند خط کد از داراییهای خود حذف کنید، پس از تهیه نسخه پشتیبان از سایت خود، یک تم فرزند ایجاد کنید و موارد زیر را به فایل functions.php تم فرزند خود اضافه کنید.
function remove_query_strings() {
if(!is_admin()) {
add_filter(‘script_loader_src’, ‘remove_query_strings_split’, 15);
add_filter(‘style_loader_src’, ‘remove_query_strings_split’, 15);
}
}
function remove_query_strings_split($src){
$output = preg_split(“/(&ver|\?ver)/”, $src);
return $output[0];
}
add_action(‘init’, ‘remove_query_strings’);
مهم : ویرایش کد منبع یک پوسته وردپرس در صورت عدم انجام صحیح میتواند سایت شما را خراب کند. اگر در انجام این کار راحت نیستید، لطفاً ابتدا با یک توسعه دهنده بررسی کنید یا میتوانید از افزونه رایگان Code Snippets هم استفاده کنید. این افزونه به شما این امکان را میدهد که کد بالا را بدون نگرانی اضافه کنید که آیا سایت شما را خراب میکند.
به سادگی یک قطعه جدید ایجاد کنید و کد بالا را اضافه کنید. “Only run on site front-end” را انتخاب کنید و سپس قطعه را ذخیره کنید. رشته های کوئری شما از بین خواهند رفت! ممکن است لازم باشد کش سایت وردپرس خود را پاک کنید تا تغییرات را در قسمت فرانتاند اعمال کنید.
Defer Parsing of JavaScript
جاوا اسکریپت و CSS به طور پیش فرض مسدود کننده رندر هستند. این بدان معنی است که آنها میتوانند از نمایش صفحه وب تا زمانی که توسط مرورگر دانلود و پردازش نشوند، جلوگیری کنند. ویژگی defer به مرورگر میگوید که دانلود منبع را تا پایان تجزیه HTML متوقف کند. چند راه آسان برای رفع این مشکل، استفاده از افزونههای رایگان Autoptimize یا Async JavaScript است؛ پس با ما همراه باشید تا با هم این مورد را هم حل کنیم.
نگران نباشید، لازم نیست این کار را به صورت دستی انجام دهید. در بخش بعدی در مورد افزونههای وردپرس صحبت خواهیم کرد که میتوانند به شما در حذف منابع مسدودکننده رندر کمک کنند. با این حال، درک عملکرد این افزونهها در پشت صحنه و دانستن اینکه چه کاری انجام میدهند مفید است.
چگونه جاوا اسکریپت مسدود کننده رندر را حذف کنیم؟
چند استراتژی مختلف برای حذف جاوا اسکریپت مسدودکننده رندر وجود دارد. ما این موارد را در مقاله خود در مورد چگونگی به تعویق انداختن تجزیه جاوا اسکریپت به تفصیل توضیح میدهیم، اما روش های اصلی در اینجا آمده است :
- Async به تجزیه کننده HTML (به عنوان مثال مرورگر بازدیدکننده) اجازه میدهد، جاوا اسکریپت را بارگیری کند، در حالی که بقیه HTML را تجزیه میکند؛ یعنی در حین بارگیری فایل، تجزیه کامل را متوقف نمیکند. با این حال، تجزیه کننده HTML را برای اجرای اسکریپت پس از دانلود متوقف میکند.
- Defer به تجزیه کننده HTML اجازه میدهد تا جاوا اسکریپت را در حین تجزیه بقیه HTML دانلود کند و منتظر بماند تا اسکریپت را تا پایان تجزیه HTML اجرا کند.
مزیت استفاده از defer این است که اسکریپتهای شما به ترتیبی که در کد ظاهر میشوند، تضمین میشوند. Async از این رویکرد استفاده نمیکند، گاهی اوقات در صورت اعمال async در تمام منابع جاوا اسکریپت میتواند مشکلاتی را ایجاد کند؛ زیرا اغلب میتواند منابعی را که وابسته به منابعی هستند که در ابتدا در سند ظاهر میشوند، خراب کند. رایجترین مشکلی که async ایجاد میکند منابع jQuery شکسته است که سعی میکنند قبل از اضافه شدن jquery.js به سند بارگیری شوند.
چگونه CSS مسدود کننده رندر را حذف کنیم
حذف CSS مسدودکننده رندر میتواند کمی پیچیدهتر باشد؛ زیرا باید مراقب باشید که CSS مورد نیاز برای رندر محتوای بالاتر را به تاخیر نیندازید. ترتیب ایدهآل این است که :
- سبکهایی را که برای رندر کردن محتوای بالای صفحه مورد نیاز هستند، شناسایی کنید و آن سبکها را با HTML ارائه دهید.
- برای شناسایی منابع CSS که مشروط هستند؛ یعنی فقط برای دستگاهها یا موقعیتهای خاص مورد نیاز هستند، از ویژگی رسانه در عناصر پیوندی که فایلهای CSS را جذب میکنند، استفاده کنید.
منابع CSS باقیمانده باید به صورت ناهمزمان بارگیری شوند، حرکتی که معمولاً با افزودن آنها با جاوا اسکریپت معوق یا ناهمزمان انجام میشود. صادقانه بگوییم، ما واقعاً در اینجا کمی گیج میشویم، اینطور نیست؟ البته اگر شما یک مهندس حرفهای باشید، عالی است، اما اکثر ما اینطور نیستیم. خبر خوب این است که اگر از وردپرس استفاده میکنید، میتوانید با استفاده از افزونه مناسب، تعداد منابع JS و CSS مسدود کننده رندر را حذف کرده یا به میزان قابل توجهی کاهش دهید.
برای نشان دادن نحوه حذف منابع مسدودکننده رندر در وردپرس، یک سایت آزمایشی ساده راهاندازی کردهایم که شامل CSS و جاوا اسکریپت مسدودکننده رندر است و سپس نحوه استفاده از دو راهحل پلاگین مختلف برای حذف رندر مسدود کردن را به شما آموزش میدهیم :
- Autoptimize + Async JavaScript رایگان
- WP Rocket پولی
Autoptimize و Async JavaScript دو افزونه مجزا از یک توسعه دهنده هستند. آنها با هم به شما کمک میکنند تا CSS و جاوا اسکریپت خود را بهینه کنید. پس از نصب هر دو افزونه، به Settings → Async JavaScript بروید و :
- کادر را برای Enable Async JavaScript در بالا علامت بزنید.
- در کادر تنظیمات سریع، بین Apply Async و Apply Defer را انتخاب کنید.
اگر گزینه Async باعث ایجاد مشکل در سایت شما می شود، توصیه می کنیم Defer را امتحان کنید یا jQuery را حذف کنید که افزونه گزینهای برای آن در اختیار شما قرار می دهد. هنگامی که افزونه Async JavaScript را راه اندازی کردید، به تنظیماتAutoptimize بروید و :
- کادر بهینهسازی کد جاوا اسکریپت را علامت بزنید.
- کادر بهینهسازی کد CSS را علامت بزنید.
WP Rocket یک پلاگین پریمیوم عملکرد و حافظه پنهان وردپرس است. پس از نصب و فعال کردن WP Rocket، به تب File Optimization بروید، سپس این دو گزینه را فعال کنید :
- تحویل CSS را در قسمت CSS Files بهینه کنید.
- بارگیری جاوا اسکریپت در بخش فایلهای جاوا اسکریپت به تعویق بیفتد.
میتوانید با خاموش کردن Safe Mode برای jQuery آزمایش کنید. اما اگر متوجه مشکلاتی در قسمت فرانتاند سایت خود شدید، باید حالت ایمن را برای جیکوئری مجدداً فعال کنید؛ زیرا عامل احتمالی آن است.
نحوه به تعویق انداختن جاوا اسکریپت در وردپرس
برای به تعویق انداختن جاوا اسکریپت در وردپرس، سه راه وجود دارد :
- افزونه: چند افزونه عالی و رایگان وردپرس برای به تعویق انداختن تجزیه جاوا اسکریپت وجود دارد. ما به شما نشان خواهیم داد که چگونه این کار را با دو افزونه محبوب انجام دهید.
- روش Varvy: اگر به فناوری تسلط دارید، میتوانید کد سایت خود را مستقیماً ویرایش کنید و از قطعه کد Varvy استفاده کنید.
- فایلphp: میتوانید یک قطعه کد به فایل functions.php تم چایلد خود اضافه کنید تا به طور خودکار اسکریپتها را به تعویق بیندازید.
ما در اینجا از روش سوم استفاده میکنیم.
جاوا اسکریپت را از طریق فایل functions.php به تعویق بیندازید
در نهایت، میتوانید با افزودن کد زیر به فایل functions.php، بدون نیاز به افزونه، ویژگی defer را به فایلهای جاوا اسکریپت خود اضافه کنید :
function defer_parsing_of_js( $url ) {
if ( is_user_logged_in() ) return $url; //don’t break WP Admin
if ( FALSE === strpos( $url, ‘.js’ ) ) return $url;
if ( strpos( $url, ‘jquery.js’ ) ) return $url;
return str_replace( ‘ src’, ‘ defer src’, $url );
}
add_filter( ‘script_loader_tag’, ‘defer_parsing_of_js’, 10 );
در اصل، این قطعه به وردپرس میگوید که ویژگی defer را به همه فایلهای جاوا اسکریپت شما به جز جی کوئری اضافه کند. این سریع و آسان است، اما آن سطح از کنترل را که افزونه Async JavaScript ارائه میدهد، به شما نمیدهد.
Minify CSS and JavaScript
Minification اساساً حذف تمام کاراکترهای غیر ضروری از کد منبع بدون تغییر عملکرد آن است. این میتواند شامل شکستن خط، فضای خالی، تورفتگی و غیره باشد. با انجام این کار میتوان بایتهای داده را ذخیره کرد و سرعت دانلود، تجزیه و زمان اجرا را افزایش داد.
از طریق افزونه Autoptimize وارد بخش “گزینههای متفرقه” شوید و مثل تصویر زیر گزینهMinify Excluded CSS and JS Files را فعال کنید تا مطمئن شوید همه فایلهای CSS و JS کوچک هستند. با این حال، اگر متوجه برخی از مشکلات مربوط به minification در برخی از فایل های CSS و JS حذف شده خود شدید، میتوانید ادامه دهید و این گزینه را غیرفعال کنید.
باز هم، افزونه رایگان Autoptimize برای این کار عالی است. به سادگی اطمینان حاصل کنید که “بهینه سازی کد جاوا اسکریپت” و “بهینه سازی کد CSS” هر دو بررسی شدهاند. اگر سایت بزرگی دارید، ممکن است بخواهید با تنظیمات پیشرفته کار کنید؛ زیرا برخی از آنها میتوانند به عملکرد سایت شما آسیب بزنند. درون خطی کردن یا ترکیب CSS و جاوا اسکریپت در سایتهای بزرگ معمولاً توصیه نمیشود و اینجاست که قدرت HTTP/2 به میان میآید.
Optimize Images
بر اساس آرشیو HTTP، از آوریل 2017، تصاویر به طور متوسط 66٪ از وزن کل صفحه وب را تشکیل میدهند؛ بنابراین وقتی نوبت به بهینه سازی سایت وردپرسی شما میرسد، تصاویر تا حد زیادی اولین جایی است که باید شروع کنید! از اسکریپتها و فونتها مهمتر است.
هر تصویر باید قبل از آپلود در وردپرس فشرده و بهینه شود، اما متأسفانه، این واقع بینانه نیست؛ به همین دلیل توصیه میکنیم از یک پلاگین بهینه سازی تصویر خوب استفاده کنید. این کار به فشرده سازی خودکار تصاویر شما، تغییر اندازه آنها و اطمینان از بارگذاری سبک و سریع در سایت شما کمک میکند.
نحوه بهینه سازی تصاویر
این بخش یکی از مهمترین مراحل بهینه سازی سرعت سایت در جی تی متریکس است. هدف اصلی از انتخاب یک فرمت تصویری، یافتن تعادل بین کمترین اندازه فایل و بیشترین کیفیت ممکن است. بیش از یک راه برای انجام تقریباً همه این بهینهسازیها وجود دارد، یکی از محبوبترین راهها فشردهسازی آنها قبل از آپلود در وردپرس است.
معمولاً این کار را میتوان در ابزاری مانند Adobe Photoshop یا Affinity Photo انجام داد. برخی از این کارها را میتوان با استفاده از افزونهها هم انجام داد که در ادامه بیشتر به آنها خواهیم پرداخت.
دو مورد اصلی که باید در نظر بگیرید، فرمت فایل و نوع فشردهسازی است که استفاده میکنید. با انتخاب ترکیب مناسب فرمت فایل و نوع فشرده سازی میتوانید اندازه تصویر خود را تا 5 برابر کاهش دهید. شما باید با هر تصویر یا فرمت فایل آزمایش کنید تا ببینید کدام نسخه بهتر عمل میکند.
فرمت مناسب را انتخاب کنید
قبل از شروع به اصلاح تصاویر خود، مطمئن شوید که بهترین فرمت را انتخاب کردهاید. چندین نوع فرمت تصویری وجود دارد که میتوانید استفاده کنید :
- PNG تصاویری با کیفیت بالاتر تولید میکند، اما اندازه فایل بزرگتری هم دارد. به عنوان یک فرمت تصویر بدون اتلاف ایجاد شده است، اگرچه میتواند دارای اتلاف هم باشد.
- JPEG از بهینهسازی با اتلاف و بدون ضرر استفاده میکند. میتوانید سطح کیفیت را برای تعادل خوبی بین کیفیت و اندازه فایل تنظیم کنید.
- GIF فقط از 256 رنگ استفاده میکند، این بهترین انتخاب برای تصاویر متحرک است و فقط از فشرده سازی بدون تلفات استفاده میکند.
چندین مورد دیگر مانند JPEG XR و WebP وجود دارد، اما همه مرورگرها از آنها پشتیبانی نمیکنند و فعلا توصیه نمیکنیم از آنها استفاده کنید. در حالت ایدهآل، باید از JPEG یا JPG برای تصاویر با رنگ زیاد و PNG برای تصاویر ساده استفاده کنید.
افزونههای بهینه سازی تصویر وردپرس
خوشبختانه با وردپرس، لازم نیست تمام قالببندی یا فشردهسازی را دستی انجام دهید. میتوانید از افزونهها استفاده کنید تا حداقل برخی از کارها را به صورت خودکار برای شما انجام دهند. چندین پلاگین وجود دارد که به صورت خودکار فایلهای تصویری شما را هنگام آپلود آنها بهینه میکنند. آنها حتی تصاویری را که قبلا آپلود کردهاید بهینه میکنند. این یک ویژگی مفید است، به خصوص اگر قبلاً یک وب سایت پر از تصاویر دارید. در اینجا نگاهی به برخی از بهترین پلاگینها برای بهینه سازی تصاویر شما میاندازیم. اگر در زمینه نصب افزونه سوال یا ابهامی دارید مطلب نصب افزونه در وردپرس را مطالعه کنید.
اگرچه مهم است که شما فقط به خود افزونه ها اعتماد نکنید. به عنوان مثال، شما نباید تصاویر 2 مگابایتی را در کتابخانه رسانه وردپرس خود آپلود کنید. این کار میتواند باعث شود که فضای میزبان وب شما بسیار سریع پر شود. بهترین روش این است که اندازه تصویر را از قبل در ابزار ویرایش عکس به سرعت تغییر دهید و سپس آن را آپلود کنید و از یکی از پلاگینهای زیر برای کاهش بیشتر آن استفاده کنید. برای بهینه سازی سرعت سایت در جی تی متریکس حتما از یکی از این افزونهها استفاده کنید.
- Imagify Image Optimizer
- ShortPixel Image Optimizer
- Optimole
- Optimus Image Optimizer
- WP Smush
- TinyPNG
- ImageRecycle
کار با آنها بسیار ساده است. آنها را نصب کنید و با چند کلیک تصاویر خود را بهینه کنید.
Reduce Initial Server Response Time
برای وردپرس، مقصر اصلی کندی زمان پاسخدهی اولیه سرور، عدم کش صفحه است. بدون کش کردن صفحه، وردپرس از PHP برای ساختن صفحات به صورت پویا برای هر درخواست فردی استفاده میکند، به این معنی که میتواند به سرعت در درخواستها غرق شود. با فعال کردن کش صفحه، سایت شما میتواند فایلهای HTML از پیش تولید شده را سرور کند که بسیار سریعتر و مقیاس پذیرتر از استفاده از PHP برای انجام هر درخواست صفحه است.
چگونه زمان پاسخگویی سرور را کاهش دهیم؟
چندین استراتژی برای بهبود زمان پاسخگویی سرور شما وجود دارد. برخی از موارد کلیدی عبارتاند از :
بهینه سازی کد برنامه شما از جمله کوئریهای پایگاه داده
کد برنامه برای بهینه سازی عملکرد وب بسیار مهم است. ما قویاً توصیه میکنیم که از توسعه دهنده کمک بگیرید؛ زیرا اکنون با منطق اصلی وب سایت خود سروکار دارید.
هنگامی که درگیر پروفایل کد میشوید، برخی از بهینهسازیها عبارتاند از :
- ساده کردن پایگاه کد، کارآمدتر کردن توابع
- کاهش عملیات پیچیده یا جمعآوری کد برای اجرا فقط در صورت نیاز
- کارآمدتر کردن کوئریهای پایگاه داده، حذف کوئریهای غیر ضروری
پیاده سازی کش سمت سرور
کش به جای اینکه سرور را مجبور به پردازش کند و صفحه را بر حسب تقاضا ایجاد کند، یک نسخه از پیش تولید شده از صفحه شما را ارائه میکند. راهحلهای کش کردن بسیاری در سطح سرور و همچنین ذخیرهسازی خاص CMS مانند افزونههای وردپرس وجود دارد. میزبان شما ممکن است در حال حاضر کش سمت سرور را فعال کرده باشد؛ بنابراین حتماً برای شفافسازی این موضوع با آنها تماس بگیرید.
*** افزونه توتال کش، یکی از بهترین افزونههای کش محسوب میشود. که تا الان بیش از یک میلیون نصب فعال دارد و تعداد زیادی از سایت های بزرگ از آن استفاده میکنند. شما با نصب افزونه توتال کش بر روی سایت وردپرسی خود، میتوانید عملکرد سایت را به طرز قابل توجّهی بهبود دهید.
ارتقاء سخت افزار سرور برای منابع بیشتر CPU یا حافظه
اگر بودجه شما اجازه میدهد، با ارائه دهنده هاست یا توسعه دهنده خود صحبت کنید تا میزان استفاده از منابع را تجزیه و تحلیل کنید و تعیین کنید که آیا میتوانید مشخصات سخت افزاری سرور اصلی را ارتقا دهید یا خیر. به طور خلاصه، وضعیت خود را ارزیابی کنید و قبل از متعهد شدن به راه حل، مزایا و معایب آن را بسنجید.
از CDN استفاده کنید
شبکه تحویل محتوا (CDN) چارچوبی از شبکههای توزیع شده سرورهای پراکسی و مراکز داده آنهاست. آنها از نظر جغرافیایی گسترده شدهاند تا محتوا را در سریعترین زمان ممکن به کاربران ارائه دهند. یک مخاطب جهانی نیاز به ارائهدهندهای دارد که داراییهایش را در گرههای مختلف در سراسر جهان توزیع کرده باشد، این تضمین میکند که همه بازدیدکنندگان صفحه وب از زمان پاسخگویی سریع لذت ببرند.
یک سرور میزبانی دور از مخاطب هدف باعث کندی بارگذاری صفحه وب می شود. برای جلوگیری از چنین موضوعی، قبل از تصمیم گیری در مورد ارائه دهنده هاست، باید مخاطبان هدف خود را بشناسید. این به شما کمک می کند تا مرکز دادهای را انتخاب کنید که نزدیکترین مرکز به آن مخاطب باشد. با به حداقل رساندن فاصله بین سرورهای میزبان خود و بازدیدکنندگان خود، می توانید مشکلات تاخیر را بهبود بخشید؛ در نتیجه این امر زمان پاسخگویی کلی را کاهش میدهد.
وردپرس را سبک نگه دارید
وردپرس به شما این امکان را میدهد که وب سایتهای زیبایی را به راحتی ایجاد کنید، دارای تمهای جذاب و پلاگینهای متعدد برای سفارشی سازی است. با این حال، مراقب باشید که تم خود را بیش از حد بارگذاری نکنید؛ زیرا میتواند زمان پاسخ را کاهش دهد. اگر از یک قالب WP استفاده میکنید، سعی کنید از قالبهای ساده و سبک استفاده کنید و از اضافه کردن افزونههای زیاد خودداری کنید. از یک ابزار نظارت بر صفحه وب استفاده کنید و بررسی کنید که کدام افزونهها سرعت صفحه وب شما را کند میکنند، هر پلاگین استفاده نشده را حذف کنید و مواردی را که از منابع CPU استفاده میکنند را غیرفعال کنید.
نظارت بر استفاده از PHP
هر چه یک سرور برای ارائه یک صفحه به بازدیدکننده فرآیندهای بیشتری را انجام دهد، سرعت آن کندتر خواهد بود. اگر یک اسکریپت PHP را اجرا میکنید، مطمئن شوید که از منابع حیاتی برای انجام وظایف غیر ضروری استفاده نمیکند. مطمئن شوید PHP به روز شده است، بسیاری از شرکتهای هاستینگ بهروزرسانی PHP را به صورت خودکار انجام نمیدهند.
وبسایتی که هنوز با PHP 5 اجرا میشود، نسبت به وبسایتی که روی PHP 7 اجرا میشود، زمان پاسخگویی کندتر خواهد داشت. ببینید کدام نسخه را با افزونه PHP Compatibility Checker دارید. در صورت لزوم، از طریق cPanel یا با تماس با ارائه دهنده هاست خود، آن را به نسخه جدیدتر ارتقا دهید.
Minify HTML
درست مانند CSS و جاوا اسکریپت، HTML هم میتواند کوچک شود تا کاراکترهای غیر ضروری را حذف کند و بایتهای شما را ذخیره کند تا زمان اجرا افزایش یابد.
افزونه رایگان Autoptimize هم برای این کار عالی است. به سادگی گزینه “بهینه سازی کد HTML” را فعال کنید.
Enable GZIP Compression
GZIP یک فرمت فایل و یک نرم افزار کاربردی است که برای فشردهسازی و رفع فشردهسازی فایل استفاده میشود. فشردهسازی GZIP در سمت سرور فعال است و امکان کاهش بیشتر در اندازه HTML، شیوه نامهها و فایلهای جاوا اسکریپت را فراهم میکند. روی تصاویر کار نخواهد کرد؛ زیرا قبلاً به روش دیگری فشرده شدهاند.
برخی به دلیل فشردهسازی تا 70 درصد کاهش یافتهاند، احتمالا یکی از سادهترین بهینهسازیهایی است که میتوانید در مورد وردپرس انجام دهید.
برای فعال کردن فشردهسازی GZIP در آپاچی، کافی است کد زیر را به فایل htaccess. خود اضافه کنید.
<IfModule mod_deflate.c>
# Compress HTML, CSS, JavaScript, Text, XML and fonts
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
# Remove browser bugs (only needed for really old browsers)
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent
</IfModule>
اگر روی NGINX اجرا میکنید، به سادگی موارد زیر را به فایل nginx.conf خود اضافه کنید.
gzip on;
gzip_disable “MSIE [1-6]\.(?!.*SV1)”;
gzip_vary on;
gzip_types text/plain text/css text/javascript image/svg+xml image/x-icon application/javascript application/x-javascript;
Minimize Redirects
به حداقل رساندن ریدایرکتها یا تغییر مسیرهای HTTP از یک URL به URL دیگر باعث کاهش RTT های اضافی و زمان انتظار برای کاربران میشود. قطعا ارزش دارد که برای به حداقل رساندن تعداد ریدایرکتهای سایت خود وقت کافی بگذارید، اما توصیههایی برای کاهش تاثیر این فاکتور بر سرعت سایت شما وجود دارد که به بررسی آنها میپردازیم.
چگونه ریدایرکتها را به حداقل برسانیم؟
اگر به فکر به حداقل رساندن ریدایرکتها در وردپرس هستید، یک کار مهم وجود دارد که باید انجام دهید، هرگز ریدایرکتهای غیر ضروری ایجاد نکنید؛ اولین چیزی که باید به خاطر بسپارید این است که هرگز عمداً تغییر مسیرهای غیر ضروری ایجاد نکنید. برای مثال، هنگام ساخت لینکها و منوهای داخلی، نباید تغییر مسیر ایجاد کنید، اگر عادت کرده اید که URL ها را با تنبلی تایپ کنید، بهتر است در نحوه کار خود تجدید نظر کنید. درعوض، هنگام ایجاد URL مطمئن شوید که :
- از پیشوند پروتکل مناسب HTTP یا HTTPS استفاده کنید.
- در صورت لزوم، زیر دامنه “www” را وارد یا حذف کنید.
- از شناسه پست و صفحه در پیوندها استفاده نکنید.
- کل مسیر صفحه یا پست را درج کنید.
قدرت تغییر مسیر تعبیه شده در وردپرس در صورتی که به طور تصادفی یک URL بد ایجاد کنید، یک بازگشت است. این یک راه حل خیلی قابل اعتماد برای نوشتن URL تنبل به طور کلی نیست.
*** جالب است بدانید افزونه ریدایرکت وردپرس قرار است مخاطبین شما را از لینکهای خراب و مشکلدار یا صفحات قدیمی و حذفشده یا بلااستفاده، به سمت صفحهای درست مثل صفحه اختصاصی ۴۰۴ یا صفحه جدید هدایت کند.
خلاصه و نتیجهگیری
این هم از آموزش کامل بهینه سازی سرعت سایت در جی تی متریکس. امیدواریم خسته نشده باشید! همانطور که میبینید، دانستن اینکه چگونه ابزار تست سرعت GTmetrix کمی بهتر کار میکند و همه نمودارها به چه معنا هستند، میتواند به شما در تصمیمگیری بیشتر مبتنی بر داده در مورد عملکرد کمک کند. تجزیه و تحلیل نمودار آبشاری هم قسمت کاربردی و بسیار مهمی است.
به یاد داشته باشید، وقتی صحبت از مقایسه این ابزار با Pingdom میشود، میتوان گفت ابزارهای متفاوتی هستند؛ بنابراین بهتر است از هر دو استفاده کنید؛ زیرا آنها چیزها را متفاوت محاسبه میکنند.
در این مقاله، دیدیم که چگونه GTmetrix میتواند در بهبود عملکرد سایت ما مفید باشد و به آموزش بهینه سازی سرعت سایت در جی تی متریکس پرداختیم. درک نحوه تفسیر نتایج گزارشهای تست سرعت Gtmetrix به ما این امکان را میدهد تا مشکلات اصلی سایت را شناسایی کنیم تا متوجه شویم، کدام منابع زمان بارگذاری را افزایش میدهند.
برای به دست آوردن نتایج قابل اعتماد در طول آزمایش، به یاد داشته باشید که مکان سرور را تنظیم کنید و تستهای سرعت بیشتری را برای مقایسه نتایج و مقایسه زمان بارگذاری با سرعتهای مختلف اتصال و دستگاههای مختلف (که البته نیاز به نسخه پرو دارد) خود را به آزمایش تنها صفحه اصلی سایت محدود نکنید، بلکه سایر صفحات مهم را هم تجزیه و تحلیل کنید.
آیا با پیروی از پیشنهادات GTmetrix توانستید عملکرد سایت خود را بهبود بخشید؟ از چه ابزارهایی برای بررسی عملکرد سایت خود استفاده میکنید؟ آیا با بهینه سازی سرعت سایت در جی تی متریکس به مشکلی برخوردید؟با گذاشتن کامنت در بخش نظرات افضلی وردپرس به ما اطلاع دهید. موفق باشید.
اولین کامنت را شما بگذارید!