یکی از خطاهایی که موقع تست سرعت سایت با GTmetrix باهاش مواجه میشیم خطای Make fewer HTTP requests در Yslow جی تی متریکس هست که مربوط به بالا بودن تعداد درخواست‌های HTTP است. همونطور که از معنای لغوی این خطا مشخص هست، اگر با این خطا مواجه شدید به این معنی هست که تعداد درخواست برای لود فایل‌های مختلف مثل png.، css.، js و… که در سایت استفاده می‌کنید زیاد هست.
هر فایلی که در هر صفحه استفاده می‌کنید برابر با یک درخواست هست که برای لود اون به سرور ارسال میشه و اگر این تعداد درخواست‌ها در حد معمولی نباشند و به تعداد زیاد از سرور درخواست بشه، باعث میشه که در تعداد بازدید بالای سایت به مشکل بخورید و با کندی سرعت مواجه بشید.
در این آموزش قصد دارم به معرفی نحوه رفع ارور Make fewer HTTP requests در Yslow جی تی متریکس بپردازم که با استفاده از این آموزش میتونید تعداد درخواست‌های HTTP که در سایت وجود دارند رو کمتر کنید و با کم شدن هرچه بیشتر این تعداد، درگیر شدن سرور هم کم شده و در نهایت باعث میشه که سایت شما با سرعت بیشتری در دسترس قرار بگیره.
آموزش رفع خطای Make fewer HTTP requests در GTmetrix
وقتی درخواست بازدید از سایت داخل مرورگر زده میشه، مرورگر توسط شرکت ISP که ارائه دهنده اینترنت شماست شروع به یافتن IP سرور میکنه و بعد از این مرحله هم سایت شما که با دامنه قرار داره این درخواست رو دریافت کرده و بعد از بررسی درخواست شروع به پاسخ دادن میکنه که در اینجا پاسخ دادن همون لود و ارسال فایل‌هایی هست که در یک صفحه قرار دارند.
توی این مرحله درخواست به صورت HTTP ارسال میشه که در مرحله اول صفحه به صورت HTML بارگیری شده و بعد از کامپایل شدن و بررسی این سند HTML شروع به لود فایل‌ها و محتوای داخلش میکنه. توی این مرحله فایل‌های مختلفی مثل جاوا اسکریپت، css، تصاویر، فونت‌ها و… شروع به لود شدن می‌کنند که برای هر کدوم از این فایل‌ها درخواستی به سرور ارسال خواهد شد.
بنابراین میشه نتیجه گرفت که با بالا بودن این تعداد درخواست 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 استفاده کنید که تو هیچ صفحه دیگه‌ای از سایت بهشون نیازی ندارید. بنابراین میتونید این کدها رو مستقیما داخل همون صفحه وارد کنید. در این صورت دیگه فایل‌های استایل و جاوا اسکریپت که به صورت ثابت هستند حجم بالایی نخواهند داشت.
6. لود فایل‌ها JS در فوتر
وقتی وارد سایتی میشید که از جاوا اسکریپت استفاده کرده، مرورگر باید همه فایل‌های JS رو بخونه و بعد از اجرا کردنشون بر اساس کدنویسی که این فایل‌ها دارند سایت رو به شما نشون بده. تو برخی موارد سایت‌ها به کمک همین جاوا اسکریپت سعی می‌کنند تغییراتی رو در فایل‌های استایل بدن که در این صورت اگه فایل جاوا اسکریپت زودتر لود شده باشه، برای اجرای دستوراتی که بهش محول شده باید فایل CSS زودتر از اون لود شده باشه.
در غیر این صورت این کار به درستی انجام نمیگیره و بعد از لود فایل css فایل جاوا اسکریپت باز ممکنه از سرور درخواست بشه تا دستوری که برای تغییر فایل‌های استایل داره رو اجرا بکنه که این حالت باعث دو بار درخواست HTTP برای فایل جاوا اسکریپت خواهد شد.
بنابراین بهتره فایل‌ها رو در جایی لود کنیم که در آخرین لحظه از سرور درخواست خواهند شد که بهترین مکان برای این کار فوتر سایت هست که میتونید لود فایل‌های JS رو در آخرین مرحله بارگزاری سایت انجام بدین.
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 باعث میشه که فقط زمانی فایل‌ها و درخواست‌ها پاسخ داده بشن که درخواستی براشون ارسال بشهو تو این حالت درخواست از طریق اسکرول کردن ارسال میشه و به محض اینکه به ناحیه‌ای که تصویر در اون قرار داره اسکرول کنید بعد از چند لحظه تصویر مورد نظر لود میشه و قبل از لود شدن هم با جای خالی نشون داده خواهد شد. استفاده از این روش میتونه برای سایت‌هایی که تصاویر و فایل‌های زیادی رو در یک صفحه قرار میدن مفید باشه.
امیدوارم که این آموزش هم مورد توجه و پسند شما قرار گرفته باشه و با استفاده ازش تونسته باشید اقدام به رفع خطای Make fewer HTTP requests در جی تی متریکس بکنید. در صورتی که در رابطه با این آموزش سوال یا مشکلی دارید در بخش دیدگاه‌ها اعلام کنید.
