מבוא ל-Lighthouse

Lighthouse הוא כלי אוטומטי בקוד פתוח שנועד לשפר את האיכות של דפי אינטרנט. אפשר להריץ אותו בכל דף אינטרנט, ציבורי או נדרש אימות. הוא כולל בדיקות לגבי ביצועים, נגישות, אפליקציות מסוג Progressive Web App, אופטימיזציה למנועי חיפוש ועוד.

אפשר להריץ את Lighthouse ב-Chrome DevTools, משורת הפקודה או כמודול של Node. נותנים ל-Lighthouse כתובת URL לבדיקה, הוא מפעיל סדרה של ביקורות בדף ולאחר מכן יוצר דוח על רמת הביצועים של הדף. אפשר להשתמש בבדיקות שנכשלו כאינדיקטורים לשיפור הדף. לכל ביקורת יש מסמך עזר שמסביר למה הביקורת חשובה ואיך מתקנים אותה.

אפשר גם להשתמש ב-Lighthouse CI כדי למנוע נסיגה באתרים.

שנתחיל?

בוחרים את תהליך העבודה ב-Lighthouse שמתאים לכם:

  • ב-Chrome DevTools. בודקים דפים שנדרש להם אימות וקוראים את הדוחות בפורמט ידידותי למשתמש, ישירות מהדפדפן.
  • משורת הפקודה. אוטומציה של הפעלות של Lighthouse באמצעות סקריפטים במעטפת.
  • כמודול של Node. שילוב של Lighthouse במערכות האינטגרציה הרציפות (CI).
  • מממשק משתמש באינטרנט. מריצים את Lighthouse ומקשרים לדוחות, ללא צורך בהתקנה.

הפעלת Lighthouse בכלי הפיתוח ל-Chrome

ל-Lighthouse יש חלונית משלו ב-Chrome DevTools. כדי להפיק דוח:

  1. מורידים את Google Chrome למחשב.
  2. פותחים את Chrome ועוברים לכתובת ה-URL שרוצים לבדוק. אתם יכולים לבדוק כל כתובת URL באינטרנט.
  3. פותחים את כלי הפיתוח ל-Chrome.

  4. לוחצים על הכרטיסייה Lighthouse.

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

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

  6. לוחצים על הפעלת הביקורת. אחרי 30 עד 60 שניות, מערכת Lighthouse תספק לכם דוח על הדף.

    דוח של Lighthouse בכלי הפיתוח ל-Chrome.

התקנה והפעלה של כלי שורת הפקודה Node

כדי להתקין את מודול Node:

  1. מורידים את Google Chrome למחשב.
  2. מתקינים את הגרסה הנוכחית של Node עם תמיכה לטווח ארוך.
  3. מתקינים את Lighthouse. הדגל -g מתקין אותו כמודול גלובלי.
npm install -g lighthouse

כדי להריץ ביקורת:

lighthouse <url>

כדי לראות את כל האפשרויות:

lighthouse --help

הרצה של מודול ה-Node באופן פרוגרמטי

בקטע שימוש באופן פרוגרמטי תוכלו למצוא דוגמה להרצה של Lighthouse באופן פרוגרמטי, כמודול של Node.

הפעלת PageSpeed Insights

כדי להריץ את Lighthouse ב-PageSpeed Insights:

  1. עוברים אל PageSpeed Insights.
  2. מזינים כתובת URL של דף אינטרנט.

  3. לוחצים על ניתוח.

    אתר PageSpeed Insights.

הפעלת Lighthouse כתוסף ל-Chrome

כדי להתקין את התוסף:

  1. מורידים את Google Chrome למחשב.
  2. מתקינים את תוסף Lighthouse ל-Chrome מחנות האינטרנט של Chrome.

כדי להריץ ביקורת:

  1. ב-Chrome, עוברים לדף שרוצים לבדוק.

  2. לוחצים על Lighthouse לצד סרגל הכתובות של Chrome או בתפריט התוספים של Chrome. אחרי שלוחצים עליו התפריט Lighthouse מתרחב.

    בתוסף תוצג בקשה ליצור דוח.

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

    דוח Lighthouse שנוצר מהתוסף.

שיתוף וצפייה בדוחות באינטרנט

אתם יכולים להשתמש בתצוגה של Lighthouse כדי להציג ולשתף דוחות אונליין.

כלי הצפייה של Lighthouse

שיתוף הדוחות בפורמט JSON

יש צורך בפלט JSON של דוח Lighthouse כדי להציג ב-Lighthouse. יוצרים את הפלט של ה-JSON באופן הבא:

  • מדוח Lighthouse. לוחצים על כדי לפתוח את התפריט, ואז לוחצים על שמירה כ-JSON.
  • שורת הפקודה. הפעלה: shell lighthouse --output json --output-path <path/for/output.json>

כדי להציג את נתוני הדוח:

  1. פותחים את Lighthouse Viewer.
  2. גוררים את קובץ ה-JSON אל חלון הצפייה, או לוחצים במקום כלשהו בחלון הצפייה כדי לפתוח את חלון הניווט בקבצים ולבחור את הקובץ.

שיתוף דוחות כ-GitHub Gists

אם אתם לא רוצים להעביר קבצי JSON באופן ידני, תוכלו גם לשתף את הדוחות כ-gists סודיים ב-GitHub. אחד היתרונות של gist הוא ניהול גרסאות בחינם.

כדי לייצא דוח כ-gist:

  1. לוחצים על התפריט ולאחר מכן על Open In Viewer. המיקום של הדוח הוא https://googlechrome.github.io/lighthouse/viewer/.
  2. ב-Viewer, לוחצים על התפריט ואז על Save as Gist. בפעם הראשונה שתבצעו את הפעולה הזו, תוצג לכם הודעה קופצת עם בקשה לקבל גישה לנתונים הבסיסיים שלכם ב-GitHub ולקרוא ולכתוב ב-gists.

כדי לייצא דוח כ-gist מגרסה CLI של Lighthouse, צריך ליצור gist באופן ידני ולהדביק את הפלט של ה-JSON של הדוח ב-gist. שם הקובץ ב-gist שמכיל את הפלט של ה-JSON חייב להסתיים ב-.lighthouse.report.json. דוגמה לאופן שבו יוצרים פלט JSON מכלי שורת הפקודה מופיעה במאמר שיתוף דוחות כ-JSON.

כדי להציג דוח שנשמר בתור gist:

  • מוסיפים את ?gist=<ID> לכתובת ה-URL של הצופה, שבה <ID> הוא מזהה ה-gist. text https://googlechrome.github.io/lighthouse/viewer/?gist=<ID>
  • פותחים את הצפייה ומדביקים בה את כתובת ה-URL של ה-gist.

יכולת ההרחבה של Lighthouse

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

חבילות של Stack

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

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

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

פלאגינים של Lighthouse

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

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

שילוב של Lighthouse

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

כדאי לעיין בהנחיות ונכסי המותג לשילוב של Lighthouse כדי להראות שמשתמשים ב-Lighthouse ועדיין מגינים על המותג שלנו.

תרומה ל-Lighthouse

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