כיצד לבדוק את האתר שלך באמצעות מגדלור גוגל?

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


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

אילו מדדים נבדקים על ידי מגדלור גוגל?

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

  • ביצועים – זמן לאינטראקציה, חביון, אינדקס מהירות, אופטימיזציה של משאבים, TTFB, מסירת נכסים, זמן ביצוע סקריפטים, גודל DOM וכו ‘..
  • קידום אתרים – ידידותי לנייד, מטא, זחילה, קנוני, מבנה וכו ‘.
  • שיטות עבודה מומלצות – אופטימיזציה של תמונות, ספריות JS, רישום שגיאות בדפדפן, נגיש דרך HTTPS, פגיעויות JS ידועות, וכו ‘.
  • נגישות  – אלמנטים של עמוד, שפה, תכונות ARIA וכו ‘.
  • PWA (יישום אינטרנט פרוגרסיבי) – הפנה מחדש של HTTP ל- HTTPS, קוד תגובה בסדר, טעינה מהירה על דור שלישי, מסך התזה, צפייה וכו ‘..

הכלי הפנטסטי שלו וניתן להשתמש בו במספר דרכים.

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

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

התחל מהקל ביותר.

מדוד על ידי web.dev

גוגל פרסמה את web.dev לפני מספר חודשים וצברה פופולריות טובה. בדיקה ברשת היא קלה.

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

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

אל תבזבזו יותר מדי זמן בהשגת 100. אפילו האתרים של גוגל לא מקבלים את הציון הזה.

התייחס אליהם כהנחיות ונסה לשפר ככל שתוכל.

הערה: web.dev מחקה בדיקה באמצעות מכשיר נייד, ובזמן הכתיבה אני לא רואה אפשרות לבדוק באמצעות Desktop.

כרום

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

  • פתח את דפדפן Chrome
  • גש לאתר שלך לבדיקה
  • פתח את כלי המפתחים (לחץ על F12 אם אתה משתמש ב- Windows) או לחץ באמצעות לחצן העכבר הימני על הדף ולחץ על בדוק
  • עבור לכרטיסיית הביקורות

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

המראה והתחושה של התוצאות מ- Chome ו- web.dev כמעט דומה.

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

Node.js

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

התקנת מגדלור באובונטו 18.x

להלן, בדקתי את DigitalOcean שרת. מגדלור דורש את הצומת LTS 8.9 ומעלה ואני מניח שכבר התקנתם אותו. אם לא, עיין במדריך ההתקנה של Node.js.

תדרוש גם דפדפן כרום להתקנה בשרת. כיסיתי את הוראות ההתקנה כאן.

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

  • התחבר לשרת שלך
  • הפעל את הפקודה הבאה להתקנה

npm להתקין – מגדלור

אני משתמש ב- g כאן כדי שזה יותקן כמודול גלובלי.

[מוגן בדוא”ל]: ~ # npm התקן-מגדלור
/ usr / bin / מגדלור -> /usr/lib/node_modules/lighthouse/lighthouse-cli/index.js
/ usr / bin / chrome-debug -> /usr/lib/node_modules/lighthouse/lighthouse-core/scripts/manual-chrome-launcher.js

> [מוגן בדוא”ל] postinstall / usr / lib / node_modules / מגדלור / node_modules / ax-core
> צומת build / utils / postinstall.js

+ [מוגן בדוא”ל]
הוסיפו 179 חבילות מ -119 תורמים ב- 10.094
[מוגן בדוא”ל]: ~ #

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

[מוגן בדוא”ל]: ~ # מגדלור
אנא ספק כתובת אתר

ציין – עזרה עבור אפשרויות זמינות
[מוגן בדוא”ל]: ~ #

טוב, המגדלור מוכן לנהל את הביקורת. בואו לנסות כמה אפשרויות בדיקה.

כדי לבצע בדיקה באמצעות דפדפן חסר ראש

כתובת מגדלור – דגלי chrome ="–ללא ראש"

עליכם לספק כתובת URL מוחלטת הכוללת http או https.

דוגמה:

