בפוסט הקודם הסברנו איך עובדת טעינה של עמוד אינטרנט. הדפדפן מבצע קריאה לשרת, השרת מריץ קוד PHP שמייצר עמוד HTML ומחזיר את הHTML לשרת. בשלב השני – הדפדפן (שקיבל את הHTML) הולך לשרת ומבקש לקבל ממנו את כל המשאבים – קבצי CSS, JS, מדיה, פונטים ועוד.
בהמשך הסברנו על תוספי קאש, אשר שומרים עותק של הHTML המוכן על השרת, ועברנו על הגדרות נפוצות של תוספי קאש, ואיך למחוק קאש.
הפעם נדבר על השלב השני בטעינה – שלב טעינת המשאבים.
איך אפשר לבדוק כמה משאבים נטענים לדפדפן?
בקלות.
תלחצי במקלדת על F12, בחלונית של כלי הפיתוח תעברי לטאב שנקרא "רשת" או Network. עכשיו תרענני את הדף. תוכלי לראות את כל המשאבים שנטענים לדפדפן (כולל הHTML). יש כפתור של משפך, לחיצה עליו תפתח אפשרות לסינון לפי סוגי קבצים. אם נלחץ על JS – נוכל לראות בדיוק כמה קבצי JS נטענים לעמוד, ולמטה יופיע מספר, לדוגמה 50/150, זה אומר – 50 קבצי JS מתוך 150 משאבים סך הכל.
למה יש כל כך הרבה קבצים?
כל תוסף שקשור לנראות מוסיף לפחות קובץ CSS אחד ובדרך כלל גם לפחות קובץ JS אחד. אני מדברת על תוספים כמו אלמנטור, כל התוספים של ג'ט, ווקומרס, addons שמוסיפים לאלמנטור, תוסף לכפתור whatsApp, תוסף לכפתור חזרה לראש הדף, תוסף לmega menu וכו'.
מקורות נוספים של קבצים הם סקריפטים של גוגל אנליטיקס או search console, רכיבים כמו reCaptcha של גוגל ועוד.
מה הבעיה במשאבים?
ישנן 2 בעיות עיקריות שבגללן טעינת משאבים לוקחת זמן ומשפיעה על ניקוד העמוד בכלי בדיקת ביצועים – כמות ומשקל המשאבים שלנו.
עבור כל קובץ שהדפדפן צריך – הוא נדרש ללכת עד לשרת, לקבל את הקובץ, לחזור, ולהריץ את הקובץ. ככל שיש יותר משאבים – הדפדפן צריך לרוץ לשרת שוב ושוב וזה לוקח זמן.
אחרי שהדפדפן קיבל את הקובץ – הוא צריך להריץ אותו. אם זו תמונה – לטעון ולהציג אותה בדף, אם זה CSS – לטעון אותו כך שהעמוד יהיה מעוצב, וכו'.
זו הסיבה שלפעמים בטעינת העמוד העיצוב מסתדר בשלבים, או הפונט עולה בשלב מאוחר יותר וכו'. הכל תלוי בקצב טעינת המשאבים שהתקבלו מהשרת.
פחות משאבים = טעינה מהירה יותר.
תמונות וקבצים קלים יותר = טעינה מהירה יותר.
אז מה עושים?
כדי להתגבר על הבעיה של ריבוי משאבים, רוב תוספי הקאש מכילים פונקציה של איחוד וכיווץ קבצי CSS וJS. במידה ונסמן את האופציה הזו – במקום לטעון 50-70 קבצי JS – התוסף של הקאש ייאחד את רוב הקבצים לקובץ אחד או שניים מכל סוג, וכך הדפדפן יקבל 1-2 קבצים במקום 50. זה חיסכון משמעותי בזמן.
בנוסף, התוסף יכווץ (יבצע minify) לקוד, כך שהוא ישקול פחות.
שימי לב שיש בזה קצת סיכון, בעיקר באיחוד וכיווץ של קבצי JS. כי לפעמים, בעיקר אם משתמשים בהרבה מאד תוספים, תהיה שבירה של סקריפט כלשהו באתר ותהיה בעיה עם התנהגות של רכיב כזה או אחר.
לכן תמיד אחרי ביצוע איחוד וכיווץ של קבצים – יש לעבור בצורה יסודית מאד על כל האתר, ולבצע כל אינטראקציה אפשרית מולו, החל ממילוי ושליחת טפסים, פתיחת מגה תפריט וביצוע סינונים, ועד ביצוע רכישה אם מדובר בחנות.
את הבדיקה יש לבצע במצב לא מחובר למערכת הניהול, מאחר וכמו שהסברנו בפוסט הקודם – כאשר מחוברים למערכת הניהול ברוב המקרים לא מקבלים את הגרסה מהקאש אלא את הגרסה הטריה והמלאה.
לפני הבדיקה תוכלי גם לוודא שאכן בוצע איחוד, על ידי חזרה לF12 ובדיקה על מספר המשאבים שנטען לדפדפן. אמורה להיות ירידה דרמטית במספר.
Expires headers – שמירת קאש בדפדפן
כל מה שאמרנו עד עכשיו נכון, אבל עדיין עבור כל משאב – הדפדפן יצטרך לרוץ לשרת ולבקש את הקובץ. כך שאם טיילתי בהרבה מאד דפים באתר – בכל פעם שנכנסתי לעמוד כלשהו באתר הדפדפן שלי היה צריך ללכת ולטעון את כל הקבצים מחדש.
וזה למרות שהוא כבר טען את רובם כבר בפעם הראשונה שנכנסתי לאתר!
נניח שנכנסתי לעמוד הבית. נטענו לי 4 קבצי JS ועוד 4 קבצי CSS. הקבצים הללו כוללים קוד שרלוונטי לכל האתר, ולא רק לעמוד הבית.
אחר כך עברתי לעמוד אודות, ושוב נטענים לי כל 8 הקבצים הללו. האם הדפדפן צריך לגשת לשרת ולבקש אותם שוב ושוב?! זה מגוחך!
בדיוק בשביל זה יש את האפשרות של שמירת קאש בדפדפן.
כלומר – הדפדפן שומר לעצמו עותק של המשאבים, כל המשאבים – CSS, JS, תמונות, סרטונים, פונטים וכו'. כל מה שהוא כבר קיבל פעם אחת, ובטעינות חוזרות בעמוד הזה או בעמודים אחרים – הוא לא ילך לשרת לבקש אותם שוב, אלא ישתמש בעותק שכבר קיים אצלו. מדובר בחיסכון מטורף בזמן טעינה!!
ההגדרה הזו, של לכמה זמן הדפדפן יכול לשמור אצלו גרסה ישנה של קבצים – נקראת Expires Headers, כלומר – אפשרות להגדיר HEADER (מידע הנשלח מהשרת לדפדפן יחד עם הקובץ) שאומר לדפדפן מתי הוא צריך להוריד גרסה עדכנית בפעם הבאה של הקובץ הספציפי הזה.
בוורדפרס לתמונות אין צורך לנקות את הקאש הזה בכלל, כי אם מחליפים תמונה – היא נשמרת בשם אחר, כך שאין בעיה להשאיר קאש למשך שנה ויותר.
לעומת זאת קבצי CSS או JS – נרצה לעדכן מפעם לפעם כאשר מתבצעים שינויים.
אז איך להגדיר את הHeader הזה לקבצים – יש תוספי קאש שעושים את זה מעצמם (אמרו לי לדוגמה על wp-rocket, שהוא מוסיף expires headers לקבצים אבל אף פעם לא בדקתי). אפשרות אחרת היא באמצעות מתכנת, להוסיף את הקוד הזה לקובץ htaccess של האתר, ואולי יש תוספים שמוסיפים אותם.
עדכון עיצוב של אלמנטור
אני יודעת מה את רוצה לשאול – מה אני עושה אם עשיתי שינוי באלמנטור בעמוד מסויים. האם עכשיו צריך לחכות שנה עד שכל הגולשים יראו את המעודכן?
אז הסירי דאגה מליבך 🙂 אלמנטור חכם מספיק, והוא טוען את קבצי הCSS שלו עם פרמטר. הפרמטר הזה אומר לדפדפן שזה קובץ חדש שהוא עוד לא מכיר ולכן הוא חייב לטעון אותו מחדש מהשרת, ולא יכול להשתמש בגרסה הישנה.
לא נכנס ממש לאיך עובדים פרמטרים וגרסאות של קבצים, זה רלוונטי למי שעובדת עם קוד ולא עם אלמנטור. אבל את יכולה להיות רגועה 🙂 אלמנטור עושה את העבודה הזו בשבילך.
איך מנקים קאש בדפדפן?
במידה וריעננת את העמוד ואת לא רואה שינויי עיצוב שעשית – יכול להיות ששמור לך קאש בדפדפן. כדי לרענן קאש בקלות בלי לנקות היסטוריה וכו' – את יכולה לפתוח את כלי הפיתוח בלחיצה על F12, ואז ללחוץ לחיצה ימנית של העכבר על כפתור הריענון של הדפדפן. הכפתור הרגיל שמרענן את העמוד. אבל לחיצה ימנית. ייפתח לך תת תפריט קצר שממנו את צריכה לבחור את האפשרות השלישית – ניקוי מטמון וטעינה מחדש.
זהו, עד כאן לבינתיים 🙂