יש להציג נכסים סטטיים בעזרת מדיניות מטמון יעילה

שמירה במטמון HTTP יכולה לזרז את זמן הטעינה של דפים בביקורים חוזרים.

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

איך הבדיקה של מדיניות המטמון של Lighthouse נכשלה

מגדלור מסמנת את כל המשאבים הסטטיים שלא שמורים במטמון:

צילום מסך של הנכסים הסטטיים ב-Lighthouse הצגה באמצעות בדיקה יעילה של מדיניות המטמון

מבחינת Lighthouse, ניתן לשמור משאב אם כל התנאים הבאים מתקיימים:

  • המשאב הוא גופן, תמונה, קובץ מדיה, סקריפט או גיליון סגנונות.
  • למשאב יש קוד סטטוס HTTP מסוג 200, 203 או 206.
  • למשאב אין מדיניות מפורשת של אי-שמירה במטמון.

אם דף נכשל בבדיקה, התוצאות מופיעות בטבלה עם שלוש עמודות ב-Lighthouse:

כתובת URL המיקום של משאב שאפשר לשמור במטמון
TTL לשמירה במטמון משך הזמן הנוכחי של המטמון של המשאב
גודל ההעברה הערכה של הנתונים שהמשתמשים ישמרו אם המשאב שסומן היה נשמר במטמון

איך לשמור במטמון משאבים סטטיים באמצעות שמירה במטמון HTTP

מגדירים את השרת כך שיחזיר את כותרת תגובת ה-HTTP Cache-Control:

Cache-Control: max-age=31536000

ההוראה max-age אומרת לדפדפן כמה זמן צריך לשמור במטמון את המשאב בשניות. בדוגמה הזו מגדירים את משך הזמן כ-31536000, שתואם לשנה אחת: 60 שניות × 60 דקות × 24 שעות × 365 ימים = 31536,000 שניות.

עליכם לשמור נכסים סטטיים שלא ניתנים לשינוי למשך זמן רב, כמו שנה או יותר.

אם המשאב משתנה והעדכניות שלו חשובה, השתמשו ב-no-cache אבל עדיין רוצים ליהנות מחלק מיתרונות המהירות של שמירה במטמון. הדפדפן עדיין שומר במטמון משאב שמוגדר ל-no-cache אבל הוא בודק קודם עם השרת כדי לוודא שהמשאב עדיין עדכני.

משך זמן ארוך יותר של מטמון לא תמיד טוב יותר. בסופו של דבר, אתם קובעים את משך הזמן האופטימלי של המטמון עבור המשאבים שלכם.

יש הוראות רבות להתאמה אישית של האופן שבו הדפדפן שומר במטמון משאבים שונים. מידע נוסף על שמירת משאבים במטמון מטמון HTTP: מדריך ההגנה הראשון שלכם והגדרת Codelab להתנהגות שמירת HTTP במטמון.

איך מאמתים תשובות שנשמרו במטמון בכלי הפיתוח ל-Chrome

כדי לראות אילו משאבים הדפדפן מקבל מהמטמון: פותחים את הכרטיסייה רשת בכלי הפיתוח ל-Chrome:

[הערה]: <> (הרשימה הבאה הייתה קוד מקוצר מ-web.dev, אבל היא לא תורגמה מאנגלית לאף שפה). 1. מקישים על Control+Shift+J (או על Command+Option+J ב-Mac) כדי לפתוח את כלי הפיתוח. 2. לוחצים על הכרטיסייה Network.

בעזרת העמודה Size בכלי הפיתוח ל-Chrome אפשר לוודא שהמשאב נשמר במטמון:

העמודה &#39;גודל&#39;.

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

כדי לוודא שכותרת Cache-Control של משאב מוגדרת כמצופה, לבדוק את נתוני כותרת ה-HTTP שלו:

  1. לוחצים על כתובת ה-URL של הבקשה, בעמודה שם בטבלה 'בקשות'.
  2. לוחצים על הכרטיסייה Headers (כותרות).
בדיקת הכותרת Cache-Control דרך הכרטיסייה &#39;כותרות&#39;
בודקים את הכותרת Cache-Control דרך הכרטיסייה כותרות.

הנחיות ספציפיות למקבץ

Drupal

מגדירים את הגיל המקסימלי של המטמון של הדפדפן ושל שרת proxy בקטע ניהול > הגדרה > פיתוח. למידע נוסף, ראו מקורות מידע בנושא ביצועים של Drrupal.

Joomla

ראו מטמון.

WordPress

ראו שמירה במטמון הדפדפן.

משאבים