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

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

קודם, מה זה בכלל “תמונה כבדה”

תחשבו על זה ככה: לתמונה יש שני דברים שקובעים את המשקל שלה. הראשון הוא כמה פיקסלים יש בה (הרזולוציה), והשני הוא באיזה פורמט היא שמורה. תמונה של 4.8 מגה-בייט היא בדרך כלל גם גדולה מאוד בפיקסלים וגם שמורה בפורמט “בזבזני” כמו PNG.

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

מה אנחנו עושים אוטומטית לכל תמונה

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

1. ממירים לפורמט קל (WebP). כל תמונה, גם אם העליתם אותה כ-PNG כבד או כ-JPG, מומרת אוטומטית ל-WebP. זה פורמט תמונה מודרני שנתמך היום בכל הדפדפנים, ושוקל בערך שליש עד רבע ממה שאותה תמונה הייתה שוקלת אחרת, בלי הבדל איכות שהעין קולטת.

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

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

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

המספרים האמיתיים, מהאתר הזה עצמו

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

  • צילומי מסך במאמר: תמונה שהמקור שלה שקל 145 קילו-בייט מוגשת בנייד כ-WebP של 16 קילו-בייט. פי תשעה פחות, אותה תמונה בדיוק.
  • תמונת השיתוף (מה שרואים כשמשתפים קישור בוואטסאפ): הייתה PNG של 299 קילו-בייט, היום JPG דחוס של 31 קילו-בייט. בונוס: מעל סף מסוים וואטסאפ בכלל לא מציג את התמונה בתצוגה המקדימה, אז הקובץ הקל גם מבטיח שהשיתוף ייראה טוב.
  • צילום כבד של 4.8 מגה-בייט: במקום שהגולש יוריד את כל ה-4.8 מגה, הוא מקבל גרסת WebP קטנה שמתאימה למסך שלו, לרוב עשרות בודדות של קילו-בייט.

רגע, אז פי כמה בדיוק? תלוי בתמונה, ובגלל זה חשוב להיות מדויקים. שתי הדוגמאות הראשונות למעלה התחילו מקבצים שכבר היו קלים יחסית, ולכן הרווח הוא פי תשעה עד עשרה. תמונה כבדה באמת, כמו PNG של כמה מגה-בייט (בדרך כלל צילום מסך או גרפיקה), מתכווצת הרבה יותר, ובנייד אפילו פי מאה ומעלה. הסוד הוא שאנחנו עושים שני דברים ולא אחד: גם ממירים פורמט (זה לבד כבר חוסך המון, כי PNG הוא פורמט בזבזני), וגם מקטינים את הרזולוציה למכשיר. החלפת פורמט לבדה מביאה בערך לפי 20 עד 35. ההקטנה למסך של הטלפון היא שמכפילה את זה עד לפי מאה. לכן ככל שהמקור כבד יותר, וככל שהמסך קטן יותר, החיסכון גדול יותר.

רגע, ומה זה Astro?

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

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

”אבל אני כבר ממטב תמונות”

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

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

למה כל זה חשוב לעסק שלכם

  • ⚡ האתר נטען מהר יותר, וזה הדבר הראשון שמבקר מרגיש.
  • 📈 עוזר לקידום בגוגל, כי מהירות היא אחד השיקולים בדירוג.
  • 📱 עובד טוב גם במכשירים ישנים ובאינטרנט איטי, כי יש פחות מה להוריד.
  • 😊 פחות נטישה, כי מבקרים לא בורחים מרוב חוסר סבלנות בזמן שהעמוד נבנה.

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

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