איך לשפר את מהירות הטעינה באתר?

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

כך או כך, מהירות טעינת העמודים באתר היא פרמטר קרדינלי, המשפיע על חוויית המשתמש, ומכאן שגם על הקידום שלנו ברשת [כן. שוב ידידנו משכבר ה-SEO].

איך לשפר את מהירות הטעינה באתר?

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

חשוב לציין כי מהירות הטעינה של האתרים במובייל איטית יותר מזו שבמחשב

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

אני מסבירה על כך בהרחבה במאמר על העיצוב במובייל.

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

האם כדאי לנו להעמיד במבחן את סבלנות המבקרים באתר שלנו?

נדמה לי שלא.

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

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

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

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

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

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

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

מתחילת שנה זו [2021] גוגל מדרגת את הטעינה לפי שלושה מדדי ליבה - Core Web Vitals:

1. המדד הראשון LCP - Largest Contentful Paint

ה-LCP מתייחס למעשה לזמן הדרוש לעליית האלמנט הגדול ביותר בעמוד.

כאשר העמוד נטען הוא "מבקש" מהשרת אוסף של רכיבי תוכן שונים.[טקסט, תמונות, וכד']. יש לקחת בחשבון שלכל אלמנט יש זמן טעינה שונה, בהתאם למשקלו.

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

2. המדד השני FID – First Input Delay

כשמו כן הוא - מודד את העיכוב שנוצר בקלט הראשון.

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

3. המדד השלישי - CLS – Cumulative Layout Shift

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

כדי לשפר את מדד ה-CLS באתר, אנחנו צריכים לבצע הגדרות לתמונות ולתכנן מראש את פריסת יתר האלמנטים, המוצגים על גבי המסך [באופן שבעת טעינת העמוד "ידע" האתר לשריין מקום לאלמנטים הנטענים לאט יותר – כתבתי על כך בהרחבה במאמר על ה-AMP ומה חשיבותו לאתר]

למדדים אלה השפעה קולוסלית, בעיניה של גוגל, על חווית המשתמש [UX] הן במחשב והן במובייל.

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

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

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

המהפך של וויקס

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

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

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

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

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

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

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

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

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

ככל שהאלמנט מורכב וכבד יותר, זמן ה"עליה שלו לבמה" [כלומר: זמן הטעינה שלו] יהיה ארוך יותר.

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

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

זה דומה מאד לתנועה בכביש

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

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

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

האם אנחנו יכולים לשפר את מהירות האתר?

התשובה היא – כן. אנחנו בהחלט יכולים.

איך משפרים את מהירות האתר?

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

איחסון האתר

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

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

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

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

אבטחת האתר

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

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

והדרת פני זקן

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

מעת לעת כדאי מאד למתוח קמטים. למרוח לק. לחפוף. לתקן פגמים. לשמור על כושר. למדוד לחץ דם ודופק ... בקיצור - לתחזק. לתחזק. לתחזק.

תמונות

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

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

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

יחד עם זאת כדאי להעלות את התמונות לאתר בקובץ Jpeg, ולא בקובץ PNG. וכדאי מאד להקפיד שמשקלי התמונות לא יעלו על 700 – 800 פיקסל.

סרטונים ושמע

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

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

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

אני ממליצה לאחסן את הקבצים האלה ביוטיוב ולא באתר עצמו.

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

באנרים קופצניים והנפשות [אנימציות]

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

פונטים

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

תוספים, ישומונים ווידג'טים

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

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

ובכן ... לא !

הכלל לאורו נפעל לגבי כל תוסף [ותוספת] באתר שלנו - אם הוא לא משמעותי לפעולת האתר, אז יש להסיר אותו. אם הוא לא מעניק ערך אמיתי והגיוני [- מקומו לא בבית ספרנו.

קוד

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

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

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

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

ריבוי תוכן זה לא ריבוי עמודים

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

נכון!

אלא ש ... אין לכך שום קשר לריבוי עמודים.

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

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

האמת? זה לא יקרה ! נהפוך הוא. מנועי החיפוש יעכבו אותנו ולא ימהרו להציג אותנו.

הוספה של עמודים רבים באתר גורמת למשקל עודף ומכבידה מאד על טעינת האתר. כדאי להעדיף עבודה עם עמודים דינמיים [גם לעמודים דינמיים הקדשתי מאמר נפרד בו אני מסבירה מה זה עמוד דינמי ומה הם היתרונות שלו].

אם אנחנו אוהבים לכתוב, אין ספק שעדיף להשתמש בבלוג ולא בהוספה של עמודים ותתי עמודים [הבלוג, כמו גם החנות, בוויקס עובדים על עמודים דינמיים].

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

אז .... לא. גוגל ממש לא אוהבת את זה.

סיכום קצרצר למטיבי לכת

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

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

לעומת זאת - אכילה בריאה ומידתית משפרת את הניראות שלנו ואת היכולות הביצועיות של גופנו.

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

וכיוון שפָּטוּר בְּלִי כְּלוּם אִי אֶפְשָׁר, אני מצרפת כאן כלים שמסייעים לבדיקת מהירות הטעינה של האתרים:

1. האמין ביותר הוא כלי בדיקת המהירות של גוגל עצמו - PageSpeed Insights

2. כלי חינמי נוסף וחביב נמצא באתר Webpagetest

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

בהצלחה (: