כיצד להשתמש ב-Google Lighthouse לבדיקת ביצועי אתר - TechCult
Miscellanea / / November 07, 2023
כשזה מגיע לדירוג האתר שלך גבוה יותר בתוצאות מנועי החיפוש, מהירות האתר היא גורם שאי אפשר להתעלם ממנו. זה לא רק משמח את המשתמשים, אלא גם מתורגם לנראות מוגברת. אחרי הכל, אף אחד לא רוצה ללחוץ על דף ולחכות לנצח עד שהוא ייטען. אתה רואה את TechCult למשל, הבלוגים שלנו נטענים די מהר, לא? חח, בדיחות בצד, אם אתה חושש שהאתר שלך לא יכול לדרג בגלל מהירות נמוכה, Google Lighthouse כאן כדי לעזור לך. במאמר של היום, נראה לך כיצד להשתמש ב-Google Lighthouse לבדיקת ביצועים.
מהו Google Lighthouse וכיצד להשתמש בו לבדיקת ביצועים?
זה פתגם נפוץ שהרושם הראשון הוא האחרון. בנימה זו, לעתים קרובות אתר שנטען במהירות עומד גבוה במונחים של חווית משתמש טובה יותר, מה שיכול בסופו של דבר להביא לעלייה בשיעורי ההמרה. אפילו מנועי חיפוש כמו גוגל מדרגים אתרים הנטענים מהר יותר בתוצאות החיפוש.
Google Lighthouse הוא כלי אוטומטי בקוד פתוח המסייע למפתחי ובעלי אתרים, להעריך ולשפר את האיכות של דפי אינטרנט. יש לו ביקורות עבור ביצועים, נגישות, שיטות עבודה מומלצות ו-SEO גם לנייד וגם למחשב שולחני. בהתבסס על הדוחות וההמלצות המפורטים שלו, המשתמשים יכולים לבצע אופטימיזציה של ביצועי האתר לצורך מעורבות משתמשים טובה יותר. ניתן להפעיל את Lighthouse מול כל דף אינטרנט, נגיש באופן ציבורי או פרטי. בוא נראה איך זה עובד ואיך אתה יכול להשתמש בו.
שיטה 1: הוסף והפעל ישירות את Lighthouse
Lighthouse זמין למשתמשים גם בצורה של תוסף של גוגל, שתוכל להוריד כדי להפעיל עבורך ביקורת בדפדפן כרום. בצע את השלבים הבאים:
1. בקר ב דף חנות האינטרנט של Chrome עבור תוסף Lighthouse בכל דפדפן אינטרנט.
2. לחץ על להוסיף לכרום.
3. בחר הוסף הרחבה כדי לאשר.
4. לאחר הוספה, הפעל את האתר בדפדפן שברצונך לנתח.
5. הקלק על ה סמל הרחבה (פאזל). ליד שורת הכתובת ובחר מִגדַלוֹר.
6. לחץ על להפיק דוח.
זהו זה! תוך מספר שניות, Lighthouse תפיק דוח מפורט המנתח את האתר שעבורו הפעלת את הבדיקה.
שיטה 2: השתמש ב- PageSpeed Insights
Google PageSpeed Insights הוא גם א כלי לבדיקת ביצועי אינטרנט שמשתמש ב-Lighthouse כמנוע הניתוח שלו. לפיכך אתה יכול להשתמש בו כדי להפיק דוחות עבור האתר שלך. בצע את השלבים:
1. בקר ב Page Speed Insights אתר אינטרנט.
2. הזן את כתובת האתר בשדה הטקסט ולחץ על לְנַתֵחַ.
לאחר סיום הבדיקה, תקבל את דוח חוויית המשתמש של Chrome המציג תוצאות שחוו משתמשים אמיתיים.
הקטע אבחון בעיות ביצועים מייצג את הציון Lighthouse. אתה יכול לבדוק תוצאות הן לנייד והן למחשב שולחני.
שיטה 3: הפעל את Lighthouse ב-DevTools
ל-Lighthouse יש את הפאנל שלו ב-Google Chrome DevTools שאתה יכול להשתמש בו גם לבדיקת הביצועים אם האתר שלך פועל על שרת מקומי או גם עבור אתרים הדורשים התחברות. הנה איך לעשות את זה:
1. בקר באתר שאתה רוצה לבדוק.
2. לחץ לחיצה ימנית בכל מקום בדף ובחר לִבדוֹק מהתפריט.
3. הקלק על ה >> סמל (כרטיסיות נוספות) ובחר מִגדַלוֹר מתפריט ההקשר.
4. הקלק על ה נתח את טעינת העמוד לחצן בפינה השמאלית העליונה והמתן עד שהתוצאות יהיו מוכנות.
הערה: בחר את התקן כראוי ולשמור את כל קטגוריות מופעל.
אתה יכול גם לשנות את המצב. Lighthouse ב-DevTools מספק שלושה מצבי בדיקה:
- ניווט: מציג תוצאות כוללות כולל ביצועים, נגישות וקידום אתרים.
- טווח זמן: מציג תוצאות על סמך משך הזמן שלוקח לדף לטעון ולקיים אינטראקציה עם הגולש. יהיה עליך ליצור אינטראקציה עם הדף בזמן שהבדיקה פועלת.
- תמונת מצב: מחשב ציון עבור הדף הנוכחי
קרא גם:31 כלי גירוד האינטרנט הטובים ביותר
שיטה 4: השתמש במודול Lighthouse עם שורת הפקודה
Lighthouse זמין גם כמודול Node שאתה יכול לשלב במערכות האינטגרציה הרציפות שלך ולהשתמש בו כשורה פקודה או באופן פרוגרמטי. כל מה שהוא דורש הוא גרסה של הצומת. אם יש לך Node.js מותקן במחשב האישי, בצע את השלבים הבאים:
1. התחבר לשרת שלך והפעל את הפקודה הבאה כדי להתקין את המודול הגלובלי Lighthouse במכשיר:
npm install -g lighthouse
2. לאחר ההתקנה, הפעל את הפקודה הבאה כדי לבצע בדיקת Lighthouse:
lighthouse -- view
אתה יכול להציג את כל האפשרויות הזמינות באמצעות הפקודה הבאה.
lighthouse --help
איך Lighthouse מחשב ציון
Google Lighthouse משלב ומעריך היבטים שונים של מדדי הביצועים של אתר אינטרנט, כגון ביצועים, נגישות, שיטות עבודה מומלצות, SEO ו-PWA. לאחר שהביקורת הצליחה, היא מפיקה דוח הכולל ציון עבור כל היבט, כמו גם המלצות לשיפורים הדרושים כדי לשפר את הביצועים ואת האינטראקציה של המשתמש באתר שלך. אתרים מדורגים בדרך כלל בסולם של 0 עד 100.
ביצועים
Lighthouse מנתח באיזו מהירות דף אינטרנט נטען. ציון הביצועים מחושב על ידי התחשבות במדדים הבאים -
- צבע תוכן ראשון (FCP): באיזו מהירות האלמנט הראשון מהתוכן נצבע על המסך
- צבע התוכן הגדול ביותר (LCP): מודד את הזמן שלוקח לרכיב התוכן הגדול ביותר להפוך לגלוי
- שינוי פריסה מצטבר (CLS): מודד את כמות שינויי הפריסה הבלתי צפויים המתרחשים במהלך טעינת העמוד כדי להעריך את היציבות החזותית של הדף. CLS נמוך מצביע על כך שהאתר יציב.
- זמן חסימה כולל: מודד את הזמן שבו השרשור הראשי חסום ואינו מגיב לקלט המשתמש.
- מדד מהירות: מציין באיזו מהירות כל תוכן הדף גלוי לחלוטין
מדדים אלה מודדים את מהירות הטעינה של האתר ואת היציבות החזותית. מספר גורמים משפיעים על דוח זה, כמו גודל ומספר התמונות, מספר התוספים בשימוש ויעילות קוד האתר.
Lighthouse מחשב את הציון על ידי לקיחת הממוצע המשוקלל של הערכים המטריים. באופן טבעי, למדידות עם משקל גבוה יותר יש השפעה רבה יותר על ציון הביצועים הכולל שלך. הציונים המטריים אינם מוצגים בדוח אלא מחושבים מאחורי הקלעים. אתה יכול ללחוץ על האפשרות ראה מחשבון כדי לקבל גישה לחישוב המפורט של הגורמים המשפיעים על האתר שלך.
נְגִישׁוּת
זהו ציון ממוקד משתמש שמודד כמה קל למשתמשים עם מוגבלויות לגשת לאתר שלך. זה מושפע מגורמים כמו נוכחות של טקסט חלופי בתמונות, השימוש בתכונות ARIA והנגישות למקלדת של האתר שלך. כל ביקורת נגישות היא או מעבר או כישלון. עמוד אינו מקבל נקודות על מעבר חלקי של ביקורת נגישות, בניגוד לביקורת הביצועים.
- טקסט חלופי לתמונות: כל התמונות בדף צריכות לכלול טקסט חלופי מתאים ותיאורי, מכיוון שהוא נחוץ למשתמשים עם לקות ראייה המסתמכים על קוראי מסך כדי לפרש תמונות.
- HTML סמנטי: שימוש נכון ברכיבי HTML סמנטיים כגון כותרת, כותרות, רשימות וכו' עוזר לקוראי מסך ותוכנות מסייעות אחרות להבין את מבנה העמוד
- ניגודיות צבע: ניגודיות הצבע בין הטקסט לרקע שלו צריכה לעמוד בסטנדרטים שנקבעו בהנחיות הנגישות לתוכן אינטרנט. ניגודיות צבע מספקת מבטיחה שהטקסט יהיה קריא עבור אנשים עם ראייה לקויה או עיוורון צבעים.
קרא גם: כיצד לבנות אתר באמצעות ChatGPT
שיטות עבודה מומלצות
Lighthouse מודד עד כמה האתר שלך עוקב אחר שיטות עבודה מומלצות לפיתוח אתרים ותקני קידוד ומספק ציון על סמך זה. הוא בודק את השימוש בתכונות JavaScript מודרניות ובחיבורים מאובטחים (HTTPS) ומושפע מגורמים כגון שימוש במיניפיקציה ודחיסה, נוכחות של כותרות אבטחה ושימוש ב-robots.txt קבצים. חלק מהביקורות הנפוצות במסגרתו כוללות:
- הימנע מספריות JavaScript גדולות
- הימנע מ-CSS שלא נעשה בו שימוש
- אפשר דחיסת טקסט
- בטל משאבים חוסמי עיבוד
- נצל את מטמון הדפדפן
- שרת נכסים סטטיים עם מדיניות מטמון יעילה
SEO
SEO מודד עד כמה האתר מותאם למנועי חיפוש. זה מושפע מגורמים כמו נוכחות של תיאורי מטא ותגיות כותרת, שימוש במילות מפתח רלוונטיות ומבנה התוכן של האתר שלך. הציון מחושב על ידי ממוצע הציונים עבור הביקורות הבאות:
- כותרת המסמך
- תיאור
- כותרות
- תמונות
- קישורים
- מטא תיאור
- Robots.txt
קרא גם: 27 שירותי אירוח אתרים בחינם הטובים ביותר
כיצד לפרש את התוצאות
Lighthouse ממירה כל ערך מטרי גולמי לציון מטרי של 0 עד 100. ככל שהציון גבוה יותר, כך הוא טוב יותר. ציוני המדדים נצבעים בהתאם לטווחים הבאים:
- 0 עד 49 (משולש אדום): גרוע
- 50 עד 89 (ריבוע כתום): טעון שיפור
- 90 עד 100 (מעגל ירוק): טוב
כשמריצים את המבחנים שלו באותו אתר, מקובל לראות תנודות בציונים הכוללים. שונות זו יכולה להיות מיוחסת למספר גורמים.
- כל ניתוח מספק רק תובנות לגבי הביצועים של טעינת עמוד בודד. מאחר שאין טעינות של שני עמודים זהות, זמני הטעינה עשויים להשתנות באופן טבעי.
- מהירות הדף יכולה להיות מושפעת מנוכחות של תוכן דינמי, כגון מודעות או אלמנטים המשתנים תדיר, הרחבות דפדפן שמשנות בקשות רשת ופעילויות רקע במחשב.
- ציונים שהושגו בסביבות שונות, כגון PageSpeed Insights והמחשב המקומי שלך, עשויים שלא להיות ברי השוואה ישירות בגלל הבדלים בחומרה ובתנאי הרשת.
כיצד לשפר את ציון המגדלור שלך
Lighthouse מספקת גם נתוני מעבדה (בדיקות מדומות) וגם נתוני שטח (נתוני משתמש אמיתיים) כדי להעריך את הביצועים של דף אינטרנט. נתוני שדה מציעים תובנות לגבי האופן שבו משתמשים בפועל חווים את האתר, בעוד שנתוני מעבדה שימושיים לבדיקת שינויים ושיפורים.
התחל בהתרכזות בהמלצות בתחום הביצועים. אתר בעל טעינה מהירה יותר ישפר את חווית המשתמש ועשוי להגביר את דירוג ה-SEO שלך. לאחר שציון הביצועים שלך השתפר, ייתכן שתתחיל להתמקד בהמלצות בתחומים האחרים. מכיוון שהנגישות וקידום אתרים הם מרכיבים חיוניים באיכות הכללית של האתר שלך, כדאי להקדיש מאמצים גם לשיפור התחומים הללו.
קרא גם: Zyro vs Wix: באיזה בונה אתרים כדאי לבחור?
טיפים בונוסים למתחילים
אם זה עתה עיצבת והשקת את האתר שלך, הנה כמה עצות נוספות שכדאי לך לשמור עליו:
- אל תהיה המום מההצעות הרבות של דו"ח Lighthouse. התחל עם העצה החשובה ביותר ועשה את דרכך למטה ברשימה.
- דוח Lighthouse עשוי לשמש כדי לעקוב אחר ההתפתחות שלך לאורך זמן. דירוגי Lighthouse שלך אמורים להשתפר ככל שתבצע את ההמלצות.
- זכור לבדוק את האתר שלך במכשירים ודפדפנים רבים. מכיוון שדוח Lighthouse מבוסס על בדיקה בודדת, חיוני לבדוק את האתר שלך בכמה מכשירים ודפדפנים כדי להבטיח שהוא פועל היטב עבור כל המשתמשים.
אנו מקווים שהמדריך שלנו עזר לך להבין כיצד להשתמש Google Lighthouse לבדיקת ביצועי האתר שלך ובכך לשפר אותו. אם יש לך שאלות או הצעות עבורנו, הודע לנו בקטע ההערות. הישאר מעודכן ל-TechCult לעוד בלוגים אינפורמטיביים כאלה.
הנרי הוא סופר טכנולוגי ותיק עם תשוקה להנגיש נושאים טכנולוגיים מורכבים לקוראים יומיומיים. עם למעלה מעשור של ניסיון בתעשיית הטכנולוגיה, הנרי הפך למקור מידע מהימן עבור קוראיו.