Sokan Academy

Reducing HTTP Requests: آشنایی با تکنیک‌هایی به منظور افزایش سرعت لود وب‌سایت

Reducing HTTP Requests: آشنایی با تکنیک‌هایی به منظور افزایش سرعت لود وب‌سایت

معمولاً هنگام بازدید از یک وب‌سایت، تعدادی ریکوئست از سمت مرورگر به سرور ارسال می‌شود و بسته به وب‌سایت مد نظر، فریمورک‌های مورد استفاده و همچنین لایبرری‌های به کار رفته در آن، تعداد این ریکوئست‌ها متفاوت است اما به طور کلی با کاهش تعداد آن‌ها، به همان نسبت نیز از یکسو سرعت لود وب‌سایت افزایش خواهد یافت و از سوی دیگر بار روی سرور کاهش می‌یابد که در این مقاله قصد داریم تا راه‌کارهایی را به منظور کاهش تعداد ریکوئست‌‌ها ارائه دهیم (به منظور مانیتور کردن سرعت سایت، نکاتی در مقاله‌ای تحت عنوان چگونه با استفاده از Developer Tools گوگل کروم پِرفورمنس وب‌سایت را رصد کنیم؟ ذکر شده که مطالعهٔ آن‌ها در کسب نتایج بهتر در این حوزه، بی‌تأثیر نیست.)

درآمدی بر ارتباط مابین مرورگر و سرور
مجموعه فایل‌های مرتبط با ریسورس‌های مورد نیاز برای لود یک صفحۀ وب که از آن جمله می‌توان به فایل‌های سی‌اس‌اس، جاوااسکریپت یا تصاویر اشاره کرد، برای لود شدن نیاز به زمان دارند و پرفورمنس (عملکرد) یک وب‌سایت به میزان زیادی به حجم این فایل‌ها بستگی دارد. به عبارت دیگر، تک‌تک بایت‌های این فایل‌ها بایستی توسط مرورگر مورد استفادهٔ کاربر دانلود شده و برای ایشان نمایش داده شوند و از همین روی هرچه فایل‌های مذکور حجیم‌تر باشد، دانلود آن در سمت کاربر زمان بیشتری نیاز خواهد داشت.

همچنین هر چیزی که در یک صفحۀ وب دیده می‌شود، با ریکوئستی از جنس HTTP که از سمت مرورگر کاربران برای سرور ارسال می‌گردد، به دست آمده است و نیاز به توضیح نیست که مدیریت این کانکشن‌ها کاری زمان‌بر است و در اغلب موارد، با افزایش تعداد فایل‌های ریسورس، این زمان بیشتر و بیشتر هم می‌شود. به علاوه اینکه مرورگرها در ارسال تعداد ریکوئست‌های هم‌زمان محدودیت‌هایی دارند که در پروسهٔ بهینه‌سازی سایت بایستی در نظر گرفته شوند. برای مثال، فرض کنید برای اینکه صفحه‌ای از سایتی به طور کامل در معرض دید کاربر قرار گیرد، نیاز به 30 ریسورس مختلف شامل فایل‌های سی‌اس‌اس، جاوااسکریپت، تصاویر و غیره دارد که در چنین مواردی مرورگرِ کاربر این ریسورس‌ها را در دسته‌های دو تا هشت تایی دانلود می‌کند و این بدان معنا است که حتی در صورتی که فایل‌های ریسورس حجم کمی داشته باشند، زمان قابل‌توجهی برای دانلود همگی آن‌ها صرف خواهد شد.

ترکیب فایل‌های CSS و JavaScript
معمولاً کدهای CSS و JavaScript در وب‌سایت‌های مدرن امروزی یکسری فریمورک اِکسترنال و لایبرری‌هایی را شامل می‌شوند و در کنار آن‌ها هم کدهای اختصاصی خودِ دولوپر قرار می‌گیرد که گاهی منجر به اصطلاحاً Override شدن کدهای از قبل نوشته شده در این فریمورک‌ها و لایبرری‌ها می‌شود و گاهی هم اسکریپت‌های کاملاً جدیدی هستند. در نهایت، چیزی که ظاهر وب‌سایت را تشکیل می‌دهد، چندین فایل CSS و JS مجزا از هم است.

به‌کارگیری فریمورک‌هایی همچون بوت‌استرپ، جی‌کوئری و غیره، موجب بهبود سرعت توسعۀ وب می‌شود اما نکتۀ قابل‌ذکر، عدم نیاز به فراخوانی و به‌کارگیری همهٔ قسمت‌های فریمورک‌ها و لایبرری‌های مورد استفاده است و چنانچه بتوانیم فایل‌های CSS و JS مورد نیاز خود را در یک فایل تجمیع کنیم، وضعیت بهتری به وجود خواهد آمد.

در واقع، در چنین شرایطی مرورگر تنها با ارسال یک ریکوئست HTTP، تمامی ریسورس‌های مورد نیاز وب‌سایت را دانلود خواهد کرد (به جای اینکه ریکوئست‌های متعددی برای دانلود ریسورس‌های جدا از هم ارسال کند) که در چنین شرایطی، ابزاری تحت عنوان Preprocessor به کار گرفته می‌شود و خبر خوب این که فریمورک‌هایی همچون Django یا Ruby on Rails ابزار Preprocessor را به عنوان تولباکسی درون خود دارند اما در صورت استفاده از سایر فریمورک‌ها، دولوپرها می‌توانند از ابزارهای دیگری همچون CodeKit (برای سیستم‌عامل مَک)، Prepros (برای سیستم‌عامل‌های مک، ویندوز و لینوکس) و یا پلاگین‌هایی مانند Grunt یا Gulp بهره گیرند.

ترکیب تصاویر در CSS Sprite
مشابه آنچه که برای فایل‌های CSS و JavaScript گفته شد، برای تصاویر هم می‌توان از CSS Sprite استفاده کرد. در واقع، به جای آنکه هر تصویر را به صورت جداگانه در صفحۀ مد نظر خود لود کنیم (مسلماً برای لود هر تصویر نیز یک ریکوئست به سرور ارسال خواهد شد)، می‌توانیم آن‌ها را در فایلی تحت عنوان CSS Sprite ترکیب کنیم به طوری که CSS Sprite یک فایل تصویری بزرگ است که مجموعه‌ای از تصاویر کم حجم و کوچک را شامل می‌شود.) برای مثال، می‌توان با کدهای CSS تصویر مد نظر خود را که در CSS Sprite گنجانده شده است، به عنوان تصویر پس‌زمینه انتخاب کرد؛ بنابراین تنها با تنظیم دقیق طول و عرض و مشخصات پس‌زمینه، می‌توان از یک فایل برای نمایش تصاویر مختلف استفاده کرد.

ترکیب تصاویر مختلف در یک فایل، موجب کاهش تعداد فایل‌ها و در نتیجۀ آن موجب کاهش تعداد ریکوئست‌ها می‌شود و این همان هدفی است که در رابطه با فایل‌های CSS و JavaScript نیز به دنبال آن بودیم. در نهایت، تمام این اقدامات افزایش سرعت لود صفحات وب‌سایت را به همراه خواهد داشت اما نکتۀ لازم به ذکر این است که تکنیک CSS Sprite تنها برای تصاویر کوچک نظیر لوگو و آیکان مورد استفاده قرار می‌گیرد و تصاویری با حجم بالا، مانند تصاویر گالری، را بایستی به همان شکل عادی خود در صفحۀ وب لود کنیم چرا که ترکیب و دانلود تصاویر با حجم بالا در یک فایل، ممکن است باعث کِرش کردن مرورگر شود (برای انجام تکنیک CSS Sprite نیز از ابزارهایی نظیر Glue ،SpriteCow ،Stitches و TexturePacker می‌توان استفاده کرد.)

