Critical CSS זה הCSS הקריטי לטעינה הראשונה של הדף, ה-CSS שצריך כדי להציג את ה-above-the-fold content מיד.
הבעיה
בלי Critical CSS, הדפדפן צריך לטעון את כל ה-CSS הראשי לפני שהוא מציג משהו. אם ה-CSS הוא 200KB, הקורא רואה דף ריק עד שהוא טוען.
הבעיה נקראת FOUC (Flash of Unstyled Content), או יותר גרוע, הדף ריק לחלוטין.
הפתרון
תזהו איזה CSS צריך לטעינה הראשונה (above-the-fold). תכניסו אותו inline ב-head. את שאר ה-CSS תטענו async.
איך זה עובד
שלב 1, זיהוי
איזה CSS צריך לחלק העליון של הדף? typography, layout בסיסי, צבעים. כל מה שגלוי בלי לגלול.
שלב 2, חילוץ
כלים כמו Critters, Critical, או Penthouse עושים את זה אוטומטית.
שלב 3, inline
הקריטי inline ב-head:
<style>
/* critical css */
body { font-family: ... }
.header { ... }
</style>שלב 4, async load
שאר ה-CSS:
<link rel="preload" href="/main.css" as="style" onload="this.rel='stylesheet'">
היתרונות
- LCP משתפר.
- FCP (First Contentful Paint) משתפר.
- תחושה של מהירות.
- גוגל אוהב.
החסרונות
- HTML גדול יותר (כי inline CSS).
- תחזוקה. אם משנים את העיצוב, צריך לעדכן.
- מורכב להוסיף לאתרים גדולים.
הכלים
- Critters (לShopify ו-Next.js).
- Critical (Node.js library).
- Penthouse (Node.js).
- WordPress plugins (Autoptimize, WP Rocket).
סיכום
Critical CSS זה לא חיוני אבל מאוד עוזר. אם ה-LCP שלכם גרוע, זה אחד הדברים הראשונים לנסות.
רוצה עזרה ממוקדת ל-SEO באתר שלך?
אני שמוליק דורינבאום — יועץ SEO ב-20+ שנות ניסיון. אם המאמר הזה נתן לך כיוון ואתה רוצה ליישם על האתר שלך, יש לי קורס קידום אתרים חינמי מלא, או שאפשר לקפוץ לשיחת ייעוץ אישית.