آموزش بهینه سازی PAGESPEED سایت با GTMETRIX (قسمت دوم)

خانه / آموزشی / آموزش بهینه سازی PAGESPEED سایت با GTMETRIX (قسمت دوم)

آموزش بهینه سازی PAGESPEED سایت با GTMETRIX (قسمت دوم)

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

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

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

gtmetrix-logo

PageSpeed :

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

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

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

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

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

.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 : تاخیر در بارگزاری فایلهای جاوا اسکریپت

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

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

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

gtmetrix_3

تو شکل بالا ابتدا قبل از آدرس عکس ها به شما میگه که اگه تصاویر قرار گرقته در این ببخش رو Optimize کنید، در کل ۲۱ درصد از حجمشون یعنی حدود ۲۱٫۶ کیلوبایت کم میشه. حالا همینطور که مشاهده میکنین یه آدرس عکس قرار داده بعد نوشته بعد از بهینه سازی چقدر از حجمش کم میشه و در نهایت خودش یه نسخه بهینه شده عکس رو به صورت optimized version در اختیار شما قرار میده که میتونین اون رو دانلود کنید و با همون عکس تو هایت خودتون جایگزین کنین تا بهینه بشه.

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

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

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

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

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

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

minify-css-and-js (1)

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

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

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

نظرات

وب سایت شرکتی آترد