איך לשפר את זמני העיבוד באמצעות טכניקת CSS קריטית.
הדפדפן חייב להוריד ולנתח קובצי CSS לפני שיוכל להציג את הדף, ולכן שירות ה-CSS הופך למשאב החוסם עיבוד. אם קובצי ה-CSS גדולים או שתנאי הרשת לא טובים, הבקשות לקובצי CSS יכולות להאריך משמעותית את זמן הרינדור של דף אינטרנט.
הטמעת סגנונות שחולצו ב-<head> של מסמך ה-HTML מבטלת את הצורך בשליחת בקשה נוספת לאחזור הסגנונות האלה. אפשר לטעון את שאר ה-CSS באופן אסינכרוני.
שיפור זמני העיבוד יכול להשפיע מאוד על הביצועים בתפיסה, במיוחד בתנאי רשת גרועים. ברשתות סלולריות, זמן אחזור גבוה הוא בעיה ללא קשר לרוחב הפס.
אם התוכן של הצגת תוכן ראשוני (FCP) שגוי, ומופיעה האפשרות 'הסרת משאבים שחוסמים עיבוד' בביקורות של Lighthouse, מומלץ לנסות את שירות ה-CSS הקריטי.
כדי לצמצם את מספר הבקשות הלוך ושוב לעיבוד הראשון, כדאי להקפיד שהתוכן בחלק העליון והקבוע לא יהיה קטן מ-14KB (דחוס).
ההשפעה שאפשר להשיג באמצעות השיטה הזו תלויה בסוג האתר. באופן כללי, ככל שהאתר כולל יותר שירותי CSS, כך ההשפעה של תוכן CSS גדולה יותר.
סקירה כללית של הכלים
יש כמה כלים מעולים שיכולים לקבוע באופן אוטומטי מהו ה-CSS הקריטי של דף. אלו חדשות טובות, כי ביצוע ידני של הפעולות האלה יכול להיות מאתגר. נדרש ניתוח של כל ה-DOM כדי לקבוע את הסגנונות שחלים על כל רכיב באזור התצוגה.
קריטי
קריטי מחלץ, מקטין ומעביר CSS בחלק העליון והקבוע והוא זמין כמודול npm. אפשר להשתמש בו עם Gulp (ישירות) או עם Graunt (כplugin), ויש גם פלאגין Webpack.
זה כלי פשוט שדורש הרבה חשיבה מהתהליך. אין צורך אפילו לציין את גיליונות הסגנונות, התכונה 'קריטית' מזהה אותם באופן אוטומטי. הוא גם תומך בחילוץ CSS קריטי עבור מספר רזולוציות מסך.
criticalCSS
CriticalCSS הוא מודול npm נוסף שמחלץ CSS בחלק העליון והקבוע. הוא זמין גם כ-CLI.
אין בה אפשרויות להטביע ולהקטין CSS קריטי, אבל היא מאפשרת לאלץ הכללה של כללים שלא שייכים בפועל ל-CSS קריטי, וכך לקבל שליטה רבה יותר על הכללת הצהרות @font-face.
פנטהאוז
Penthouse היא אפשרות טובה אם לאתר או לאפליקציה שלך יש הרבה סגנונות או סגנונות שמוחדרים באופן דינמי ל-DOM (שיטה נפוצה באפליקציות של Angular). האפליקציה משתמשת ב-Puppeteer מאחורי הקלעים ואפילו כוללת גרסה מתארחת באינטרנט.
Penthouse לא מזהה גיליונות סגנונות באופן אוטומטי. עליכם לציין את קובצי ה-HTML וה-CSS שעבורם אתם רוצים ליצור CSS קריטי. החיסרון הוא שתכונה זו טובה בביצוע משימות רבות במקביל.