[מוגן בדוא”ל]: ~ $ מגדלור https://geekflare.com – chrome-flags ="–ללא ראש"
ChromeLauncher ממתין לדפדפן. + 0ms
ChromeLauncher ממתין לדפדפן … + 1ms
ChromeLauncher ממתין לדפדפן ….. + 511ms
ChromeLauncher ממתין לדפדפן ….. ✓ + 2ms
מצב התחברות לדפדפן + 176ms
מצב איפוס מצב בערך: ריק + 24 מס ‘
סטטוס מכונה למידוד + 30ms
סטטוס אתחול… + 508ms
מצב טוען עמוד & מחכה לתסריטים עומסים, CSSUsage, Viewport, Viewport מימדים, Theme Color, Manifest, RuntimeExceptions, ChromeConsoleMessages, ImageUsage, נגישות, LinkElements, AnchorsWithNoRelNoopener, AppCacheManifest, Doctype, DOMStats, JSLibraries, MissionRaspS, תגיות , הרפלנג, Embedded Content, Canonical, RobotsTxt + 27ms
מצב אחזור בדף: סקריפטים + 2
מצב אחזור העמוד: CSSUsage + 0ms
מצב אחזור העמוד: Viewport + 0ms
מצב אחזור העמוד: ViewportDimensions + 0ms
מצב אחזור בדף: Theme Colour + 0ms
מצב אחזור בדף: מניפסט + 0ms
מצב אחזור העמוד: RuntimeExceptions + 0ms
מצב אחזור בדף: ChromeConsoleMessages + 0ms
מצב אחזור העמוד: ImageUsage + 0ms
מצב אחזור העמוד: נגישות + 0ms
מצב אחזור העמוד: LinkElements + 0ms
מצב אחזור העמוד: AnchorsWithNoRelNoopener + 1ms
מצב אחזור העמוד: AppCacheManifest + 0ms
מצב אחזור בדף: Doctype + 0ms
מצב אחזור העמוד: DOMStats + 0ms
מצב אחזור העמוד: JSLibraries + 0ms
מצב אחזור העמוד: OptimizedImages + 0ms
סטטוס אחזור העמוד: כניסות סיסמה עם הוספה של הדבק + 0ms
מצב אחזור בדף: ResponseCompression + 0ms
סטטוס אחזור העמוד: תגיות חסימות FirstPaint + 0ms
מצב אחזור העמוד: MetaDescription + 0ms
מצב אחזור העמוד: FontSize + 0ms
מצב אחזור העמוד: CrawlableLinks + 0ms
מצב אחזור העמוד: MetaRobots + 0ms
מצב אחזור העמוד: Hreflang + 0ms
מצב אחזור העמוד: EmbeddedContent + 0ms
מצב אחזור העמוד: Canonical + 0ms
מצב אחזור העמוד: RobotsTxt + 0ms
מצב אחזור עקבות + 1ms
מצב אחזור devtoolsLog & רשומות רשת + 110 מגה
אחזור סטטוס: סקריפטים + 27ms
אחזור סטטוס: CSSUsage + 53ms
מצב אחזור: Viewport + 192ms
אחזור מצב: ViewportDimensions + 5ms
אחזור סטטוס: Theme Color + 13ms
אחזור סטטוס: מניפסט + 2ms
אחזור מצב: RuntimeExceptions + 295ms
אחזור סטטוס: ChromeConsoleMessages + 1ms
אחזור סטטוס: ImageUsage + 2ms
אחזור סטטוס: נגישות + 22ms
אחזור סטטוס: LinkElements + 526ms
אחזור סטטוס: AnchorsWithNoRelNoopener + 10ms
אחזור סטטוס: AppCacheManifest + 6ms
אחזור סטטוס: Doctype + 20ms
אחזור סטטוס: DOMStats + 4ms
אחזור סטטוס: JSLibraries + 50ms
אחזור סטטוס: OptimizedImages + 25ms
אחזור סטטוס: כניסות סיסמה עם מדבקת הדבק + 234ms
אחזור מצב: ResponseCompression + 3ms
אחזור סטטוס: תגיות חסימות FirstPaint + 7ms
אחזור סטטוס: MetaDescription + 6ms
אחזור מצב: FontSize + 7ms
אחזור סטטוס: קישורי סריקה + 245ms
אחזור סטטוס: MetaRobots + 6ms
אחזור סטטוס: Hreflang + 2ms
אחזור סטטוס: EmbeddedContent + 2ms
אחזור סטטוס: Canonical + 3ms
אחזור סטטוס: RobotsTxt + 6ms
מצב איפוס מצב בערך: ריק + 19ms
מצב טוען עמוד & מחכה לטעינת ServiceWorker, לא מקוון, StartUrl + 24ms
מצב אחזור העמוד: ServiceWorker + 59ms
מצב אחזור העמוד: במצב לא מקוון + 0ms
מצב אחזור העמוד: StartUrl + 1ms
מצב אחזור devtoolsLog & רשומות רשת + 0ms
אחזור סטטוס: ServiceWorker + 2ms
מצב אחזור: במצב לא מקוון + 1ms
אחזור סטטוס: StartUrl + 1ms
מצב איפוס מצב בערך: ריק + 5ms
מצב טוען עמוד & מחכה לטעינה HTTPRedirect, HTML ללא JavaScript + 48ms
מצב אחזור העמוד: HTTPRedirect + 260ms
מצב אחזור העמוד: HTMLWithoutJavaScript + 0ms
מצב אחזור devtoolsLog & רשומות רשת + 0ms
אחזור סטטוס: HTTPRedirect + 7ms
אחזור מצב: HTMLWithoutJavaScript + 12ms
מצב ניתוק מהדפדפן … + 7ms
סטטוס ניתוח והפעלת ביקורות … + 6ms
הערכת מצב: משתמש ב- HTTPS + 3ms
הערכת מצב: מפנה מחדש את תעבורת HTTP ל- HTTPS + 24ms
הערכת מצב: רושם עובד שירות השולט בדף ו- start_url + 1ms
הערכת סטטוס: העמוד הנוכחי מגיב עם 200 במצב לא מקוון + 0ms
הערכת סטטוס: יש תג “ עם `רוחב` או` סולם ראשוני` + 1ms
הערכת מצב: מכיל תוכן כלשהו כאשר JavaScript אינו זמין + 1ms
הערכת סטטוס: צבע מלא ומלא תוכן ראשון + 6ms
הערכת מצב: צבע משמעותי ראשון + 54ms
הערכת סטטוס: טעינת העמודים מהירה מספיק ברשתות סלולריות + 10ms
הערכת מצב: מדד מהירות + 33 מס ‘
הערכת מצב: תמונת מסך ממוזערת + 529ms
הערכת מצב: תמונת מסך סופית + 287ms
הערכת מצב: חביון קלט משוער + 2ms
הערכת מצב: לא שגיאות דפדפן נרשמות לקונסולה + 16ms
הערכת מצב: זמני התגובה של השרת נמוכים (TTFB) + 1ms
הערכת מצב: סרק CPU ראשון + 1ms
הערכת מצב: זמן לאינטראקטיב + 30 מס ‘
הערכת מצב: סימוני תזמון למשתמשים ומודדי + 0ms
הערכת מצב: צמצם עומק בקשות קריטיות + 2 מס ‘
הערכת מצב: הימנע מהפניות מרובות מהדפים + 3ms
הערכת מצב: מניפסט של אפליקציות אינטרנט עונה על דרישות ההתקנה + 2 מס ‘
הערכת מצב: מוגדר למסך התזה המותאם אישית + ​​1ms
הערכת מצב: מגדיר צבע נושא שורת הכתובת + 0ms
הערכת סטטוס: התוכן בגודל נכון עבור נמל התעופה + 1ms
הערכת מצב: מציג תמונות עם יחס רוחב-גובה נכון + 0ms
הערכת סטטוס: נמנע מממשקי API שהוצאו משימוש + 1ms
הערכת סטטוס: ממזער עבודה של חוט ראשי + 0 ​​מס ‘
הערכת מצב: זמן ביצוע JavaScript + 11ms
הערכת סטטוס: טען מראש בקשות מפתח + 3ms
הערכת מצב: התחבר מחדש למקורות הנדרשים + 2ms
הערכת מצב: כל הטקסט נותר גלוי במהלך עומסי אינטרנט + 2ms
הערכת מצב: בקשות רשת + 1ms
הערכת מצב: מדדים + 2ms
הערכת סטטוס: start_url מגיב עם 200 במצב לא מקוון + 1ms
הערכת סטטוס: האתר פועל בין דפדפני + 1ms
הערכת מצב: מעברים לדפים לא מרגישים שהם חוסמים ברשת + 0ms
הערכת מצב: לכל עמוד כתובת URL + 0ms
הערכת סטטוס: `[אריה – *]` תכונות תואמות את תפקידיהם + 1 שניות
הערכת סטטוס: `[תפקיד] כולן צריכות תכונות [אריא – *]` + 1ms
הערכת מצב: אלמנטים עם `[תפקיד]` הדורשים ילדים ספציפיים `[תפקיד]`, קיימים + 0ms
הערכת סטטוס: “ תפקיד ” מכילים את רכיב ההורה הנדרש שלהם + 1ms
הערכת מצב: הערכים ‘תפקיד’ חוקיים + 1ms
הערכת סטטוס: `[אריה – *]` לתכונות יש ערכים תקפים + 0ms
הערכת סטטוס: תכונות ‘[אריה – *]’ תקפות ולא כתובות שגויות + 1ms
הערכת מצב: אלמנטים מכילים אלמנט עם `[kind ="כיתובים"] `+ 1ms
הערכת מצב: לחצנים יש שם נגיש + 1ms
הערכת מצב: הדף מכיל כותרת, דלג על קישור או אזור ציון דרך + 1ms
הערכת מצב: לצבעי רקע וקדימה יחס ניגודיות מספיק + 1ms
הערכת מצב: “ מכילים רק קבוצות “ ו“קבוצות“ או “ שהוזמנו כהלכה. + 1ms
הערכת מצב: פריטי רשימת ההגדרות עטופים באלמנטים + 0ms
הערכת מצב: למסמך יש רכיב “ + 1ms
הערכת סטטוס: תכונות `[id]` בדף הינן ייחודיות + 1ms
הערכת סטטוס: על “ או “ אלמנטים יש כותרת + 1ms
הערכת סטטוס: ל”אלמנט “יש תכונה ‘[lang]’ + 0ms
הערכת סטטוס: לאלמנט `יש ערך תקף לתכונה` [lang] `+ 1ms
הערכת מצב: לאלמנטים בתמונות תכונות `[alt]` + 1ms
הערכת מצב: “ אלמנטים יש `[alt]` טקסט + 1ms
הערכת מצב: לאלמנטים בטופס יש תוויות משויכות + 0ms
הערכת מצב: מצגת `

