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