Redirect نکردن صفحات
علاوه بر روش‌های فوق‌الذکر، روش‌های دیگری نیز برای افزایش سرعت لود وب‌سایت وجود دارد که از آن جمله می‌توان به Redirect نکردن صفحات تا حد ممکن اشاره کرد زیرا ریدایرکت کردن یک صفحه، مشابه یک ریکوئست عادی، موجب ارسال ریکوئست به یک یا چند سرور می‌شود و حتی انجام تَسک‌های دیگری مانند ارسال ریکوئست به DNS Server (به منظور تبدیل یک URL به آدرس IP متناظر آن) و برقراری کانکشن TCP نیز زمان بیشتری را خواهد گرفت. بنابراین همیشه می‌بایست مراقب ریدایرکت کردن صفحات باشیم و تا حد امکان از آن اجتناب کنیم (برای مثال، داشتن یک وب‌سایت ریسپانسیو که در همۀ دیوایس‌ها کار کند به مراتب بهتر از آن است که کاربر را برای دیدن نسخۀ موبایلی وب‌سایت خود به آدرس دیگری مانند m.yourdomain.com ارجاع دهیم.)

رفع خطای 404
چنانچه ریسورس‌های مربوط به یک ریکوئست روی سرور یافت نشود، با خطای 404 مواجه می‌شویم و همان‌طور که مشخص است، در جایی که صحبت از ریکوئست باشد بایستی تعداد آن‌ها را به منظور افزایش سرعت وب‌سایت به حداقل برسانیم و از همین روی ریکوئست‌هایی که به خطای 404 ختم می‌شوند را باید بررسی کرده و ارورهای مربوط به آن‌ها را رفع می‌کنیم. برای این منظور، می‌توان از ابزار Developer در مرورگر کروم (در تَبی با عنوان Network) و همچنین در مرورگر فایرفاکس (در ستون Status) استفاده کرد و ریکوئست‌هایی را شناسایی کرد که منجر به خطای 404 می‌شوند.

به طور کلی، با رعایت همین موارد ساده می‌توان تا حد زیادی سرعت لود وب‌سایت را افزایش داد اما اگر علاقمند هستید تا در این باره بیشتر بدانید، توصیه می‌کنیم به مقالهٔ 6 راه برای کوتاه‌تر کردن زمان لود صفحات وب‌سایت نیز مراجعه نمایید.

همچنین در پایان لازم به ذکر است که در این مقاله تمام تمرکز روی کاهش ریکوئست‌هایی از جنس HTTP بود اما با عرضهٔ نسخهٔ دوم از این پروتکل پرکاربرد اینترنتی، خالقین HTTP2 ادعا کرده‌اند که دیگر ارسال درخواست‌های مکرر به سمت سرور به منظور دریافت ریسورس‌های مختلف مانع بزرگی محسوب نمی‌گردد که برای کسب اطلاعات بیشتر در این باره، می‌توانید به مقالهٔ HTTP/2 چیست و چه تفاوت‌هایی با HTTP/1 دارا است؟ مراجعه نمایید.

حال نوبت به نظرات شما می‌رسد. به عنوان یک دولوپر وب‌سایت، از چه ترفندها و تکنیک‌هایی به منظور کاهش ریکوئست‌های HTTP به سمت سرور استفاده می‌کنید و دلایل شما برای اتخاذ چنین سیاست‌هایی چیست؟ نظرات، دیدگاه‌ها و تجربیات خود را در پروسهٔ اصطلاحاً Website Optimization با دیگر کاربران سکان آکادمی در میان بگذارید.

این محتوا آموزنده بود؟
بهینه سازیاچ‌تی‌تی‌پی

sokan-academy-footer-logo
کلیه حقوق مادی و معنوی این وب‌سایت متعلق به سکان آکادمی می باشد.