אלמנטים נמנעים משימוש בתכונה “, “ או בתכונה `[סיכום]. + 1ms
הערכת מצב: לקישורים יש שם שניתן להבחין בו + 1ms
הערכת מצב: רשימות מכילות רק `
  • `אלמנטים ותסריט אלמנטים תומכים (` `ו-` `). + 1ms
    הערכת מצב: רשימת פריטים (`
  • `) כלולים בתוך`
      `או`
        `אלמנטים של האב + 1ms
        הערכת סטטוס: המסמך אינו משתמש ב- `+ 0ms
        הערכת סטטוס: `[מדרג משתמש ="לא"] `אינו משמש באלמנט` `והתכונה` [בקנה מידה מקסימלי] `אינה קטנה מ- 5. + 1ms
        הערכת מצב: “ אלמנטים יש `[alt]` טקסט + 1ms
        הערכת סטטוס: לאף אלמנט אין ערך ‘[tabindex]’ הגדול מ- 0 + 1ms
        הערכת מצב: תאים בתוך `
  • אלמנט שמשתמש בתכונה ‘כותרות’ מתייחס רק לתאים אחרים באותה טבלה. + 1ms
    הערכת מצב: “ אלמנטים ואלמנטים עם `[תפקיד ="עמוד טור"/"מחורר שורות"] `יש תאי נתונים שהם מתארים. + 0ms
    הערכת סטטוס: לתכונות `[lang]` יש ערך תקף + 1ms
    הערכת מצב: אלמנטים מכילים אלמנט עם `[kind ="כיתובים"] `+ 1ms
    הערכת מצב: אלמנטים מכילים אלמנט עם `[kind ="תיאור"] `+ 1ms
    הערכת מצב: הערכים ‘[accesskey]’ הם ייחודיים + 1ms
    הערכת מצב: פקדים בהתאמה אישית קשורים לתוויות + 0ms
    הערכת מצב: פקדים בהתאמה אישית הם בעלי תפקידי ARIA + 1ms
    הערכת מצב: מיקוד המשתמש לא נכלא בטעות באזור + 0ms
    הערכת מצב: בקרות אינטראקטיביות ניתנות למיקוד במקלדת + 0ms
    הערכת מצב: כותרות לא מדלגות על רמות + 0ms
    הערכת מצב: אלמנטים אינטראקטיביים מציינים את מטרתם ומצבם + 1ms
    הערכת מצב: לדף יש סדר לשוניות לוגי + 0ms
    הערכת מצב: המיקוד של המשתמש מופנה לתוכן חדש שנוסף לדף + 1ms
    הערכת מצב: תוכן מחוץ למסך מוסתר מטכנולוגיה מסייעת + 0ms
    הערכת מצב: אלמנטים של ציוני דרך HTML5 משמשים לשיפור הניווט + 0ms
    הערכת מצב: סדר חזותי בדף עוקב אחר סדר DOM + 0ms
    הערכת מצב: משתמש במדיניות מטמון יעילה בנכסים סטטיים + 1ms
    הערכת מצב: מונע עומסי רשת עצומים + 3ms
    הערכת סטטוס: דחו תמונות מהמסך מחוץ למסך + 1ms
    הערכת מצב: ביטול משאבים חסימת עיבוד + 12ms
    הערכת מצב: צמצם CSS + 28ms
    הערכת מצב: צמצם את JavaScript +64ms
    הערכת סטטוס: יש לדחות CSS + 69ms ללא שימוש
    הערכת סטטוס: הגישו תמונות בפורמטים של ה- gen הבא + 12ms
    הערכת מצב: קידוד יעיל של תמונות + 11ms
    הערכת מצב: אפשר דחיסת טקסט + 6ms
    הערכת מצב: תמונות בגודל נכון + 6ms
    הערכת מצב: השתמש בפורמטים של וידאו לתוכן מונפש + 7ms
    הערכת מצב: נמנע מטמון יישומים + 11ms
    הערכת סטטוס: לדף יש את HTML HTML doctype + 0ms
    הערכת מצב: נמנע מגודל DOM מוגזם + 1ms
    הערכת סטטוס: קישורים ליעדים חוצים-מוצא בטוחים + 2ms
    הערכת מצב: נמנע מבקשת הרשאת מיקום גיאוגרפי בעומס העמודים + 1ms
    הערכת סטטוס: נמנעת מ” document.write () “+ 0ms
    הערכת מצב: נמנע מספריות JavaScript מקדימות עם פגיעויות אבטחה ידועות + 0ms
    הערכת מצב: ספריות JavaScript זוהו + 9ms
    הערכת מצב: נמנע מבקשת הרשאת ההודעה בעומס העמוד + 1ms
    הערכת מצב: מאפשר למשתמשים להדביק בשדות סיסמאות + 0ms
    הערכת מצב: משתמש ב- HTTP / 2 למשאבים שלו + 0ms
    הערכת מצב: משתמש במאזינים פסיביים כדי לשפר את ביצועי הגלילה + 1ms
    הערכת מצב: למסמך יש תיאור מטא + 0ms
    הערכת מצב: לדף יש קוד סטטוס HTTP מצליח + 1ms
    הערכת מצב: המסמך משתמש בגדלי גופן קריאים + 5ms
    הערכת מצב: לקישורים יש טקסט תיאורי + 1ms
    הערכת סטטוס: הדף לא חסום לאינדקס של + 1ms
    הערכת מצב: robots.txt תקף + 2ms
    הערכת סטטוס: למסמך יש `hreflang` + 1ms תקפים
    הערכת סטטוס: המסמך נמנע מתוספי + 1ms
    הערכת סטטוס: למסמך יש `rel = canonical` + 0ms תקפים
    הערכת מצב: הדף ידידותי לנייד + 1ms
    הערכת מצב: נתונים מובנים תקפים + 0ms
    מצב יצירת תוצאות … + 0ms
    ChromeLauncher הורג מופע Chrome 7098 + 59ms
    פלט html של המדפסת נכתב ל- /home/chandan/geekflare.com_2019-01-20_19-29-35.report.html + 46ms
    CLI Protip: הפעל מגדלור עם ‘- view’ כדי לפתוח מייד את דוח ה- HTML בדפדפן שלך + 1ms

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

    אבל מה אם אתה צריך להפיק דוח ב- ג’ייסון פורמט?

    זה אפשרי כדלקמן.

    כתובת מגדלור – דגלי chrome ="–ללא ראש" –פלט json – output-path URL.json

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

    סיכום

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

    Jeffrey Wilson Administrator
    Sorry! The Author has not filled his profile.
    follow me
      Like this post? Please share to your friends:
      Adblock
      detector
      map