امتیاز دهید

دنبال کردن



چگونه درخواست های http کمتری ارسال کنیم؟





farsoft logo

عملکرد بارگذاری محتوا


درخواست HTTP

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

هر زمانی که یک نفر آدرس شما را وارد مرورگر می کند از طریق درخواست ها محتویات که می تواند شامل فایل های CSS ، JavaScript، تصاویر و ... باشد در صفحه بارگذاری می شوند( نحوه ارتباط بین مرورگر و سرور). با هر درخواست یکی از فایل ها بارگذاری می شود و همین طور برای بقیه فایل ها برای هر کدام یک درخواست فرستاده میشود. ما به این درخواست ها، درخواست HTTP می گوییم . اکثر مرورگر های معروف برای هر دامین 6 ارتباط همزمان برقرار میکنند و زمانی که شما بیشتر از 6 فایل برای بارگذاری داشته باشید باعث می شود که سرعت بارگذاری پایین تر بیاید . به این خاطر که ابتدا باید درخواست های قبلی پردازش شوند سپس برای دریافت فایل های بعدی درخواست فرستاده شود.

بررسی تعداد درخواست های HTTP

درخواست HTTP

در ابتدا چک کنید که سایت شما چه تعداد درخواست برای بارگذاری نیاز دارد. درخواست ها شامل انواع فایل ها (css ، js ، تصاویر و ...) می باشد. (البته سایت های دیگری هم هستند که تعداد و نوع درخواست ها را نیز بررسی میکنند ، بستگی به سلیقه شما دارد که از کدام استفاده کنید).

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

ترکیب فایل های CSS

ترکیب فایل های CSS

اکثر قالب های html برای بارگذاری نیاز به چندین فایل css دارند که یا در قسمت header و یا در قسمت footer قرار گرفته اند. شما باید همه این فایل ها را با هم ترکیب کنید و یک فایل بزرگتر ایجاد کنید تا درخواست HTTP کمتری به سرور فرستاده شود. این کار به همین سادگی انجام می شود که شما یک فایل با فرمت CSS ایجاد میکنید و تمامی محتویات دیگر فایل های CSS را در آن کپی می کنید. سپس آدرس فایل ایجاد شده را در header قالب ایجاد میکنید. یک روش بهتر برای style های کم به جای بارگذاری یک فایل خارجی آن را در قسمت head بنویسید. در مورد بهینه کردن css ها بیشتر بدانید.

استفاده inline از فایل های جاوااسکریپت

زمانی که صحبتی از سرعت بارگذاری در میان می آوریم استفاده inline از جاوااسکریپت می باشد. معمولا بهترین توصیه استفاده از فایل های کوچکتر جاوااسکریپت می باشد.

ترکیب تمامی فایل های جاوااسکریپت

ترکیب فایل های JS

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

حداقل استفاده از تصاویر در صفحه سایت

شما باید در طراحی صفحات سایت حداقل تعداد تصاویر را به کار ببرید و فقط از آن هایی استفاده کنید که بودنشون در سایت لازم است. از روش های بد قدیمی مانند استفاده از عکس به عنوان پس زمینه یا عکس به عنوان حاشیه ها و استفاده از عکس در دکمه ها و ... اجتناب کنید. تمامی این کارها با اندک کد css قابل جایگزین هستند. یکی از ابزار های مجانی آنلاین استفاده css maker می باشد.

استفاده از CSS Image Sprites

css sprites

زمانی که مجبور هستید تعدادی عکس را در درصفحه نگه دارید یکی از روش های مفید استفاده از css image sprites می باشد، که تمامی تصاویر را به یک تصویر تبدیل می کند. این تصویر همه تصاویر را به هم متصل میکند و یک عکس بزرگ ایجاد میکند که در نهایت به یک درخواست HTTP منجر می شود. شما می توانید با استفاده از کد های css و با استفاده از مختصات X و Y هر تصویر را در جای خود فراخوانی کنید. یکی ابزارهای آنلاین ایجاد CSS sprites می باشد. توضیحات بیشتر و نحوه استفاده را به شما توضیح داده است.

تبدیل عکس ها به Base64 code

یکی دیگر از روش ها تبدیل عکس ها به کد های Base64 می باشد ، که عکس را به کد تبدیل می کند. گرچه اندازه کد ممکن است کمی زیاد به نظر بیاید ولی دیگر نیاز به یک درخواست برای بارگذاری عکس نیست. که کد را به عنوان src در تگ های img به کار ببرید. برای انجام اینکار می توانید از Base64 File Encoder استفاده کنید. فقط کافی است که تصویر را انتخاب کنید و به صورت اتوماتیک کد برای شما ایجاد خواهد شد.

به حداقل رساندن استفاده از افزونه ها

افزونه ها می توانند به عنوان سرمایه یک وبسایت عمل کنند ولی استفاده از آنها باعث میشود تعداد فایل های متعددی نیاز به بارگذاری باشد . به همین خاطر خیلی مهم است که فقط افزونه هایی را استفاده کنید که واقعا لازم است.

به حداقل رساندن استفاده از دکمه های شبکه های اجتماعی

css sprites

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

شبکه توزیع محتوا (Content Delivery Network)

شبکه توزیع محتوا CDN

استفاده از Content Delivery Network(CDN) می تواند فایل های سایت شما را از چندین زیر دامنه متفاوت فراخوانی و بارگذاری کند. این روش تعداد درخواست های HTTP شما را به اندازه چشمگیری کاهش میدهد. CDN ها معمولا سرورهای متعددی در تمام دنیا فراهم کردند. این قابلیت این امکان را فراهم میکند تا محتوای سایت شما برای بازدید کننده در کمترین زمان ممکن انجام شود.

هنوز هم تعداد درخواست های شما زیاد هستند؟

زیر دامنه sub domain

اگر بعد از انجام این مراحل هنوز تعداد درخواست های HTTP شما در یک دامنه زیاد هستند (معمولا بیشتر از 20 درخواست و بیشتر) ، شما باید یک زیر دامنه ایجاد کنید و تعدادی از فایل ها را در آن قرار دهید. زیر دامنه ها برای مرورگر ها همانند یک دامنه جدا محسوب میشود ، به همین خاطر می توانید تعداد بیشتری از فایل ها را در یک زمان بارگذاری کنید که باعث بالا رفتن سرعت سایت می شود. در انجام این کار زیاده روی نکنید ، هیچ گاه بیشتر از 2 زیر دامنه برای بارگذاری فایل ها استفاده نکنید که باعث افت سرعت در سایت شما می شود به این خاطر که تعداد درخواست های موازی زیادی فرستاده می شود.


در صورت مفید بودن این مطلب را به اشتراک بگذارید







دیدگاه خود را درباره این مطلب بنویسید: