رفع خطاهای GTmetrix برای افزایش سرعت بارگذاری – بخش چهل و دوم

اگر از همراهان همیشگی پرشین تولز هستید، حتماً مقاله قبلی در مورد رفع خطاهای سایت به کمک GTmetrix را خوانده‌اید! در این مقاله هم قصد داریم به بررسی ادامه این بحث بپردازیم تا بتوانید با افزایش سرعت سایت، وضعیت سئوی سایت خود را بهبود ببخشید و رضایت کاربران را هم جلب کنید.

هدر Cache-Control چیست؟

هدر Cache-Control هدری است که از Directive های مختلفی تشکیل شده و همین امر به شما اجازه می دهد طول کش شدن یک فایل را تعیین کنید. برخی از این Directive های مهم و رایج را در ادامه مشاهده می کنید:

• max-age: این گزینه مدت زمانی که فایل باید کش شود را نشان می دهد
• Public: اجازه می دهد هر کشی به طور عمومی پاسخ را ذخیره کند
• Private: تنها توسط مرورگر برای دسترسی به فایل قابل کش است.

در سایت خود می‌توانید متوجه شوید که فایل موجود از Directive تعریف شده به صورت max-age استفاده می‌کند. ۶۰۴۸۰۰ ثانیه معادل کش شدن به مدت ۷ روز خواهد بود. برای پیکربندی این گزینه در آپاچی کافی است کد زیر را به فایل .htaccess خود اضافه کنید:

<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">

Header set Cache-Control "max-age=604800, public"

</filesMatch>

برای پیکربندی این گزینه بر روی وب سرور NGINX کافیست کد زیر را به فایل config اضافه نمایید. همه فایل های پیکربندی NGINX در دایرکتوری /etc/nginx/  قرار دارند. فایل پیکربندی اولیه در /etc/nginx/nginx.conf قرار دارد:

location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {

add_header Cache-Control "public";

}

هدر Expires چیست؟

آخرین هدری که باید به آن توجه داشته باشید هدر Expire است. بر اساس گفته های گوگل،  هدر cache-control به عنوان بخشی از مشخصه HTTP/1.1 تعریف می شد و برای تعیین سیاست های کش شدن فایل مورد استفاده قرار می گرفت. همه مرورگرهای مدرن از این هدر پشتیبانی می کنند.پس این همه آن چیزی است که شما نیاز دارید. با اینحال اگر شما هر دوی این هدرها را داشته باشید مشکلی ایجاد نمی شود اما به خاطر داشته باشید که تنها یکی از آن ها مورد استفاده قرار خواهد گرفت. هدر expire از تاریخ واقعی استفاده می کند. برای اینکه بتوانید هدر Expire را در آپاچی اضافه کنید کافیست کد زیر را به فایل .htaccess اضافه نمایید:

• افزایش سرعت صفحات وردپرس و کمک به بهبود سئوی وردپرس

## 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 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 7 days"

</IfModule>

## EXPIRES HEADER CACHING ##

مطمئن شوید که هدر expire را زیر مواردی همچون mod_rewrite و gzip قرار می دهید. انتهای فایل برای گنجاندن این هدر جایگاه امن تری است. برای اضافه کردن هدر expire در NGINX کافیست کد زیر را به فایل پیکربندی خود اضافه نمایید:

location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {

expires 7d;

}

در بیشتر موارد در NGINX، هدر Cache-Control و expire به همراه هم به کار می روند هر چند این موضوع از لحاظ فنی لازم نیست:

location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {

expires 7d;

add_header Cache-Control "public";

}

 

رفع خطای Make JavaScript and CSS external

یکی دیگر از خطاهایی که در هنگام تست سرعت سایت با جی تی متریکس مواجه می‌شویم، خطای Make JavaScript and CSS external است که مربوط به فایل‌های CSS و JS می‌شود. این خطا مربوط به تست سرعت سایت بر اساس الگوریتم‌های گوگل است و برای همین در ستون Yslow جی تی متریکس آن را می‌بینیم. همان‌طور که می‌دانید، برای استفاده از کدهای CSS و JS در یک سند HTML ما می‌توانیم از سه روش Inline، Internal و External استفاده کنیم که هر کدوم به شکل خاصی استفاده می‌شوند و به نوعی استفاده از هر کدام این روش‌ها هم می‌تواند روی سرعت لود سایت که مربوط به لود و پردازش فایل‌های css و js است، تاثیرگذار باشد.

• آموزش سرچ کنسول گوگل – بخش اول

سه روشی که ما برای استفاده از کدهای CSS و JS داریم شامل موارد زیر هستند:

