Question 1

מה זה CSS קריטי?

Accepted Answer

CSS קריטי הוא הסגנונות הדרושים כדי להציג תוכן מעל לקפל (המסך הראשון). הם מוטמעים ישירות בתוך ה-<head> של הדף כך שהדפדפן יכול להתחיל לעבד מיד מבלי לחכות לטעינת קבצי CSS מלאים.

Question 2

איך לחלץ CSS קריטי לאתר ביטריקס?

Accepted Answer

לחילוץ אוטומטי, השתמש בכלי 'critical' (Node.js). הוא מנתח את הדף, קובע סגנונות בשימוש עבור גדלי viewport נתונים, ומייצר קובץ CSS קריטי. ניתן גם לחלץ ידנית דרך Coverage בכלי הפיתוח של Chrome.

Question 3

איך לשלב CSS מוטמע בתבנית ביטריקס?

Accepted Answer

בקובץ header.php של התבנית, הוסף קוד המשתמש ב-file_get_contents כדי לקרוא את קובץ critical.css ולהציג אותו בתוך תג <style>. שאר קבצי ה-CSS נטענים באופן אסינכרוני באמצעות rel='preload' עם מעבר ל-'stylesheet'.

Question 4

אילו כלי אוטומציה קיימים ל-CSS קריטי?

Accepted Answer

כלים מרכזיים: critical (Node.js), PurgeCSS להסרת כללים שאינם בשימוש, Penthouse, וסקריפטים של Puppeteer ליצירה ב-CI/CD. עבור ביטריקס, ניתן גם להשתמש באירוע OnEndBufferContent לעיבוד HTML לאחר מכן.

Question 5

איך לוודא ש-CSS קריטי עובד?

Accepted Answer

פתח את כלי הפיתוח של Chrome → Coverage (Shift+Ctrl+P → Coverage) ובדוק את אחוז ה-CSS שאינו בשימוש במסך הראשון. כמו כן, הסתכל במדד 'Reduce unused CSS' של Lighthouse וב-FCP. היעד ל-FCP הוא מתחת ל-1.5 שניות למובייל.

אופטימיזציה של CSS קריטי עבור 1C-Bitrix: מדריך שלב-אחר-שלב

הכישורים שלנו: