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

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

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

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

כל המשאבים הסטטיים שלא שמורים במטמון מופיעים ב-Lighthouse:

צילום מסך של נכסים סטטיים ב-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 ימים = 31536000 שניות.

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

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

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

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

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

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

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

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

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

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

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

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

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

Drupal

מגדירים את הגיל המקסימלי של הדפדפן ומטמון ה-Proxy בדף Administration (ניהול) > Configuration (הגדרה) > Development (פיתוח). למידע נוסף, ראו משאבי ביצועים של Drupal.

ג'ומלה

ראו מטמון.

WordPress

למידע נוסף, ראו שמירה במטמון הדפדפן.

משאבים