במדריך הזה נבחן את הכללים של PageSpeed Insights בהקשר: למה חשוב לשים לב כשמבצעים אופטימיזציה של נתיב העיבוד הקריטי, ולמה.
להסיר JavaScript ו-CSS שחוסמים עיבוד
כדי לקצר ככל האפשר את הזמן הנדרש לעיבוד הראשון, יש לצמצם ככל האפשר את מספר המשאבים הקריטיים שמופיעים בדף, לצמצם את מספר המשאבים הקריטיים שמופיעים בדף, לצמצם את מספר הבייטים הקריטיים שהורדו ולבצע אופטימיזציה של אורך הנתיב הקריטי.
אופטימיזציה של השימוש ב-JavaScript
משאבי JavaScript חוסמים את המנתח כברירת מחדל, אלא אם הם מסומנים כ-async או נוספו באמצעות קטע קוד JavaScript מיוחד. מנתח JavaScript שחוסם את JavaScript מאלצת את הדפדפן להמתין ל-CSSOM ומשהה את בניית ה-DOM, מה שעלול לעכב באופן משמעותי את זמן העיבוד הראשון.
העדפה למשאבי JavaScript אסינכרוניים
משאבים אסינכרוניים מבטלים את החסימה של מנתח המסמך ומאפשרים לדפדפן למנוע חסימה ב-CSSOM לפני הרצת הסקריפט. לעיתים קרובות, אם הסקריפט יכול להשתמש במאפיין async, המשמעות היא גם שהוא לא הכרחי לעיבוד הראשון. כדאי לטעון סקריפטים באופן אסינכרוני לאחר העיבוד הראשוני.
הימנעות מקריאות שרת סינכרוניות
משתמשים ב-method navigator.sendBeacon() כדי להגביל את הנתונים שנשלחים על ידי XMLHttpRequests ב-handlers של unload. הרבה דפדפנים דורשים שבקשות כאלה יהיו סינכרוניות, ולכן הן עלולות להאט מעברי דפים, לפעמים באופן משמעותי. הקוד הבא מראה איך להשתמש ב-navigator.sendBeacon() כדי לשלוח נתונים לשרת ב-handler של pagehide במקום ב-handler של unload.
<script>
function() {
window.addEventListener('pagehide', logData, false);
function logData() {
navigator.sendBeacon(
'https://putsreq.herokuapp.com/Dt7t2QzUkG18aDTMMcop',
'Sent by a beacon!');
}
}();
</script>
השיטה החדשה של fetch() מאפשרת לבקש נתונים באופן אסינכרוני. בגלל שהתכונה הזו עדיין לא זמינה בכל מקום, כדאי להשתמש בזיהוי התכונות כדי לבדוק את הנוכחות שלה לפני השימוש. השיטה הזו מעבדת תשובות עם הבטחות במקום עם כמה גורמים מטפלים באירועים. בניגוד לתגובה ל-XMLHttpRequest, תגובת אחזור היא אובייקט סטרימינג שמתחיל ב-Chrome 43. כלומר, קריאה אל json() גם מחזירה Promise.
<script>
fetch('./api/some.json')
.then(
function(response) {
if (response.status !== 200) {
console.log('Looks like there was a problem. Status Code: ' + response.status);
return;
}
// Examine the text in the response
response.json().then(function(data) {
console.log(data);
});
}
)
.catch(function(err) {
console.log('Fetch Error :-S', err);
});
</script>
השיטה fetch() יכולה לטפל גם בבקשות POST.
<script>
fetch(url, {
method: 'post',
headers: {
"Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
},
body: 'foo=bar&lorem=ipsum'
}).then(function() { // Additional code });
</script>
דחייה של ניתוח JavaScript
כדי לצמצם את כמות העבודה שהדפדפן צריך לבצע כדי לעבד את הדף, עדיף לדחות סקריפטים לא חיוניים שאינם חיוניים לבניית התוכן הגלוי עבור העיבוד הראשוני.
להימנע מ-JavaScript שפועל לאורך זמן
במצב JavaScript ארוך, הדפדפן לא יכול לבנות את ה-DOM, CSSOM ולעבד את הדף, לכן עדיף לדחות לוגיקת אתחול ופונקציונליות שאינן חיוניות לעיבוד הראשון. אם צריך להפעיל רצף אתחול ארוך, כדאי לפצל אותו לכמה שלבים כדי לאפשר לדפדפן לעבד אירועים אחרים ביניהם.
אופטימיזציה של השימוש בשירות CSS
שירות CSS נדרש כדי לבנות את עץ העיבוד, ו-JavaScript חוסם לעיתים קרובות ב-CSS במהלך הבנייה הראשונית של הדף. עליכם לוודא שכל שירות CSS לא חיוני מסומן כלא קריטי (לדוגמה, שאילתות הדפסה ושאילתות מדיה אחרות), ושכמות תוכן ה-CSS הקריטי והזמן שנדרש לספק אותו קטן ככל האפשר.
מקם CSS בראש המסמך
יש לציין את כל משאבי ה-CSS בהקדם האפשרי במסמך ה-HTML, כדי שהדפדפן יוכל לגלות את תגי <link> ולשלוח את הבקשה אל ה-CSS בהקדם האפשרי.
הימנעות מייבוא של שירותי CSS
הוראת ייבוא ה-CSS (@import) מאפשרת לגיליון סגנונות אחד לייבא כללים מקובץ אחר של גיליון סגנונות. עם זאת, יש להימנע מההוראות האלה כי הן מוסיפות פעולות הלוך ושוב לנתיב הקריטי: משאבי ה-CSS המיובאים מתגלים רק אחרי שגיליון ה-CSS של ה-CSS עם הכלל @import עצמו מתקבל וניתוח.
CSS מוטבע לחסימת עיבוד
כדי להשיג את הביצועים הטובים ביותר, מומלץ להוסיף את ה-CSS הקריטי ישירות למסמך ה-HTML. כך מבטלים חזרות נוספות בנתיב הקריטי, ואם עושים זאת בצורה נכונה, אורך נתיב קריטי 'הלוך ושוב', שבו רק ה-HTML הוא משאב חוסם.