גוגל Lighthouse (מגדלאור) הוא כלי שגוגל השיקה בשביל בעלי אתרים ומפתחים בכדי שיוכלו לקבל מדד מדויק עבור מספר פקטורים:
- Performance
- Accessibility
- Best practices
- SEO
- Progressive app
בהגדרות הדו”ח ניתן לבקש לקבל דו”ח מותאם עבור-Desktop (מחשב) ועבור-Mobile (פלאפון).
Lighthouse - כלי למקדמים ומפתחים מבית גוגל
ה-Lighthouse הינו כלי קוד פתוח שגוגל פיתחו בשנים האחרונות לטובת ציבור המשתמשים בכדי לקבל מדדים מדויקים על איכות האתר. הכלי מאפשר לקבל מדד עבור כל אתר שנמצא בגוגל ואין צורך לקבל הרשאות גישה – כל מה שצריך לעשות זה לבצע את המדידה באחת משתי הדרכים הבאות. על כן, אני אישית מאוד אוהב את הכלי הזה לא רק בשביל עבודה מקצועית, אלא גם לעשות “שואו” ללקוח פוטנציאלי בעת פגישת היכרות כדי לגנוב את ההצגה 😄 (ישר מקבל דו”ח ביצועים של האתר שלו וזה בכלל בלי צורך בגישה… תמיד כיף להרשים)
איך משתמשים ב-Lighthouse?
את הכלי ניתן להתקין כתוסף לגוגל כרום (פחות מומלץ, ראו הערה) או להגיע אליו דרך “Inspect” (מומלץ)
באמצעות תוסף כרום: יש להתקין את התוסף Lighthouse for Chrome (תשתמשו בדפדפן כרום). לאחר מכן תוכלו להנפיק דו”ח עבור האתר שבו אתם גולשים באינטרנט באמצעות לחיצה על ההרחבה.
בכדי לשנות את ההגדרות של הדוח עלינו ללחוץ על אייקון ההגדרות שנמצא בפינה הימנית עליונה של חלונית ה-Lighthouse.
באמצעות Inspect: גשו לדף כלשהו שתרצו לבחון באתר והקליקו קליק ימני עם העכבר במסך (לא משנה איפה על המסך) ואז יפתח לכם תפריט – בתחתית התפריט יש אפשרות בשם “Inspect” (או בעברית “בדיקה”).
כאשר נלחץ על “בדיקה” תיפתח במקביל לעמוד בו אנחנו גולשים חלונית המכילה קטעי קוד, מקורות לאתר, זיכרון ועוד… בצד ימין של התפריט העליון ישנה אפשרות להרחב התפריט אשר בלחיצה עליו תיפתח האפשרות לכניסה לחלונית בשם “Lighthouse”. בדומה לעבודה עם התוסף – ניתן לשנות את העדפות הדוח וללחוץ על הכפתור בשם “Generate report”. ראו צילומי מסך כאן:
הציונים והמדידה ב-Lighthouse
גוגל נותנת לנו ציונים ומחלקת את “הרמה” לצבעים:
0-49 תוצאה לא טובה
50-89 דרוש שיפור
90-100 תוצאה טובה
התכלית של Lighthouse היא לתת ציון ודרכי שיפור לאתרי אינטרנט ובאמצעותו נוכל לעלות בכל פעם בציון לפי האינדיקציה שהוא יעניק לנו (הוא ממש מסביר איך לפתור שגיאות). ה-Lighthouse מודד כל פקטור (Performance\Accessibility\Best practices\SEO\Progressive app) על פי ביצועים של מספר מדדים ומחשב את את הציון הכולל ע”פ החשיבות של כל מדד (באחוזים).
תוכלו למצוא בקישור זה הסבר מפורט על המדידה של Lighthouse ובקישור זה את מחשבון המדידה – הדף מתעדכן באופן אוטומטי בהתאם לעדכוני הגרסאות.
מדדים ואופטימיזציה באמצעות Lighthouse
הכלי מודד את העמוד במספר קטגוריות ונותן לו ציון בכל קטגוריה.
כאשר נקבל את הציונים עבור כל מדד גם נקבל פירוט עבור אילו בעיות יש לנו בעמוד וכיצד לפתור אותם. זה בעצם היכולת הכי חזקה של הכלי – לא רק לאבחן בעיות אלא להציע את הפתרונות הנכונים וזה לא הכל, בדו”ח תקבלו הוראות יישום עבור הפלטפורמה שעליה יושב האתר שלכם (לדוגמה – וורדפרס).
מדד Performance
אם נקביל את מדד זה למכונית מירוץ – הוא לא ימדוד כמה מהר היא יכולה לנסוע אלא מה הזמן תאוצה שלה מ-0 ל-100 קמ”ש. המדד מחולק ל-6 פקטורים שמראים כמה זמן לוקח למשתמש מרגע הכניסה לאתר ועד ליכולת שלו לגלוש בו.
- First Contentful Paint – הזמן שלוקח לאלמנט הראשון להופיע על המסך (צבע).
- Speed Index – הזמן הכולל שבו לוקח לאתר להציג ויזואלית את התוכן.
- Largest Contentful Paint – הזמן שלוקח לאלמנט הכי גדול ומרכזי להופיע על המסך.
- Time to Interactive – הזמן שבו לוקח לדף להיות אינטראקטיבי (שימושי) למשתמש.
- Total Blocking Time – הזמן שהדף נחסם בו מלהגיב לאינטראקציה של משתמשים (כל דף עושה את הפעולה הזאת בעת הטעינה, הזמן נמדד במילישניות ms).
- Cumulative Layout Shift – או CLS, הוא מודד את מספר הרכיבים שמשנים את מקומם בעת הטעינה (לדוגמה, בזמן טעינת האתר מופיע כפתור וכאשר אתם באים ללחוץ עליו נטען אלמנט נוסף שדוחף את הכפתור למקום אחר במסך).
כל אלו משפיעים המון על חווית המשתמש בעת הכניסה לאתר, השיפור שלהם לא רק יעלה את הציון שגוגל נותנת לעמוד אלא גם תביא לחווית משתמש טובה יותר בעמוד.
מדד Accessibility
הציון שאנו מקבלים במדד זה אומר מודד כמה העמוד מונגש לכבדי ראייה, בהתאם לקווי המנחה של גוגל (שימו לב – גוגל זה גוגל וישראל זו ישראל… יכול להיות שלתקן הישראלי זה “לא יספיק”).
בפירוט המדד נוכל למצוא בעיות בסגנון של ניגודיות צבע, אלמנטים שיש להטמיע בקוד למען הנגשת המידע, אלמנטים ברורים וכו’. עם הקלי הזה ממש קל להגיע לציון הנגשה 100 על פי גוגל.
מדד Best Practices
מודד את רמת הבטיחות והאמינות של העמוד.
בסעיפים תחת מדד זה נוכל לראות מדדים הקשורים בפרטיות המשתמש, צופן אבטחה HTTPS וכו..
מדד SEO
הציון שאנו מקבלים במדד זה מודד את כמה העמוד טוב ל-SEO מבחינה טכנית.
בדו”ח אנחנו נראה סעיפים הקשורים בקוד – אלמנטים וקטעי קוד שיעזרו לעכבישים של גוגל לסרוק את האתר ולהבין אותו טוב יותר וסעיפים הקשורים בגודל טקסט מוצג, היררכיה נכונה וכו’.. שימו לב שגם אם העמוד יקבל ציון 100 במדד ה-SEO, זה לא אומר שהוא יקודם טוב בגוגל… פרט לאופטימיזיה טכנית, יש צורך להשקיע ב-SEO off-site, לחזק סמכותיות אתר, מבנה היררכי ולהציג תוכן רלוונטי לגולשים.
מדד Progressive app
מדד זה נוגע בהפיכת אתר אינטרנט למה שמכונה “אפליקציה מתקדמת”, עיקר הפקטורים במדד זה קשורים בהטמעות קוד נוספות, אפשרויות גלישה Off-Line (ללא אינטרנט) העלאת ספריות אייקונים ייחודיים וכו’… הפיכת האתר לאפליקציה מתקדמת יאפשר לאנשים להשתמש ולגשת לאתר גם ללא אינטרנט ואת יתר היתרונות של אפליקציה (כמו התראות Push).
איך אפשר לשלוח את הדו"ח של Lighthouse למפתח \ מקדם \ מנהל אתר?
ניתן לבצע את הדו”ח עבור כל עמוד שנמצא באינטרנט ולייצא אותו לגורם חיצוני (כמו מפתחים, מקדמי אתרים או בעלי אתרים) במספר דרכים: ניתן לייצא כקובץ JSON, קובץ HTML ואפילו לייצא גרסה המוכנה להדפסה.
