בין אם אתם משתמשים בספריית ממשק משתמש או יוצרים סגנונות בעבודת יד, נדרש עיבוד משמעותי של עיכובים ב-CSS מפני שהדפדפן חייב להוריד ולנתח קובצי CSS לפני שיוכל להציג את הדף.
גלריית הגלידה הרספונסיבית הזו בנויה על Bootstrap. ספריות ממשק משתמש כמו Bootstrap מזרזות את הפיתוח, אבל במקרים רבים הדבר בא על חשבון CSS נפוח ומיותר שעלול להאט את זמני הטעינה. גרסת Bootstrap 4 בנפח 187KB, וממשק המשתמש הסמנטי, ספרייה נוספת של ממשק המשתמש, הוא בנפח עצום של 730KB לא דחוס. גם לאחר הקטנה ועיבוד של gzip, Botstrap עדיין משקל של כ-20KB, הרבה יותר מהסף של 14KB לטיסה הלוך ושוב הראשונה.
קריטי הוא כלי שמחלץ, מקטין וממקם CSS בחלק העליון והקבוע. כך ניתן לעבד תוכן בחלק העליון והקבוע בהקדם האפשרי, גם אם שירות ה-CSS של חלקים אחרים בדף עדיין לא נטען. ב-Codelab זה תלמד כיצד להשתמש במודול npm של Critical.
מדידה
- כדי לראות תצוגה מקדימה של האתר, מקישים על View App ואז על
Fullscreen
.
כדי להריץ ביקורת של Lighthouse באתר הזה:
- לוחצים על 'Control+Shift+J' (או 'Command+Option+J' ב-Mac) כדי לפתוח את כלי הפיתוח.
- לוחצים על הכרטיסייה Lighthouse.
- לוחצים על נייד.
- מסמנים את התיבה ביצועים.
- מוחקים את שאר תיבות הסימון בקטע Audits (ביקורות).
- לוחצים על 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 |
boolean | אם המדיניות מוגדרת כ-True, ה-CSS הקריטי שנוצר ימוקם בתוך קובץ מקור ה-HTML. |
minify |
boolean | אם המדיניות מוגדרת כ-True, המערכת מצמצמת את ה-CSS הקריטי שנוצר. ניתן להשמיט אותו כשמחלצים תוכן CSS קריטי לרזולוציות מרובות מאחר ש-Critical מקטין אותו באופן אוטומטי כדי למנוע הכללה של כלל כפול. |
בהמשך מוצגת דוגמה להגדרה לחילוץ 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"
}
- לוחצים על טרמינל (הערה: אם הלחצן 'מסוף' לא מוצג, ייתכן שתצטרכו להשתמש באפשרות 'מסך מלא').
כדי ליצור CSS קריטי, מריצים במסוף:
npm run critical
refresh
עכשיו בתג <head> של index.html, שירות ה-CSS הקריטי שנוצר מוצמד בין תגי <style>, ואחריו מופיע סקריפט שטוען את שאר ה-CSS באופן אסינכרוני.
מדידה חוזרת
כדי להריץ שוב ביקורת ביצועים של Lighthouse, צריך לבצע את השלבים מתחילת ה-Codelab. התוצאות שיתקבלו ייראו כך:
