زمانی که صحبت از بررسی سرعت سایت برای بهبود عملکرد آن به میان می اید، صاحبان سایت ها گزینه های متعددی پیش روی خود خواهند داشت. یکی از بهترین و محبوب ترین ابزارها برای بررسی سرعت سایت، ابزار جی تی متریکس(GTmetrix) است. این ابزار شروع به نمره دهی سیستم ها می کند و هشدارهایی را ایجاد می کند که نشان می دهد سایت با مشکلاتی مواجه است. در برخی از شرایط وجود چنین هشدارهایی می تواند برای افراد سردرگم کننده باشد. اگر شما نیز سایت خود را در ابزار جی تی متریکس مورد بررسی قرار داده باشید حتما با چنین خطاهای مواجه شده اید. بررسی و تعبیر این خطاها برای افراد مبتدی و گاه افراد متخصص کمی دشوار می شود. به همین خاطر در این مقاله سعی می کنیم نگاه کامل و جامعی به این ابزار بیندازیم و در مقالات بعدی راه حل های مختلفی را برای برطرف کردن خطاهای هر بخش ارائه نماییم. پس همراه وب ایده باشید.
ابزار جی تی متریکس:
ابزار جی تی متریکس(GTmetrix) توسط GT.NET توسعه پیدا کرد. این ابزار در کنار Pingdom می تواند یکی از محبوب ترین و پرکاربردترین ابزارهای تست سرعت سایت باشد. در مقایسه با سایر ابزارهای توسعه ای، جی تی متریکس کاربرد اسانی دارد و افراد مبتدی نیز می توانند به سرعت با آن اشنا شوند. این ابزار از ترکیب ابزارهای Google PageSpeed Insights و YSlow برای ایجاد رتبه و بیان توصیه های خود استفاده می کند. نسخه اصلی و پایه جی تی متریکس کاملا رایگان است و شما می توانید به راحتی از آن استفاده کنید. البته نسخه پرمیوم نیز وجود دارد اما در این مقاله سعی می کنیم جنبه های مختلف نسخه رایگان را مورد بررسی قرار دهیم. اگر در سایت جی تی متریکس اکانتی داشته باشید می توانید از گزینه های تجزیه و تحلیل دیگر هم بهره ببرید.
تجزیه و تحلیل سایت با ابزار جی تی متریکس:
همانطور که می دانید یک سایت از دارایی های مختلفی همچون HTML، جاوا اسکریپت، CSS و تصاویر ساخته شده است. هر کدام از این ها برای رندر چیزی که شما روی سایت می بینید درخواست هایی را تولید می کنند. هر چقدر درخواست های تولید شده بیشتر باشد سرعت بارگذاری سایت هم کندتر خواهد بود. البته همیشه اینگونه نیست اما در بیشتر سایت ها چنین شرایطی صدق می کند. در ادامه سعی می کنیم هر کدام از بخش های جی تی متریکس را تجزیه و تحلیل کنیم و اطلاعات دقیق تر و جزئی تری را در اختیار شما قرار دهیم. به خاطر داشته باشید که نباید زیاد به نمره های ارائه شده توسط این ابزار حساسیت نشان دهید و وسواس داشته باشید اما به کمک آن می توانید سرعت سایت خود را بهبود ببخشید.
خلاصه جی تی متریکس و قابلیت های آن:
زمانی که سایت وردپرسی خود را با این ابزار بررسی می کنید گزارشی در اختیارتان قرار می گیرد که در برگیرنده نمره سرعت صفحات سایت، نمره Yslow، زمان Fully Loaded، اندازه کل صفحه، تعداد درخواست های موجود در سایت است.
ما زمانی که سایت نمونه خود را در این ابزار تست کردیم زمان کل بارگذاری 485 میلی ثانیه بود. خوب این موضوع چه معنایی دارد؟ زمانی که سایت را در ابزار مورد بررسی قرار می دهید باید چند ثانیه منتظر بمانید. یکی از دلایل این امر، استفاده از کش است ( هم کش DNS و هم کش سرور). اگر سایت خود را با ابزارهای دیگری همچون Pingdom بررسی نمایید به این نتیجه خواهید رسید که سایت در این ابزار سریع تر از جی تی متریکس است. هیچ کدام از این ها نادرست نیستند. آن ها سرعت سایت را به شیوه های مختلفی مورد بررسی قرار می دهند و نمی توان این دو را با هم مقایسه کرد. زمانی که صحبت از ابزارهای بررسی سرعت سایت به میان می اید باید یکی از این ابزارها را بر اساس میل خود انتخاب کنید و بر اساس آن سایت را بهبود ببخشید. جی تی متریکس از قوانین Google PageSpeed Insight برای بررسی سایت و نمره دهی آن استفاده می کند. این رتبه بندی از 0 الی 100( F تا A) است. بیش از 25 توصیه از طرف این سایت در اختیار افراد قرار می گیرد که سعی می کنیم رایج ترین و محبوب ترین مواردی که صاحبان سایت های وردپرسی با آن درگیر هستند را مرور نماییم.
بخش Serve Scaled Images:
زمانی که صحبت از کار با تصاویر در سایت به میان می آید باید همیشه سعی کنید آن ها را بر اساس مقیاس درستی آپلود کنید و اجازه ندهید CSS این ها را برایتان تغییر دهد. اگر چنین کاری نکنید با توصیه Serve Scaled Images مواجه خواهید شد. زمانی که سایت خود را بر روی پلتفرم وردپرس میزبانی می کنید، به طور پیش فرض، تصاویر به هنگام آپلود در آن تغییر اندازه می دهند.
این تنظیمات را می توانید در بخش تنظیمات و رسانه ها پیدا کنید. شما باید مطمئن شوید که حداکثر عرض نزدیک عرض سایت است. در این شرایط CSS تلاش نمی کند تصاویر شما را تغییر اندازه دهد و داخل سایت آن را بگنجاند. همچنین می توانید تصاویر را با افزونه های بهینه سازی تصویر تغییر اندازه دهید.
بخش Inline Small CSS:
inline کردن CSS معمولا توصیه نمی شود زیرا می تواند اندازه کلی دانلود درخواست صفحات را افزایش دهد. با اینحال اگر سایت کوچکی دارید و درخواست های حداقلی دارید، اینکار می تواند عملکرد سایت را بهبود ببخشد( فقط برای سایت های کوچک). برای Inline کردن CSS خود می توانید از ابزارهای رایگانی همچون Autoptimize استفاده کنید.
بخش Inline Small JavaScript:
همانند inline کردن CSS های کوچک، می توان جاوا اسکریپت های کوچک را هم Inline کنید. این موضوع معمولا توصیه نمی شود زیرا اندازه کلی درخواست صفحه را افزایش می دهد. با اینحال اگر سایت کوچکی دارید انجام اینکار می تواند عملکرد سایت را بهبود ببخشد.
بخش Leverage Browser Caching:
Leverage Browser Caching یکی از توصیه های رایجی است که افراد با آن کشمکش دارند. این موضوع بدین خاطر ایجاد می شود که هدر کش HTTP درستی بر روی وب سرور وجود ندارد.
بخش Serve Resources From a Consistent URL:
اگر با این بخش مشکل دارید به احتمال زیاد منابع یکسانی دارید که از طریق URL یکسانی در اختیار افراد قرار می گیرد.بیشتر اوقات چنین مشکلی زمانی رخ می دهد که رشته های کوئری درگیر باشد. منابع شما باید از طریق آدرس های منحصر به فردی در اختیار افراد باشد تا از بایت دانلودی تکراری جلوگیری شود.
بخش Defer Parsing of JavaScript:
همانطور که می دانید جاوا اسکریپت و CSS به طور پیش فرض render-blocking هستند. این موضوع بدین معنی است که می توانند جلوی نمایش صفحات وب را تا زمانی که دانلود شده و توسط مرورگر پردازش می شود را بگیرند. صفت Defer به مرورگر بیان می کند منتظر بماند تا پردازش اطلاعات تکمیل شود. یک راه حل سریع و آسان برای حل این مشکل استفاده از افزونه های رایگانی همچون Autoptimize و Async JavaScript است.
بخش Minify CSS and JavaScript:
خلاصه سازی یا همان Minification به معنای حذف کاراکترهای اضافی از سورس کد بدون تغییر عملکرد آن است.
این موضوع می تواند در برگیرنده line breaks، فضاهای خالی و سایر موارد است. با انجام اینکار می توان بایت داده ها را ذخیره کرد و سرعت دانلود و پردازش را بالا برد. باز هم به کمک افزونه Autoptimize می توان مشکلات موجود را برطرف کرد. فقط مطمئن شوید که بخش Optimize JavaScript Code و Optimize CSS Code تیک خورده است. اگر سایت بزرگی دارید ممکن است بخواهید با تنظیمات پیشرفته هم کار کنید. inline کردن یا ترکیب نمودن CSS و جاوا اسکریپت برای سایت های بزرگ به هیچ عنوان توصیه نمی شود.
بخش Optimize Images:
بر اساس مطالعات انجام شده، تصاویر به طور متوسط 66 درصد کل وزن صفحات سایت را به خود اختصاص می دهند. پس زمانی که می خواهید سایت وردپرسی خود را بهینه سازی کنید باید تصاویر را هم مدنظر داشته باشید. تصاویر مهم تر از اسکریپت ها و فونت ها هستند. در دنیای ایده آل و عالی، هر تصویری قبل از آپلود در وردپرس باید فشرده سازی و بهینه سازی گردد. اما متاسفانه در دنیای واقعی همیشه چنین فرایندی رخ نمی دهد. به همین خاطر توصیه می کنیم از یک افزونه بهینه سازی تصویر استفاده کنید. اینکار به فشرده سازی تصاویر، تغییر اندازه آن ها کمک می کند و شما را مطمئن می سازد سرعت بارگذاری خوبی در سایت خود دارید. برای بهینه سازی تصاویر می توانید از افزونه هایی همچون ShortPixel Image Optimizer،Imagify ، WP Smush ، TinyPNG استفاده کنید.
بخش Minify HTML:
همانند CSS و جاوا اسکریپت، کدهای HTML را هم می توان خلاصه سازی کرد و کاراکترهای اضافی آن را حذف نمود. برای اینکار می توان از افزونه Autoptimize استفاده کرد. کافیست بخش Optimize HTML Code را فعال کنید.
بخش 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 از یک آدرس به آدرس دیگر RTT اضافی و زمان انتظار برای کاربر را کاهش می دهد. به خاطر داشته باشید که ریدایرکت های وردپرس باعث کند شدن سرعت بارگذاری آن می شود. به همین خاطر باید تعداد این ریدایرکت ها را به حداقل برسانید تا بتوانید تجربه کاربری را بهبود ببخشید.
بخش Specify a Cache Validator:
این بخش زمانی ظاهر می شود که هدر کش کردن HTTP وجود نداشته باشد. این بخش باید در هر پاسخ سرور قرار داده شود زیرا باعث تایید و تنظیم طول کش می شود. اگر چنین هدری وجود نداشته باشد هر بار درخواست جدیدی برای منبع ایجاد می شود و همین امر بارگذاری سرور را با مشکل مواجه می کند. استفاده از هدرهای کش کردن شما را مطمئن می سازد که درخواست های بعدی دیگر مجبور به بارگذاری از سرور نیست و همین امر در پهنای باند صرفه جویی می کند و عملکرد سایت و تجربه کاربری را بهبود می بخشد. به خاطر داشته باشید که این مشکل را بر روی منابع ثالثی که کنترلی بر روی آن ها ندارید نمی توانید برطرف کنید. روش های مختلفی برای برطرف کردن این مشکل وجود دارد که در مقالات بعدی به این موارد هم خواهیم پرداخت.
بخش Specify Image Dimensions:
شما باید ابعاد تصاویر خود را مشخص کنید. این موضوع به معنای مشخص کردن عرض و ارتفاع تصاویر در کدهای HTML است. مثلا کد زیر یکی از کدهای اشتباهی است که برخی از کاربران به کار می برند:
<img src="https://domain.com/images/image1.png">
کد صحیح به شکل زیر است که در آن ارتفاع و عرض تصویر مشخص شده است:
<img src="https://domain.com/images/image1.png" width="200" height="100">
بخش Remove Query Strings From Static Resources:
فایل های CSS و جاوا اسکریپت شما معمولا نسخه فایل ها را در انتهای آدرس های خود دارند. برخی از سرورها و پروکسی سرورها نمی توانند رشته های کوئری را کش کنند حتی اگر هدر cache-control:public وجود داشته باشد. پس با حذف این ها، می توانید در برخی از شرایط کش را بهبود ببخشید. اینکار را می توان به سادگی به کمک کد یا افزونه های رایگان وردپرس انجام دهید.
بخش Specify a Vary: Accept-Encoding Header:
این گزینه هدر HTTP است و باید در هر پاسخ سروری قرار گیرد و به مرورگر می گوید کلاینت می تواند نسخه های فشرده شده محتوا را مدیریت کند یا خیر. معمولا زمانی که از فشرده سازی GZIP استفاده می شود این خطا نیز برطرف می گردد.
بخش YSlow:
همانطور که قبلا نیز بیان کردیم جی تی متریکس از YSlow برای رتبه بندی سایت و نمره دادن به آن استفاده می کند. در این بخش بیش از 15 توصیه وجود دارد . سعی می کنیم برخی از محبوب ترین ور ایج ترین مواردی که در سایت های وردپرسی دیده می شود را در ادامه با هم مرور کنیم.
بخش Make Fewer HTTP Requests:
هر چیزی که در سایت ، افزونه، تصاویر، فونت ها بارگذاری می شود همه شان درخواست HTTP را تولید می نمایند. به همین خاطر نمی توانید 100 افزونه را یکجا دانلود کنید و روی سایت نصب نمایید زیرا همه این ها درخواست های زیادی را تولید می کنند. هر چقدر تعداد افزونه ها کمتر باشد بهتر است.
بخش Add Expires Headers:
بر اساس گفته های گوگل، هدر Cache-Control به عنوان بخشی از ویژگی HTTP/1.1 تعریف شده و از سایر هدرهایی که برای تعریف سیاست های کش کردن به کار می رفت پیشی گرفته است. همه مرورگرهای مدرن از قابلیت Cache-Control پشتیبانی می کنند و این تنها چیزی است که شما بدان نیاز دارید. با اینحال اگر هر دوی این ها را به کار ببرید مشکلی نخواهید داشت. هدرهای Expire از داده های واقعی استفاده می کنند. این در حالیست که هدرهای Cache-Control به شما اجازه می دهند مدت زمان قبل از انقضا را خودتان مشخص کنید. برای اضافه کردن هدر 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 ##
برای اضافه کردن این هدر به NGINX، می توانید کد زیر را به فایل config اضافه کنید:
location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
expires 7d;
}
بخش Use a Content Delivery Network:
معنی این بخش کاملا واضح است. همیشه متخصصان سئو توصیه کرده اند از CDN استفاده کنید به خصوص اگر بازدیدکننده شما از سرتاسر جهان وارد سایت می شوند. CDN کپی کش شده از محتوا را بر روی POPهایی که در نزدیکی بازدیدکننده قرار دارد نگه می دارد و همین امر زمان بارگذاری سایت را بهبود می بخشد. شما می توانید از Cloudflare در سایت های وردپرسی خود استفاده کنید.
بخش Use Cookie-Free Domains:
معمولا زمانی که محتواهایی همچون تصاویر، جاوا اسکریپت، CSS را در سایت خود به کار می برید، لازم نیست کوکی های HTTP به همراه آن وجود داشته باشد زیرا باعث تحمیل اضافه بار می شود. زمانی که سرور برای یک دامنه خاص کوکی ها را تنظیم می کنند همه درخواست های HTTP مدنظر برای آن دامنه باید در برگیرنده کوکی باشد. این خطا معمولا بر روی سایت هایی دیده می شود که درخواست های زیادی دارند. به کمک استفاده از CDN ها یا تنظیم دامنه و زیردامنه جداگانه برای نشان دادن کوکی ها می توان چنین مشکلی را برطرف کرد.
بخش Reduce DNS Lookups:
هر دامنه ای که شما پرس و جو می کنید یک DNS lookup تولید می کند. این کار تا زمانی ادامه پیدا می کند تا درخواست کش شود. به عنوان مثال فرض کنید 10 مورد از CDN، دو مورد از فونت های گوگل و 5 مورد از تبلیغ کننده ثالث بارگذاری می کنید. این کار باعث تولید 3 مورد DNS lookup می شود زیرا هر کدام از این ها در حال جستجوی یک دامنه واحد هستند. زمانی که خدمات خارجی را اضافه می کنید DNS lookup به سرعت از کنترلتان خارج می شود.
بخش Make Favicon Small and Cacheable:
Favicon یک فایل آیکون تصویری کوچکی است که با سایت مرتبط است و در نوار آدرس مرورگر نشان داده می شود (یا زمانی که آن را به عنوان بوک مارک تنظیم می کنید).
اگرچه این آیکون تصویری بسیار کوچک است اما باز هم باید آن را بهینه سازی نمایید. هر بایتی در سایت و بهینه سازی آن کمک کننده و مفید خواهد بود.
بخش Configure Entity Tags:
هدر ETag بسیار شبیه هدر last-modified است. این گزینه برای تایید و اعتبارسنجی کش فایل ها به کار می رود. اگر آپاچی 2.4 یا بالاتر دارید، هدر ETag به طور خودکار اضافه خواهد شد. اگر چنین خطایی را مشاهده کردید حتما با شرکت ارائه دهنده هاست مشورت کنید.
نمودارهای آبشاری جی تی متریکس:
نمودارهای ابشاری جی تی متریکس همه درخواست های تکی بر روی صفحات سایت را نشان می دهد. شما می توانید هر کدام از این درخواست ها را بررسی کنید و ببینید چه چیزی باعث تاخیر می شود و مشکلات عملکردی بر روی سایت ایجاد می کند.
بخش Blocking( قهوه ای):
زمانی که مرورگر صفحه ای از سایت را لود می کند، منابع جاوا اسکریپت و CSS معمولا تا زمانی که این ها توسط مرورگر دانلود و پردازش نشده اند مانع از دیده شدن سایت می شوند.این مدت زمان به عنوان Blocking در نمودار آبشاری جی تی متریکس نشان داده می شود.
بخش DNS Lookup:
می توان DNS Lookup را همانند یک دفترچه تلفن در نظر گرفت. سرورهای مختلفی به نام Domain Name Servers وجود دارد که اطلاعات سایت شما را می گیرد .زمانی که برای اولین بار سایت خود را از طریق جی تی متریکس بررسی و ارزیابی می کنید، lookup تازه ای اجرا می شود و باید از رکوردهای DNS برای دریافت اطلاعات آی پی استفاده گردد. این موضوع باعث ایجاد زمان lookup اضافی می شود. زمانی که برای بار دوم سایت خود را از طریق جی تی متریکس ارزیابی می کنید، از آنجایی که اطلاعات ای پی شما را می داند DNS را کش می کند. به همین خاطر بعد از چندین بار آنالیز سایت در جی تی متریکس سرعت بارگذاری آن بیشتر می شود. اگر از CDN استفاده کنید،همین موضوع در مورد منابع سایت مثل جاوا اسکریپت، تصاویر و CSS نیز صدق می کند. کش CDN بسیار شبیه DNS عمل می کند. زمانی که کش شد، سریع تر بارگذاری می شود. نکته دیگر برای افزایش سرعت DNS، استفاده از DNS prefetching است. اینکار به مرورگر اجازه می دهد DNS lookup را بر روی صفحه در بک گراند انجام دهد.
شما می توانید از این قابلیت در وردپرس استفاده کنید. کافیست خطوطی را به هدر سایت وردپرسی خود اضافه نمایید. به نمونه زیر توجه کنید:
<!-- Prefetch DNS for external assets --> <link rel="dns-prefetch" href="//fonts.googleapis.com"> <link rel="dns-prefetch" href="//www.google-analytics.com"> <link rel="dns-prefetch" href="//cdn.domain.com">
بخش Connecting( سبز):
زمان Connecting در جی تی متریکس مربوط به کانکشن های TCP یا کل زمان مورد نیاز برای ایجاد کانکشن TCPاست. اصلا لازم نیست نحوه کارکرد این گزینه را یاد بگیرید. کافیست بدانید که این یک روش ارتباطی بین هاست/کلاینت و سرور است.
بخش Sending( قرمز):
زمان Sending زمانی است که مرورگر برای ارسال داده به سرور نیاز دارد.
بخش Waiting( بنفش):
زمان انتظار در جی تی متریکس به TTFB گفته می شود. TTFB سنجش و ارزیابی است که به عنوان نشانگر واکنشگر بودن وب سرور یا سایر منابع شبکه به کار می رود. هر مدت زمانی که زیر 100 میلی ثانیه باشد قابل قبول و خوب است. اگر این مقدار به 300 الی 400 میلی ثانیه برسد باید بدانید که مشکلی در سرور دارید یا زمان ارتقا به پشته وب بهتر فرا رسیده است. راحت ترین روش برای کاهش این مدت زمان، اطمینان از وجود کش مناسب در هاست و استفاده از CDN است.
بخش Receiving( خاکستری):
زمان دریافت زمانی برای مرورگر است که در آن داده از سرور دریافت می شود.
خیلی خوبه فقط ای کاس هزینه اکانت پولیش کمتر بود