یکی از خطاهایی که هنگام بررسی سرعت سایت با 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 از سرور در حد میلیونی باشد. اگر این تعداد درخواست برای هر صفحه بالا باشد، باعث درگیر شدن بیشتر سرور خواهد شد. به همین دلیل، با افزایش تعداد درخواستهای همزمان، سرور ممکن است دیگر نتواند پاسخگو باشد و به تدریج که تعداد درخواستهای همزمان بیشتر میشود، سایت کندتر عمل میکند. اگر این مسئله ادامه یابد، در نهایت سایت تا زمانی که درخواستها قابل پاسخگویی نباشد، از دسترس خارج میشود. بنابراین، باید تعداد درخواستها را به کمترین حد ممکن برسانیم و این کار با استفاده از ترفندهایی انجام میشود که در ادامه به توضیح هر کدام خواهم پرداخت.
۱٫ ادغام کردن فایلها
بهترین روشی که میتونه در سطح خوبی پاسخگو باشه اینه که فایلهای مشترک رو با هم ادغام کنید. یعنی فایلهای CSS، JS با همدیگه ترکیب بشن و تا جای ممکن در قالب یک فایل قرار بگیرند. در این صورت به جای اینکه چندین درخواست برای لود کلیه فایلهای استایل سایت که به صورت CSS هستند ارسال بشه، یک بار این درخواست ارسال شده و از طریق یک فایل کل محتوای مربوط به فایل CSS سایت دریافت میشه.
۲٫ استفاده از Minimize request size
استفاده از این روش هم به این معنی هست که حجم فایلها رو با استفاده از تغییرات کدنویسی یا ابزار آنلاین که وجود دارند به کمترین حد ممکن برسونید. در این صورت فایلها از حجم کمتری برخوردار خواهند بود و زمانی که درخواستی برای لود فایل ارسال میشه نسبت به حجم اولیه سریعتر لود شده و سرور میتونه بعد از اینکه فایل رو به صورت کامل در اختیار مرورگر قرار داد به دنبال درخواستهای دیگه بره.
۳٫ استفاده از Combine images using CSS sprites
اگر تعداد تصاویری که در سایت به صورت ثابت هستند و عموما شامل شبکههای اجتماعی یا لینک کردن به صفحه خاصی هستند رو بیایم و با ترکیب کردنشون در قالب یک تصویر با استفاده از CSS اونها رو با ساختار بهینه تری نمایش بدیم. تو این حالت وقتی یک تصویر رو نشون میدین میتونید به کمک CSS ناحیه دلخواه رو برای نمایش تصاویر کوچکتر مشخص کنید تا سایر بخشها مخفی باشند.
۴٫ استفاده از کش سایت
استفاده از کش هم میتونه انتخاب خوبی باشه تا برای مدت زمانی که مشخص میکنید دیگه هر درخواستی که برای فایلها ارسال میشه به جای لود مستقیم از طریق سرور، از حافظه کش شده مرورگر کاربر دریافت بشه. در این صورت تا زمانی که فایلها به صورت کش شده در سیستم کاربران قرار دارند درخواستی برای لود فایل از سرور ارسال نخواهد شد و این مسئله میتونه به بهترین شکل ممکن تعداد درخواست HTTP در سایت رو کم بکنه.
۵٫ استفاده از Inline small CSS and JavaScript
تو این حالت اگر فایلهای CSS و JS دارید که دارای کدهای کوتاه و حجم کمتری هستند، میتونید به جای استفاده جدا جدا اونها رو با هم ادغام کنید و یا اینکه به صورت درون خطی تو هر بخش از سایت که بهشون نیاز دارید استفاده کنید. به عنوان نمونه ممکنه شما در یک برگه خاص مثل صفحه فرو از کدهای CSS و JS استفاده کنید که تو هیچ صفحه دیگهای از سایت بهشون نیازی ندارید. بنابراین میتونید این کدها رو مستقیما داخل همون صفحه وارد کنید. در این صورت دیگه فایلهای استایل و جاوا اسکریپت که به صورت ثابت هستند حجم بالایی نخواهند داشت.
۶٫ لود فایلها JS در فوتر
هنگامی که وارد سایتی میشوید که از جاوااسکریپت استفاده میکند، مرورگر باید کلیه فایلهای JS را بخواند و پس از اجرای آنها، بر پایه کدنویسی این فایلها، سایت را به شما ارائه دهد. در برخی موارد، سایتها با کمک همین جاوااسکریپت تلاش میکنند تغییراتی را در فایلهای استایل اعمال کنند که در این صورت، چنانچه فایل جاوااسکریپت زودتر لود شده باشد، برای اجرای دستوراتی که به آن محول شده است، باید فایل CSS پیش از آن لود شده باشد. در غیر این صورت، این کار به درستی انجام نمیگیرد و پس از لود فایل CSS، ممکن است فایل جاوااسکریپت دوباره از سرور درخواست شود تا دستوری که برای تغییر فایلهای استایل دارد را اجرا کند که این حالت باعث دو بار درخواست “Make fewer HTTP” برای فایل جاوااسکریپت خواهد شد.
بنابراین، بهتر است فایلها را در جایی لود کنیم که در آخرین لحظه از سرور درخواست خواهند شد. بهترین مکان برای این کار، فوتر سایت است که میتوانید لود فایلهای JS را در آخرین مرحله بارگذاری سایت انجام دهید.
۷٫ استفاده از Serve resources from a consistent URL
این کار هم زمانی اتفاق میفته که شما یک فایل رو از طریق دو آدرس استفاده کنید. معمولا تو این حالت فایلهای css و JS قرار دارند که در انتهای آدرس فایلها ?ver= قرار داره و برای اینکه بتونید درخواستهای تکراری رو برطرف کنید باید این حالت رو در سایت غیرفعال کنید. که برای این کار کافیه روی دکمه زیر کلیک کرده و از مقاله مرتبط با این کار استفاده کنید.
