בקצרה: מהירות של אתר נקבעת ברובה כבר בשלב העיצוב ולא בשרת. כמה תמונות יש בעמוד ובאיזה משקל, האם יש וידאו ברקע, כמה גופנים, כמה תוספים חיצוניים ומה מופיע במסך הראשון: אלה ההחלטות שקובעות אם הגולש בטלפון יראה תוכן מיד או מסך לבן. אתר שתוכנן נכון יכול להיות גם יפה, גם חי וגם מהיר.
למה מהירות היא החלטה עיצובית ולא רק טכנית
הרבה בעלי עסקים חושבים על מהירות כמו על משהו שמתקנים בסוף: מתקינים תוסף, משדרגים אחסון, וזהו. בפועל, אם העיצוב שאושר כולל סליידר של חמש תמונות ענקיות במסך הראשון, וידאו ברקע, שלושה גופנים ומפה מוטמעת, אף מתכנת לא יהפוך את העמוד הזה למהיר באמת. הוא יכול לדחוס ולסדר, אבל הוא לא יכול לבטל החלטות שכבר התקבלו.
גוגל מודד את חוויית הטעינה דרך מדדים שנקראים Core Web Vitals, ומפרסם עליהם הסברים ב-Google Search Central. שלושת המדדים המרכזיים עונים על שלוש שאלות פשוטות: כמה מהר מופיע האלמנט הגדול במסך הראשון, כמה מהר העמוד מגיב ללחיצה, והאם העמוד קופץ בזמן הטעינה. לשלוש השאלות האלה יש תשובה בעיצוב. ומכיוון שגוגל בודק קודם את גרסת הטלפון של האתר (הסבר מלא במאמר על אינדקס מובייל), הטלפון הוא המקום שבו כל החלטה כבדה מורגשת ראשונה. על הצד הטכני של מדידה ותיקון כתבתי בנפרד במאמר על מהירות אתר. כאן נתמקד במה שנקבע לפני הקוד.
1. תמונות: כמה, באיזה גודל ובאיזה פורמט
תמונות הן כמעט תמיד החלק הכבד ביותר בעמוד. ההחלטה העיצובית הראשונה היא לא איזו תמונה, אלא כמה. עמוד עם שלוש תמונות חזקות עדיף על עמוד עם חמש-עשרה בינוניות, גם במהירות וגם בעיצוב.
אחרי שבחרתם, יש שלושה כללים שכל אתר צריך לקיים:
- כל תמונה מוקטנת לגודל שבו היא מוצגת בפועל. צילום מהטלפון ברוחב של אלפי פיקסלים לא צריך להגיע כמו שהוא לכרטיס ברוחב של כמה מאות.
- הטלפון מקבל גרסה קטנה יותר מהמחשב. הדפדפן יודע לבחור לבד, אם מכינים לו כמה גדלים.
- פורמט מודרני כמו WebP, שבדרך כלל שוקל הרבה פחות מ-JPG באותה איכות נראית.
ועוד החלטה אחת: התמונה הראשונה במסך נטענת מיד ובעדיפות, וכל השאר נטענות רק כשהגולש מתקרב אליהן. על בחירת התמונות עצמן יש מאמר נפרד על תמונות לאתר.
2. וידאו ברקע ותלת-ממד במסך הראשון
וידאו ברקע נראה מרשים בהצגה על מסך גדול במשרד, ושוקל הרבה בטלפון ברשת סלולרית. אם הוא באמת מספר משהו על העסק, אפשר להשאיר אותו בתנאים: קצר, בלי קול, דחוס היטב, ועם תמונה סטטית שמופיעה מיד עד שהוא מוכן. בטלפון לפעמים עדיף להציג רק את התמונה.
אותו עיקרון חל על תלת-ממד. אני אוהב אובייקטים תלת-ממדיים, ובאתר שלי יש דפדפן תלת-ממדי במסך הראשון. אבל הוא בנוי כך שהכותרת והכפתור מופיעים קודם, הסצנה נטענת אחריהם, ובטלפון מוצגת קודם תמונה שטוחה עד שהיא מוכנה. באתר שבניתי ליועצת המשכנתאות אלה אוזן יש מגדל שרטוט בתלת-ממד שנבנה מול העיניים, ובאתר של י.ה.ב בדק בית יש סיור תלת-ממדי בדירה. בפרויקטים כאלה השאלה היא לא אם להשתמש בתלת-ממד, אלא באיזה סדר הדברים נטענים.
3. גופנים: שניים מספיקים
כל גופן וכל משקל שלו הם קובץ נוסף שהדפדפן מוריד. גופן כותרות עם אופי וגופן טקסט קריא, עם שניים-שלושה משקלים כל אחד, מספיקים כמעט לכל אתר עסקי. אם העיצוב משתמש בשישה משקלים שונים, האתר יוריד שישה קבצים.
בעברית יש עוד שיקול: הרבה גופנים מגיעים עם אותיות עבריות ולטיניות באותו קובץ. כדאי לטעון רק את מה שבאמת בשימוש, ולהגדיר שהטקסט יוצג מיד בגופן גיבוי עד שהגופן המיוחד מגיע. ככה הגולש קורא מהשנייה הראשונה. על בחירת הגופן עצמו כתבתי במאמר על פונטים בעברית לאתר.
4. תוספים, ווידג'טים וסקריפטים חיצוניים
צ'אט שקופץ, פיד של אינסטגרם, מפה מוטמעת, מונה מבקרים, כמה כלי מעקב במקביל: כל אחד מהם טוען קוד משרת אחר, ולפעמים הקוד הזה כבד יותר מכל האתר. לפני שמוסיפים משהו, שואלים שאלה אחת: האם הגולש צריך את זה כדי לפנות אליכם?
כמה החלפות פשוטות שעושות הבדל:
- מפה מוטמעת מוחלפת בתמונה של המפה עם קישור לווייז ולגוגל מפות.
- פיד רשתות חברתיות מוחלף בכמה תמונות נבחרות וקישור לפרופיל.
- כלי מדידה נטענים רק אחרי שהגולש הסכים לעוגיות. כך אני בונה את Google Analytics בכל אתר.
לפעמים הבעיה היא המערכת עצמה. אתר שנבנה עם הרבה תוספים טוען לא פעם קוד שלא משמש בכלל את העמוד הנוכחי. באתר של עו"ד שגב סמואל אשכנזי עשינו חידוש מלא מוורדפרס לאתר מהיר בקוד, ואפשר לקרוא על זה בסיפור הפרויקט.
5. המסך הראשון ויציבות העמוד
מה מופיע בשנייה הראשונה
ההחלטה הכי חשובה היא מה הגולש רואה מיד. אם המסך הראשון בנוי מכותרת, משפט וכפתור שכתובים כטקסט אמיתי, הם יכולים להופיע כמעט מיד, גם כשהשאר עוד נטען. אם הכותרת היא חלק מתמונה, או שהכול תלוי באנימציה ובגופן מיוחד, הגולש מחכה לשלושתם. על בניית המסך הזה יש מאמר שלם על המסך הראשון באתר.
עמוד שלא קופץ
עוד דבר שנקבע בעיצוב הוא יציבות. אם תמונה, באנר או באנר עוגיות נטענים מאוחר ודוחפים את הטקסט למטה, הגולש מאבד את המקום, ולפעמים לוחץ בטעות על משהו אחר. הפתרון: לשמור מראש מקום בגודל הנכון לכל תמונה ולכל אלמנט שנטען, ולהציג הודעות כמו באנר עוגיות מעל התוכן ולא בתוכו.
הגולש לא מודד שניות, הוא מרגיש. עמוד שמראה כותרת וכפתור מיד ומשלים תמונות אחר כך מרגיש מהיר, גם אם בסוף הוא נטען באותו זמן כמו עמוד שנשאר לבן עד שהכול מוכן.
6. אנימציות שלא מעכבות את התוכן
תנועה יכולה לשדרג אתר מאוד, ובאתרים שאני בונה יש הרבה ממנה. אבל היא צריכה להיבנות כך שהיא לא עומדת בין הגולש לתוכן:
- הטקסט קיים בעמוד מההתחלה. האנימציה רק חושפת אותו, ואם היא לא נטענה, הוא עדיין שם.
- התנועה מבוססת על הזזה, שינוי גודל ושקיפות, שהדפדפן מבצע בקלות, ולא על שינוי מבנה העמוד.
- ספריות האנימציה נטענות אחרי התוכן.
- מי שהגדיר במכשיר הפחתת תנועה מקבל אתר שקט, וגם זה חלק מנגישות לפי ת"י 5568.
הרחבה על תנועה טובה ותנועה מיותרת יש במאמר על אנימציות באתר.
7. צ'קליסט לפני שמאשרים עיצוב
לפני שאתם מאשרים עיצוב לאתר חדש, או בודקים את האתר הקיים, עברו על הרשימה הזאת:
- כמה תמונות יש במסך הראשון? יותר מאחת צריכה סיבה טובה.
- האם יש וידאו ברקע, ומה מופיע עד שהוא נטען?
- כמה גופנים וכמה משקלים יש בעיצוב?
- האם הכותרת והכפתור כתובים כטקסט, או שהם חלק מתמונה?
- אילו כלים חיצוניים נטענים בכל עמוד, וכמה מהם באמת נחוצים?
- האם יש מקום שמור לכל תמונה, כך שהעמוד לא קופץ?
- איך נראה העמוד בשלוש השניות הראשונות בטלפון?
איך בודקים בלי להיות מתכנתים
פתחו את האתר בטלפון, כבו את ה-Wi-Fi ושימו לב מתי אפשר לקרוא וללחוץ. אחר כך הריצו את הכתובת בכלי החינמי PageSpeed Insights של גוגל, בלשונית של הטלפון. ואם האתר מחובר ל-Google Search Console, יש שם דוח שמראה אילו עמודים איטיים לפי נתונים של גולשים אמיתיים.
לסיכום
אתר מהיר מתחיל בהחלטות: מעט תמונות במשקל נכון, מעט גופנים, בלי תוספים מיותרים, ומסך ראשון שמופיע מיד. כשהעיצוב והקוד נבנים יחד אצל אותו אדם, אין פער בין מה שנראה יפה במצגת למה שנטען מהר בטלפון. אם האתר הנוכחי שלכם איטי, אפשר לבדוק אם הוא צריך תיקון או חידוש אתר, ואם אתם מתכננים אתר תדמית חדש, אפשר לקרוא איך זה נבנה אצלי בתהליך העבודה.
רוצים אתר שעובד בשביל העסק?
ספרו לי מה אתם צריכים, ותקבלו כיוון ברור והצעת מחיר מסודרת.