سلام. بعد از یک هفته وقفه در سری پست‌های بهبود کارایی در فرانت‌اند (که قطعا بخاطر تعطیلات عید فطر بود!) با قسمت دیگری از این سری در خدمت شما هستم. مثل همیشه قبل از اینکه به سراغ مبحث اصلی بریم، به اون دسته از دوستانی که اولین باره این سری از پست‌ها رو میبینن توصیه میکنم که از پست اول شروع کنن. اما اگر همراه پست‌های ما بودید و فقط پست قبلی از این سری رو از دست دادید، می‌تونین از طریق لینک زیر به پست قبلی دسترسی پیدا کنید:
از یک متد فشرده سازی مانند Gzip یا Brotli جهت کاهش حجم فایل‌های ارسالی از سمت سرور به مرورگر کاربر استفاده کنید. هر چقدر حجم فایل‌ها کمتر باشد، کاربر آن‌ها را سریع‌تر دریافت کرده و در نتیجه سرعت و کارایی وبسایت شما بهتر می‌شود.
پیش از آنکه وارد جزئیات این مبحث شویم بهتر است کمی با این قابلیت بیشتر آشنا شویم:
فشرده‌سازی End-to-end به قابلیت فشرده سازی بدنه (body) پیام اشاره دارد که توسط سرور انجام می‌شود و بدون تغییر در طول مسیر به مرورگر کاربر می‌رسد. [منبع]
در اولین پست از سری پست‌های بهبود کارایی در فرانت‌اند به اهمیت خلاصه‌سازی و کاهش حجم اسناد HTML اشاره کردیم. بر هیچ توسعه دهنده فرانت‌اندی پوشیده نیست که خلاصه‌سازی و کاهش حجم هر نوع داده می‌تواند باعث افزایش سرعت بارگذاری صفحات شود و در نهایت کارایی وبسایت را بهبود ببخشد. اما اگر تصور می‌کنید که صرفا خلاصه سازی منابع متنی و فشرده‌سازی تصاویر تنها گزینه‌های موجود برای فشرده سازی هستند سخت در اشتباهید. فشرده سازی E2E چیز جدیدی نیست. سال‌ها قبل وجود داشته است اما امروزه با الگوریتم‌های پیشرفته‌تر سریع‌تر و موثرتر شده‌اند.
اگر به قسمت پایین تصویر بالا دقت کنید، خواهید دید که برای بارگذاری این سایت مرورگر 834کیلوبایت محتوا دریافت کرده است. اما در کمال تعجب در کنار همین بخش مقدار 1.4مگابایت را برای منابع موجود در صفحات ذکر کرده است. این دقیقا همان دلیلی است که ما به دنبال آن برای چرایی استفاده از فشرده سازی E2E می‌گردیم. این وبسایت با استفاده از قابلیت فشرده‌سازی E2E منابع مورد نظر برای راه‌اندازی صفحه را حدود 42 درصد با حجم کمتر به سمت مرورگر ارسال کرده است و این کاهش حجم نیز قطعا باعث افزایش سرعت بارگذاری وبسایت می‌شود چرا که سریع‌تر توسط مرورگر دریافت می‌شود.
ابتدا از طریق این وبسایت و به صورت آنلاین وبسایت مورد نظر خود را بررسی کنید. اگر وبسایت مورد نظر از gzip پشتیبانی نمی‌کرد توصیه می‌شود که حتما این قابلیت را در وبسایت خود پیاده سازی کنید. در حال حاضر دو متد پرطرفدار فشرده‌سازی gzip و brotli برای پیاده سازی این قابلیت در وب استفاده می‌شود. brotli جدیدتر است و در نتیجه تعدادی از مرورگرها از این متد پشتیبانی نمی‌کنند؛ به همین دلیل از متد gzip به عنوان fallback استفاده می‌شود. شما باید این تنظیمات را از طریق وب سرور خود (apache/nginx) انجام دهید.
از ابتدای این سری از پست‌ها تا اینجای کار سعی کردیم با مباحث معمولی و ساده در زمینه بهبود کارایی فرانت‌اند که البته اکثر آن‌ها تنظیمات سروری بوده‌اند در خدمت شما باشیم؛ اما این سری از پست‌ها قرار نیست اینقدر ساده و عمومی باقی بمانند. عوامل زیادی (از سرور، بک‌اند و فرانت‌اند) در بهبود کارایی یک وبسایت تاثیر گذار هستند و بی شک در پست‌های آینده به سراغ موارد پیچیده‌تر و تخصصی‌تر خواهیم رفت. پس به صورت هفتگی منتظر این سری از پست‌های بهبود کارایی در فرانت‌اند باشید!
