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

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

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

YSlow :

نتایج قرار گرفته تو این بخش در حقیقت نتایج بررسی‌هایی هستند که این بار با در نظر گرفتن الگوهای سایت یاهو، روی سایت شما انجام شده.

Use a Content Delivery Network (CDN) : فعال کردن قابلیت CDN

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

اما چون ما تو تحریم هستیم و سرعت بارگزاری سرورهای خارج از کشور به دلیل محدودیت‌های تحریم‌ها و همچنین خود فیلترینگ داخلی چندان تفاوتی با هم ندارن و هم چون تا حالا سروری برای استفاده از قابلیت CDN در داخل کشور هم نبوده (شایدم بوده و من اطلاع ندارم) برای ماهایی که بالای 80 یا 90 درصد بازدید سایتمون از داخل کشور هست اهمیت نداره و در بعضی مواقع هم دیده شده که حتی سرعت بارگزاری سایت رو هم کم کرده. پس زیاد به خودتون برای استفاده از این روش فشار نیارید. تو وردپرس برای اینکار افزونه‌های وردپرس زیادی وجود دارن که با یه جستجوی خیلی ساده تو گوگل می‌تونید به لیست بلند بالای عناوین اونها دسترسی داشته باشین، البته یادتون باشه بیشتر این افزونه‌های وردپرس از سرورهای پولی استفاده میکنن و شما باید مبلغی رو برای استفاده پرداخت کنید.

Make fewer HTTP requests : ترکیب فایل‌های مشابه

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

Add Expires headers : تعیین زمان برای فایل‌های کش شده

این گزینه برابر با گزینه “Specify a cache validator” تو بخش PageSpeed هست.

Configure entity tags (ETags) : پیکربندی E Tag ها

تا جایی که من اطلاع دارم راه اندازی چندین سرور با استفاده از تنظیمات E Tag می‌تواند سبب جلوگیری از بروز خطای 304 بشه. این کار به صورت دستی خیلی دشواره ولی افزونه w3 total cach تا حدودی این کار رو تو وردپرس انجام میده. البته باز برای ما ایرانی ها کاربرد نداره!

Compress components with gzip : فعال کردن و استفاده از قابلیت gzip

این گزینه برابر با گزینه “Enable gzip compression” تو بخش PageSpeed  هست.

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

این گزینه برابر با گزینه “Minify CSS” و “Minify JavaScript” تو بخش PageSpeed  هست.

Reduce DNS lookups : کاهش تعداد درخواست‌های DNS lookups

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

نکته : DNSlookup ها باعث افزوده شدن یک تاخیر به درخواست‌های اولیه ارسالی بسوی یک میزبان (سرور) رو در پی داره که میشه گفت ارسال درخواست به سمت تعداد زیادی از میزبان‌های مختلف سبب کاهش کارایی یک وب‌سایت هست.

Avoid empty src or href : خالی نبودن مقدار برای صفات href و src

این گزینه سعی داره بهتون بگه وقتی از تگهایی مثل a یا img تو کدهاتون استفاده کردین مقدار صفت لینک و یا مقدار آدرس اونها رو بدون مقدار رها نکنید یا فاصله ندین مثل ” ” ، بلکه اگه احتیاجی بهش ندارین اون رو حذف کنین با داخلش یه آدرس معتبر بذارین، با این کار مشکل این بخش حل میشه.

Avoid URL redirects :  کم کردن ریدایرکت های سایت

این گزینه تقریبا برابر با گزینه “Minimize redirects” تو بخش PageSpeed  هست. بهترین روش حلش این هست برین تو کدها بین لینک ها بگردین و هر آدرسی رو که صفحه رو به آدرس جدیدی ریدایرکت میکنه حذف کنین. یا اینکه می تونین برای لینک هاتون target=”_blank” رو قرار بدین تا در صفحه جدید باز بشن مثل کد زیر ( البته این روش بعضی جاها جواب نمیده و باز بهتون ایراد میگیره) :

<a href="Link" target="_blank">عنوان</a>

Make AJAX cacheable : کش کردن AJAX

اگه شما هم برای اینکه از لود کردم مداوم صفحه برای بارگزاری اطلاعات خسته شدین و رو به استفاده از AJAX تو جی کوئری آوردین و به کمک اون اطلاعات رو فراخوانی میکنین، این گزینه به شما میگه این کدها رو هم در کش مرورگر کاربر ذخیره کنید تا سرعت سایتتون بالاتر بره.

Put CSS at the top : انتقال فراخوانی‌های استایل به بالاترین حد ممکن

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

Put JavaScript at bottom : انتقال فراخوانی‌های جاوا اسکریپت به پایین‌ترین حد ممکن

این گزینه برعکس گزینه بالا میگه فایل‌های جاوا اسکریپت رو به پایین ترین مکان یعنی بالای تگ </html> منتقل کنین. این باعث میشه ابتدا سایت بارگزاری بشه بعد بره سراغ فایلهای جاوا اسکریپت پس یادتون باشه اگه این کار به شمای کلی سایتتون صدمه نمیزنه حتما این کار رو انجام بدین.

Remove duplicate JavaScript and CSS : حذف موارد تکرای از JavaScript و CSS

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

Avoid AlphaImageLoader filter : عدم استفاده از فیلتر AlphaImageLoader

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

Avoid HTTP 404 (Not Found) error : حذف لینک‌هایی که به خطای 404 میرسند

شاید شما تو سایتتون از تصاویر یا فایل‌هایی استفاده کردین که به مرور زمان این فایل‌ها یا تصاویر از سرور پاک شدن حالا به هر دلیلی. GTMetrix با این گزینه به شما گوشزد میکنه یا این لینک هارو حذف کنین یا بروزرسانی کنین.

Reduce the number of DOM elements : کم کردن عناصر DOM در جاوا اسکریپت

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

Do not scale images in HTML : عدم تغییر اندازه تصاویر با HTML

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

Reduce cookie size و Use cookie-free domains : کاهش حجم کوکی

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

Use GET for AJAX requests : تعریف درخواست های AJAX به صورت GET

تو این گزینه به شما میگه اگه از آجاکس استفاده کردین و درخواستی رو ارسال میکنین این درخواست هارو با متد GET ارسال کنین.

Avoid CSS expressions : عدم استفاده از عبارات CSS برای بهبود سازگاری با مرورگرها

GTMetrix اینجا اخطار میده که از عباراتی که در CSS برای بهبود سازگاری با مرورگر ها بلخص IE وجود دارن استفاده نکنین. این کار علاوه بر افزایش حجم، بعضی خطرات امنیتی رو هم به دنبال داره.

Make favicon small and cacheable : درج favicon برای سایت

این گزینه میگه بهتره برای سایتتون یک آیکن در نظر بگیرین (16*16) تا به عنوان یه نماد کوچیک برای سایتتون در مرورگر نمایش داده بشه و همچنین میگه اون رو در کش مرورگر هم ذخیره کنین تا در هر صفحه دوباره لود نیشه.

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

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

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

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

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

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