כל מי שיש לו יד ורגל באתר אינטרנט, בין אם זה בעלי האתר, מנהלי שיווק באינטרנט, מעצבים, מפתחי אתרים, כולם צריכים להבין את החשיבות של אתר אינטרנט שמגיב במהירות, בו דפי האינטרנט נטענים מהר.
כאשר הלקוחות ממתינים זמן רב מדי לדף שיטען (Loading, loading, loading…), בעלי אתרים נמצאים בסכנה כפולה:
- הלקוחות חשים לא בנוח, הייתי מסתכן ואומר שהם מפתחים מעין אנטי לאתר ולבעליו וזה גורם להם לנטוש ולא לרצות לחזור.
- מנועי החיפוש לא "אוהבים" אתר שגוזל להם זמן יקר, כי באותו זמן הם יכולים לבקר באתרים נוספים, אז למה לבזבז זמן על אתר איטי. כמו הלקוחות, גם מנוע החיפוש של גוגל לא ירצה לחזור לאתר איטי.
למהירות טעינת האתר יש חשיבות רבה במיוחד שמדובר במכשיר נייד:
- מאז תחילת שנת 2015 גוגל בוחנת מספר כיתובים בתוצאות החיפוש בנייד ליד תוצאות שביצועי המהירות שלהם איטיים. בין הביטויים שנבחנו: Slow, Slow to load
- כלי בדיקת המהירות של גוגל (מיד בהמשך) מציג קודם את תוצאות בדיקת מהירות טעינת האתר בנייד לפני שהוא מציג את התוצאות במחשב השולחני
איך אפשר לדעת אם זמן התגובה של אתר אינטרנט שלך הוא איטי מדי? השתמש באחד הכלים שבהמשך כדי לדעת עד כמה האתר שלך מהיר. פעילויות שניתן לעשות באתר כדי שהאתר ייטען מהר יותר תוכלו למצוא בהמשך מאמר זה.
Google Analytics
גוגל מציגה דוח מהירות אתר בגוגל אנליטיקס (Google Analytics). מעבר לדוח עצמו המראה את מהירות עליית (טעינת) האתר, לחיצה על הדף המתאים תיתן לך גם עצות מה לעשות כדי לשפר את המהירות.
https://developers.google.com/speed/pagespeed/insights/
גוגל אנליטיקס הוא יותר מאשר כלי למעקב אחר מבקרים וצפיות בדפים, Google Analytics מציע גם כמה פרטים שימושיים על זמני טעינת אתר.
מכיון שב- GA יש עוד הרבה נתונים אחרים כמו: מדינה, סוג דפדפן, מקור תנועה, סוג מכשיר ועוד הרבה פרטים נוספים, ניתן לבצע ניתוח מעמיק לגבי זמני טעינת הדפים.
Pingdom
זהו כלי חינמי שהפעלתו קלה. לא צריך להתקין תוכנה, צריך לגלוש לאתר Pingdom, להזין כתובת (URL). הכתובת יכולה להיות של דף הבית או כל דף אחר באתר, כדי לראות כמה זמן לוקח לדף להיטען.
יש אפשרות להרשם לשירות (ההרשמה חינם) ואז נפתחות עוד מספר אפשרות שיכולות להבטיח את ביצועי האתר שלך.
יש ל- Pingdom תשתית בפריסה רחבה כדי לבדוק את האתר שלך מכל רחבי העולם. כאשר זמני טעינת הדפים אצלך באתר עולים בצורה יוצאת דופן, נשלחת התראה באופן מיידי לתיבת המייל שלך ומאפשרת לך לתקן ולהחזיר את האתר לפעולה סדירה ומהירה.
כל הבדיקות שבוצעו באתר האינטרנט שלך נשמרות ומוצגות בדוחות יפים וקלים להבנה, בליווי גרפים שיעזרו לך לשים את האצבע על הפרמטרים העיקריים המרכיבים את זמן טעינת האתר. מעבר לכך, לאורך זמן, הגרפים יעזרו לך לזהות תבנית של שינויים בזמני טעינת האתר, אותם יהיה עליך להצליב עם פעילויות תחזוקה אחרות באתר, כמו למשל התקנת תוסף (PlugIn), גלריה של תמונות וכדומה.
לכלי Pingdom ניתן לגשת מכל מכשיר וכך תוכל לקבל נתונים על האתר שלך בכל עת ובכל מקום.
שירותי הניטור של Pingdom מאפשרים לך לקבל תובנות על הביצועים של האתר שלך ממבקרים בפועל ולא רק מהזחלן של פינגדום. התובנות האלה הן בעלות חשיבות עליונה ויעזרו לך לשים את האצבע על הבעיות שבאתר.
WebPageTest
מימשק לא מושך במיוחד, לא כמו Pingdom, אבל שזה לא יטעה אתכם ואפילו לרגע. בדיקת המהירות של WebPageTest היא מעמיקה בצורה בלתי רגילה. גם פה תמצאו את המפל (Waterfall) ועוד ים של נתונים מה קורה אצלכם בעת טעינת האתר: תמונות, תסריטים, דומיינים המשתתפים בטעינה ועוד שורה ארוכה של משאבים שיעזרו לכם למצוא היכן ניתן לקצר.
WebPagetest הוא כלי שפותח במקור על ידי AOL לשימוש פנימי ומאז שנת 2008 הוא ברשת לרשות בעלי עסקים היכולים לבחון את האתרים שלהם (ושל המתחרים) באופן חופשי.
האתר, מפותח ונתמך בעיקר על ידי Google כחלק מהמאמצים להפוך את האינטרנט מהר יותר. בין השותפים האחרים ניתן למצוא חברות בינלאומיות שלכולן יש ענין בשיפור הביצועים באינטרנט. תמצא שם חברות תוכנה, שרתי איחסון ועוד וגם חברה ישראלית.
צריך לקרוא את פרטי הרישיון שהוא מסוג BSD, אבל רק כדי שתדעו שהתוכנה ניתנת להורדה ולהתאמה לעסק שלך.
InternetSupervision
זהו אחד הכלים היותר פשוטים המוצעים כאן למדידת זמני תגובה באתר, אבל זה צריך להיות ברור. חברת InternetSupervision שמאחורי מדידת המהירות מספקת שירות ניטור/השגחה של האתר כדי לבדוק האם הוא "באוויר".
חבילות השירות של האתר כוללות דגימה של שירותי ווב ומייל של האתר פעם בשעה או פעם ב- 15 דקות. במקרה והאתר "נפל", נשלחת הודעת SMS לבעל האתר/מפתח האתר כדי שיהיה בידו אפשרות "להרים" אותו ולהחזירו לחיים.
בניגוד לשירותי בדיקה אחרים, שירות InternetSupervision עורך בדיקה מאוד דקדקנית של האתר ממקומות רבים ברחבי העולם, אבל מהצד השני הבדיקה נמשכת זמן רב הנספר בדקות!
GTmetrix
אחד הכלים החזקים יותר למדידת זמני תגובה וביצועים באתר. GTmetric מספק פירוט של מהירות טעינת דף בצד המלצות לשיפור הביצועים תחת הטאב YSlow, אהה?!? YSlow זה קיצור של Why Slow !
באתר יש המלצות לשיפור ביצועים לבעלי אתר וורדפרס וגם תוסף שמתריע אם הביצועים של האתר יורדים מתחת לרמת ביצועים שנקבעה מראש.
יש ל- GTmetrix גם חבילות שירות בתשלום החל מ- $14.95 לחודש המרחיבים את השירות שניתן חינם.
אחת האפשרויות, הניתנת בתשלום, היא היכולת להקליט סרט וידאו של הדף נטען ולהצמיד אליו את הנקודות בהן חלה הפסקה בטעינה. אפשר להאט את סרט הוידאו עד כדי 4 פעמים מהמהירות המקורית כדי שניתן יהיה לראות בהילוך איטי את טעינת הדף, תוך ניסיון לאתר בעיות בטעינה.
ניתן גם להציג את הטעינה של הדף שלך בתצוגת מצגת שקופיות. זה מאפשר לך לקבל תמונה אחר תמונה בזמן טעינת הדף שלך בזמן אמת.
CA APM
כלי מבית חברת CA, חברת התוכנה הגדולה בעולם, אבל כגודל החברה, כך גודל האכזבה. הדבר הטוב בו הוא שהבדיקה נערכת ממספר מקומות בעולם בדומה ל- InternetSupervision שדובר עליו לעיל, אבל פרט לזה, אין פרטים נוספים – נאדה, גורנישט, זירו, אפס.
הכלים של CA APM נועדו לביצוע ניטור/השגחה על האתר ולאוו דווקא יועדו לבדיקת מהירות טעינה, זה רק שירות נילווה לשירות העיקרי שמעניקה החברה הכולל בדיקות מבדיקות שונות על האתר, כיאה לחברה גדולה המציאה שירות ניטור לאתרי ענק.
לסיכום הכלים לבדיקת מהירות האתר
מחקרים מראים כי משתמשים עוזבים/נוטשים את האתר אם זה לא נטען תוך 4 שניות! אם אתה רוצה לשמור את הגולשים אליך לאתר מרוצים, האתר שלך צריך להיות מהיר. נקודה
מהירות האתר חיונית במתן חווית משתמש נעימה למבקרים באתר שלך. זה מבטיח כי טווח הקשב המוגבל של המבקרים והזמן שהם משקיעים באתר אינו מתבזבז על המתנה לתמונה שתעלה או סרט וידאו שיטען.
במונחים של קידום אתרים, גוגל רמזה, יותר מפעם אחת, על שימוש בציון מהירות דף באלגוריתם הדירוג שלה. בעלי אתרים, מפתחים ומשווקים חייבים לשפר את מהירות האתר, כי הזמן שהמשתמשים מוכנים להמתין הולך ומתקצר. שיפור מהירות האתר צריך לעמוד בראש סדר העדיפויות.
פעילויות להקטנת מהירות טעינת האתר
לפניך מספר פעילויות שתוכל לעשות כדי לגרום לאתר שלך להיטען מהר יותר. אני בטוח שתמצא כל אחת מהפעילויות המתוארות בהמשך בבדיקה שתערוך עם אחד או יותר מהכלים שהנמצאים לעיל.
אני ממליץ לך לצפות בסרט הוידאו שבהמשך כדי להבין את המושגים שבעבודה בין הדפדפן (במחשב שלך, מחשב לקוח) לבין האתר (הנמצא במחשב שרת).
להקטין את מספר הבקשות HTTP
בקשה של דף אינטרנט מתרחשת:
- כאשר כותבים בשורת הכתובת בדפדפן כתובת של אתר, למשל seoreport.co.il ולוחצים Enter.
- מפעילים קיצור דרך של כתובת אתר,
- לוחצים על קישור בדף אינטרנט.
כאשר הדפדפן מבקש לקבל דף אינטרנט, בין אם זה דף הבית או כל דף אחר, השרת, בו מאוחסן האתר, מחזיר בתשובה דף HTML המכיל טקסט פשוט שאינו מעוצב (Plain Text) וקוד.
אתם בודאי שואלים: היכן התמונות? היכן הוידאו? היכן העיצוב? היכן התפריטים הקופצים? היכן הסליידרים? היכן הטפסים? ובכן כול אלה לא הגיעו לדפדפן במחשב שלכם, אבל ברור לכם שבלעדייהם הדף יראה כמו מסמך "פנקס רשימות" Notepad של מערכת הפעלה חלונות.
כאשר הדפדפן קיבל קובץ HTML המכיל טקסט שאינו מעוצב וקוד הוא מתחיל בתהליך "פיענוח" או אם תרצו "תרגום" כדי להבין את תוכנו ולבנות עבורכם דף אינטרנט. הדפדפן עושה סריקה מלמעלה למטה ובכל פעם שהוא מגלה הפנייה למשאב (קובץ) חיצוני הוא שולח בקשת HTTP לשרת.
נניח ובדף המבוקש יש תמונה. כפי שכבר אמרתי, הבקשה לקבלת הדף, החזירה דף HTML שמכיל טקסט אבל אינו מכיל את התמונה עצמה. דף HTML מכיל הפנייה לתמונה. והיכן התמונה נמצאת? במרבית המקרים היא נמצאת באותו שרת שמכיל את דף ה- HTML המפוענח ברגע זה על ידי הדפדפן. כלומר, הדפדפן צריך לשלוח בקשה נוספת לשרת עבור התמונה והשרת מחזיר לו את התמונה.
אם בדף יש 10 תמונות, אז הדפדפן יבצע 10 בקשות HTTP לקבלת כל תמונה בנפרד. מעבר לזאת, הבקשות נעשות בטור, אחת אחרי השנייה, כך שהדפדפן ממתין עד שהתמונה הראשונה שהיא נשוא הבקשה תגיע ורק אז הוא שולח בקשה לקבלת תמונה נוספת וכך הלאה. במשך כל הזמן הזה, דף האינטרנט אינו מוצג על גבי המסך. כל עוד לא הושלמה פעולת ההרכבה, הדף אינו מוצג.
קבצי CSS
תקני כתיבת אתרים מפרידים בין תוכן (טקסט) לבין עיצוב, כך שדף HTML מכיל טקסט בלבד והיכן העיצוב? ובכן, העיצוב נמצא בקבצים אחרים ואלה הם קבצי CSS. בדף HTML למשל, נמצא טקסט שהוא כותרת. פרטי העיצוב של הכותרת כמו: סוג גופ, גודל גופן, צבע גופן, צבע רקע, יישור (לימין, אמצע, שמאל) והגדרות נוספות, נמצאים בקובץ CSS.
כאשר הדפדפן מתרגם את קובץ HTML ומוצא שם הפנייה לקובץ CSS הוא שולח בקשה לשרת, אחרת הוא לא יכול להציג את תוכן הדף. אם קובץ העיצוב לא ימצא, מסיבה כלשהיא, דף האינטרנט יוצג אבל לא כפי שהיה אמור להיות מוצג.
זה מקרה שבודאי מוכר לכם, כאשר אתם חוזרים לאתר שגלשתם בו בעבר ואתם רואים שמשהו השתבש, שמשהו לא מוצג כראוי: אולי הכותרת קטנה מידי, או לא במקום, ללא צבע רקע. הסיבה היא שהדפדפן לא הצליח לטעון את אחד מקבצי ה- CSS בגלל תקלת תקשורת, למשל.
דף HTML מכיל קריאה לקבצי CSS ויש בדרך כלל יש הרבה יותר מאחד. אתר WordPress מכיל בממוצע 10 קבצי CSS. וכבר הבנתם שדף HTML יכול להיות מוצג ללא קבצי CSS אבל אז הוא יראה כמו מסמך טקסט פשוט ושחור ללא שום עיצוב.
קבצי JavaScript
דף HTML מכיל גם קוד. אלא הם תוכניות קטנות הנקראות תסריט Script הכתובות בשפת JavaScript להבדיל משפת Java. תסריטים קטנים אלה אחראיים לפעולות שאנו עושים בדף. חלק מהפעולות של "העברת סמן מעל" ניתן לבצע באמצעות CSS וחלק אחר באמצעות JavaScript.
הנה רשימה של כמה פעולות שכיחות בדף HTML המצריכות תסריטים:
קוד אנליטיקס של Google הוא תסריט. כאשר הדף נטען לדפדפן, התסריט של גוגל שולח את פרטי הדף הנטען כמו גם את פרטי המחשב הגולש (גודל מסך, IP, מכשיר, מיקום גיאוגרפי, מספר צבעים במסך ועוד) אל השרתים של גוגל.
קוד המרה של Google AdWords,
לחצן עוד פרטים. מכירים לחצן שלחיצה עליו מגלה עוד פרטים על המוצר מבלי לטעון מחדש את הדף?
תפריטים נופלים, מתקפלים, מסתובבים. מכירים את זה שאתם מניחים את סמן העכבר מעל תפריט והוא נפתח? מכירים את זה שאתם לוחצים על לחצנים של סליידר ורואים את הסלייד הבא? ובכן, כל זה נעשה באמצעות תסריטי JavaScript.
טופס שגוי. קרה לכם שמילאתם טופס אבל שכחתם למלא את אחד השדות ולכן קיבלתם הודעת שגיאה? הין אם השגיאה הופיעה בתיבת דו-שיח או בטקסט אדום בקרבת השדה בטופס אותו שכחתם למלא, תסריט Javascript אחראי לכך.
קוד שיווק מחדש של Facebook הוא תסריט Javascript.
זה בכלל לא יפתיע אותי אם בכל HTML באתר שלכם ימצאו 20 קבצי JS, קבצי Javascript !
הקטנת מספר הבקשות לקבלת קבצים נוספים תגרום לטעינה מהירה יותר של הדפים. כדי להשיג זאת, יש להפחית את מספר התסריטים באתר האינטרנט שלך.
בנוסף, ניתן לחשוב על איחוד מספר גיליונות סגנון שונים, קבצי CSS ובכך להקטין את מספר הבקשות.
עוגיות
בכל פעם שלקוח מבקר באתר חדש (חדש למחשב ממנו הגולש מבצע את פעולותיו), הפרטים באתר בו ביקר מאוחסנים על הכונן הקשיח במחשב הלקוח. בביקורים הבאים, כאשר הגולש יבקש לראות דף, בו בוא כבר ביקר, המחשב יבדוק קודם האם תוכן הדף כולו או חלקו נמצא במחשב לפני שהדפדפן שולח בקשות HTTP אחרות לשרת. בכך נחסך זמן יקר.
כדי שזה יקרה, צריך לוודא שיש אפשרות למשתמשים באתר שלך לקבל עוגיות Cookies. כתוצאה מכך, הם יוכלו לצפות בדפים שלך מהר יותר ולחוות זמני טעינה קצרים יותר לאחר הביקור הראשון.
מטמון
כל בקשת HTML מהשרת מצריכה עבודה של הרכבה. ניקח למשל דף HTML המכיל מאמר. כדי שהשרת יוכל לשלוח דף HTML הוא צריך לאסוף את הכותרת Header ואת ה- Footer ואת התוכן, ואם יש בדף גם רכיבים נוספים כמו Sidebar או סליידר ואז לשלוח אותם לדפדפן.
מה לדעתכם יקרה אם בעת הבקשה, השרת לא יבנה את הדף מחדש אלא ישלח חזרה דף מוכן מראש? זה יחסוך זמן תגובה? בוודאי! למנגנון הזה קוראים מטמון.
תארו לכם כי יש שטח כלשהו הנמצא בין הדפדפן לשרת וקוראים לו מטמון. כאשר הדפדפן מבקש בקשת HTTP מהשרת, הבקשה עוברת דרך שטח המטמון ובו נבדק אם הדף הזה כבר נמצא במטמון. אם הדף נמצא במטמון, הוא מוחזר לדפדפן ובכך נחסך זמן רב. אם הדף אינו נמצא במטמון, הבקשה מועברת לשרת המרכיב את הדף. הדף מועבר למטמון, נשמר שם, ומשם מועבר לדפדפן. במידה ותעשה בקשה נוספת לאותו דף בדיוק, השרת לו יצטרך להרכיב אותו מחדש, כי הוא כבר נמצא במטמון.
כדי שזה יקרה עליכם לבקש ממי שמאחסן עבורכם את האתר לדאוג לכך.
לייעל את התמונות באתר האינטרנט
אחד הגורמים השכיחים להאטה במהירות טעינת האתר, הן התמונות. כדי להשיג זמני טעינה מהירים יותר באינטרנט, צריך להקטין את התמונות למינימום ההכרחי ואני אדגים.
נניח וצילמתם תמונה במכשיר הנייד שלכם ואתם רוצים שתהיה באתר. האם ידעתם שתמונה רגילה המצולמת במכשיר נייד, למשל LG3 אשר ברשותי היא בגודל (רזולוציה) 4160×2340 ובנפח 3MB?
הבעיה היא שהתמונה שצולמה ברוחב 4160 נקודות, גדולה פי כמה מרוחב המסך שבמחשב בו היא מוצגת וגדולה פי כמה מהרוחב שבו היא תוצג באתר.
כדי שהתמונה תוצג, ללא קשר לגודל בו היא תוצג, היא צריכה להיטען כולה למחשב. לפי הדוגמה השכיחה שהצגתי יש לטעון 3MB וזה המון!
לכן, לפני שמעלים תמונות לאתר יש להקטין את גודלן באמצעות תוכנות לעיבוד תמונה כדי שגודל התמונה יתאים לגודל של התמונה המוצג באתר. לא צריך להעלות תמונות של 4160 פיקסלים רק בגלל שהן נראות טוב!
באשר לפורמטים של התמונות, JPEG הוא הבחירה עדיפה ביותר. ניתן גם להשתמש בפורמטי PNG ואולי JIF אבל בשום פנים ואופן לא לעשות שימוש בפורמטים BPM ו- TIFF; הם פורמטים בזבזניים, גדולים ומנופחים שרק יאטו את מהירות טעינת האתר.
להקטין את מספר התוספים
תפקידם של תוספים או פלאגינים Plugins למשתמשי וורדפרס WordPress בתפעול יעיל של אתר הוא הכרחי וכל מילה מיותרת. יש פלאגין ל- SEO ויש פלאגין ללחצנים של רשתות חברתיות, יש פלאגין לסליידר ויש פלאגין… עם זאת, תוספים רבים מדי מאיטים את מהירות טעינת האתר.
קודם כל יש לבדוק האם התוסף הכרחי. אני יכול לשתף אתכם, שכאשר ערכתי בדיקה אצלי באתר, גיליתי שהתקנתי תוסף בו השתמשתי רק בדף אחד באתר שלי. זה לא הפריע למערכת לטעון את הפלאגין בכל אחד מדפי האתר, גם אם באותו דף, לא עשיתי בו שימוש, הפלאגין נטען. החלטתי לוותר על השימוש באותו פלאגין לטובת קיצור זמן טעינת האתר.
מה שעליך לעשות הוא לעבור על רשימת התוספים ולכבות את אלה שאינך עושה בהם שימוש או להסיר אותם כליל מהאתר.
לבדוק איזה תוסף מאט את הטעינה ולהחליפו בתוסף עם פונקציונליות דומה. יש כל כך הרבה תוספים דומים בפעילות שלהם לכל דבר באתר, כך שאם מזהים שיש תוסף שמאט את טעינת האתר, יש לחפש תוסף אחר עם אותן יכולות אבל מהיר יותר.
דחיסה
קבצי טקסט כדוגמת HTML, CSS ו- Javascript ניתן לדחוס ולצמצם את נפחם בסדרי גודל. המשמעות היא שקובץ טקסט בנפח 100kb יכול להידחס לכדי 10kb ואולי פחות מזה.
איך זה נעשה?
כאשר הדפדפן מבקש משאב כדוגמת קובץ HTML, גיליונות סגנון CSS או תסריטים Javascript השרת דוחס את הקובץ באמצעות gZip ושולח אותם לדפדפן. הדפדפן מקבל את הקובץ הדחוס ופורש אותו. מהירות הפריסה של הדפדפן מהירה יותר מאשר הזמן הלוקח לשלוח את הקובץ הלא דחוס ובכך נחסך זמן רב וגדלה מהירות טעינת האתר.
עליך לבדוק שהשרת שלך מאפשר דחיסה כי מה שבטוח הוא שהדפדפנים כמו כרום של גוגל או פיירפוקס יודעים לעשות זאת.
סיכום
פעילות שיפור מהירות טעינת האתר אינה פעילות חד-פעמית. באתר בו נספים תכנים, נערכים שינויים במנה ובתוכן, יש לחזור על בדירת מהיאות האתר מידי תקופה כדי לוודא שמהירות הטעינה נשמרה.
מתוך הבדיקות שערכת לאתר שלך תוך כדי קריאת מאמר זה, מהם הגורמים העיקריים המאיטים את האתר שלך? רשום לי כאן למטה בתגובות ואנסה לעזור לך.
The post 6 כלים לבדיקת מהירות טעינת האתר appeared first on SEOreport.