7
تشکر

راهکارهای افزایش لود صفحات وب

راهکارهای افزایش لود صفحات وب

راهکارهای افزایش لود صفحات وب

در سال های گذشته میانگین حجم صفحات وب نسبت به قبل بیشتر شده است. طبق تحقیقات انجام شده توسط HTTP Archive میانگین حجم هر صفحه چیزی در حدود 1.2mb است, که برای کاربران با سرعت اینترنت پایین مسلما دردسر بزرگی است همچنین کاربران موبایل را هم نباید از این قائده استثناء دانست.

نمودار

نمودار

 

در این مطلب قصد داریم به بعضی از راهکارهای افزایش لود صفحات وب اشاره کنیم.

بهینه سازی تصاویر

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

شما میتوانید از سایت هایی مانند Smush.it و TinyPNG برای اینکار استفاده کنید.

کوچک کردن کدهای CSS و JavaScript

کوچک کردن کدهای CSS و JavaScript به شما در جهت پایین آوردن حجم سایت کمک میکند. مواردی مانند حذف فضاهای خالی بلااستفاده و بهینه کردن کد مفید هستند. اما حذف فضاهای خالی خواندن کدها را بسیار سخت و ناخوانا میکند و در بسیاری از موارد غیر ممکن است.

اما میتوانید از دو ابزار CSS Compressor و JavaScript Compressor استفاده کنید.

خودداری از استفاده @import

دستور @import در CSS به شما این اجازه را میدهد که فایلهای دیگر CSS را به درون فایل جاری فراخوانی کنید. با این حال که بعضی مواقع مفید است اما فایلهایی که از این طریق لود میشوند در زمان اولیه و به عنوان فایل stylesheet لود نمیشوند که باعث افزایش لود صفحات وب میشود.

به جای استفاده از این دستور از همان تگ link در HTML استفاده کنید.

کاهش درخواست های HTTP

تعداد درخواست های یک صفحه بر زمان لود صفحات وب تاثیر دارد. میتوان از موارد زیر استفاده کرد:

ترکیب کردن فایلها:

ترکیب کردن چند فایل استایل یا جاوا اسکریپت در از بین بردن درخواست های اضافی HTTP تاثیر مهمی دارد. یک فایل بزرگتر CSS یا JavaScript از چندین فایل کوچک سریعتر لود میشود زیرا در فایلهای کوچک زمان زیادی صرف ارتباط با سرور و فرستادن درخواست از بین میرود.

چندین تصویر در یک تصویر

میتوان تصاویر کوچک و یا تصاویری که بهم مربوط هستند را داخل یک تصویر بزرگتر قرار داد. با اینکار هم درخواست های اضافی کمتر میشود هم زمان لود صفحه افزایش پیدا میکند. در صورت استفاده از این روش باید با استفاده از خاصیت background-position تصویر مورد نظر را از عکس بزرگ استخراج کرد.

مانند تصویر زیر:

چندین تصویر در یک تصویر

چندین تصویر در یک تصویر

 

افزایش کش کردن صفحه توسط مروگر

شما میتوانید با استفاده از headerها در فایل .htaccess میزان کش سایت خود را در مروگر کاربر بالا ببرید. نحوه این کار به این صورت است که این کدها به مروگر میگویند که میتواند اطلاعات را به مدت خاصی برای مثال 1 ماه در کش خود ذخیره کند.

سایت وبلاگینا در این مورد مطلب خوبی را منتشر کرده است. همچنین میتوانید از Google Developer هم استفاده کنید.

ابزاری برای تست سرعت بازگذاری صفحات

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

همچنین میتوان از افزونه ySlow هم استفاده کرد.

  • javid khanlo می‌گه:

    بدلیل این بهت پیشنهاد دادم توضیح بدی چون فکر کردم کاربرا بیشتر تمایل دارن از این نوع تکنیک ها استفاده کنن.

  • javid khanlo می‌گه:

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


  • نظرات این مطلب بسته است.