חילוץ והטבעה של CSS קריטי באמצעות קריטי

Milica Mihajlija

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

גלריית הגלידה הרספונסיבית הזו נוצרה באמצעות Bootstrap. ספריות ממשק משתמש כמו Bootstrap מקצרות את תהליך הפיתוח, אבל לרוב הן עושות זאת על חשבון CSS מיותר ומנופח, שעלול להאט את זמני הטעינה. אתחול 4 הוא 187KB, וממשק משתמש סמנטי, ספרייה אחרת של ממשק משתמש, הוא בגודל ענק של 730KB לא דחוס. גם אחרי שמצמצמים את Bootstrap ומצמצמים אותו באמצעות Gzip, הוא עדיין שוקל כ-20KB, הרבה מעבר לסף של 14KB לנסיעה הלוך ושוב הראשונה.

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

מדידה

  • כדי לראות תצוגה מקדימה של האתר, לוחצים על הצגת האפליקציה. לאחר מכן לוחצים על מסך מלא מסך מלא.

כדי להריץ ביקורת של Lighthouse באתר הזה:

  1. מקישים על Control+Shift+J (או על Command+Option+J ב-Mac) כדי לפתוח את DevTools.
  2. לוחצים על הכרטיסייה Lighthouse.
  3. לוחצים על נייד.
  4. מסמנים את התיבה Performance (ביצועים).
  5. מוחקים את שאר תיבות הסימון בקטע 'ביקורות'.
  6. לוחצים על Simulated Fast 3G, 4x CPU Slowdown.
  7. מסמנים את התיבה פינוי האחסון. אם בוחרים באפשרות הזו, Lighthouse לא יטעים משאבים מהמטמון, וכך יתבצע סימולציה של חוויית השימוש של מבקרים בפעם הראשונה בדף.
  8. לוחצים על Run Audits.

חלונית הביקורת של כלי הפיתוח ל-Chrome, מופעלת על ידי Lighthouse

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

ביקורת של Lighthouse שמציגה ציון ביצועים של 84, זמן טעינה ראשוני של 3 שניות ותצוגת סרטון של טעינת האפליקציה

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

ביקורת 'הזדמנויות' של Lighthouse הקטע 'ביטול משאבים החוסמים עיבוד'

אופטימיזציה

  • לוחצים על רמיקס לעריכה כדי לערוך את הפרויקט.

כדי לזרז את התהליך, Critical כבר מותקן וקובץ תצורה ריק כלול ב-codelab.

בקובץ התצורה critical.js, מוסיפים הפניה אל Critical ואז מפעילים את הפונקציה critical.generate(). הפונקציה הזו מקבלת אובייקט שמכיל את התצורה.

const critical = require('critical');

critical.generate({
    // configuration
},(err, output) => {
  if (err) {
    console.error(err);
  } else if (output) {
    console.log('Generated critical CSS');
  }
});

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

הגדרת נתונים קריטיים

בטבלה הבאה מפורטות כמה אפשרויות שימושיות ברמה קריטית. אתם יכולים לבדוק את כל האפשרויות הזמינות ב-GitHub.

אפשרות סוג הסבר
base מחרוזת הספרייה הבסיסית לקבצים.
src מחרוזת קובץ המקור של ה-HTML.
dest מחרוזת היעד של קובץ הפלט. אם ה-CSS מוטמע בקובץ, קובץ הפלט הוא HTML. אם לא, הפלט יהיה קובץ CSS.
width, height מספרים הרוחב והגובה של אזור התצוגה בפיקסלים.
dimensions מערך מכיל אובייקטים עם מאפייני רוחב וגובה. האובייקטים האלה מייצגים את אזורי התצוגה שרוצים לטרגט באמצעות CSS בחלק העליון והקבוע. אם יש לכם שאילתות מדיה ב-CSS, תוכלו ליצור שירות CSS חיוני שמכסה כמה גדלים של אזור תצוגה.
inline בוליאני כשהערך מוגדר כ-true, ה-CSS הקריטי שנוצר מוטמע ב- של קובץ המקור של ה-HTML.
minify בוליאני כשהיא מוגדרת כ-True, המערכת מקטינה את ה-CSS הקריטי שנוצר. אפשר להשמיט אותו כשמחלצים תוכן CSS קריטי בשביל כמה רזולוציות, כי הוא מצמצם אותו באופן אוטומטי כדי למנוע הכללה כפולה של כלל.

בהמשך מוצגת דוגמה להגדרה של חילוץ CSS קריטי למספר רזולוציות. אפשר להוסיף אותו אל critical.js או לשחק קצת ולשנות את האפשרויות.

critical.generate({
  base: 'public/',
  src: './index.html',
  dest: './index.html',
  inline: true,
  dimensions: [
    {
      height: 500,
      width: 300,
    },
    {
      height: 720,
      width: 1280,
    },
  ]
}, (err, output) => {
  if (err) {
    console.error(err);
  } else if (output) {
    console.log('Generated critical CSS');
  }
});

בדוגמה הזו, index.html הוא גם קובץ המקור וגם קובץ היעד, כי האפשרות inline מוגדרת כ-true. רכיב קריטי קורא קודם את קובץ המקור של ה-HTML, מחלץ את קטע ה-CSS הקריטי ואז מחליף את index.html ב-CSS קריטי המוטבע ב-<head>.

במערך dimensions צוינו שני גדלים של אזור תצוגה: 300 x 500 למסכים קטנים במיוחד ו-1280 x 720 למסכים רגילים של מחשבים ניידים.

האפשרות minify לא מופיעה כי Critical ממזער באופן אוטומטי את ה-CSS שחולץ כשמצוינים כמה גדלים של חלון תצוגה.

Run Critical

הוספת קריטי לסקריפטים ב-package.json:

scripts: {
  "start": "node server.js",
  "critical": "node critical.js"
}
  1. לוחצים על Terminal (הערה: אם הלחצן Terminal לא מופיע, יכול להיות שתצטרכו להשתמש באפשרות 'מסך מלא').

כדי ליצור CSS קריטי, מריצים במסוף את:

npm run critical
refresh
הודעה על הצלחה עם הכיתוב &#39;נוצר קובץ CSS קריטי&#39; בקונסולה
הודעה על הצלחה במסוף

עכשיו בתג <head> של index.html, ה-CSS הקריטי שנוצר מוטמע בין תגי <style>, ואחריו מופיע סקריפט שטעון את שאר ה-CSS באופן אסינכרוני.

index.html עם CSS קריטי מוטבע
שירות CSS חיוני מוטבע

מדידה חוזרת

כדי להריץ שוב ביקורת ביצועים של Lighthouse, צריך לפעול לפי השלבים מתחילת ה-Codelab. התוצאות שיופיעו יהיו דומות לאלה שמופיעות בדוגמה הבאה:

ביקורת Lighthouse שביצעה ציון ביצועים 100, FCP 0.9 שניות ותצוגה משופרת של רצועת תמונות של טעינת האפליקציה