وقتی صفحه لود میشه، مرورگر باید CSS رو دانلود کنه قبل رندر. Critical CSS این تأخیر رو حذف میکنه.

Critical CSS چیه؟

CSS مورد نیاز برای بخش قابل مشاهده (Above the fold). Inline در HTML.

مزایا

سرعت رندر: صفحه سریع ظاهر میشه
Core Web Vitals: LCP بهتر
UX: تجربه بهتر

Implementation

<style>
  /* Critical CSS اینجا */
</style>
<link rel="preload" href="main.css" as="style" onload="this.rel='stylesheet'">

ابزارهای Extract

Critical: Node.js
Penthouse: PhantomJS
CriticalCSS.com: آنلاین

WordPress

WP Rocket، Autoptimize خودکار Critical CSS.

Deferred CSS

Non-critical CSS رو defer کنید.

Async CSS

<link rel="stylesheet" href="style.css" media="print" onload="this.media='all'">

Minify

Minify کنید حتی Critical CSS.

Update

هر تغییر CSS باید Critical رو Regenerate کنید.

Testing

Lighthouse نشون میده Render-blocking CSS.

Font ها

Font ها هم Preload کنید همراه Critical CSS.

سباهاست

LiteSpeed Cache خودکار Critical CSS تولید میکنه.

جمع‌بندی

Critical CSS تفاوت بین سایت کند و سریع رو میسازه.