چگونه CSS را کوچک کنیم؟ { Minify CSS }

معیارهای کور وب وایتال در سال 2021 به فاکتور اساسی برای سئو سایت تبدیل شده‌اند. تمرکز این معیارها بر تجربه کاربر هنگام مواجهه با یک سایت است. فایل‌های CSS می‌توانند حاوی کاراکترهای غیرضروری مانند نظرات (کامنت‌ها)،‌ فضاهای خالی و تورفتگی باشند. در تولید، این کاراکترها را می‌توان بدون ایجاد هیچ مشکلی حذف کرد و اندازه‌ی فایل را بدون تاثیرگذاری بر چگونگی پردازش استایل‌های مختلف توسط مرورگر کاهش داد. این تکنیک کوچک‌سازی یا خلاصه‌سازی نام دارد. در نظر داشته باشید، منتوریکس کلیه خدمات سئو و بهینه سازی نرخ تبدیل وبسایت را برای شما انجام می دهد.

بارگذاری CSS کوچک نشده

به بلوک CSS زیر نگاهی بیاندازید:

خواندن این محتوا در ازای تولید فایلی بزرگ‌تر از حد لازم، ساده است:

• آن از فضاها برای اهداف تورفتگی استفاده می‌کند و شامل نظراتی است که توسط مرورگر نادیده گرفته شده‌اند. بنابراین، می‌توان آن‌ها را حذف کرد.
• المان‌های h1 و h2 استایل یا سبک مشابه‌ای دارند: به جای این که آن‌ها را جداگانه بیان کنید: h1 {…} h2 {…} می‌توان آن‌ها را به صورت h1، h2{…} بیان کرد.
• رنگ پس زمینه، #000000 را می‌توان به صورت #000 بیان کرد.

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

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

اندازه‌گیری

شما می‌توانید کوچک سازی CSS را به سایتی اعمال کنید که در راهنماهای دیگر مورد استفاده قرار گرفته است مانند سایت Fav Kitties. این نسخه از سایت از یک کتابخانه‌ی CSS محلی: animate.css برای متحرک کردن المان‌های مختلف صفحه وقتی کاربر به یک گربه رای می‌دهد، استفاده می‌کند.

در مرحله‌ی اول، شما باید آنچه که بعد از کوچک سازی CSS به دست می‌آورید را درک کنید:

1. صفحه‌ی اندازه‌گیری را باز کنید.
2. آدرس URL روبرو را وارد کنید: https://fav-kitties-animated.glitch.me و بر روی اجرای حسابرسی کلیک کنید.
3. بر روی مشاهده گزارش کلیک کنید.
4. بر روی عملکرد کلیک کنید و به بخش فرصت‌ها بروید.

گزارش حاصل نشان می‌دهد که حداکثر 16 کیلوبایت را می‌توان از فایل animate.css ذخیره کرد.

حال، محتوای CSS را بررسی کنید:

1. سایت Fav Kitties را در کروم باز کنید. (ممکن است کمی زمان ببرد تا سرورهای Glitch  برای اولین بار پاسخ دهند)
2. برای باز کردن DevTools، Control+Shift+J را بگیرید (یا در مک، Command+Option+J)
3. بر روی زبانه‌ی شبکه کلیک کنید.
4. بر روی فیلتر CSS کلیک کنید.
5. چک باکس غیر فعال کردن حافظه نهان (کش) را انتخاب کنید.
6. اپلیکیشن را مجدد بارگذاری کنید.

صفحه دو فایل CSS به اندازه‌ی 9/1 کیلوبایت و 2/76 کیلوبایت را به ترتیب درخواست می‌کند.

1. بر روی animate.css کلیک کنید.
2. به منظور مشاهده‌ی محتوای فایل بر روی زبانه‌ی پاسخ کلیک کنید.

توجه داشته باشید که استایل شیت (شیوه‌نامه) حاوی کاراکترهایی برای فضاهای خالی و تورفتگی‌ها است:

سپس، به منظور کوچک سازی CSS این فایل‌ها باید برخی از افزونه‌های webpack را به فرآیند ساخت خود اضافه کنید.
توجه: گزارش قبلی Lighthouse تنها animate.css را به عنوان فرصتی برای کوچک سازی CSS فهرست می‌کند. کوچک‌سازی style.css نیز چندین بایت ذخیره می‌کند، اما برای در نظر گرفتن یک ذخیره‌سازی قابل توجه برای Lighthouse کافی نیست. با این وجود، کوچک سازی CSS بهترین روش کلی است. بنابراین، منطقی است که تمام فایل‌های CSS خود را کوچک‌سازی کنید.

کوچک سازی CSS با webpack

قبل از این که به بحث بهینه‌سازی بپردازیم، باید ابتدا چگونگی ایجاد یک فرآیند برای کارکرد سایت Fav Kitties را درک کنید:

