تلفیق و کمینه‌سازی: ترفندهای پرکاربرد افزایش سرعت لود سایت

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

زمان لازم برای نمایش کامل یک صفحه وب، به‌طور کلی به چهار عامل بستگی دارد:

  • تاخیر شبکه
  • پهنای ‌باند در دسترس کاربر
  • تعداد درخواست‌های HTTP
  • حجم هر درخواست HTTP

با‌توجه به اینکه ما معمولا امکان تغییر پهنای باند در دسترس کاربر و مشکلات بوجود آمده در شبکه را نداریم، پس قطعا باید بر روی تعداد و حجم درخواست‌های HTTP که توسط صفحه وب ما انجام می‌شود، تاثیر بگذاریم و با به حداقل رساندن هر دو، عملکرد وب‌سایتمان را بهبود بخشیم.

 

تلفیق (Bundling): ترکیب فایل‌ها باهم

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

تلفیق به ما کمک می‌کند، تعداد درخواست‌های لازم HTTP را با ادغام فایل‌های مشابه در یک فایل واحد، کاهش دهیم. این کار باعث بارگیری یکجا می‌شود و زمان بالا آمدن صفحه وب را کاهش می‌دهد. به مثال زیر دقت کنید:

نسخه معمولی:

 

بعد از تلفیق:

همان‌طور که در نمونه بالا مشاهده می‌شود، سیستم به‌جای خواندن تعداد زیادی فایل css و js، آنها را در یک فایلکلی css و یک فایل کلی js می‌خواند.

 

کمینه‌سازی (Minification): حذف قسمت‌های اضافه

از دید یک توسعه‌دهنده، بسیار مهم است که فایل‌های CSS و جاوا اسکریپت به صورت خوانا و مرتب نگارش و قالب‌بندی شوند تا فهم آنها به‌راحتی امکان‌پذیر باشد. با این حال، مرورگرها به این نکته هیچ اهمیت نمی‌دهند. بنابراین می‌توانیم با حذف فضاهای سفید اضافی، برداشتن کامنت‌ها و... باعث کاهش حجم درخواست‌های HTTP شد. به فعالیت‌های این‌چنینی اصطلاحاً کمینه‌سازی گویند. فرآیند کمینه‌سازی، به کاهش محتویات فایل بدون تغییر معنای آن اطلاق می‌شود.به مثال زیر دقت کنید:

نمونه کد معمولی:

 


 

بعد از کمینه‌سازی:

 

 

همان‌طور که در نمونه بالا مشاهده می‌کنید، در فرآیند کمینه‌سازی، فضاهای خالی حذف شده، کامنت برداشته شده و تعداد کاراکترهای مشخص‌کننده رنگ هم کوتاه شده است؛ اما تغییری در ماهیت کد ایجاد نشده است.

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

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