Minification چیست؟

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

Minification چیست؟

Minification را ما به فارسی فشرده سازی ترجمه می‌کنیم. اما به این دلیل که در بحث طراحی و راه اندازی سایت، ما انواع مختلفی از فشرده سازی داریم، این ترجمه زیاد دقیق نیست. بنابراین تعریف دقیق Minification یعنی حذف نویسه‌ها و کاراکترهای اضافی در یک سند الکترونیکی که شاید از نظر ظاهری و خوانایی برای انسان دچار مشکل شود. اما همچنان برای رایانه قابل خواندن و درک می‌باشد.

همانطور که می‌دانیم، زمانی که در حال نوشتن کدهای JS و CSS هستیم، برای خوانایی بیشتر آن، قادریم از Space و Tab و حتی Enter استفاده کنیم. با این کار فرورفتگی‌های را برای خطوط ایجاد می‌کنیم که با یک نگاه راحت می‌توانیم بفهمیم که هر خط جزء چه قسمتی از کدهای ماست. این مرتب سازی ها فقط برای ما به عنوان کدنویس یا برنامه نویس مفید است. اما رایانه از آنها سر در نمی‌آورد و آنها را حذف می‌کند. پس چه بهتر که بعد از آماده سازی سند و قبل از بارگذاری آن روی فضای میزبانی، خودمان این نویسه‌های زائد را حذف کنیم. به این کار Minification یا همان فشرده سازی گفته می‌شود.

یک نمونه کد CSS فشرده نشده را در ادامه می‌بینید.

/**
 ۴٫۰ Header
 -------------------------------------------------------
 /* Ensure that there is no gap between the header and the admin bar for WordPress versions before 3.8. */
 wpadminbar{
             Min-height: 32px
 }
 .site-header {
             top: 0;
             left: 0;
             width: 100%;
             background: #fff;
 }
 body.admin-bar .site-header{
               top: 32px;
 }
 .site-title {
           float: left;
           width: 18.965517241%;
           margin: 0;
           font-size: 18px;
           font-size: 1.8rem;
           font-weight: 400;
           line-height: 28px;
           line-height: 2.8rem;
 }

که پس از فشرده سازی به این صورت در آمده است:

wpadminbar{min-height:32px;} .site-header {top:0;left:0;width:100%;background:#fff}body.admin-bar .site-header{top:32px}.site-title{float:left;width:18.965517241%;margin:0;font-size:18px;font-size:1.8rem;font-weight:400;line-height:28px;line-height: 2.8rem}

با این کار چطور سرعت سایت زیاد می‌شود؟

همانطور که گفته شد، با فشرده سازی یا همان Minify کردن مرورگر همچنان می‌تواند آن را پردازش کند و از آن سر در می‌آورد. فضاهای اضافهٔ حذف شده، باعث می‌شوند حجم کل اسناد صفحه کاهش یابند. این رقم به طور کلی از ۳۰ تا ۴۰ درصد خواهد بود. حتی برخی اوقات تا ۵۰ درصد حجم اسناد CSS و JS صفحه کاسته می‌شود. البته حتی سند HTML هم می‌تواند به همین شیوه فشرده سازی شود.

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

چطور کدها را Minify یا فشرده کنیم؟

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

اما اوقاتی که از سیستم مدیریت محتوا مثل وردپرس استفاده کنید، معمولاً این کار به واسطهٔ افزونه‌های موجود انجام می‌شود و کار را بسیار راحت می‌کنند. نمونه‌ای از این افزونه‌ها Autoptimize است که خیلی راحت این کار را برای ما انجام می‌دهد.

جمع بندی

با توجه به این توضیحات باید آگاه شده باشید که فشرده سازی و تجمیع کردن فایل‌های HTML و JS و CSS سایت، یکی از کارهای مهم و حیاتی در بحث افزایش سرعت سایت است. این موضوع را هیچ وقت فراموش نکنید.