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

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

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