در سال های اخیر میانگین حجم صفحات وب روز به روز در حال افزایش می باشد، تحقیقات به عمل آمده توسط HTTP Archive در آگوست ۲۰۱۳ نشان میدهد که میانگین حجم صفحات وب در حدود 1.52mb می باشد. برای کاربران اینترنت با پهنای باند بالا این میزان حجم مسئله ساز نخواهد بود ولی برای کاربرانی که همچنان با اتصال های کم سرعت دیال آپ (مانند بسیاری از کشور های درحال توسعه) یا با استفاده از شبکه دیتا تلفن های همراه به اینترنت دسترسی پیدا می کنند حجم یک صفحه مشکل اصلی می باشد.

Average Bytes per page by Content Type - میانگین حجم صفحات وب [منبع: HTTP Archive]

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

یکی از ساده ترین راههای کاهش حجم صفحات وب و افزایش سرعت لود صفحات، بهینه سازی و کاهش حجم تصاویر بکار رفته می باشد. استفاده از تصاویری که بزرگتر از اندازه نمایش داده شده در صفحه می باشند به معنی وجود اطلاعاتی است که لزومی برای وجود آنها نیست. همانطور که در تصویر قبل مشاهده کردید بیش از نیمی از حجم صفحات وب را تصاویر تشکیل می دهند و با بهینه سازی و کاهش حجم تصاویر می توان حجم زیادی از صفحه را کاهش داد و به نسبت باعث افزایش سرعت بارگذاری شد. وقتی شما اندازه تصاویر را به اندازه مورد نیاز خود تغییر دادید، ابزار های مختلفی همچون Smush.it و TinyPNG وجود دارند که حجم فایل ها را کاهش می دهند. این ابزارها با حذف بخش های غیر ضروری و بهینه سازی رنگ های تصاویر باعث کاهش حجم آنها می شوند.

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

فایل های CSS و JavaScript همواره حاوی تعداد بسیاری فضای خالی (فاصله) هستند که هیچ تاثیری در نحوه عملکرد آنها ندارد. کوتاه سازی این ها می تواند به شما کمک کند تا با حجم صفحات خود را کاهش دهید. کوتاه سازی کدها باعث حذف فاصله های اضافی و بهینه سازی کدها می شود، همچنین این کدها خوانایی بسیار پایینی برای انسان دارند، بنابراین تنها هنگام راه اندازی نهایی سایت این کار را انجام دهید. CSS Compressor و JavaScript Compressor دو برنامه تحت وب هستند که میتوانند کدهای ما را کوتاه سازی کنند.

اجتناب استفاده از `@import`

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

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

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

ادغام فایل ها

ترکیب چندین فایل استایل درون یک فایل راه بسیار خوبی برای کاهش تعداد فایل های لود شده درون صفحه می باشد. این استراتژی همچنین برای فایل های JavaScript نیز می تواند مورد استفاده قرار گیرد. یک فایل حجیم CSS یا JavaScript در اکثر مواقع سریع از بارگذاری می شود، زیرا زمان بیشتری صرف بارگذاری اطلاعات می شود و زمان اندکی برای برقرار ارتباط با سرور هدر می رود.

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

استفاده از CSS-Sprites راه خوبی برای کاهش تعداد درخواست های ارسالی به سرور می باشد. CSS Sprite مجموعه ای از تصاویر مختلف درون یک فایل می باشد. این فایل ها بطور ویژه زمانی مورد استفاده قرار می گیرند که شما نیاز به تعداد زیادی آیکون های کوچک داشته باشید. شما تصویر پی زمینه المنت خود را برابر تصویر اسپرایت قرار می دهید . با استفاده از کد CSS مکان پس زمینه را طوری تنظیم می کنید که تنها تصویر مورد نظر شما قایل نمایش باشد. برای کسب اطلاعات بیشر راجه به CSS Sprites این مطلب را مطالعه کنید.

استفاده از کش مرورگر

احتمالا وب سایت شما حاوی فایل هایی می باشد که به تکرار تغییر نمی یابند، فایل هایی همانند تصاویر، CSS و JavaScript . با دستور دادن به مرورگر برای کش کردن و نگه داری نسخه ای از فایل های شما در دیسک و استفاده از آن در بازدید های بعدی از سایت شما می توانید سرعت لود خود را افزایش دهید. برای استفاده از سیستم کش مرورگر شما می بایست تنظیمات سرور خود را تغییر داده و مقدار Expires را به مقدار دلخواه افزایش دهید. این مقدار به مرورگر می گوید فایل های کش شده را تا چه مدت در دیسک نگه داری شود.
Inspecting Response Headers in Chrome Dev Tools
ساده ترین راه برای ایجاد تغییر در این تنظیمات در آپاچه سرور استفاده از فایل .htaccess می باشد. کد زیر نمونه تنظیمات این فایل را برای تغییر در زمان انتقضای کش برای تصاویر ، CSS و JavaScript را نمایش می دهد. `

Enable Expirations

ExpiresActive On

Default Expiration Time

ExpiresDefault "access plus 1 month"

Expiration for Images

ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"

Expiration for CSS

ExpiresByType text/css "access plus 1 month”

Expiration for JavaScript

ExpiresByType application/javascript "access plus 1 month"

` برای کسب اطلاعات بیشتر در این باره می توانید این صفحه مطالعه کنید.

فشرده سازی فایل ها با Gzip

یکی دیگر از راه های کاهش حجم صفحه فشرده سازی فایل ها با Gzip می باشد. در این روش فایل ها قبل از بارگذاری در سرور فشرده سازی شده و پس از بارگذاری در مرورگر دوباره سازی می شوند و این امر باعث کاهش میزان اطلاعات گرفته شده از سرور می شود. فشرده به دلیل سربار زمانی که برای فشرده سازی و بازسازی آن صرف می شود برای فایل های بیشتر از 150بایت مفید نمی باشد. از این روش تنهای برای فایل های HTML, CSS و JavaScript استفاده کنید.

لینک های مفید