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

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

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

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

PageSpeed : 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

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

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

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

 

 
·  نظر دهی 
· اشتراک گذاری :


برچسب ها   :





کلمات کلیدی
کلمات کلیدی :
رو ,
تک ,
هست ,
CSS ,
اون ,
روی ,
کار ,
دو ,
عکس ,
لود ,
حجم ,
جای ,
شکل ,
طول ,
عرض ,
یه ,
روش ,
زیر ,
دوم ,
images ,
ولی ,
قبل ,
کم ,
شه ,
HTML ,
چون ,
کد ,
مثل ,
حذف ,
بک ,
یکم ,





برای ارسال نظر ‎‏ ، همین امروز در وب سایت رایان طبیب ثبت نام کنید.

ورود


مقالات طراحی سایت

مقالات سئو و بهینه سازی سایت

مقالات علمی

کلیه حقوق متعلق به رایان طبیب می باشد.
طراحی سایت،بهینه سازی سایت،طراحی وب سایت،بهینه سازی وب سایت،سئو,صابر فضلی احمدی,Saber Fazli Ahmadi
طراحی سایت حرفه ای،طراحی وب،طراحی وب سايت،فروشگاه،بهینه سازی،طراحی وب سایت،سئو,صابر فضلی احمدی,Saber Fazli Ahmadi
طراحی و توسعه سایت رایان طبیب | 2018 ©