שליפה של משאבים מהרשת היא תהליך איטי ויקר:
- תגובות גדולות דורשות פעולות "הלוך ושוב" רבות בין הדפדפן לשרת.
- הדף לא ייטען עד שכל המשאבים הקריטיים יושלמו במלואו.
- אם למשתמש באתר יש חבילת גלישה מוגבלת, כל בקשה מיותרת לרשת היא בזבוז של הכסף שלו.
איך אפשר להימנע מבקשות רשת מיותרות? מטמון ה-HTTP של הדפדפן הוא קו ההגנה הראשון. זו לא בהכרח הגישה הכי חזקה או גמישה, ויש לכם שליטה מוגבלת על משך החיים של תגובות שנשמרו במטמון, אבל היא יעילה, היא נתמכת בכל הדפדפנים ולא מצריכה עבודה רבה.
מדריך זה מציג את היסודות של יישום יעיל של שמירת HTTP במטמון.
תאימות דפדפן
מטמון ה-HTTP הוא השם הכללי של אוסף ממשקי API של פלטפורמת אינטרנט שנתמכים בכל הדפדפנים:
Cache-Control
ETag
Last-Modified
כיצד פועל מטמון HTTP
כל בקשות ה-HTTP שהדפדפן מבצע מנותבות ראשונות למטמון של הדפדפן, כדי לבדוק אם יש תגובה חוקית במטמון שאפשר להשתמש בה כדי למלא את הבקשה. אם יש התאמה, התגובה נקראת מהמטמון, וכך מתבטלת גם זמן האחזור ברשת וגם עלויות הנתונים של ההעברה.
ההתנהגות של מטמון ה-HTTP נשלטת על ידי שילוב של כותרות בקשות וכותרות תגובות. בתרחיש אידיאלי, יש לכם שליטה גם על קוד אפליקציית האינטרנט, שקובע את כותרות הבקשות וגם על ההגדרה של שרת האינטרנט, שקובעת את כותרות התגובות.
למידע מעמיק יותר על מושגים, תוכלו לעיין במאמר שמירת HTTP במטמון של MDN.
כותרות הבקשות: נשארות עם ברירות המחדל (בדרך כלל)
יש מספר כותרות חשובות שצריך לכלול בבקשות היוצאות של אפליקציית האינטרנט שלכם, אבל הדפדפן כמעט תמיד יטפל להגדיר אותן בשמכם כשהוא שולח בקשות. כותרות בקשה שמשפיעות על בדיקת העדכניות, כמו If-None-Match
ו-If-Modified-Since
מופיעות על סמך האופן שבו הדפדפן מבין את הערכים הנוכחיים במטמון ה-HTTP.
אלו חדשות טובות: המשמעות היא שאתם יכולים להמשיך להוסיף תגים כמו <img src="my-image.png">
ל-HTML, והדפדפן יטפל עבורכם באופן אוטומטי בשמירת HTTP במטמון ללא מאמץ נוסף.
כותרות תגובה: הגדרת שרת האינטרנט
החלק החשוב ביותר בהגדרת שמירת ה-HTTP הוא הכותרות ששרת האינטרנט מוסיף לכל תגובה יוצאת. הכותרות הבאות מביאות בחשבון את ההתנהגות האפקטיבית של השמירה במטמון:
Cache-Control
- השרת יכול להחזיר הוראת
Cache-Control
כדי לציין איך, ולמשך כמה זמן, הדפדפן ומטמון הביניים האחרים צריכים לשמור את התגובה המסוימת במטמון. ETag
.- כשהדפדפן מוצא תגובה שנשמרה במטמון שפג תוקפה, הוא יכול לשלוח לשרת אסימון קטן (בדרך כלל גיבוב של תוכן הקובץ) כדי לבדוק אם הקובץ השתנה. אם השרת מחזיר את אותו האסימון, הקובץ זהה ואין צורך להוריד אותו מחדש.
Last-Modified
- הכותרת הזו משרתת את אותה מטרה כמו
ETag
, אבל היא משתמשת באסטרטגיה מבוססת זמן כדי לקבוע אם המשאב השתנה, בניגוד לאסטרטגיה מבוססת-התוכן שלETag
.
שרתי אינטרנט מסוימים כוללים תמיכה מובנית בהגדרת הכותרות האלה כברירת מחדל. אחרות משמיטות את הכותרות לחלוטין, אלא אם הגדרתם אותן במפורש. הפרטים הספציפיים לאופן ההגדרה של כותרות משתנים בהתאם לשרת האינטרנט שבו אתם משתמשים, וכדאי לעיין במסמכי התיעוד של השרת כדי לקבל את הפרטים המדויקים ביותר.
כדי לחסוך בחיפוש, לפניכם הוראות להגדרה של כמה שרתי אינטרנט פופולריים:
השמטת כותרת התגובה Cache-Control
לא משביתה את שמירת ה-HTTP במטמון.
במקום זאת, דפדפנים
מנחשים ביעילות איזה סוג של התנהגות שמירה במטמון הוא המתאים ביותר לסוג נתון של תוכן.
סביר להניח שאתם רוצים יותר שליטה ממה שיש לכם להציע, ולכן תצטרכו להקדיש זמן להגדרת כותרות התגובות.
באילו ערכים של כותרת תגובה כדאי להשתמש?
יש שני תרחישים חשובים שצריך להתייחס אליהם כשמגדירים את כותרות התגובות של שרת האינטרנט.
שמירה במטמון לטווח ארוך של כתובות URL עם גרסאות
נניח שהשרת מורה לדפדפנים לשמור קובץ CSS במטמון
למשך שנה (Cache-Control: max-age=31536000
), אבל המעצב שלך
ביצע עדכון למקרה חירום שעליך להטמיע באופן מיידי. איך מודיעים לדפדפנים לעדכן את העותק "לא פעיל" של הקובץ השמור?
אי אפשר, לפחות לא בלי לשנות את כתובת ה-URL של המשאב.
אחרי שהדפדפן שומר את התגובה במטמון, נעשה שימוש בגרסה שנשמרה במטמון עד שהיא לא מעודכנת יותר, כפי שנקבע ב-max-age
או ב-expires
, או עד שהיא יוצאת מהמטמון מסיבה אחרת, למשל המשתמש מנקים את המטמון של הדפדפן. כתוצאה מכך, משתמשים שונים עלולים לטעון גרסאות שונות של הקובץ בזמן יצירת הדף: משתמשים שאחזרו את המשאב משתמשים בגרסה החדשה, אבל משתמשים ששמרו במטמון עותק קודם (אבל עדיין תקף) משתמשים בגרסה ישנה יותר.
כדי לקבל גם שמירה במטמון בצד הלקוח וגם עדכונים מהירים, אפשר לשנות את כתובת ה-URL של המשאב ולאלץ את המשתמש להוריד את התגובה החדשה בכל פעם שהתוכן שלו משתנה. בדרך כלל כדי לעשות זאת, אפשר להטמיע טביעת אצבע של הקובץ או את מספר הגרסה בשם הקובץ שלו: לדוגמה, style.x234dff.css
.
כשאתם מגיבים לבקשות לכתובות URL שמכילות טביעת אצבע או מידע על גרסאות, והתוכן שלהן אף פעם לא אמור להשתנות, צריך להוסיף את הערך Cache-Control: max-age=31536000
לתשובות.
הערך הזה מורה לדפדפן שכאשר הוא צריך לטעון את אותה כתובת URL בכל זמן במהלך השנה הבאה (31,536,000 שניות הוא הערך הנתמך המקסימלי), הוא יוכל להשתמש באופן מיידי בערך במטמון HTTP, ללא כל צורך בשליחת בקשת רשת לשרת האינטרנט. זה נהדר – בזכות ההימנעות מחיבור לרשת, קיבלתם מיד את האמינות והמהירות שצברתם.
כלים לפיתוח כמו Webpack יכולים לבצע אוטומציה של התהליך של הקצאת טביעות אצבע דיגיטליות (hash) לכתובות ה-URL של הנכסים.
אימות מחדש של השרת עבור כתובות URL ללא גרסה
לצערנו, לא כל כתובות ה-URL שאתם טוענים הן גרסאות. ייתכן שלא תוכלו לכלול שלב build לפני פריסת אפליקציית האינטרנט, ולכן לא תוכלו להוסיף גיבובים לכתובות ה-URL של הנכסים. לכל אפליקציית אינטרנט נדרשים קובצי HTML, שכמעט אף פעם לא כוללים מידע על ניהול גרסאות, כי אף אחד לא טורח להשתמש באפליקציית האינטרנט שלכם אם הוא צריך לזכור שכתובת ה-URL שבה צריך להיכנס היא https://example.com/index.34def12.html
. אז מה אפשר לעשות לגבי כתובות ה-URL האלה?
שמירת HTTP במטמון בלבד אינה חזקה מספיק כדי למנוע לחלוטין את הרשת. (אל דאגה – בקרוב תקראו על service worker, שמספקים תמיכה נוספת). עם זאת, יש כמה פעולות שאפשר לבצע כדי להבטיח שבקשות ברשת יהיו מהירות ויעילות ככל האפשר.
הערכים הבאים של Cache-Control
יכולים לעזור לכם לכוונן את המיקום במטמון ואת האופן שבו כתובות URL ללא גרסה נשמרות במטמון:
no-cache
מורה לדפדפן שצריך לאמת אותו מחדש מול השרת בכל פעם לפני שמשתמשים בגרסה שנשמרה במטמון של כתובת ה-URL.no-store
מורה לדפדפן ולמטמון ביניים אחרים (כמו CDN) לא לאחסן אף פעם גרסה של הקובץ.private
: דפדפנים יכולים לשמור את הקובץ במטמון, אבל מטמוני הביניים לא יכולים.public
: כל מטמון יכול לאחסן את התגובה.
ראו נספח: Cache-Control
תרשים זרימה כדי להמחיש את תהליך ההחלטה באילו ערכי Cache-Control
להשתמש. באמצעות Cache-Control
אפשר גם לקבל רשימה של הנחיות שמופרדות בפסיקים. למידע נוסף, ראו נספח: Cache-Control
דוגמאות.
גם הגדרה של ETag
או של Last-Modified
יכולה לעזור.
כפי שצוין בכותרות תגובה, שתיהן ETag
ו-Last-Modified
משרתות את אותה מטרה: לקבוע אם הדפדפן צריך להוריד מחדש קובץ שמור במטמון שפג תוקפו. אנחנו ממליצים להשתמש ב-ETag
כי הוא מדויק יותר.
נניח שחלפו 120 שניות מאז האחזור הראשוני והדפדפן שלח בקשה חדשה לאותו משאב. תחילה, הדפדפן בודק את מטמון ה-HTTP ומוצא את התגובה הקודמת.
לצערנו, הדפדפן לא יכול להשתמש בתשובה הקודמת
כי התוקף שלה פג. בשלב הזה, הדפדפן יכול לשלוח בקשה חדשה ולאחזר את התגובה המלאה החדשה. עם זאת, הפעולה הזו לא יעילה כי אם המשאב לא השתנה, אין סיבה להוריד מחדש את המידע שכבר נמצא במטמון.
זו הבעיה שאסימוני האימות של ETag
נועדו
לפתור. השרת יוצר ומחזיר אסימון שרירותי, שהוא בדרך כלל גיבוב (hash) או טביעת אצבע אחרת של תוכן הקובץ.
הדפדפן לא צריך לדעת איך טביעת האצבע נוצרת. הוא צריך לשלוח אותו לשרת רק בבקשה הבאה. אם
טביעת האצבע נשארת זהה, המשאב לא השתנה
והדפדפן יכול לדלג על ההורדה.
אם מגדירים את הערך ETag
או Last-Modified
, בקשת האימות מחדש פועלת בצורה הרבה יותר יעילה, כי היא מאפשרת להפעיל את כותרות הבקשה If-Modified-Since
או If-None-Match
שצוינו בכותרות של בקשות.
כששרת אינטרנט שמוגדר כראוי רואה את הכותרות של הבקשות הנכנסות, הוא יכול לאשר אם גרסת המשאב שכבר יש לדפדפן במטמון ה-HTTP תואמת לגרסה האחרונה בשרת האינטרנט. אם יש התאמה, השרת יכול להגיב בתגובת HTTP של 304 Not Modified
, שזהה כמו "היי, תמשיכו להשתמש במה שכבר יש לכם!" שולחים מעט מאוד נתונים כששולחים תשובה מהסוג הזה, כך שבדרך כלל זה הרבה יותר מהיר מאשר שליחה חוזרת של עותק של המשאב המבוקש בפועל.
סיכום
מטמון ה-HTTP הוא דרך יעילה לשפר את ביצועי העומס, כי הוא מפחית בקשות רשת מיותרות. יש תמיכה בכל הדפדפנים ולא נדרשת עבודה רבה כדי להגדיר אותה.
ההגדרות הבאות של Cache-Control
הן התחלה טובה:
Cache-Control: no-cache
למשאבים שצריך לאמת מחדש מול השרת לפני כל שימוש.Cache-Control: no-store
למשאבים שאף פעם לא אמורים להישמר במטמון.Cache-Control: max-age=31536000
למשאבים עם גרסאות.
הכותרת ETag
או Last-Modified
יכולה לעזור באימות מחדש של משאבי מטמון שתוקפם פג, ביעילות רבה יותר.
מידע נוסף
אם אתם מחפשים מידע מעבר לעקרונות הבסיסיים של השימוש בכותרת Cache-Control
, כדאי לעיין במדריך של ג'ייק ארצ'יבלד שיטות מומלצות לשמירה במטמון וגיל מקסימלי של ג'ייק ארצ'יבלד.
ראו את המאמר אוהבים את המטמון כדי לקבל הנחיות לאופטימיזציה של השימוש במטמון למבקרים חוזרים.
נספח: טיפים נוספים
אם יש לכם עוד זמן, הנה עוד דרכים לבצע אופטימיזציה של השימוש במטמון ה-HTTP:
- השתמשו בכתובות URL עקביות. אם מציגים את אותו תוכן בכתובות URL שונות, הדפדפן יאחזר ויאחסן את התוכן מספר פעמים.
- צמצמו את הנטישה. אם חלק ממשאב (כמו קובץ CSS) מתעדכן לעיתים קרובות, ושאר הקובץ לא מתעדכן (כמו בקוד הספרייה), כדאי לפצל את הקוד שמעדכן בתדירות גבוהה לקובץ נפרד ולהשתמש באסטרטגיית שמירה במטמון למשך זמן קצר עבור הקוד שמתעדכן בתדירות גבוהה, ואסטרטגיה ארוכה של משך שמירה במטמון לקוד שלא משתנה לעיתים קרובות.
- אם המדיניות
Cache-Control
שלכם לא תקינה, כדאי לשקול את ההנחיה החדשהstale-while-revalidate
.
נספח: תרשים זרימה Cache-Control
נספח: Cache-Control
דוגמאות
ערך של Cache-Control |
הסבר |
---|---|
max-age=86400 |
את התגובה ניתן לשמור במטמון על ידי דפדפנים ומטמון ביניים למשך יום אחד לכל היותר (60 שניות x 60 דקות x 24 שעות). |
private, max-age=600 |
התגובה יכולה להישמר במטמון על ידי הדפדפן, אבל לא במטמון המתווך, למשך עד עשר דקות (60 שניות x 10 דקות). |
public, max-age=31536000 |
ניתן לשמור את התגובה בכל מטמון למשך שנה. |
no-store |
לא ניתן לשמור את התשובה במטמון וצריך לאחזר אותה במלואה בכל בקשה. |