‏ساخت خودکار Critical CSS با ابزار Kigo

Kigo Studio یه ابزار آنلاین معرفی کرده که Critical CSS یه صفحه رو خودکار می‌سازه. به گفتهٔ سازنده‌ها، ابزار صفحه رو با یه مرورگر headless لود می‌کنه، بررسی می‌کنه چه عنصرهایی توی viewport مشخص‌شده دیده می‌شن، استایل مربوط به همون‌ها رو از تمام منابع CSS بیرون می‌کشه و یه مجموعهٔ کوچیک از قواعد تحویل می‌ده. اندازهٔ viewport، مدت انتظار برای رندر و نحوهٔ برخورد با جاوااسکریپت هم قابل تنظیمه.

ایدهٔ اصلی ساده‌ست: فایل‌های CSS معمولی render-blocking هستن، یعنی مرورگر تا لودشون نکنه چیزی نشون نمی‌ده. وقتی فقط استایل بخش بالای صفحه (above the fold) مستقیم داخل خود HTML باشه، مرورگر می‌تونه بدون معطلی محتوا رو نشون بده. تو صفحهٔ ابزار اومده که این کار روی معیارهایی مثل First Contentful Paint و LCP اثر مستقیم داره و همین به تجربهٔ کاربر و رتبهٔ سئو کمک می‌کنه، مخصوصاً روی موبایل و اینترنت کند.

برای پیاده‌سازی، خروجی رو بالای head و قبل از بقیهٔ استایل‌ها و اسکریپت‌های blocking می‌ذاری؛ حواست باشه شاید لازم بشه مسیر تصویرها و فایل‌های دیگه رو اصلاح کنی. بعدش دو راه برای بقیهٔ استایل‌ها پیشنهاد شده: راه ساده اینه که لینک‌ها رو به انتهای body منتقل کنی، راه دوم هم لود کردنشون با جاوااسکریپت بعد از آماده شدن صفحه‌ست. تو هر دو حالت باید لینک‌های اصلی از head برداشته بشن.

نمونهٔ سبک‌شدهٔ روش دوم این شکلیه:

window.addEventListener("DOMContentLoaded", function () {
  let stylesheets = ["/css/style.min.css"];
  stylesheets.forEach(function (href) {
    var link = document.createElement("link");
    link.rel = "stylesheet";
    link.href = href;
    document.head.appendChild(link);
  });
});

آرایهٔ stylesheets رو با فایل‌های غیرضروری خودت پر می‌کنی و بقیه‌ش خودکار انجام می‌شه.

نکات کلیدی:

• Critical CSS همون حداقل استایل لازم برای نمایش بخش بالای صفحه‌ست
• ابزار Kigo با مرورگر headless استایل عنصرهای دیده‌شده رو استخراج می‌کنه
• خروجی باید بالای head و قبل از بقیهٔ فایل‌ها قرار بگیره
• بقیهٔ استایل‌ها یا آخر body میان یا با جاوااسکریپت بعد از رندر لود می‌شن
• سود اصلیش اینه که FCP و LCP بهتر می‌شن و تجربهٔ کاربر و سئو هم سود می‌برن