در این آموزش قصد دارم، به معرفی نحوه رفع ارور Make fewer HTTP requests در Yslow جی تی متریکس بپردازم. که با استفاده از این آموزش میتونید، تعداد درخواست‌های HTTP که در سایت وجود دارند. رو کمتر کنید. و با کم شدن هرچه بیشتر این تعداد، درگیر شدن سرور هم کم شده. و در نهایت باعث میشه که سایت شما با سرعت بیشتری در دسترس قرار بگیره.
برای خرید کلاس آنلاین اسکای روم میتوانید در این صفحه اقدام نمایید.
آموزش رفع خطای Make fewer HTTP requests در GTmetrix
وقتی درخواست بازدید از سایت داخل مرورگر زده میشه، مرورگر توسط شرکت ISP که ارائه دهنده اینترنت شماست شروع به یافتن IP سرور میکنه. و بعد از این مرحله هم سایت شما که با دامنه قرار داره این درخواست رو دریافت کرده. و بعد از بررسی درخواست شروع به پاسخ دادن میکنه که در اینجا پاسخ دادن همون لود و ارسال فایل‌هایی هست. که در یک صفحه قرار دارند.
توی این مرحله درخواست به صورت HTTP ارسال میشه. که در مرحله اول صفحه به صورت HTML بارگیری شده. و بعد از کامپایل شدن و بررسی این سند HTML شروع به لود فایل‌ها و محتوای داخلش میکنه. توی این مرحله فایل‌های مختلفی مثل جاوا اسکریپت، css، تصاویر، فونت‌ها و… شروع به لود شدن می‌کنند. که برای هر کدوم از این فایل‌ها درخواستی به سرور ارسال خواهد شد.
خطای Make fewer HTTP requests در GTmetrix
بنابراین میشه نتیجه گرفت که با بالا بودن این تعداد درخواست HTTP «دت لود شدن سایت هم بیشتر میشه و اگر این دیدگاه رو در سطح وسیع‌تری نسبت به تعداد بازدیدکنندگان یک سایت در نظر بگیریم، میشه گفت در یک شبانه روز که چند هزار نفر از سایت بازدید می‌کنند، در مجموع ممکنه تعداد درخواست‌های HTTP از سرور در حد میلیونی باشه که اگر این تعداد درخواست برای هر صفحه بالا باشه، باعث درگیر شدن بیشتر سرور خواهد شد.
برای همین سرور با بالا رفتن تعداد درخواست همزمان دیگه ممکنه نتونه پاسخگو باشه و به مرور که تعداد درخواست همزمان بیشتر هم میشه، سایت کندتر عمل میکنه که اگه همین مسئله اینطوری پیش بره، در نهایت سایت تا زمانی که درخواست‌ها قابل پاسخگو نباشه از دسترس خارج میشه. پس باید کاری کنیم که این تعداد درخواست رو به کمترین حد ممکن برسونیم. و این کار هم با ترفندهایی به کار میره که در ادامه به توضیح هر کدوم می‌پردازم.
1. ادغام کردن فایل‌ها
بهترین روشی که میتونه در سطح خوبی پاسخگو باشه اینه که فایل‌های مشترک رو با هم ادغام کنید. یعنی فایل‌های CSS، JS با همدیگه ترکیب بشن و تا جای ممکن در قالب یک فایل قرار بگیرند. در این صورت به جای اینکه چندین درخواست برای لود کلیه فایل‌های استایل سایت که به صورت CSS هستند ارسال بشه، یک بار این درخواست ارسال شده و از طریق یک فایل کل محتوای مربوط به فایل CSS سایت دریافت میشه.
2. استفاده از Minimize request size
استفاده از این روش هم به این معنی هست که حجم فایل‌ها رو با استفاده از تغییرات کدنویسی یا ابزار آنلاین که وجود دارند به کمترین حد ممکن برسونید. در این صورت فایل‌ها از حجم کمتری برخوردار خواهند بود و زمانی که درخواستی برای لود فایل ارسال میشه نسبت به حجم اولیه سریعتر لود شده و سرور میتونه بعد از اینکه فایل رو به صورت کامل در اختیار مرورگر قرار داد به دنبال درخواست‌های دیگه بره.
3. استفاده از Combine images using CSS sprites
اگر تعداد تصاویری که در سایت به صورت ثابت هستند و عموما شامل شبکه‌های اجتماعی یا لینک کردن به صفحه خاصی هستند رو بیایم و با ترکیب کردنشون در قالب یک تصویر با استفاده از CSS اونها رو با ساختار بهینه تری نمایش بدیم. تو این حالت وقتی یک تصویر رو نشون میدین میتونید به کمک CSS ناحیه دلخواه رو برای نمایش تصاویر کوچکتر مشخص کنید تا سایر بخش‌ها مخفی باشند.
4. استفاده از کش سایت
استفاده از کش هم میتونه انتخاب خوبی باشه تا برای مدت زمانی که مشخص می‌کنید دیگه هر درخواستی که برای فایل‌ها ارسال میشه به جای لود مستقیم از طریق سرور، از حافظه کش شده مرورگر کاربر دریافت بشه. در این صورت تا زمانی که فایل‌ها به صورت کش شده در سیستم کاربران قرار دارند درخواستی برای لود فایل از سرور ارسال نخواهد شد و این مسئله میتونه به بهترین شکل ممکن تعداد درخواست HTTP در سایت رو کم بکنه.
5. استفاده از Inline small CSS and JavaScript
تو این حالت اگر فایل‌های CSS و JS دارید که دارای کدهای کوتاه و حجم کمتری هستند، میتونید به جای استفاده جدا جدا اونها رو با هم ادغام کنید. و یا اینکه به صورت درون خطی تو هر بخش از سایت که بهشون نیاز دارید استفاده کنید. به عنوان نمونه ممکنه شما در یک برگه خاص مثل صفحه فرو از کدهای CSS و JS استفاده کنید که تو هیچ صفحه دیگه‌ای از سایت بهشون نیازی ندارید. بنابراین میتونید این کدها رو مستقیما داخل همون صفحه وارد کنید. در این صورت دیگه فایل‌های استایل و جاوا اسکریپت که به صورت ثابت هستند حجم بالایی نخواهند داشت.
🌸Make fewer HTTP requests🌸
6. لود فایل‌ها JS در فوتر
وقتی وارد سایتی میشید که از جاوا اسکریپت استفاده کرده، مرورگر باید همه فایل‌های JS رو بخونه و بعد از اجرا کردنشون بر اساس کدنویسی که این فایل‌ها دارند. سایت رو به شما نشون بده. تو برخی موارد سایت‌ها به کمک همین جاوا اسکریپت سعی می‌کنند. تغییراتی رو در فایل‌های استایل بدن که در این صورت اگه فایل جاوا اسکریپت زودتر لود شده باشه. برای اجرای دستوراتی که بهش محول شده باید فایل CSS زودتر از اون لود شده باشه. در غیر این صورت این کار به درستی انجام نمیگیره. و بعد از لود فایل css فایل جاوا اسکریپت باز ممکنه از سرور درخواست بشه. تا دستوری که برای تغییر فایل‌های استایل داره. رو اجرا بکنه که این حالت باعث دو بار درخواست HTTP برای فایل جاوا اسکریپت خواهد شد.
7. استفاده از Serve resources from a consistent URL
این کار هم زمانی اتفاق میفته که شما یک فایل رو از طریق دو آدرس استفاده کنید. معمولا تو این حالت فایل‌های css و JS قرار دارند. که در انتهای آدرس فایل‌ها ?ver= قرار داره و برای اینکه بتونید درخواست‌های تکراری رو برطرف کنید. باید این حالت رو در سایت غیرفعال کنید. که برای این کار کافیه روی دکمه زیر کلیک کرده. و از مقاله مرتبط با این کار استفاده کنید.
8. استفاده از Enable Keep Alive
فعال نبودن Keep Alive به این معنی هست که سرور شما طوری کانفیگ شده. که در هر لحظه فقط به یک درخواست برای فایل‌های یکسان پاسخ خواهد داد. این کار کاملا اشتباه هست و باعث میشه که مدت زمان لود سایت شدیدا افزایش پیدا بکنه. که برای رفع این خطا باید کاری کنید که فایل‌های یکسان مثل CSS و JS به صورت همزمان شروع به لود شدن بکنند. یک فایل منتظر نباشه که فایل قبلی لود شده و بعد از اون شروع به لود شدن بکنه.
برای سفارش طراحی سایت به این لینک مراجعه کنید.
9. استفاده از CDN
اگر بازدید یک سایت خیلی بالا بره و همچنان هم تعداد درخواست HTTP که از سایت میشه زیاد باشه، باعث میشه که سرور با کندی مواجه بشه و شما هم مجبور هستید. که مدام در حال ارتقا دادن سرور باشید. بنابراین بهتره که از CDN استفاده بکنیم و فایل‌های JS، CSS، تصاویر و فونت‌ها که عموما دلیل اصلی برای بالا بودن تعداد درخواست هستند. رو از طریق شبکه توزیع محتوا CDN به بازدیدکننده ارائه کنیم. استفاده از این کار باعث میشه بیش از 40 درصد از درخواست‌های یک سایت رو کمتر کنید.
10. استفاده از لود تنبل برای تصاویر و صفحات
وقتی هنوز اسکرولی صورت نگرفته و به محتوایی در یک صفحه نیست. چرا باید سرور رو درگیر پاسخ به این درخواست بکنیم؟ استفاده از لود تنبل یا lazy load باعث میشه که فقط زمانی فایل‌ها و درخواست‌ها پاسخ داده بشن که درخواستی براشون ارسال بشهو تو این حالت درخواست از طریق اسکرول کردن ارسال میشه و به محض اینکه به ناحیه‌ای که تصویر در اون قرار داره اسکرول کنید بعد از چند لحظه تصویر مورد نظر لود میشه و قبل از لود شدن هم با جای خالی نشون داده خواهد شد. استفاده از این روش میتونه برای سایت‌هایی که تصاویر و فایل‌های زیادی رو در یک صفحه قرار میدن مفید باشه