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