חילוץ CSS קריטי

כאן מוסבר איך לשפר את זמני העיבוד באמצעות שיטה קריטית של CSS.

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

איור של מחשב נייד ומכשיר נייד עם דפי אינטרנט שחורגים בקצוות של המסכים

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

קובץ HTML עם CSS קריטי מופיע כחלק מהראש
שירות CSS קריטי מוטבע

שיפור זמני הרינדור יכול להשפיע מאוד על תפיסת הביצועים, במיוחד בתנאי רשת לא טובים. ברשתות סלולריות, זמן אחזור ארוך הוא בעיה, ללא קשר לרוחב הפס.

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

אם אחוז ה-First Contentful Paint (FCP) באיכות נמוכה ואתם רואים את ההודעה 'ביטול משאב שחוסם רינדור' בביקורות של Lighthouse, כדאי לנסות שירות CSS חיוני.

ביקורת Lighthouse עם השגיאה &#39;ביטול משאב החוסם עיבוד&#39; או &#39;דחייה של שירותי CSS שאינם בשימוש&#39; הזדמנויות

כדי לצמצם את מספר הבקשות הלוך ושוב לעיבוד הראשון, מומלץ לוודא שהתוכן בחלק העליון והקבוע צריך להיות קטן מ-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 קריטי. החיסרון הוא שהוא יכול להפעיל הרבה משימות במקביל.