בדיקת מהירות אתר –🛠 10 כלים

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

כאשר הלקוחות ממתינים זמן רב מדי לדף שיטען (Loading, loading, loading…), בעלי אתרים נמצאים בסכנה כפולה:

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

במיוחד במכשיר נייד 'מהירות אתר' תופסת מקום גבוה בדירוג:

• מאז תחילת שנת 2015 גוגל בוחנת מספר כיתובים בתוצאות החיפוש בנייד ליד תוצאות שביצועי המהירות שלהם איטיים. בין הביטויים שנבחנו: Slow, Slow to load
• כלי בדיקת מהירות אתר של גוגל (מיד בהמשך) מציג קודם את תוצאות בדיקת מהירות האתר במכשיר נייד (סמארטפון / מובייל) לפני שהוא מציג את התוצאות במחשב שולחני
• במהלך 2016 גוגל 'דחפה' בכול כוחה את נושא מהירות אתר במובייל: פרויקט AMP שמטרתו להאיץ את מהירות טעינת האתרים במכשירים ניידים זוכה לחשיפה גדולה מאוד באתרי גוגל השונים הפונים למפתחים.
• מאז יוני 2017, גוגל מציגה מהירות אתר רק במכשירים ניידים (מובייל)!

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

גוגל מודיעה על Speed Update

החל מחודש יולי 2018 תפעיל גוגל עדכון הנקרא Speed Update שישפיע על דירוג האתרים בדף תוצאות החיפוש בנייד.

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

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

אבל זה לא הכל…

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

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

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

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

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

בדיקת מהירות אתר גוגל – Google Speed Test

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

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

הציון שגוגל נותן יכול להיות: Excellent, Good, Fair, Poor לפי הסקלה הבאה:

מספר הערות:

• את הסרגל צריך לקרוא משמאל לימין, זה כתוב לדוברי אנגלית.
• חדי העין שביניכם הבחינו כי גוגל מציג את הציון למכשירים ניידים Mobile Speed בלבד,
• הבדיקה נעשת עם חיבור לרשת הסלולר מסוג 3G (דור 3) ולא 4G (דור 4). גוגל טוענים שמרביתו גולשים עם 3G,
• גוגל מעריך כמה גולשים, מבין אלו שהגיעו לאתר שלך, יעזבו בגלל מהירות אתר איטית,
• הבדיקה היא של URL ולא של האתר כולו. אם אתם רוצים לראות בדיקת מהירות אתר כוללנית לאתר שלכם, כדאי שתמשיכו לקרוא

מהירות אתר על פי גוגל: PSI – PageSpeed Insights

כלי PageSpeed Insights או בקיצור PSI הוא הכלי העיקרי לדרך בה בעלי עסקים, מנהלי אתרים ומקדמי אתרים יוכלים לדעת על מהירות אתר גוגל.

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

מכיון שכרום הוא הדפדפן הפופלולארי בחיפוש והוא של גוגל, אז PSI – PageSpeed Insight, מראה נתונים של משתמשים אמיתיים שגולשים באמצעות כרום Chrome לדפים באתר לכם והכל נמצא בדוח שנקרא Chrome User Experience Report – CrUX.

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

למעשה, Google מציגה שני ערכים:
FCP – First Contentful Paint
DCL – DOM Content Loaded

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

מהירות, כבר אמרתי?

לכל פרמטר יש חלוקה לשלושה חלקים: Fast, Average, Slow

היכן צריך להיות האתר שלך?

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

וכך זה נראה:

בבדיקת מהירות אתר שלי גוגל לא הציג נתוני FCP ולא DCL

המשמעות היא: לגוגל אין מספיק נתונים ולכן הוא לא מציג.

מה מודדים FCP ו- DCL ?

FCP – מודד למעשה את הרגע הראשון בו המשתמש יכול להתחיל לראשונה לתפעל את הדף. במילים אחרות, האם החלק בחלון הראשון Above the Fold נטען ומאפשר פעולה מצד המשתמש. במכשיר נייד המהירות המירבית לשליש העליון היא 1.6 שניות

DCL – מודד את הזמן בו נדרש לכל הדף להיטען. במכשיר נייד המהירות המירבית לשליש העליון היא 2.1 שניות

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

אז בואו נעבור על המרכיבים של הדוח שמציג PSI:

ציון מהירות מסווג את הדף כ- Average, Fast או Slow. פעולה זו נקבעת על-ידי בחינת הערך החציוני של שני ערכים: FCP – First Contentful Paint ו- DCL – DOM Content Loaded. אם שני המדדים נמצאים בשליש העליון של הקטגוריה שלהם, הדף נחשב למהיר.

ציון אופטימיזציה מסווג את הדף: Medium, Good או Low על ידי הערכת הביצועים שלו. אתם צריכים לשאוף לציון 85 ומעלה כדי לקבל Good שצבעו ירוק.

התפלגות של טעינות דף מציג את התפלגות FCP ו- DCL במערך הנתונים. אירועים אלה מסווגים כ- Fast (שליש עליון), Average (באמצע שליש), ו- Slow (שליש תחתון) על ידי השוואה לכל האירועים בדוח חוויית המשתמש של Chrome וכך יש ביכולתם לדעת היכן הדף שלכם נמצא יחסית לדפים אתרים באותה קטגוריה בדוח שנקרא Chrome User Experience Report – CrUX

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

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

מהירות אתר בדוחות Google Analytics

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

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

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

Lighthouse

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

להלן רשימת הבדיקות שעורך לייטהאוס או בעברית – מגדלור:

אפשר להפעיל את Lighthouse (לייטהאוס) במספר דרכים, אבל הדרך המומלצת היא להפעיל אותו מתוך כרום.

התקנה:

1. היכנסו לכרום,
2. התקינו את תוסף Lighthouse,

הפעלה:

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

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

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

כך נראה החלק של SEO בבדיקות של Lighthouse:

Pingdom – בדיקת מהירות אתר

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

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

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

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

לכלי Pingdom ניתן לגשת מכל מכשיר וכך תוכל לקבל נתונים על האתר שלך בכל עת ובכל מקום.

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

בדיקת מהירות אתר בעברית – Speedom

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

Speedom מציע בדיקת מהירות אתר וניטור ביצועים משרתי דגימת מידע הממוקמים בישראל ובצרפת (מה הקטע עם הצרפתים?).

המימשק נוח וקל להימצאות בו ממש כמו ב- Pingdom ובאמצעותו תוכלו להבין מה באתר שלכם מאיט את מהירות טעינת אתר: זמן בייט ראשון, Keep-Alive Enabled, כיווץ תעבורה, כיווץ תמונות, מטמון, משקל עמוד.

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

לדוגמה, באחד האתרים שבדקתי בעזרת Speedom קבלתי 79% בסעיף מטמון וכך זה הוצג:

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

בדיקת מהירות טעינת אתר – 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 נועדו לביצוע ניטור/השגחה על האתר ולאוו דווקא יועדו לצורך בדיקת מהירות אתר, זה רק שירות נילווה לשירות העיקרי שמעניקה החברה הכולל בדיקות מבדיקות שונות על האתר, כיאה לחברה גדולה המציעה שירות ניטור לאתרי ענק.

בדיקה של  CA

לסיכום כלי בדיקת מהירות אתר

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

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

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

שיפור מהירות אתר

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

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

להקטין את מספר הבקשות HTTP

בקשה של דף אינטרנט מתרחשת:

1. כאשר כותבים בשורת הכתובת בדפדפן כתובת של אתר, למשל seoreport.co.il ולוחצים Enter.
2. מפעילים קיצור דרך של כתובת אתר,
3. לוחצים על קישור בדף אינטרנט.

כאשר הדפדפן מבקש לקבל דף אינטרנט, בין אם זה דף הבית או כל דף אחר, השרת, בו מאוחסן האתר, מחזיר בתשובה דף 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 אבל אז הוא יראה כמו מסמך טקסט פשוט ושחור ללא שום עיצוב.

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

קבצי JavaScript

דף HTML מכיל גם קוד. אלא הם תוכניות קטנות הנקראות תסריט Script הכתובות בשפת JavaScript להבדיל משפת Java. תסריטים קטנים אלה אחראיים לפעולות שאנו עושים בדף. חלק מהפעולות של "העברת סמן מעל" ניתן לבצע באמצעות CSS וחלק אחר באמצעות JavaScript.

הנה רשימה של כמה פעולות שכיחות בדף HTML המצריכות תסריטים:

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

קוד המרה של Google Ads,

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

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

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

קוד שיווק מחדש של Facebook הוא תסריט Javascript.

זה בכלל לא יפתיע אותי אם באתר שלכם ימצאו 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 ושולח אותם לדפדפן. הדפדפן מקבל את הקובץ הדחוס ופורש אותו. מהירות הפריסה של הדפדפן מהירה יותר מאשר הזמן הלוקח לשלוח את הקובץ הלא דחוס ובכך נחסך זמן רב וגדלה מהירות טעינת אתר.

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

סיכום בדיקת מהירות אתר

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

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

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

The post בדיקת מהירות אתר – 🛠 10 כלים appeared first on SEOreport.