המדריך המלא על Cache באתרי אינטרנט – קאש בדפדפן בדפדפן ואיך לנקות אותו (חלק 2)

לפני שבוע בערך כתבתי פוסט על cache שמשך תשומת לב ואחת התגובות הייתה בנוגע ל-cache בדפדפן.

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

אז אתחיל ואגיד שהקונספט של cache ושמירת מידע ממש לא ייחודי לוורדפרס ואפילו לא לעולם הקוד..

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

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

אתחיל ברשימה כדי שנוכל להתמצא, ולאחר מכן אעשה drill down כדי להבין איך כל אחד מהם תורם לנו בשרשרת.

אז הפופולאריים הם:

1. Cache ברמת הדפדפן (אצל המשתמש)
2. Cache בדרך לשרת (מוכר גם כ-CDN)
3. Cache ברמת האתר (נקרא FPM או full page cache)
4. Cache מול בסיס הנתונים (למשל Redis)

אתחיל בגורם הבלבול מספר אחת, קאש ברמת הדפדפן שלנו (״תעשה Ctrl + Shift + F5״ נשמע לכם מוכר?).

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

יש לנו את התמונות כמובן, אייקונים, קבצי עיצוב (CSS) וקבצים שאחראים לאינטראקציה שלנו כמשתמש עם העמוד (JS).

תתפלאו לגלות שכשאתם נכנסים לאתר כמו ynet למשל, עשויים להטען עשרות/מאות קבצים מאחורי הקלעים.

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

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

מתי מתחילות הבעיות?

כשאנחנו משנים דברים ולא דאגנו לעדכן את הדפדפנים של הגולשים שהשינויים בוצעו.

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

כשאנחנו אומרים למשתמש בצע Ctrl + Shift + F5 במחשב שלך אנחנו בעצם מבקשים ממנו לנקות את ה-cache בדפדפן שלו באופן יזום ולטעון את כל הקבצים שדרושים להצגת האתר מחדש.

איך בכל זאת אפשר להתמודד עם זה?

כמובן שאנחנו לא רוצים לבקש מכל המשתמשים שלנו לרענן את הדפדפן בכל פעם שאנחנו משנים משהו נכון? זה לא הגיוני להוסיף הודעה כזאת באתר ״אם לא עובד לך, תעשה Ctrl + Shift + F5…״

אז יש כמה אפשרויות:

1. שינוי שם הקובץ, במקום logo.jpg, לקרוא לו logo-20022024.jpg (תאריך של היום) זה לא אופטימלי כי זה ידני, אבל זה עושה את העבודה.
2. הגדרת תאריך תפוגה ל-cache בדפדפן כן, אתם יכולים לשלוט בזה *עבור* המשתמשים באתר *שלכם*.
3. הוספת פרמטר version לשם הקובץ רלוונטי בעיקר לקבצי CSS/JS זה פרוצדורה טכנית יותר, לא אכנס לזה במאמר הזה.

עד כאן על cache בדפדפן, רוצים לקרוא עוד? לחצו כאן על התגית של Cache ותמצאו הכל שם