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

Milica Mihajlija

בין שאתם משתמשים בספריית ממשק משתמש ובין שאתם יוצרים את הסגנונות בעצמכם, שליחת כמות גדולה של 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) כדי לפתוח את DevTools.
  2. לוחצים על הכרטיסייה Lighthouse.
  3. לוחצים על נייד.
  4. מסמנים את התיבה Performance (ביצועים).
  5. מוחקים את שאר תיבות הסימון בקטע 'ביקורות'.
  6. לוחצים על Simulated Fast 3G, 4x CPU Slowdown.
  7. מסמנים את התיבה נקה נפח אחסון. כשבוחרים באפשרות הזו, מערכת Lighthouse לא תטען משאבים מהמטמון. הנתונים האלה מדמה את החוויה של מבקרים לראשונה בדף.
  8. לוחצים על הפעלת ביקורות.

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

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

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

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

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

אופטימיזציה

  • לוחצים על Remix to Edit כדי לאפשר עריכה של הפרויקט.

כדי לזרז את העניינים, הכלי 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');
  }
});

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

הגדרת Critical

בטבלה הבאה מפורטות כמה אפשרויות שימושיות ברמה קריטית. אתם יכולים לבדוק את כל האפשרויות הזמינות ב-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

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

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