• External: در این روش کدهای ما در قالب یک فایل و در آدرسی جدا قرار دارند که با استفاده از تگ meta فایلی که حاوی کدهای css و js می‌شوند را فراخوانی می‌کنیم.
• Internal: در این روش کدهای ما به صورت مستقیم در لا به لای محتوای سند HTML ما قرار دارند که برای فایل‌های css داخل تگ style و برای فایل‌های JS هم داخل تگ script قرار دارند.
• Inline: توی این روش هم کدهای ما به صورت درون خطی داخل تگ‌هایی مثل p، div و… قرار دارند.

حالا وقتی ما یک صفحه از سایتی را در مرورگر تایپ می‌کنیم این کدها به صورت اولویت‌بندی شده شروع به لود شدن می‌کنند. یعنی به عنوان نمونه اگر شما برای یک کلاس خاصی از قالب بیایید و با استفاده از سه روش گفته شده یک رنگ خاص یا فونت دلخواهی را انتخاب کنید، داخل سند html اولویت با کد استایلی است که به صورت Inline مشخص شده باشد. اگر این حالت وجود نداشت در مرحله بعدی حالت Internal و در نهایت حالت External در اولویت خواهد بود. برای فایل‌های JS هم دقیقا همین موضوع اتفاق خواهد افتاد.

اکنون هنگامی که شما سایتی را باز می‌کنید، مرورگرها در اولین لحظه ورود منابع CSS و JS که به صورت External لود می‌شوند را مسدود خواهند کرد! چرا که اولویت با بارگذاری سورس‌هایی است که داخل خود هاست و دامنه شما قرار دارد، پس از این که سورس‌های داخلی لود شدند، سورس خارجی از حالت مسدود خارج شده و شروع به لود شدن می‌کند که در نهایت با تکمیل شدن این مرحله شما ظاهر کامل یک سایت را می‌بینید. اتفاق بدی که در این حالت می‌افتد، همین مرحله مسدود سازی و رفع مسدودیت است. چرا که در این بازه زمانی هرچند خیلی کوتاه، وقفه‌ای در لود سایت می‌افتد و مرورگر همچنان در حال تلاش برای بارگذاری کامل سایت است. همین مسئله باعث افزایش لود سایت می‌شود که نتیجش کاهش سرعت سایت و بالا رفتن تعداد درخواست HTTP خواهد بود.

رفع ارور Make JavaScript and CSS external

بر اساس الگوریتم‌های یاهو که در ستون Yslow این خطا رخ داده است، به شما را مجبور می‌کند که از روش External از کدهای css و جاوا اسکریپت استفاده کنید. دلیل آن هم این است که در این حالت امکان استفاده از کش سایت را خواهید داشت و کدهایی که به صورت خارجی در قالب یک فایل فراخوانی شدند در مرورگر کاربران کش می‌شوند اما در حالتی که به صورت مستقیم (internal) یا درون خطی (inline) استفاده شده باشد، این اتفاق رخ نداده و در هر بار لود سایت این کدها هم اجرا خواهند شد. توی این حالت درخواست HTTP شما تغییری نمی‌کند، اما بخاطر وجود کدها داخل سند HTML باعث بالاتر رفتن حجم صفحه و بیشتر شدن کدها میشه. در صورتی که اگه به صورت external باشد و از فایل جدا فراخوانی شود امکان کش را دارید و این که فایل هم به صورت جدا است. به منظور بهینه سازی لود سایت و زمان باز شدن صفحه، در صورتی که کدهای CSS موجود در فایل External ، دارای حجم کمی باشند، شما می توانید آنها را به طور مستقیم در سند HTML ، وارد کنید و یا با دیگر فایل‌های CSS ادغام نمایید.  اگر محتوای فایل CSS که به روش External فراخوانی شده بسیار کم حجم و به اندازه چند بایت می‌باشد بهتر است یا آن را با دیگر فایل‌های external CSS ادغام نماییم یا به شکل مستقیم و Internal درون سند HTML استفاده کنیم.  ولی اگر تعداد زیادی فایل CSS با حجم کم در صفحات شما فراخوانی می‌شوند بهتر است آنها را ادغام کنید. اگر تعداد فایل‌های زیادی از نوع css در سند html شما فراخوانی می‌ شود،می‌توانید برای ادغام کردن فایل‌ها از پلاگین‌های وردپرس زیر استفاده نمایید.

پس بهتر است که اگر تعداد خطوط کدنویسی شده CSS و JS در حالت‌های internal و inline کمتر هستند آن‌ها را برداشته و داخل فایل جدا css و js قرار دهید یا این که در حالت خیلی استانداردتر با سایر فایل‌ها ادغام کنید. در این حالت بخاطر کمتر شدن حجم صفحه و از طرف دیگه امکان استفاده از کش و فشرده سازی Gzip سرعت بارگذاری بهتری خواهید داشت. پس در نهایت می‌توان گفت که استفاده از حالت External بهترین انتخاب است. می‌توانید با استفاده از آموزش رفع خطای Minify JavaScript and CSS در YSlow GTmetrix هم حجم این فایل‌ها را کمتر کرده و بهینه سازی بهتری داشته باشید.

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