אני משוכנע שאתם מכירים את הנתון המרתק הבא: 50% מהגולשים ינטשו את האתר שלכם אם זמן הטעינה שלו הוא מעל 3 שניות. כמובן שזהו נתון גס ולא תמיד זה יהיה ככה (למשל במצב שהגולשים כבר מכירים ואוהבים את האתר שלכם מאד/אין שום תוצאה רלוונטית אחרת/ כל המתחרים גם כן איטיים).
אבל בכל מקרה אם האתר שלכם איטי הבעיה מחמירה אף יותר כשלוקחים בחשבון שהיום רוב הטראפיק (תנועת הגולשים) מתבצעת במכשירים ניידים שנמצאים לא פעם בכל מיני חורים חסרי קליטה (כמו למשל ואדי ״עין קלט״ 🤣 סיפור אמיתי, יש מקום כזה 😅😅) וזו בהחלט בעיה רצינית. זו אפילו בעיה חמורה משתיארתי מכיוון שמדובר בשני בעיות גם יחד:
הראשונה: מהבחינה של הנטישה
השנייה: מבחינת הקידום בגוגל! גוגל אוהב אתרים שעולים מהר, זהו פרמטר חשוב בשקלול הציון של האתר שלכם מבחינת גוגל. ומיותר לציין שאתר עם ציון טוב יותר = מופיע גבוה יותר בתוצאות החיפוש. בעקרון, הזחלן (הסורק) של גוגל מודד את זמן הטעינה של האתר אך יש לי השערה כבר די הרבה זמן, שגוגל משתמשת בנתוני הגוגל אנליטיקס שלנו ושואבת משם את זמן הטעינה הממוצע (או המפורט 🤭🤭) של כל דף באתר.
כך או כך המסקנה היא רק אחת:
חייבים, חייבים להשתפר! ואם תגידו לי ״אין מה לעשות יאיר, גם האתרים של המתחרים שלי נטענים לאט בואדי ׳אין קלט׳ הזה״ אגיד לכם שתכלס, אתם צודקים, גם הם נטענים לאט.. אבל זה לא אומר שאתם לא צריכים להשתפר! להפך! יש לכם הזדמנות לפתוח פער עצום מולם .
לפני שנתחיל חשוב לי לשים משהו על השולחן. כמו שהגולשים הקבועים שלנו יודעים, לסטודיו יש פייבוריטית: וזו ללא ספק וויקס, מערכת בניית האתרים המפעימה של וויקס.קום (גאווה ישראלית).
שימו לב המאמר הזה נכון לכל האתרים באשר הם אך ההדרכות וצילומי המסך הינם עם התמקדות ברורה על ביצוע הפעולות במערכת בניית האתרים בוויקס.
ועכשיו, בואו נתחיל עם כלל אצבע:
שיפור האתר וויקס שלנו מתבצע על ידי הפיכת הקוד ליותר נקי וקריא + צמצום משקל האתר
שלב א: אופטימיזציה למדיה
מדיה באתר היא מעמסה רצינית. כשאני אומר מדיה אני מתכוון ל: וידאו, תמונות, ואודיו.
חשוב להבין שהמעמסה הזו פוגעת במהירות האתר ובכתוצאה מכך בקידום אתר בגוגל. אלו הן הסיבות שבגללן נרצה לבצע אופטימיזציה למדיה (אופטימיזציה = מיטוב / שיפור).
מה עושים ואיך עושים
1. מלכתחילה כדאי להשתמש בכמה שפחות מדיה
2. במידת האפשר נחליף מדיית תמונה באלמנטים מסוג וקטור (SVG)
3. כשבכל זאת משתמשים - נבחר מדיה קלת משקל.
4. את המדיה קלת המשקל שבחרנו נכווץ באמצעות קומפרסור טוב (כלי להפחתת משקל תמונות).
הנה מגוון לינקים לכלי הכיווץ הכי טובים בשוק שלא רק מכווצים את התמונה - אלא גם שומרים לה על האיכות (יש לכם בכלים האלה אופציה להחליט מה רמת הכיווץ - ככל שהיא גבוהה יותר האיכות של התמונה תפחת יותר - תמצאו את האיזון הנכון לכל תמונה.
כלי לכיווץ תמונות מסוג PNG ו-JPEG: כלי הכיווץ של וובסייט פלאנט
כלי לכיווץ תמונות או אנימציות מסוג gif: כלי הכיווץ של איזי גיף
כלי לכיווץ תמונות מסוג webp: כלי הכיווץ של איזי גיף
לא מוותרים לאף תמונה באתר! גם אם מדובר בתמונה שמוגדרת באיזור הגדרות הSeo באתר או אפילו ב favicon (התמונה הפיצפונת שמופיעה בכרטיסייה של הדפדפן.) כן כן. חברים, כל קילו בייט שווה זהב, זו הנחת העבודה!
אני מצרף לכם דוגמא לתמונה פיצפונת שיש כמעט בכל אתר ורבים מבוני האתרים פשוט מזלזלים ושמים בה תמונות רגילות - אני מדבר כמובן על הפביקון - שהוא סמל האתר שמופיע בכרטיסיות של הדפדפן.
(אם אין לכם פביקון או שאתם לא יודעים איך לגשת אליו, וויקס הכינו לכם מדריך לשינוי/הוספת פביקון )
וויקס עושים אופטימיזציה לתמונות מראש
אני יודע, יהיו שיגידו ״וויקס מבצעת אופטימיזצייה אוטומטית לתמונות״ וזה נכון! אבל עם כל הכבוד לאופטימיזצייה של וויקס, אני מעדיף ללכת על בטוח ועל המקסימום.. התמונה תעבור אופטימיזצייה פעמיים והתוצאה - מדיה ששוקלת כמו נוצה ואתר שטס באוויר.. אני בטוח לא אפסיד מזה…
ואם כבר נגענו בנקודה הזו, קחו עוד טיפ סודי מהסטודיו: בואו ננצל את הכיווץ של וויקס אפילו יותר!
נבחר תמונה קלת משקל>נכווץ אותה בעזרת אחד הכלים שצירפתי למעלה>נוסיף אותה לאדיטור>נפבלש>ניגש לאתר> נבצע הורדה של התמונה באופן ידני באמצעות קליק ימני ושמירה במחשב (ואז נגלה שהכיווץ של וויקס המיר את התמונה לפורמט WEBP>נכווץ אותה שוב באמצעות https://ezgif.com/optiwebp > נעלה אותה מחדש לאתר - יש לכם תמונה ששוקלת הרבה הרבה הרבה פחות מהתמונה המקורית! בהצלחה!
שלב ב: תיעדוף והיררכייה
לעיתים מסיבות מסויימת אנו נהיה חייבים להשים מדיה באיכות גבוה בדף כלשהו באתר ולא נרצה לכווץ אותה, במצבים שכאלה כדאי למקם את המדיה בחלקים היותר תחתונים של האתר ולא ממש למעלה - וזה כדי לתת למדיה להספיק להיטען עד שהלקוח יגיע אליה - ובעצם לא ישים לב שלקח לה זמן לעלות.
שלב ג: אופטימיזצייה לאלמנטים בוויקס
חברה, צריך להודות באמת. כל בילדר (בילדר = מערכת בניית אתרים ויזואלית, כמו וויקס) מוציא קוד מלוכלך (קוד מלוכלך = קוד שבנוי באופן לא חכם ותמציתי). זה נכון לוויקס, לאלמנטור, לווב פלואו, ובעצם, זה נכון לכולם - מי יותר ומי פחות. זה לא מדהים מבחינת מהירות אתר ולכן כדאי עד כמה לא להשתמש בדף אחד בהמון אלמנטים ובטח אלמנטים מורכבים. אם יש לכם כמה דרכים לבצע עיצוב מסויים השתמשו בדרך שנראית לכם בהיגיון הכי פשוטה. תעדיפו פחות להרכיב אלמנטים בתוך אלמנטים בתוך אלמנטים, ופחות להשתמש באפליקציות צד שלישי בטח אם הן חדשות.
שלב ד: פונטים
אחד הדברים הראשונים שהדפדפנים טוענים הוא את חבילות הפונטים באתר. ככל שיש לנו בדף יותר פונטים ככה השרת (המחשב שעליו האתר יושב) צריך לשלוח יותר חבילות פונטים לדפדן של המשתמש. לפעמים אנחנו משתמשים בפונט חדש בשביל לכתוב משפט אחד בלבד בדף - וזה בעייתי מכיוון שהשרת שולח לדפדפן את החבילה של הפונט (מסביר לו כיצד נראית כל אות מהא' ב' כל אות מהABC וכל מספר וסימן טיפוגרפי שקיים בפונט הזה על אף שבתכלס אנחנו כולהה רצינו לכתוב "מבצע מיוחד" - טקסט קצר שמכיל בדיוק 9 תווים. כל חבילה כזו מאיטה את האתר ובאמת שאפשר לוותר עליה. תסתכלו על האתרים המצליחים בעולם והמותגים הגדלים ביותר - ותגלו שהם עושים עבודה אסטתית מצויינת עם פונט אחד בלבד. אתם לא יותר טובים מהם. נסו לצמצם את מספר הפונטים ככל האפשר! (אם אתם בכל זאת רוצים לכתוב כמה משפטים בודדים בפונט שונה - נסו להעלות אותם בצורת אלמנט מסוג וקטור.
יש לכם טיפים נוספים לשיפור מהירות אתרים בכלל (ושיפור מהירות אתרי וויקס בפרט) ?
כתבו לי בתגובות!
👇👇👇👇👇