به صورت پیشفرض، بسته‌ی JS حاصل که webpack تولید می‌کند شامل محتوای فایل‌های CSS خواهد بود. از آنجایی که ما می‌خواهیم فایل‌های CSS را به صورت مجزا نگه داریم، از دو افزونه‌ی مکمل استفاده می‌کنیم:

• افزونه‌ی mini-css-extract هر استایل شیت را به عنوان یکی از مراحل فرآیند ساخت به فایل خود استخراج خواهد کرد.
• Webpack-fix-style-only-entries برای اصلاح یک مسئله در webpack 4 مورد استفاده قرار می‌گیرد تا از تولید یک فایل JS اضافی برای هر فایل CSS فهرست شده در webpack-config.js اجتناب شود.

حال وقت آن است که تغییراتی در پروژه ایجاد کنید:

1. the Fav Kitties project in Glitch را باز کنید.
2. منبع را مشاهده کرده و بر روی View source کلیک کنید.
3. برای این که پروژه قابل ویرایش باشد بر روی Remix to edit کلیک کنید.
4. بر روی Tools کلیک کنید.
5. بر روی Logs کلیک کنید.
6. بر روی Console کلیک کنید.

به منظور کوچک سازی CSS حاصل، شما باید از افزونه‌ی  optimize-css-assets-webpack-plugin استفاده کنید.

1. در کنسول Glitch، npm install –save-dev optimize-css-assets-webpack-plugin را اجرا کنید.
2. Refresh را اجرا کنید. بنابراین، تغییرات با ویرایشگر Glitch همگام خواهند شد.

در مرحله‌ی بعدی، به ویرایشگر Glitch بازگردید، فایل webpack-config.js را باز کنید و اصلاحات زیر را بیابید:

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

پس از اعمال تغییرات، یک بازسازی از پروژه آماده خواهد شد. فایل webpack-config.js به صورت زیر خواهد بود:

سپس، نتایج این بهینه‌سازی را با ابزارهای عملکردی بررسی کنید.

تایید

برای پیش نمایش سایت، View App را فشار دهید. سپس بر روی آیکون صفحه نمایش کامل کلیک کنید.
اگر هر یک از مراحل قبلی را به خوبی متوجه نشده‌اید، بر این لینک کلیک کنید تا نسخه‌ی بهینه سایت برای شما به نمایش درآید.
به منظور بررسی اندازه و محتوای فایل‌ها:

1. برای باز کردن DevTools، Control+Shift+J را بگیرید (یا در مک، Command+Option+J)
2. بر روی زبانه‌ی شبکه کلیک کنید.
3. بر روی فیلتر CSS کلیک کنید.
4. چک باکس غیر فعال کردن حافظه نهان (کش) را انتخاب کنید.
5. اپلیکیشن را مجدد بارگذاری کنید.

شما می‌توانید این فایل‌ها را بررسی و بازبینی کنید و مشاهده کنید که نسخه‌های جدید حاوی فضاهای خالی نباشند. هر دو فایل بسیار کوچک‌تر هستند. به طور خاص، فایل animate.css تا 26% کوچک‌تر شده است و به یک فایل 20کیلوبایتی تبدیل شده است!
به عنوان مرحله‌ی پایانی:

1. صفحه اندازه‌گیری را باز کنید.
2. آدرس URL سایت بهینه‌سازی شده را وارد نمایید.
3. بر روی View Report کلیک کنید.
4. بر روی Performance کلیک کرده و بخش Opportunities را بیابید.

این گزارش دیگر فایل CSS کوچک‌سازی شده را به عنوان یک Opportunity نشان نمی‌دهد، بلکه به بخش «حسابرسی‌های انجام شده» منتقل شده است:

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

مراحل بعدی و منابع

در این راهنما، ما کوچک سازی CSS با webpack را آموزش دادیم، اما همین رویکرد را می‌توانید با سایر ابزارهای ساخت مانند gulp-clean-css برای Gulp یا grunt-contrib-cssmin برای Grunt به کار گیرید.
علاوه بر این، کوچک‌سازی را می‌توان بر انواع دیگر فایل‌ها اعمال کرد. برای کسب اطلاعات بیشتر در مورد ابزارهایی برای کوچک‌سازی JS و برخی از تکنیک‌های تکمیلی مانند فشرده‌سازی، مقاله‌ی راهنمای کوچک‌سازی و فشرده‌سازی پی لودهای شبکه را مطالعه کنید.

اگر به مطالعه در زمینه‌ی کور وب وایتال علاقه‌مندید، پیشنهاد می‌کنیم از مجموعه مقالات Core web vitals منتوریکس دیدن کنید. همچنین شما می‌توانید برای دریافت مشاوره دیجیتال مارکتینگ و تبلیغات در گوگل و دوره دیجیتال مارکتینگ با ما تماس بگیرید.