בין אם אתם משתמשים בספריית ממשק המשתמש או יוצרים סגנונות שלכם באופן ידני, אתם יכולים לשלוח כמות משמעותית של עיכובים ברינדור של שירות CSS, כי הדפדפן צריך להוריד ולנתח קובצי CSS כדי שהדף יוכל להציג את הדף.
גלריית הגלידה הרספונסיבית הזו נוצרה באמצעות Bootstrap. ספריות ממשק משתמש כמו Bootstrap מקצרות את תהליך הפיתוח, אבל לרוב הן עושות זאת על חשבון CSS מיותר ומנופח, שעלול להאט את זמני הטעינה. אתחול 4 הוא 187KB, וממשק משתמש סמנטי, ספרייה אחרת של ממשק משתמש, הוא בגודל ענק של 730KB לא דחוס. גם אחרי שמצמצמים את Bootstrap ומצמצמים אותו באמצעות Gzip, הוא עדיין שוקל כ-20KB, הרבה מעבר לסף של 14KB לנסיעה הלוך ושוב הראשונה.
Critical הוא כלי לחילוץ, למינימיזציה ולהטמעה בקוד של קוד CSS שמוצג בחלק העליון של המסך. כך ניתן לעבד תוכן בחלק העליון והקבוע בהקדם האפשרי, גם אם שירות CSS של חלקים אחרים בדף עדיין לא נטען. ב-Codelab הזה תלמדו איך להשתמש במודול npm של Critical.
מדידה
- כדי לראות תצוגה מקדימה של האתר, לוחצים על הצגת האפליקציה. לאחר מכן לוחצים על מסך מלא .
כדי להריץ ביקורת של Lighthouse באתר הזה:
- מקישים על Control+Shift+J (או על Command+Option+J ב-Mac) כדי לפתוח את DevTools.
- לוחצים על הכרטיסייה Lighthouse.
- לוחצים על נייד.
- מסמנים את התיבה 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
לא מופיעה כי Critical ממזער באופן אוטומטי את ה-CSS שחולץ כשמצוינים כמה גדלים של חלון תצוגה.
Run Critical
הוספת קריטי לסקריפטים ב-package.json
:
scripts: {
"start": "node server.js",
"critical": "node critical.js"
}
- לוחצים על Terminal (הערה: אם הלחצן Terminal לא מופיע, יכול להיות שתצטרכו להשתמש באפשרות 'מסך מלא').
כדי ליצור CSS קריטי, מריצים במסוף את:
npm run critical
refresh
עכשיו בתג <head>
של index.html
, ה-CSS הקריטי שנוצר מוטמע בין תגי <style>
, ואחריו מופיע סקריפט שטעון את שאר ה-CSS באופן אסינכרוני.
מדידה חוזרת
כדי להריץ שוב ביקורת ביצועים של Lighthouse, צריך לפעול לפי השלבים מתחילת ה-Codelab. התוצאות שיופיעו יהיו דומות לאלה שמופיעות בדוגמה הבאה: