چگونه با رفع خطاهای Gtmetrix سرعت سایت را بهبود بخشیم؟ (قسمت دوم)

برای مشاهده قسمت اول رفع حطاهای Gtmetrix اینجا کلیک کنید.

غیر فعال کردن WooCommerce Cart Fragment AJAX

اگر یک فروشگاه آنلاین دارید و از WooCommerce استفاده می کنید ، یک فایل Ajax وجود دارد که بارگیری آن زمان زیادی طول می کشد. این فایل Ajax ۲ یا ۳ ثانیه طول می کشد تا کاملا لود شود، بنابراین غیرفعال کردن آن باعث افزایش سرعت بارگذاری سایت شما می شود. برای حل مشکل WooCommerce cart fragment می توانید از افزونه رایگان استفاده کنید.

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

فایل های CSS و JS باید دارای برچسب( inline tag of the head tag) باشند. اگر آنها از جایی  خارج از سرور فراخوانی شوند، باید آنها را از وب سایت خود حذف یا دوباره مرتب کنید.

مشکل Captcha فرم تماس

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

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

تجزیه تحلیل جاوا اسکریپت

اول از همه ، باید بدانید که دو گزینه   برای لغو فایل جاوا اسکریپت و رفع این نوع خطا دارید.

روش اول:

<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "java.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load",
downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>

روش دوم:

<script defer="defer"
type="text/javascript" src="java.js"></script>

Minify and Combine CSS and Minify Javascript

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

وب سایت GTmetrix یک نسخه فشرده شده از استایل یا اسکریپت تان به نام Optimize Version در مقابل هر لینک به شما می دهد، که می‌توانید با استایل و اسکریپت وب سایت تان جایگزین کنید، اما قبل از آن به خاطر داشته باشید، همیشه یک نسخه پشتیبان از استایل و اسکریپت وب سایت تان تهیه کنید.ابزار ها و پلاگین های آنلاینب وجود دارد که می‌تواند به شما کمک کند.

در واقع ، تمام کدهای CSS و JS شما باید بعد از بستن تگ body (</body>tag) قرار داده شوند، بنابراین برای افزایش عملکرد وب سایت باید آنها را به ترتیب مناسب حرکت دهید.

Leverage Browser Caching

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

به عنوان مثال، GTmetrix گفته است که “http://…/font/calibri.woff” باید در کش کاربر ذخیره شود.

شما با پسوند و آدرس می بینید که این یک فونت استفاده شده برای طراحی وب سایت است. کافی است بگوییم که فونت با پسوند .woff باید در کش (حافظه پنهان) اکسپلورر کاربر ذخیره شود. برای این منظور کافی است کد زیر را کپی کرده و در فایل .htaccess قرار دهید:

<IfModule mod_expires.c>
ExpiresActive On ExpiresByType font/woff "access plus 1 year"
ExpiresDefault "access 1 month"
</IfModule>

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

<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>
## 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+xml "access 1 month"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access plus 1 month"  
ExpiresByType application/javascript "access plus 1 month"  
ExpiresByType application/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"
</IfModule>

تنظیم HTML (تنظیم یا حذف minify)

این یعنی حجم کدهای  HTML را کاهش دهید. برای انجام این بصورت دستی، کدهای مانند زیر تغییر دهید:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
</body>

یا از این حالت فشرده استفاده کنید:

<html xmlns="http://www.w3.org/1999/xhtml"><head><title></title></head><body>
</body></html>

جاوااسکریپت inline کوچک (Inline Small JavaScript)

برای برطرف کردن این مسئله بهتر است اسکریپت های بخش body  را به بخش اصلی (head) وب سایت یا در انتهای بخش body منتقل کنید.

فعال کردن  Keep-Alive

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

<ifModule mod_headers.c>
Header set Connection keep-alive
</ifModule>

جلوگیری از درخواست های بد

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

تعداد درخواست ها

GTmetrix می گوید سایت شما باید کمتز از 87 درخواست (request) در وب سایت داشته باشید. این تعداد میانگین است و هرچه درخواست شما کمتر باشد ، عملکرد بهتری خواهید داشت.

برای رفع این مشکل می توانید از افزونه WP-Rocket یا Lazy Load در وردپرس استفاده کنید. به عنوان مثال، Lazy Load ویژگیهای مقادیر تگ عکس ها را حذف کرده (Lazy Load omits the value attributes of the images tag) و و اجازه می دهد تا سایت به طور کامل بارگیری شود سپس مجدداً ویژگی های مقادیر تصویر را به ترتیب قبلی خود قرار می دهد. با انجام این کار ، درخواستها در حین لود شدن کاهش می یابد و میزان “Time to first-byte” شما بهبود می یابد.

تعیین ابعاد تصویر

به معنی تعیین مقادیر برای عرض و ارتفاع تصاویر در وب سایت شما است. بهتر است مقادیر نه تنها برای تصاویر ما از طریق CSS بلکه در HTML مانند موارد زیر مشخص شود:

<img src="#link#"
alt="#description#"
width="Y" height="X" />

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