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

5/5 - (1 امتیاز)

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

gtmetrix

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

YSlow :

آموزش کامل gtmetrix - جی تی متریکس

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

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

5/5 - (1 امتیاز)

کانال تلگرام ماندگار وب

  1. امیر خلجی مهر

    هر 5 قسمت کامل و بسیار مفید
    خسته نباشین علی جان

    1. MONJE

      ممنون

  2. مجید

    بسیار عالی کامل
    متشکر هستم من هروز از روی پیشخوان نگاه میکنم ببینم مطلب جدید گذاشتید یا نه

  3. فاطمه قنبری

    ممنون از سایت بسیار خوبتون

  4. علیرضا

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

  5. درب اتوماتیک

    ممنون از سایت بسیار خوبتون.

  6. غریبه

    بی نظیر بود دوست من

  7. خسرو

    بسیار کاربردی، سپاس بیکران از شما

  8. یک جوان

    یه چیزی که گیجم کرده این هست که مربوط به گزینه Compress components with gzip هس توی قسمت page speed زده 99درصد ولی توقسمت yslow کاملا صفرهست ولینک یه سری از تصاویر مربوط به شاخص وبلاگ به همره لوگو رو بهم داده
    همه این تصاویر روقبل از اپلودتوفتوشاپ بااون قسمتی که تصاویر روبرای وب بهینه میکنن بهینه کردم وحجمش مناسب شده ولی بازم روی f این قسمت ایستاده علتش چیه؟

    1. یک جوان

      اینم لینک تست من gtmetrix.com/reports/1javan.com/HU71eJnE

      1. یک جوان

        مطمئن هستم که قابلیت gzipهم فعاله توچندتاسایت تست کردم مشکلی نداره

        1. MONJE

          سلام دوست عزیز
          مشکلی که فرمودین هیچ ارتباطی با قابلیت gzip نداره. فقط تفاوت بین الگوریتم های گوگل و یاهو رو نشون میده. من بعضی از تصاویر ارائه شده توسط اون قسمت رو با سرور یاهو تست کردم و نتیجه این شد که با سرورهای یاهو بهینه سازی بیشتری روی تصاویر شما انجام میشه و حجم اونها کمتر خواهد بود در حالی که گوگل این حد از فشرده سازی رو لازم نمیدونه.
          به هر حال، برای رفع این مشکل افزونه WP Smush.it رو نصب کنید سپس از بخش رسانه ها وارد بخش Bulk WP Smush.it شده و دکمه رو Run all my images through WP Smush.it right now کلیک کنید، بدین ترتیب حجم تصاویری که تا الان آپلود کردین کمتر خواهد شد ( کمی زمان بر است ) و از این به بعد نیز بیشتر وقتها اتوماتیک هنگام آپلود عکس این کار انجام میشه ولی اگر هم نشد هرزگاهی سری به بخش رسانه ها بزنید خودتون متوجه خواهید شد که عکسی امکان کاهش حجم داره یا خیر.

  9. فرنام

    بسیار عالی بود دوست عزیز

  10. siavash

    سلام
    من Page Speed Grade سایتم رو با استفاده از اموزش های شما از D به B 86درصد ارتقا دادم.
    ممنونم ازتون
    یه سوال دارم:
    با ارتقا دادن این گزینه ورودی گوگل برای سایت تا چه حدی افزایش پیدا میکنه؟
    این ارتقا چقدر اهمیت داره و تاثیر گذاره

    1. siavash

      کسی جواب نمیده؟

      1. امیر خلجی مهر

        دوست خوبم صبور باشین، نویسنده اگر آنلاین بشه حتماً به دیدگاهتون پاسخ میده

    2. MONJE

      سلام
      اصولا گفته میشه یک سمت از سئو سایت مربوط به سرعت بارگذاری سایت هست، سرعت بارگذاری سایت نقش بسزایی در جذب رضایت کاربر خواهد داشت. که به همین علت هم موتورهای جستجو اهمیت ویژه ای به این مفهوم قائل هستند، بلخص گوگل.
      هر چه سرعت بارگذاری سایت بالا باشه روبوت های خود گوگل هم رغبت بیشتری برای برای کاوش سایت شما خواهند داشت ( اصولا یک زمان حداکثری برای هر سایت موقع کاوش در نظر گرفته میشه).
      در هر حال به سرعت بارگذاری سایتتون اهمیت قائل بشین.

  11. pouya

    سلام من فقط میتونم بگم خسته نباشید سایتم eبود بعد از خوندن مطلاب شما شدaممنونم

  12. رامين

    سلام.
    ممنونم خيلي عالي بود لذت بردم
    در پناه حق

  13. تالار نت

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

  14. حسین

    سلام
    ممنون مطالب خوبی هستند.
    یک سوال
    در صورتی که بخوایم کوکی مربوط به یک دامنه را اضافه کنیم به چه صورت امکانش هست؟ (در مورد قسمت Use cookie-free domains)

    1. امیر خلجی مهر

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

  15. قربانی

    بسیار عالی و مفید بود تشکر

  16. س.ف

    سلام
    ممنون از مطالب مفیدتون

  17. نیما

    کمک فوری..
    سلام داداش من برای
    Use cookie-free domains
    ساب دامین رو که فرمودی انجام دادم
    ولی تو سایت gtmetrix در YSlow
    تو قسمت
    Use cookie-free domains
    هنوز هم برای عکس هام ارور میده!!
    عکس جدید هم آپ کردم “تو ساب دومین میره” اما همچنان توی
    Use cookie-free domains
    ارور دریافت میکنم

    1. امیر خلجی مهر

      درود نیما جان
      نویسنده‌ی این نوشته در دسترس نیستند، لطفا در انجمن مطرح کنید.

  18. علی

    سلام
    اول از همه بگم آموزش هاتون فوق العاده بودن همه 5 قسمت رو من مشاهده کردم و خیلی کمکم کرد
    با راهنمایی های شما من تونستم PageSpeed Score رو به (94%)A و YSlow Score رو به (86%)B تغییر بدم
    این اعداد و ارقام باید خوب باشن ولی تو قسمت Page Load Time سرعت سایت رو بسیار بالا نشون میده ( 21.0s )
    به نظرتون مشکل از چیه ؟
    چطور میتونم این زمان رو کاهش بدم ؟
    با تشکر

    1. امیر خلجی مهر

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

دیدگاه‌ها بسته شده‌اند.

ماندگار وب - 1400