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

Milica Mihajlija

כדי לעקוב אחר ה-Codelab הזה, פותחים את התקלה הזו בכרטיסייה שנייה.

הערה: ה-Codelab הזה משתמש בכלי הפיתוח ל-Chrome. מורידים את Chrome אם עוד לא התקנתם אותו.

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

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

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

מדידה

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

כדי לערוך ביקורת Lighthouse באתר הזה:

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

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

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

הפעלה קריטית

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

scripts: {
  "start": "node server.js",
  "critical": "node critical.js"
}

1. לוחצים על Terminal (הערה: אם לחצן הטרמינל לא מוצג, יכול להיות שתצטרכו להשתמש באפשרות 'מסך מלא').

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

npm run critical
refresh

הודעה על הצלחה במסוף

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

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

שירות CSS חיוני מוטבע

מדידה חוזרת

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

הצלחה: בתצוגה של רצועת התמונות אפשר לראות שהתוכן מעובד הרבה יותר מהר, ומשתקף במדדי הצגת תמונה משופרים. ו"להימנע ממשאבים שחוסמים עיבוד" בוטל! 🎉