‏Critical؛ ابزاری که CSS بالای صفحه رو جدا می‌کنه

وقتی مرورگر می‌خواد یه صفحه رو بکشه، تا CSS لازمش دانلود نشه نمی‌تونه render tree رو بسازه و جاوااسکریپت هم معمولاً سر همین CSS بلاک می‌شه. ایده‌ی critical-path CSS اینه که فقط همون تیکه از استایل که برای نمایش بخش بالای صفحه (above-the-fold) لازمه رو جدا کنی و بقیه رو غیربحرانی حساب کنی، تا اولین رندر سریع‌تر بشه.

ابزار critical که ساخته‌ی Addy Osmani هست دقیقاً همین کارو خودکار می‌کنه: استایل‌شیت‌ها رو از خود HTML پیدا می‌کنه، CSS مسیر بحرانی رو استخراج می‌کنه و می‌تونه همون رو مستقیم داخل HTML تزریق (inline) کنه. تو مستندات اومده که چون این ابزار هم استخراج و هم inline کردن رو با هم انجام می‌ده، اون boilerplate دردسرسازی که معمولاً برای حل جدای این دو کار لازمه رو از سرت برمی‌داره.

کار باهاش ساده‌ست؛ تابع generate رو با چندتا گزینه‌ی اصلی صدا می‌زنی، مثل مسیر منبع، ابعاد viewport و اینکه خروجی inline بشه یا نه:

import { generate } from "critical";

generate({
  inline: true,
  base: "test/",
  src: "index.html",
  target: "index-critical.html",
  width: 1300,
  height: 900,
});

گزینه‌هاش هم انعطاف خوبی دارن: می‌تونی به‌جای width و height یه آرایه‌ی dimensions بدی تا برای چند رزولوشن مختلف CSS بحرانی بسازه (مناسب سایت‌های ریسپانسیو)، با ignore بعضی قاعده‌ها مثل @font-face یا بک‌گراندها رو کنار بذاری، و خروجی رو از طریق callback، promise یا async/await بگیری. علاوه بر API، یه CLI هم داره که با standard input خوب کار می‌کنه و افزونه‌هایی برای Gulp، Grunt و Webpack هم موجوده.

به گفته‌ی مستندات، Critical زیر کاپوت از ماژول Penthouse استفاده می‌کنه و فرقش با اون اینه که خودش استایل‌شیت‌ها رو از HTML پیدا می‌کنه و متد inline کردن هم داره. البته اگه سایتت کلی استایل داره یا استایل‌ها به‌صورت داینامیک تو DOM تزریق می‌شن (که تو اپ‌های Angular زیاد پیش میاد)، توصیه شده مستقیم از Penthouse استفاده کنی چون دقتش بالاتره. به‌عنوان جایگزین هم Beasties معرفی شده که بدون مرورگر headless کار می‌کنه و افزونه‌ی Webpack و Vite داره ولی CLI نداره.

نکات کلیدی:

• Critical همون CSS لازم برای بالای صفحه رو جدا و در صورت نیاز inline می‌کنه تا رندر اولیه سریع‌تر بشه
• با تابع generate و گزینه‌هایی مثل inline، src، width/height و dimensions کار می‌کنه
• API (callback/promise/async)، CLI و افزونه‌ی Gulp/Grunt/Webpack داره
• زیر کاپوت از Penthouse استفاده می‌کنه؛ برای استایل‌های داینامیک Penthouse مستقیم بهتره
• جایگزین‌هایی مثل Beasties بدون مرورگر headless هم وجود دارن