بهینه سازی سایت با GTMetrix (بخش دوم )

امتیاز کاربران

ستاره غیر فعالستاره غیر فعالستاره غیر فعالستاره غیر فعالستاره غیر فعال
 

به قسمت دوم آموزش بهینه‌سازی PageSpeed سایت با GTMetrix خوش اومدین

همون‌طور که قول داده بودم تو این قسمت بخش PageSpeed واقع در قسمت Breakdown رو با هم بررسی می‌کنیم.

بخش PageSpeed شامل عناوین مختلفی هست که هر کدوم اطلاعاتی در رابطه با بخش خاصی از سایت و بررسی‌هایی که بر روی اون قسمت انجام شده رو در خودش جا داده که تک تک اونها رو بررسی می‌کینم.

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

PageSpeed : 

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

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

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

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

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

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

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

facebook-sprites

با این کار الان به جای دو تا عکس یدونه عکس دارم که باید لود شه و هم حجم این عکس ترکیب شده از دو تا عکس بالا کمتر خواهد بود. خوب الان برای استفاده از این تصویر به جای دو تصویر بالا کافیه به این شکل عمل کنید:

<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 مقابل هر آدرس، آدرسی برای دریافت کدهای بهینه شده رو هم بهتون میده، که بهتره از فایل‌هاتون یک بکاپ بگیرین و بعد این نسخه‌های بهینه شده رو جای‌گزین اونها کنین.

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

بخش اول آموزش بهینه سازی PageSpeed سایت با GTMetrix