سایت gtmetrix محبوب ترین سایت سنجش سئو در نزد وبمستران ایرانی است.
متاسفانه یا خوشبختانه سایت جی تی متریکس دارای امکانات و گزینه های بسیار زیادی هست,به همین دلیل این آموزش یکم طولانیه و مطالعش نیازمند کمی صبوریه.
سایت جی تی متریکس برای بررسی
pagespeed بکار میرود و به شما کمک می کند تا سرعت بارگذاری سایت خود را بهینه کنید.
با صفحه ای با شکل زیر مواجه میشوید.
در این صفحه با کادری مواجه میشوید که در آن نوشته شده Enter url analyze – خب این بخش بسیار ساده است,و از شما میخواهد که آدرس سایتی را که میخواهید آنالیز کنید وارد نمائید.
بعد انجام اینکار وارد صفحه ای میشوید که نشان می دهد سایت شما در حال اسکن و دریافت اطلاعات است و سپس بعد از گذشت چند دقیقه وارد صفحه ی نمایش نتایج میشوید.صفحه ی مذکور دقیقا شکل تصویر ذیل میباشد :
در این صفحه شما گزینه های متعددی مشاهده میکنید , که در ادامه به معرفی تک تک آن ها می پردازیم.
PageSpeed Score : در این بخش شما میزان بهینه بودن سایت (بر اساس الگوریتم گوگل) را برحسب درصد مشاهده میکنید. (نشان A بالاترین سطح استاندارد است)
YSlow Score : این قسمت هم همانند گزینه بالاست با این تفاوت که این بخش ابزار و استانداردهای یاهو را مد نظر قرار می دهد.
Total Page Size : این بخش حجم صفحه ای که مورد سنجش قرار داده اید را بررسی می کند.
Requests : این بخش تعداد درخواست های که که به سرور برای بارگذاری بخش های مختلف سایت ارسال می شود را نشان می دهد.
نکته : هر چقدر تعداد Requests (پاسخ های رد و بدل شده بین سرور و مرورگر) کمتر باشد,هم فشار کمتری به سرور وارد میشود و هم سرعت لود سایت بالاتر می رود.
خب بریم سراغ توضیحات اصلی,به نظرم بهتره از گزینه های بخش PageSpeed شروع کنیم.
Combine images using CSS sprites : ترکیب تصاویر موجود در بخش استایل سایت
این بخش تصاویری که حجم بسیار پایین یا ابعاد کوچکی دارند را نشان می دهد و از شما می خواهد که با استفاده از sprites که در css وجود دارد,این تصاویر را ادغام کرده و به عنوان یک تصویر واحد از آن استفاده نمائید.
یکی از مهم ترین بخش های جی تی متریکس این بخشه چون به شدت در کاهش تعداد رکوئست ها و بهبود سرعت بارگذاری سایت موثره.
برای مثال به این گزینه توجه کنید :
من دو تصویر
و در سایتم استفاده کردم,طوری که وقتی موس روی تصویر اول میره تصویر تغییر حالت میده و به تصویر دوم تبدیل میشه.
<style>
.facebook{
background:url(facebook.png) no-repeat;
width:32px;
height:32px;
}
.facebook:hover{
background:url(facebook-hover.png) no-repeat;
}
</style> |
<div class=”facebook”>
</div> |
همانطور که متوجه شدین بنده مجبورم دو تصویر رو در سایت آپلود کنم,پس برای رفع این مشکل به کمک فتوشاپ دو تصویر رو با هم ادغام میکنم,که تصویری به شکل بوجود میاد همانطور که مشاهده می کنید الان جای دو تصویر یک تصویر دارم که این بسیار ایده آل هست.
خب حالا برای استفاده از این تصویر کافیه به این شکل عمل کنیم :
<style>
.facebook{
background:url(facebook-sprites.png) no-repeat 0 0;
width:32px;
height:32px;
}
.facebook:hover{
background:url(facebook-sprites.png) no-repeat 0 -32px;
}
</style> |
<div class=”facebook”>
</div> |
آموزش بهینه سازی سایت در gtmetrix
Specify image dimensions : تعیین مقدار برای طول و عرض تصاویر
در این بخش باید برای تصاویر طول و عرض تعیین کنید,که مرورگر بتونه قبل از بارگذاری تصویر فضایی رو که باید به اون تصویر اختصاص بده شناسایی کنه.این رو هم در نظر بگیرید که اینکار یکی از گزینه های به شدت موثر در ایندکس تصاویر در گوگل هست.
اگر روی این بخش کلیک کنید میبیند که کنار هر تصویر گزینه Dimensions: 10 x 10 وجود داره که به شما میگه باید طول و عرض اون رو مشخص کنید.برای اینکار کافیه محل تصویر رو در کدهای سایت خودتون پیدا کنید,بعد براش مقدار طول و عرض تعیین کنید:
| <img src=”لینک” alt=”توضیح” width=”10″ height=”10″ /> |
نکته : اندازه دادن به تصاویر از css به تنهایی کافی نیست و شما باید حتما به روشی که ما گفتیم عمل کنید.
Defer parsing of JavaScript : تاخیر در بارگذاری فایلهای جاوا اسکریپت
برای حل این موضوع میتونید از یکی از دو روش زیر استفاده کنید (البته ممکنه هردو روش موجب عدم بارگذاری فایل های شما بشن):
روش اول :
<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> |
شاید ساده ترین بخش سایت gtmetrix این بخش باشه , چون شما به راحتی میتونید امتیاز این بخش رو دریافت کنید.
همانطور که در تصویر بالا میبینید,جی تی متریکس داره میگه که دو تصویر من به نشانی های مذکور نیاز به بهینه سازی دارند,همچنین در مقابل لینک هر تصویر گزینه ای به نام optimized version وجود داره که نسخه بهینه شده همون تصویر رو بهتون میده,کافیه فقط نسخه بهینه شده رو ذخیره کنید و جایگزین تصویر قبلی کنید و به همین سادگی تصاویرتون بهینه میشن و سرعت بارگذاری سایتتون پیشرفت چشم گیری میکنه.
Prefer asynchronous resources : ناهماهنگی در فراخوانی فایلهای جاوا اسکریپت
در این بخش فایل های جاوا اسکریپتی که در بارگذاری دیگر فایل های جاوا اسکریپت اختلال ایجاد میکنند را مشاهده میکنید برای حل این موضوع کافیست بارگذاری آن ها را به تعویق بندازید.
Minify HTML : بهبود حجم کدهای HTML
در این بخش از شما خواسته شده تا توضیحات,بخش های اضافه و فضاهای خالی رو از فایل html حذف کنید تا باعث کاهش حجم فایل بشید,البته خودش یک نسخه بهینه شده میده که به هیچ وجه و به هیچ وجه و به هیچ وجه ازش استفاده نکنید.
Minify CSS و Minify JavaScript : کاهش حجم کدهای JavaScript و CSS
این بخش هم دقیقا مثل بخش بالاست با دو تفاوت: اول اینکه این قسمت برای کدهای css و javascript هست و دوم اینکه در این قسمت میتونید از نسخه بهینه ای شده ای که (optimized version) خود جی تی متریکس میده میتونید استفاده کنید.
Optimize the order of styles and scripts : چینش صحیح فایلهای css و javascript کنار یکدیگر
بهینه سازی این بخش هم خیلی راحته,این بخش داره از شما درخواست میکنه که کدهای css رو بالاتر از کدهای جاوا اسکریپت قرار بدید تا سایتتون سریعتر بارگذاری بشه.با کمی دقت براحتی میتونید مشکلات این بخش رو حل کنید.
<head>
<title>title</title>
<style>
// CSS Code
</style>
<script type=”text/javascript”>
// javascript Code
</script>
</head> |
Inline small CSS – Inline small JavaScript : فراخوانی فایلهای جاوااسکریپت و استایل کوچک از داخل سایت
این بخش به شما میگه فایل های سی اس اس و جاوااسکریپتی رو خیلی کوچک هستند رو از سر راه بردارید,برای اینکار کافیه محتویات داخل این فایل ها رو کپی کرده و در بخش head قرار بدید تا امتیاز این بخش رو هم برای بهبود سرعت لود سایتتون دریافت کنید.
Enable Keep-Alive : زنده نگاه داشتن فایل بین مرورگر و سرور
بااینکه این گزینه خیلی ساده به نظر میرسه, اما اگر راستش رو بخواید خودم هم هنوز متوجه این گزینه نشدم یا اگر بخوام بهتر بگم درک نکردمش اما میدونم برای حل مشکلات معرفی شده در این گزینه باید مواردی رو که نشون میده بین سرور و مرورگر زنده و فعال نگه دارید که برای انجامش باید به فایل .htaccess در شاخه ی اصلی سایتتون درهاست مراجعه کنید و کد زیر رو بهش اضافه کنید:
<ifModule mod_headers.c>
Header set Connection keep-alive
</ifModule> |
Leverage browser caching : ذخیره‌سازی کش
در این بخش لیست فایل هایی که بهتره در مرورگر کاربر کش بشه رو نشون میده خوشبختانه حل کردن مشکلات این بخشم خیلی ساده اس ولی زمان بر.
برای مثال فرض کنید که خطایی به این شکل
http://go1gfle.com/font/gtmetrix.woff به شما نشون میده , برای رفع این ارور کافیه به فایل .htaccess که در شاخه اصلی سایتتون در هاست قرار داره برید و کد زیر رو داخلش کپی کنید :
## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType font/woff “access plus 1 year”
ExpiresDefault “access 1 month”
</IfModule>
## EXPIRES CACHING ## |
با این کد ما از سیستم درخواست کردیم تا تمام فوت هایی که پسوند woff دارند رو در مرورگر کاربر کش کنه.
Avoid bad requests : فایلهایی که وجود ندارند
در این بخش فایل هایی رو نشون میده که وجود ندارند اما ازشون یه ردی در سایتتون مونده,این بخش هم حل کردنش ساده اس یا باید فایل هایی که وجود ندارند رو مجددا با همون نام اپلود کنید یا آثار بجا مونده ازشون (کدها) رو از داخل فایل های سایت پاک کنید.
Avoid a character set in the meta tag : اجتناب از یک کاراکتر در متا تگ
این گزینه خیلی کم پیش میاد اروری رو شامل حال شما کنه اما اگر اتفاق افتاد باید حل کنیدش,این بخش داره میگ که کارکتر فایل یه افزونه یا….در فایل ها تعیین نکردید مثلا (utf8).برای حل این موضوع کافیه به فایل .htaccess برید و کد زیر رو داخلش بذارید :
# pass the default character set
AddDefaultCharset utf-8 |
این گزینه معمولا پیش نمیاد خطایی بده اگه بده هم مهم نیست میتونید ساده ازش رد بشید.
Avoid CSS @import : مدیریت فراخوانی فایلهای CSS خارجی
در بسیاری از مواقع دیده میشود که وب‌مسترها اگر چند فایل استایل خارجی داشته باشند,فایل اصلی را در سمت HTML سایت فراخوانی میکنند و مابقی را با دستور “(“import url(“your file adress.css@” از داخل فایل استایل اصلی بارگذاری میکنند. اینکار یکی از اشتباهاتی هست که گوگل آن رایکی از خطاهای اصلی می‌داند. برای رفع این مشکل کافیست به آدرسی که GTMetrix داده است بروید و آن بخش مربوط به @import رو حذف کنیند و فایل را ذخیره نمائید. سپس به بخش Head سایت خود رفته و با دستور زیر آنها را جداگانه فراخوانی کنید و یا اینکه با هم ادغام کنید.
| <link rel=”stylesheet” href=”your file adress.css” /> |
Put CSS in the document head : فراخوانی فایل CSS خارج از بخش head سایت
زمانی با این گزینه مواجه می شوید که فایل استایل خود را در بخشی خارج از head سایت فراخوانی کرده باشید مثلا در بخش body – برای حل این مشکل کافیست بخشی را که اخطار داده,به قسمت head سایت خود منتقل کرده و خطای موجود در این بخش را برطرف کنید.
Enable gzip compression : فعال کردن gzip
قابلیت gzip باعث میشود فایلهایی که از سمت سرور به مرورگر ارسال میشود به صورت فشرده شده باشد که باعث میشود که سایت سریعتر بارگذاری شود. برای رفع این گزینه کافیست کد زیر را به فایل .htaccess اضافه کنید:
# BEGIN Compress text files
<ifModule mod_deflate.c>
<filesMatch “\.(css|js|x?html?|php|woff|ttf|png|jpg|gif)$” >
SetOutputFilter DEFLATE
</filesMatch>
</ifModule>
# END Compress text files |
Specify a cache validator : تعیین زمان برای فایلهای کش شده
در این بخش شما باید,برای فایل هایی که در مراحل قبل تعیین کردید کش بشوند,اعتبار تعیین کنید.برای رفع این مشکل با توجه به نیاز خودتون کدی شبیه کد زیر را آماده سازی کرده و در فایل .htaccess قرار بدید:
# BEGIN Cache-Control Headers
<ifModule mod_headers.c>
<filesMatch “\.(ico|jpe?g|png|gif|swf|woff|ttf)$”>
Header set Cache-Control “max-age=2592000, public”
</filesMatch>
<filesMatch “\.(css)$”>
Header set Cache-Control “max-age=2592000, public”
</filesMatch>
<filesMatch “\.(js)$”>
Header set Cache-Control “max-age=2592000, private”
</filesMatch>
<filesMatch “\.(x?html?|php)$”>
Header set Cache-Control “max-age=600, private, must-revalidate”
</filesMatch>
</ifModule>
# END Cache-Control Headers |
Serve scaled images : تفاوت اندازه اصلی تصویر با اندازه استفاده شده در سایت
اگر تصویری در سایت داشته باشید که سایز اصلی آن با سایزی که در استایل تعریف شده است متفاوت باشد این خطا ظاهر میشود که برای حل آن دو راه حل در پیش رو دارید : یا تصویر را حذف کرده و به سایزی که جی تی متریکس تعیین نموده تغییر دهید و مجددا آپلود کنید یا از طریق CSS سایز عکس و کد را مطابق هم قرار دهید.
Server resources from a consistent URL : محتوای مشابه با لینک‌های متعدد
این بخش به معرفی فایل هایی می پردازد که محتوای یکسانی دارند ولی لینک های مختلف (برای مثال یک عکس که در دو نشانی متفاوت آپلود شده است و استفاده میشود).برای رفع این مشکل کافیست لینک های اضافه راه پاک کرده و فقط یک لینک را باقی بگذارید.
Minimize request size : کم کردن تعداد درخواست‌ها از سرور
نیاز به توضیح نداره,یک گزینه کلی از گزینه های بالاست که میگه فایل های مذکور رو تصحیح کنید تا تعداد رکوئست ها کاهش پیدا کنه
Minimize redirects : کم کردن ریدایرکت‌های سایت
این گزینه میگه ریدایرکت هایی که در سایتتون بوجود آوردید از بین ببرید یا کم کنید.گزینه مهمی نیست زیاد هم پیش نمیاد.
Remove query strings from static resources : وجود کاراکتر (؟) در انتهای فایلهای شما
این گزینه به شما نشان میدهد که در پایان فایلهای شما (مانند فایلهای جاوا اسکریپت) علامت (؟) وجود دارد,یعنی در انتهای آدرس آن فایل علامت پرسش وجود دارد. این علامت در آدرس باعث میشود که فایل مذکور در کش مرورگر قرار نگیرد و در هر بار مراجعه کاربر، مجددا از سرور فراخوانی شود. برای حل این مشکل میتوانید بصورت دستی علامت سوال را از انتهای نام فایل حذف کنید.
Specify a Vary: Accept-Encoding header : خطا در تعیین نوع کاراکتر برای فایل‌ها
این اتفاق معمولا زمانی رخ می دهد که نوع کارکتر فایل مشخص نشده باشد,اگر چنین بود کافیست کارکتر مشخص شده را دقیقا بعد از HEAD قرار دهید.
برای مثال ما برای UTF8 کد زیر را استفاده میکنیم :
Specify a character set early : تعیین نوع کاراکتر برای فایل‌ها
این گزینه دقیقا همانند گزینه بالاست.
آموزش بهینه سازی سایت در gtmetrix
خب بهتر حالا بریم سراغ بخش YSlow
قراردادن فایل های خود بر روی سرورهایی متعددی در سطح دنیا,که به محض درخواست کاربر سایت از نزدیک ترین سروره در دسترس بارگذاری شود , که موجب بهبود سرعت لود سایت میشود.
Make fewer HTTP requests : ترکیب فایلهای مشابه
Add Expires headers : تعیین زمان برای فایلهای کش شده
این گزینه برابر با گزینه (Specify a cache validator) است.
Configure entity tags (ETags) : پیکربندی E Tag ها
راه اندازی چندین سرور با استفاده از تنظیمات E Tag جهت جلوگیری از بروز خطای ۳۰۴
Compress components with gzip : استفاده از قابلیت gzip
این گزینه برابر با گزینه (Enable gzip compression) است.
Minify JavaScript and CSS : کاهش حجم کدهای JavaScript و CSS
این گزینه برابر با گزینه (Minify CSS) و (Minify JavaScript) است.
Reduce DNS lookups : کاهش تعداد درخواست‌های DNS lookups
یعنی درخواست هایی که بارگذاری فایل های آن بر روی سرور شما نیست,مانند آمارگیر,تبلیغات پاپ اپ,تبلیغات کلیکی و… را کاهش دهید.
Avoid URL redirects : کم کردن ریدایرکت های سایت
این گزینه تقریبا برابر با (Minimize redirects) است.
Avoid empty src or href : خالی نبودن مقدار برای صفات href و src
زمانی که از تگ هایی مانند a یا img در کدهای خود استفاده کردید , مقدار صفت لینک یا مقدار آدرس آن ها را بدون مقدار رها نکنید یا فاصله نگذارید مانند ” ” . برای حل این مشکل یا تگ را حذف کنید یا نشانی معتبری درون آن قرار دهید تا مشکل حل شود.
Make AJAX cacheable : کش کردن AJAX
کش کردن ajax در مرورگر کاربر
Put CSS at the top : انتقال فراخوانی‌های استایل به بالاترین حد ممکن
انتقال فراخونی های بارگذاری فایل استایل به بخش head
Put JavaScript at bottom : انتقال فراخوانی‌های جاوا اسکریپت به پایین‌ترین حد ممکن
انتقال فراخونی های بارگذاری فایل جاوا اسکریپت به پایین بخش head و بالای بخش </html>
Remove duplicate JavaScript and CSS : حذف موارد تکرای از JavaScript و CSS
حذف فایل ها و توابع تکراری css و javascript
Avoid AlphaImageLoader filter : عدم استفاده از ***** AlphaImageLoader
***** AlphaImageLoader زمانی استفاده میشود که بخواهیم از تصاویر شفاف مثل PNG در سایت خود استفاده کنیم. استفاده از دستور AlphaImageLoader باعث میشود عمل رندر صفحه تا لود کامل تصویر متوقف شود و همچنین حافظه بیشتری را استفاده کند. البته این مشکل در نسخه های جدید اینترنت اکسپلورر برطرف شده ولی اگر هنوزم میخواهید از آن استفاده کنید کافیست به جای استفاده از دستور AlphaImageLoader از سی اس اس هک _filter استفاده کنید.
Avoid HTTP 404 (Not Found) error : حذف لینک‌های ۴۰۴
اگر شما در سایت خود از فایل ها یا تصاویری استفاده نموده اید که به مرور زمان پاک شده اند با این گزینه مواجه میشوید که برای حل آن یا فایل-تصویر را مجددا در همان مسیر با همان نام بارگذاری کنید یا تمام نشانه های آن را پاک نمایید.
Reduce the number of DOM elements : کم کردن عناصر DOM در جاوا اسکریپت
بهتر است از عناصر DOM کمتری در جاوا اسکریپت های سایت خود استفاده کنید.
Do not scale images in HTML : عدم تغییر اندازه تصاویر با HTML
متاسفانه HTML این قدرت را ندارد که تصاویر شما را کوچیک یا بزرگ کند, بلکه میتواند آنها را کش داده تا بزرگ تر نمایش داده شوند.یا فشرده کند تا کوچک تر نمایش داده شوند.
Make favicon small and cacheable : درج favicon برای سایت
بهتر است برای سایت خود یک آیکن در سایز : (۱۶*۱۶) ساخته تا به عنوان یه نماد کوچیک برای سایت شما در مرورگر به نمایش در بیاید.(در کش مرورگر ذخیره شود تا در هر صفحه مجدد بارگذاری نشود)
Avoid CSS expressions : عدم استفاده از عبارات CSS برای بهبود سازگاری با مرورگرها
اخطار : از عباراتی که در CSS برای بهبود سازگاری با مرورگر ها بلخص IE وجود دارند استفاده نکنید.این کار علاوه بر افزایش حجم،خطرات امنیتی هم به دنبال دارد.
Use GET for AJAX requests : تعریف درخواست های AJAX به صورت GET
Reduce cookie size و Use cookie-free domains : کاهش حجم کوکی
از طرف سرور برای هر دامنه یک کوکی تعیین میشود.این کار برای افزایش سرعت بارگذاری صفحات برای دفعات بعدی است.
اما اگر تعداد این کوکی ها زیاد شود و یا نیازی به کوکی نباشد ، افت سرعت سایت را در پی دارد. راه حل این موضوع بسیار ساده است: کافیست یک ساب دامین ساخته سپس تمامی فایلهایی که GTMetrix در این بخش نشان می دهد را به این ساب دامین منتقل کنید و لینک آنها را از طرف ساب دامین فراخوانی کنید. با این کار فشار از دامنه اصلی کاسته می شود.
چنانچه از سیستم مدیریت محتوای وردپرس استفاده می کنید می توانید با استفاده از افزونه autoptimize بسیاری از مشکلات مذکور را به راحتی حل کنید.
پایان آموزش بهینه سازی سایت در gtmetrix
