CSS Performance Optimization

بهینه‌سازی عملکرد CSS

بهینه‌سازی CSS یعنی نوشتن استایل‌هایی که سریع بارگذاری شوند، به شکل بهینه رندر شوند و نگهداری‌شان آسان باشد. CSS غیر بهینه باعث کند شدن بارگذاری صفحه، افزایش زمان بازطراحی (repaint) و جابه‌جایی‌های ناخواسته‌ی طرح (layout shifts) می‌شود.

—

🔹 تکنیک‌های کلیدی بهینه‌سازی CSS

۱. کاهش حجم فایل CSS

* حذف قوانین CSS غیر‌ضروری یا بلااستفاده (ابزارهایی مثل PurgeCSS یا UnCSS کمک می‌کنند).
* کوچک‌سازی (minify) فایل CSS برای کاهش حجم.
* حذف کامنت‌ها و فاصله‌های اضافی در نسخه نهایی.

۲. استفاده از سلکتورهای ساده‌تر

* استفاده از سلکتورهای کلاس (`.class`) یا آی‌دی (`#id`) به جای سلکتورهای پیچیده مثل `div ul li a`.
* اجتناب از سلکتورهای جهانی (`*`) یا بسیار عمومی.
* خودداری از سلکتورهایی که باعث محاسبات سنگین توسط مرورگر می‌شوند.

۳. کاهش تعداد فایل‌های CSS

* ترکیب چند فایل CSS به یک فایل برای کاهش درخواست‌های HTTP.
* اگر ترکیب ممکن نیست، استفاده از HTTP/2 که درخواست‌های همزمان را بهتر مدیریت می‌کند.

۴. اجتناب از استایل‌های درون‌خطی (inline) و استفاده از CSS خارجی

* فایل‌های CSS خارجی توسط مرورگر کش می‌شوند.
* استایل‌های درون‌خطی حجم HTML را زیاد می‌کنند و کش نمی‌شوند.

۵. استفاده از خصوصیات کوتاه‌شده (shorthand)

* استفاده از شورتکات‌ها برای کاهش حجم CSS، مثلاً به جای نوشتن هر طرف مارجین جداگانه، بنویسید:

“`css
margin: 10px 5px 0 0;
“`

۶.بهینه‌سازی CSS برای مسیر رندر بحرانی

* CSS حیاتی برای محتوای بالای صفحه (above-the-fold) را به صورت درون‌خطی (inline) قرار دهید.
* بارگذاری CSS غیر حیاتی را به صورت غیرهمزمان یا به تأخیر بیندازید.

۷.استفاده از خصوصیات CSS با شتاب‌دهنده سخت‌افزاری

* استفاده از خصوصیات مثل `transform` و `opacity` برای انیمیشن‌ها چون از GPU استفاده می‌کنند.
* پرهیز از خصوصیات پرهزینه مثل `top`، `left`، `width` و `height` در انیمیشن‌ها چون باعث بازطراحی (reflow) می‌شوند.

۸.عدم استفاده از `@import` در CSS

* `@import` باعث مسدود شدن رندر و ایجاد درخواست‌های HTTP اضافی می‌شود.
* به جای آن فایل‌های CSS را مستقیماً در HTML لینک کنید.

۹. استفاده از متغیرهای CSS و پیش‌پردازنده‌ها

* متغیرهای CSS باعث کاهش تکرار و راحت‌تر شدن نگهداری می‌شوند.
* پیش‌پردازنده‌هایی مثل SASS و LESS به سازمان‌دهی و بهینه‌سازی کمک می‌کنند.

۱۰. استفاده از کش مرورگر

* تنظیم هدرهای کش مناسب روی فایل‌های CSS برای بارگذاری سریع‌تر در بازدیدهای بعدی.

—

ابزارهای مفید برای بهینه‌سازی

* Lighthouse (در DevTools کروم): برای بررسی و آنالیز عملکرد و CSS.
* PurgeCSS و UnCSS: حذف CSS بلااستفاده.
* CSSNano و CleanCSS: کوچک‌سازی فایل‌های CSS.
* Critical (پکیج NPM): استخراج و درون‌خطی کردن CSS حیاتی.

—

جدول خلاصه