בין אם אתם משתמשים בספריית ממשק המשתמש או יוצרים סגנונות שלכם באופן ידני, אתם יכולים לשלוח כמות משמעותית של עיכובים ברינדור של שירות CSS, כי הדפדפן צריך להוריד ולנתח קובצי CSS כדי שהדף יוכל להציג את הדף.
גלריית הגלידה הרספונסיבית הזו נוצרה באמצעות Bootstrap. ספריות ממשק משתמש כמו Bootstrap מזרזות את הפיתוח, אבל לרוב זה בא על חשבון CSS מנופח או מיותר, דבר שעלול להאט את זמני הטעינה. אתחול 4 הוא 187KB וממשק משתמש סמנטי, ספרייה אחרת של ממשק משתמש, הוא בגודל ענק של 730KB במצב לא דחוס. גם לאחר הקטנה או gzip, Butstrap עדיין שווה כ-20KB, הרבה מעבר לסף של 14KB בשביל הלוך ושוב הראשון.
קריטי הוא כלי שמחלץ, ממזער ומכניס CSS לחלק העליון והקבוע. כך ניתן לעבד תוכן בחלק העליון והקבוע בהקדם האפשרי, גם אם שירות CSS של חלקים אחרים בדף עדיין לא נטען. ב-Codelab הזה תלמדו איך להשתמש במודול npm של Critical.
מדידה
- כדי לראות תצוגה מקדימה של האתר, לוחצים על הצגת האפליקציה. לאחר מכן לוחצים על
מסך מלא
.
כדי לערוך ביקורת Lighthouse באתר הזה:
- מקישים על 'Control+Shift+J' (או על 'Command+Option+J' ב-Mac) כדי לפתוח את כלי הפיתוח.
- לוחצים על הכרטיסייה Lighthouse.
- לוחצים על Mobile (נייד).
- מסמנים את התיבה Performance (ביצועים).
- מוחקים את שאר תיבות הסימון בקטע 'ביקורות'.
- לוחצים על Simulated Fast 3G, 4x CPU Slowdown.
- מסמנים את התיבה נקה נפח אחסון. כשבוחרים באפשרות הזו, מערכת Lighthouse לא תטען משאבים מהמטמון. הנתונים האלה מדמה את החוויה של מבקרים לראשונה בדף.
- לוחצים על 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"
}
- לוחצים על Terminal (הערה: אם לחצן הטרמינל לא מוצג, יכול להיות שתצטרכו להשתמש באפשרות 'מסך מלא').
כדי ליצור CSS קריטי, מריצים במסוף את:
npm run critical
refresh
![הודעת הצלחה כתובה "נוצר שירות CSS חיוני" במסוף](https://web.dev/static/articles/codelab-extract-and-inline-critical-css/image/success-message-saying-g-e2359b437448f.png?authuser=5&hl=he)
בתג <head>
של index.html
, CSS קריטי שנוצר ממוקם בין תגי <style>
, ואחריו סקריפט שטוען את שאר רכיבי ה-CSS באופן אסינכרוני.
![index.html עם CSS קריטי מוטבע](https://web.dev/static/articles/codelab-extract-and-inline-critical-css/image/indexhtml-inlined-criti-9c5e8661497d1.png?authuser=5&hl=he)
מדידה חוזרת
כדי להריץ שוב ביקורת ביצועים של Lighthouse, צריך לפעול לפי השלבים מתחילת ה-Codelab. התוצאות שיתקבלו ייראו בערך כך: