بهینه سازی با GTMetrix یکی از ابر جستجوهای وب‌مستران ایرانی تو گوگل هست

آموزش بهینه سازی سایت با GTMetrix – بخش دوم

PageSpeed : 

Combine images using CSS sprites : ادغام یا ترکیب تصاویر موجود در فایل استایل سایت

GTMetrix تو این قسمت لیست تصاویری که ابعاد کوچکی دارن یا حجم اونها خیلی پایین هست رو به شما نشون میده و میگه با قابلیت sprites که در CSS وجود داره این تصاویر رو ادغام کنید و به عنوان یک تصویر واحد از اون استفاده کنید.

یکی از مزیت‌های این کار کاهش requestهایی هست که به سرور ارسال میشه و در نتیجه افزایش سرعت سایت وردپرسی شما.

من یه نمونه کوتاه از این ادغام تصاویر رو خدمت دوستان توضیح میدم:

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

<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>

نکته : این کار رو برای تصاویری که به صورت repeat شده به عنوان پترن استفاده می‌کنید قابل استفاده نیست.

Specify image dimensions : قرار دادن مقدار برای طول و عرض تصاویر

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

اگه روی عنوان این بخش کلیک کنید و اطلاعات داخل اون رو ببینید، تماشا میکنین تو هر سطر یدونه آدرس عکس هست و جلوش یه چنین چیزی “(Dimensions: 10 x 10)” نوشته شده. مقدار اولی همون width و مقدار دومی هم height مربوط به هر تصویر هست. برای اینکه این مقادیر رو به هر تصویر اختصاص بدین کافیه ابتدا محل بارگزاری اون عکس رو تو قالب وردپرس بدست بیارین و بعد بهش مقدار بدین به این شکل:

<img src="/لینک" alt="توضیح" width="10" height="10" />

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

Defer parsing of JavaScript : تاخیر در بارگزاری فایلهای جاوا اسکریپت

به شخصه توصیه می‌کنم زیاد پیگیر این بخش نشید، چون آخرش مجبورتون میکنه همه کدهای جاوا اسکریپت رو از سایتتون پاک کنید تا 100 درصد بشه.

اگه مایلید می‌تونید از یکی از روش‌های زیر موقع فراخوانی فایل‌های جاوا اسکریپت استفاده کنید. ( نام فایل java.js)

روش اول :

<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>

نکته : البته هر دو این روش ها بعضی مواقع باعث جلوگیری از لود فایل جاوا اسکریپت شما میشه.

Optimize images : بهینه سازی حجم تصاویر

100 درصد کردن این بخش کاری نداره ولی فقط یکم زیادی وقت گیره.

تو شکل بالا ابتدا پیش از آدرس عکس‌ها به شما میگه که اگه تصاویر قرار گرقته در این بخش رو Optimize کنید، در کل 21 درصد از حجمشون یعنی حدود 21.6 کیلوبایت کم میشه. حالا همینطور که تماشا میکنین یه آدرس عکس قرار داده بعد نوشته بعد از بهینه سازی چقدر از حجمش کم میشه و در نهایت خودش یه نسخه بهینه شده عکس رو به صورت optimized version در اختیار شما قرار میده که میتونین اون رو دانلود کنید و با همون عکس تو هاست خودتون جای‌گزین کنین تا بهینه بشه.

اگه از سیستم وردپرس استفاده میکنین برای اینکه این کار به صورت اتوماتیک انجام شه میتونین از افزونه Smush.it استفاده کنین. یا از سایت هایی مثل ysmush.it برای بهینه سازی تصاویر قبل از آپلود استفاده کنین.

Prefer asynchronous resources : ناهماهنگی در فراخوانی فایلهای جاوا اسکریپت

GTMetrix تو این قسمت فایل‌های جاوا اسکریپتی که باعث ایجاد ناهماهنگی بین فایلهای جاوا اسکریپت میشه رو نشون میده. برای حل این مشکل کافیه لود اون هارو به تعویق بندازین.

Minify HTML : کاهش حجم کدهای HTML

تو این بخش از شما خواسته شده با حذف بخش‌های اضافی مثل توضیحات و یا فاصله‌ها حجم کدهای HTML. البته خودش یه نمونه کد بهتون میده که نباید در سایت‌هایی که از وردپرس و یا هر سیستم مدیریت محتوای دیگه‌ای استفاده میکنن استفاده کنن. چون این کد بهینه شده بعد از کامپایل ایجاد شده و تنها یک صفحه ایستا هست. برای اینکار بهترین روش به صورت دستی هست ولی کلا توصیه نمیشه برای سایت‌هایی که در سمت سرور کامپایل میشن این کار رو انجام داد.

Minify CSS و Minify JavaScript : کاهش حجم کدهای JavaScript و CSS

این مورد هم مثل مورد بالا با حذف بخش توضیحات و همچنین فاصله‌های اضافی این کار رو انجام میده. درسته در نهایت کدها به نظر به هم ریخته میان ولی اینطور نیست.

خود GTMetrix در بخش optimized version مقابل هر آدرس، آدرسی برای دریافت کدهای بهینه شده رو هم بهتون میده، که بهتره از فایل‌هاتون یک بکاپ بگیرین و بعد این نسخه‌های بهینه شده رو جای‌گزین اونها کنین.

• قبلی
• بعدی