חגיגת מהירות האתר החלה. היכן האתר שלך?

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

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

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

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

מחקרים מראים כי כול 1 שנייה של עיכוב בטעינה, משמעותה 7% ירידה בהמרות, 11% ירידה במספר הדפים הנצפים ו- 16% ירידה בשביעות רצון לקוחות.

Amazon ו- Wallmart ענקיות הסחר באינטרנט בדקו את המספרים אצלם. אמזון גילו שעיכוב במהירות טעינת האתר של 100 מילישניות במהירות האתר עולה להם 1% בהכנסה או כפי שהם מנסחים זאת: Every 100ms delay costs 1% of sales.

Wallmart מצאו כי שיפור של 2% בהמרה (המרה=קניות) על כל 1 שנייה של שיפור מהירות האתר.

אבל יש הרבה יותר מהרווח לסוחר במהירות טעינת האתר. מחקר של Akamai מצא כי:

47% מהגולשים מצפים שהאתר יעלה תוך 2 שניות או פחות

40% מהגולשים ציינו שהם ינטשו את העמוד אם זמן הטעינה יעלה מעל 3 שניות

52% מהגולשים הרוכשים באינטרנט מקשרים את מהירות טעינת האתר עם הנאמנת שלהם לאתר.

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

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

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

ואכן, מחקר שנעשה לאחרונה על ידי חברת Radware עוד בשנת 2013 מצא כי מהירות טעינת אתרי מסחר באינטרנט דווקא עלתה ב- 22%, אז איך זה מסתדר?

הדרך לאתר מהיר יותר משתנה בהתאם לאתר

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

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

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

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

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

השלב הראשון הוא יצירת בקשה של הלקוח (מחשב שולחני / מובייל) מהשרת. זה יכול להעשות אם תקלידו את כתובת האתר בשורת הכתובת URL או תלחצו על קישור.

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

השלב השני, הוא מילוי הבקשה. השרת מקבל את הבקשה של מחשב הלקוח, עושה מה שעושה (אוסף נתונים, למשל), מאגדת את התשובה לידי קובץ אחד, זהו קובץ HTML ו… "יורה" אותה חזרה למחשב הלקוח שביקש ממנו.

השלב השלישי הוא שאותו קובץ HTML הגיע למחשב שביקש אותו והוא מתחיל "לפענח" אותו שורה אחר שורה.

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

הקובץ שהגיע מהשרת לדפדפן הוא קובץ HTML המכיל טקסט וקישורים. רק רגע! והיכן התמונות, והיכן העיצובים והיכן…?

הקובץ: לא מכיל תמונות, לא מכיל קטעי וידאו, לא מכיל עיצובים. הקובץ מכיל הפניות (קישורים) למקום הימצאותם של הרכיבים שהזכרתי: תמונה, וידאו, קוד עיצוב.

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

כאשר הדפדפן מתחיל במלאכת התרגום של דף האינטרנט (אותו קובץ HTML) הוא "מגלה" שיש הפנייה לתמונה. הדפדפן יוצר בקשה לשרת שישלח לו את התמונה. במקרה של הדוגמה שנתתי, יש 2 תמונות ולכן הדפדפן במחשב הלקוח ישלח 2 קריאות לשרת, קריאה עבור כל תמונה.

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

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

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

מה מאיט את מהירות האתר?

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

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

קוד Javascript הוא קובץ. והיכן הוא נמצא? אני רואה שהבנתם. הקובץ נמצא בשרת מה שמחייב את הדפדפן לייצר עוד קריאה לשרת כדי לקבלו.

החיים היו קלים אם היה קובץ עיצוב CSS אחד וקובץ תסריטים Javascript אחד. המציאות, כפי שאני רואה אותה אצל לקוחותיי היא 10 קבצי CSS ו- 6 קבצי Javascript. למה? ככה!

אתם בודאי אומרים: "מה הבעיה, שיחברו את כל קבצי ה- CSS לקובץ אחד ואת כל קבצי הקוד Javascript לקובץ שני והנה יש רק שתי קריאות".

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

חגיגת מהירות האתר ממשיכה

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

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

רוצים שיהיה לכם צא'ט באתר? עליכם להוסיף…, נכון קוד Javascript.

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

וכך הלאה וכך הלאה.

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

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

ושוב אתם שואלים ובצדק: "מה? לא ניתן לחבר את הקודים האלה ביחד?". פה יש לי בשורה שתגרום לאתר שלכם להיטען יותר מהר. את הכל התגים (קודים) של פייסבוק, גוגל ואחרים ניתן לרכב במקום אחד וקריאה אחת תפעיל את כולם, קוראים לפתרון Tag Manager מבית Google אבל הוא, לידיעתכם, לא הפתרון היחיד. מציע לכם להתסכל גם על Signal (לשעבר BrightTag),  Tealium, TagMan ודומיהם.

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

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

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

 סיכום

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

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

מהי מהירות האתר שלך? מה עשית עד כה כדי להגביר את מהירות הטעינה שלו?