حجم فایل و روش‌های بارگذاری CSS؛ چند راه برای رسوندن استایل‌ها به کاربر

تو فصل قبل دیدیم که CSS رندر رو مسدود می‌کنه و Critical CSS چطور این تأخیر رو کم می‌کنه. حالا می‌خوایم یه قدم عقب‌تر بریم و به خود روش‌های بارگذاری CSS نگاه کنیم؛ چند راه مختلف برای رسوندن استایل به مرورگر وجود داره، و هرکدوم مزیت و هزینه‌ی خودشون رو دارن. علاوه بر این، به تکنیک‌هایی می‌پردازیم که حجم خود فایل CSS رو کوچیک‌تر می‌کنن.

سه راه اصلی برای اضافه کردن CSS

روشمثالکاربرد
External (فایل جدا)<link rel="stylesheet" href="styles.css">استاندارد و رایج‌ترین روش؛ قابل کش شدن
Internal (داخل head)<style>...</style>مناسب Critical CSS؛ کش نمی‌شه
Inline (روی خود تگ)<div style="color: red">معمولاً باید ازش پرهیز کرد

External رایج‌ترین و معمولاً بهترین روش برای عمده‌ی CSS سایته، چون مرورگر می‌تونه این فایل رو کش کنه؛ یعنی تو بازدیدهای بعدی کاربر، اصلاً نیازی به دانلود دوباره نیست. Internal (همون <style> که تو درس Critical CSS دیدیم) برای بخش‌های کوچیک و حیاتی مناسبه، ولی چون هر بار HTML لود می‌شه دوباره خونده می‌شه، برای کل CSS سایت مناسب نیست.

چرا باید از استایل inline (روی خود تگ) پرهیز کرد؟

<!-- بد -->
<div style="background: red; padding: 20px;">...</div>

این روش چند مشکل داره: هیچ‌وقت کش نمی‌شه (چون بخشی از HTML خود صفحه‌ست، نه یه فایل جدا)، specificity خیلی بالایی داره (که override کردنش رو سخت می‌کنه)، و اگه بخوایید همون استایل رو رو چند المنت دیگه هم اعمال کنید، مجبورید کل رشته رو تکرار کنید که حجم HTML رو زیاد می‌کنه. تنها استثنای رایج، مقادیر کاملاً داینامیک هستن که با جاوااسکریپت محاسبه می‌شن (مثل موقعیت دقیق یه المنت که هر بار فرق می‌کنه)؛ اونجا inline گاهی منطقی‌تره.

Minification: حذف چیزهایی که مرورگر بهشون نیاز نداره

یه فایل CSS که خودتون می‌نویسید، پر از فاصله، خط جدید و کامنته که برای خوانایی خود شما مفیدن، ولی مرورگر بهشون نیازی نداره:

/* قبل از minify */
.card {
  padding: 16px;
  border-radius: 8px;
}

/* بعد از minify */
.card{padding:16px;border-radius:8px}

Minification این کاراکترهای اضافی رو حذف می‌کنه و معمولاً اسم متغیرهای طولانی (تو Sass یا CSS-in-JS) رو هم کوتاه می‌کنه. این کار همیشه با ابزار انجام می‌شه (نه دستی)، معمولاً بخشی از فرآیند build. حجم فایل نهایی می‌تونه تا ۲۰-۳۰ درصد کوچیک‌تر بشه، که مستقیم روی سرعت دانلود (خصوصاً تو شبکه‌های کند) اثر داره.

Compression: فشرده‌سازی سمت سرور

جدا از minification، سرور هم می‌تونه فایل رو قبل از ارسال فشرده کنه (با روش‌هایی مثل gzip یا برات‌لی). این فشرده‌سازی معمولاً حجم رو خیلی بیشتر از minification به‌تنهایی کاهش می‌ده، چون از الگوهای تکراری تو متن (که تو CSS به‌خاطر selector ها و مقادیر مشابه خیلی زیاده) استفاده می‌کنه. این تنظیم معمولاً سمت سرور یا هاستینگه، نه چیزی که تو خود فایل CSS بنویسید، ولی دونستن وجودش مهمه چون معمولاً بزرگ‌ترین کاهش حجم از همینجا میاد.

حذف CSS استفاده‌نشده

یکی از رایج‌ترین مشکلات پروژه‌های بزرگ، تجمع CSS ای هست که دیگه هیچ‌جا استفاده نمی‌شه؛ مثلاً استایل یه کامپوننت که حذف شده ولی فایل CSS اش هنوز تو پروژه مونده. ابزارهایی هستن که HTML/JS پروژه رو اسکن می‌کنن و selector هایی که تو هیچ‌جا match نمی‌شن رو از فایل نهایی حذف می‌کنن؛ این کار هم بخشی از فرآیند build حساب می‌شه.

نکته مهم: ابزارهای حذف CSS استفاده‌نشده گاهی class هایی رو که فقط با جاوااسکریپت دیرتر اضافه می‌شن (نه تو HTML اولیه) اشتباهی حذف می‌کنن. اگه بعد از فعال کردن این ابزارها، یه استایل ناگهان از بین رفت، اول این احتمال رو چک کنید.

HTTP/2 و تعداد درخواست‌ها

تو درس قبل گفتیم تقسیم بیش‌ازحد فایل‌ها به‌خاطر هزینه‌ی هر درخواست مشکل‌سازه. یه نکته‌ی تکمیلی: با پروتکل‌های جدیدتر مثل HTTP/2 و HTTP/3، هزینه‌ی باز کردن چند درخواست هم‌زمان خیلی کمتر از قبله (چون این پروتکل‌ها می‌تونن چند فایل رو رو یه اتصال واحد و موازی منتقل کنن). این به این معنی نیست که باید فایل‌ها رو بی‌نهایت تقسیم کنید، ولی یعنی تعادل قدیمی «همه‌چیز رو تو یه فایل بزرگ بذار» دیگه همیشه بهترین جواب نیست؛ بسته به زیرساخت سایت، تقسیم منطقی (مثلاً بر اساس صفحه یا بخش اصلی) می‌تونه بهتر عمل کنه.

Cache-Control: کش کردن درست برای بازدیدهای بعدی

این یه تنظیم سمت سرور HTTP header هست، نه CSS، ولی مستقیم روی تجربه‌ی بارگذاری اثر داره: با تنظیم درست header های کش (مثل Cache-Control: max-age=31536000)، مرورگر تو بازدیدهای بعدی کاربر، اصلاً نیازی به دانلود دوباره‌ی فایل CSS نداره (به‌شرطی که فایل عوض نشده باشه). ترکیب رایج این تکنیک با یه اسم فایل شامل hash (مثل styles.a3f9c2.css) هست، تا وقتی محتوای فایل عوض می‌شه، اسمش هم عوض بشه و کش قدیمی به‌اشتباه استفاده نشه.

اشتباه رایج: نادیده گرفتن حجم فونت‌ها و آیکون‌ها به‌عنوان بخشی از هزینه‌ی CSS

خیلی وقت‌ها تمرکز فقط رو حجم خود فایل .css است، در حالی که چیزهایی که از داخل CSS لود می‌شن (فونت‌های @font-face، آیکون‌فونت‌ها، تصاویر پس‌زمینه) می‌تونن هزینه‌ی کلی خیلی بیشتری نسبت به خود CSS داشته باشن. مثلاً یه آیکون‌فونت کامل که فقط ۱۰ آیکونش استفاده می‌شه، می‌تونه صدها کیلوبایت اضافی باشه؛ جایگزین بهتر، استفاده از SVG های جداگانه یا فقط زیرمجموعه‌ی لازم از فونته.

جمع‌بندی

برای بارگذاری بهینه‌ی CSS، از فایل‌های external برای عمده‌ی استایل استفاده کنید (تا کش بشن)، Critical CSS رو inline نگه دارید، و از inline style روی تگ‌ها معمولاً پرهیز کنید. minification و compression حجم فایل رو کاهش می‌دن، حذف CSS استفاده‌نشده جلوی تجمع کد مرده رو می‌گیره، و کش کردن درست با header های مناسب باعث می‌شه بازدیدهای بعدی کاربر اصلاً نیازی به دانلود مجدد نداشته باشن.