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

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

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

سفارش می کنیم که زیاد پیگیر این قسمت نشوید، زیرا در پایان شما را مجبور میکند که همه ی کدهای جاوا اسکریپت را از وبسایتتان حذف کنید تا ۱۰۰% شود.

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

نکته

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

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

GTMetrix در این بخش فایل‌های جاوا اسکریپتی که منجر به ایجاد ناهماهنگی ما بین فایل های جاوا اسکریپت میشود را نمایش می دهد.

برای حل این مشکل کافی است لود آن ها را به عقب بیاندازید.

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

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

یقینا خودش یک نمونه کد به شما می دهد که نباید در وبسایت‌هایی که از وردپرس و یا هر سیستم مدیریت محتوای دیگری بهره گیری میکنند بهره گیری کنند.

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

برای این کار بهترین روند به شکل دستی می باشد اما توصیه نمیشود برای وبسایت‌هایی که در سمت سرور کامپایل میشوند این کار را انجام داد.

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

این مورد هم مانند مورد بالا با حذف قسمت توضیحات و همچنین فاصله‌های اضافی این کار را انجام میدهد.

درست است که در آخر کدها به نظر به هم ریخته هستند اما اینگونه نمی باشد

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