מה זה Lighthouse ואיך אפשר לקבל בזה ציון 100

02 אוג׳ 2020 | 4 דק' קריאה

לייט האוס. מקור: https://developers.google.com/web/tools/lighthouseלייט האוס. מקור: https://developers.google.com/web/tools/lighthouse

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

מה זה Lighthouse

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

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

ממה מורכב הציון של Lighthouse

מהירות Speed

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

קידום אתרים אורגני SEO

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

נגישות Accessibility

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

התרגול הטוב ביותר Best Practice

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

PWA (Progressive Web App) *

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

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

על מה משפיע הציון בLighthouse

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

לסיכום

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

תוצאת לייט האוסתוצאת לייט האוס

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


lighthouse, טכנולוגיה, SEO