מדריך שימוש Google PageSpeed Insights API

אם אתם רוצים לבצע אוטומציה לבדיקת מהירות האתר על ידי גוגל ולא יודעים איך, זהו פוסט בשבילכם. קבלו את מדריך שימוש Google PageSpeed Insights API
How to use Google PageSpeed Insight API

תוכן עניינים

אם אתם בודקים את ביצועי האתר שלכם, סביר להניח שיוצא לכם לא פעם להשתמש ב PageSpeed Insights, אם דרך האתר, אם על ידי תוסף הרחבה לכרום ואם דרך כרום עצמו.

העניין הוא שהשיטה הזאת מעולה לבדיקה מזדמנת של אתר אבל מה אם אתם רוצים לנטר אתר בקביעות? מה אם אתם רוצים לנטר יותר מ URL אחד ומה אם אתם מנהלים מספר רב של אתרים שאתם כולם אתם מעוניינים לנטר? בשביל זה קיים Google PageSpeed Insights API.

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

למה לנטר את מהירות האתר

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

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

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

איך API עוזר לי

ה API מאפשר גישה לכל מה ש Lighthouse בודק. נוכל לבקש בדיקה ל URL's מסוימים, נוכל לבחור אם אנחנו רוצים לדסקטופ או מובייל ונקבל תשובה מפורטת של כל המדדים.

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

דרישות מקדימות לשימוש ב API

תצטרכו להשיג key בחינם כמובן ל- PageSpeed Insights API. אם יש לכם כבר חשבון ב console.developer.google ופרוייקטים ושירותים פעילים, פשוט לחצו על הקישור ובקשו api key לפרוויקט קיים או חדש.

אם זו הפעם הראשונה שאתם מאפשרים משהו כזה, תצטרכו להיכנס ל console.developer להקים את החשבון ואז לבקש credential מסוג API key. לאחר מכן כנסו בתפריט הצד ל Library ובחיפוש התחילו להקיש Insight ולחצו על PageSpeed Insight ולחצו Enable.

הבנה של ה API

כמו כל API יש לנו בקשה ותשובה – request\response. הבקשה במקרה שלנו פשוטה מאוד. הפרמטרים היחידים שיהיה עליכם להגדיר, הם url ו- strategy במקרה שתרצו בדיקה למובייל. כמו כן api key לצורך שימוש מתמשך.

כאן תוכלו לראות את מבנה ה request.

התשובה (response) לעומת זאת, ארוכה ומורכבת וכאן יש קצת אתגר למי שלא רגיל להשתמש ב api's.

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

כאן תוכלו לראות את מבנה ה response השלם.

איך משתמשים ב API

שימוש לצורך לימוד וניסוי

אם אתם רק רוצים לשחק קצת עם API וללמוד על התצואות שהוא מביא, יש לכם כמה אפשרויות ובשביל זה אפילו לא תצטרכו api key.

  • API Explorer – כנסו לפה (מסך מלא) או לפה (לצד דוקומנטציה). והגדירו את הדברים הבאים:
    • category = Performance
    • url = your url
    • strategy = desktop or mobile
    • לחצו על Exceute
  • CURL – כדי להריץ את זה בווינדוס צריך או להוריד ולהתקין curl או אם יש לכם git מותקן במחשב תוכלו להריץ git bash וזה יעבוד.
    • הריצו את הפקודה הבאה (שנו את הפרמטרים בהתאם לצורך – בשביל דסקטופ אין צורך לציין כי זה הדיפולט):
curl https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=https://google.com&strategy=mobile

אם תרצו לחקור את התשובה בצורה יותר נוחה, העתיקו אותה והדביקו באחד מכלי ה json viewer שיש לכם או json viewer אונליין. ככה תוכלו לראות את התשובה במבנה של עץ ברור.

כך למשל יראה העץ (כשהוא מכווץ) של תשובה על אתר google.com

שימוש לניטור מתמשך

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

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

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

אלו נתונים לשמור

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

נתחיל בדברים כלליים:

  • fianlUrl: הכתובת הסופית אותה בחנו (אם היה redirect למשל מהכתובת אותה בקשנו לבחון).
  • fetchTime: הזמן בו הבדיקה רצה. חשוב אם נרצה לשמור היסטוריה ולנתח את הנתונים.
  • runWarnings: מערך של הודעות. יכול להיות ריק ויכול להכיל הודעות חשובות.
  • configSettings.
    emulatedFormFactor: יכיל האם הבדיקה התבצעה על דסקטופ או מובייל. תוכלו לשמור את הנתון גם מהבקשה.
  • categories.
    performance.score: הציון הכולל של הבדיקה. שימו לב כאן ניגשתי ישירות ל performance אבל זכרו ש lighthouse יודע לבדוק דברים נוספים אם תציינו זאת בבקשה, אם בדקתם דברים נוספים, גשו לקטגוריה המתאימה.
  • timing.total: כמה זמן לקחה הבדיקה.

הדבר הבא והעיקרי הוא מערך של audits

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

  • audits[largest-contentful-paint].score – ציון ה LCP שהוא חלק מ core web vitals. זה ערך בודד.
  • audits[unused-css-rules].details.[items].value – זוהי רשימה של ערכים.

דוגמה ויזואלית:

רשימה של כל ה audits – השמות מדברים בפני עצמם:

איך להשיג את כתובות האתר לבדיקה

בנוסף לקוד עצמו שמבצע את הבקשה, תצטרכו לספק URL's לבדיקה. תוכלו לעשות זאת במגוון דרכים.

  • דרך אחת פשוטה היא ע"י רשימה של url's קבועים באתר אותה תכינו מראש ותעדכנו כשצריך. זה טוב במקרה שמדובר במספר קטן של עמודים אותם אתם רוצים לנטר.
  • אם מדובר במספר רב של כתובות או בכל האתר ניתן להשתמש בכלים כמו Screaming Frog, Ahrefs.
  • דרך נוספת, במקרה ואין לכם גישה לכלים שהוזכרו בסעיף הקודם היא להשתמש בכלי של site map generator כמו XML Sitemap . היתרון של השיטה הזאת שהיא חינמית לחלוטין ופשוטה מאוד.

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

דרך נוספת להשיג את כתובות האתר, היא להשתמש ב crawler. היתרון הוא שאוטומטית כל הדפים יבדקו מבלי שתצטרכו לעדכן את הרשימה כל פעם. אבל שימו לב שלא בטוח שתרצו לבדוק את כל האתר וגם חשוב לשים לב למגבלות של ה API. אם בכל מקרה משתמשים ב crawler מומלץ להשתמש בקוד קיים ובדוק ועם אפשרות לפלטר החוצה דפים לא מעניינים. בהתאם לשפה בה בחרתם להשתמש, חפשו crawler open source.

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

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

מגבלות ה API

נכון לזמן כתיבת הפוסט, המגבלה של גוגל ל API הזה היא 25,000 בקשות ביום (מתאפס כל יום) ו 400 בקשות ל-100 שניות. יש אפשרות לבקש מכסה נוספת אבל לא בטוח שתקבלו.

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

איך להריץ את הניטור בזמנים קבועים

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

  • שימוש בענן כלשהו עם טריגר – תשלום נמוך. זה בענן של גוגל – scheduler \ functions. אבל בטוח יש גם פתרון של azure למי שירצה.
  • אם אתם בווינדוס, שימוש במתזמן משימות – מדריך 1 או מדריך 2 או שימוש ב API
  • אם אתם בלינוקס, שימוש ב cron job. מדריך 1 , מדריך 2.
  • לחילופין תוכלו להפעיל את התוכנה שלכם ב service שעולה עם מערכת ההפעלה ועושה את העבודה ברקע.

פתרון CI

אם אתם מתפחים אתר שלכם ואתם רוצים שהבדיקה תרוץ כחלק מה Continuous Integration, הפתרון לזה הוא שימוש ב- Lighthouse CI

פתרון ללא קוד בכלל

Lighthouse Keeper – אתר שנתקלתי בו אבל לא יודע עד כמה ניתן לסמוך עליו וכרגע מציע שירות חנמי לעד שלוש כתובות. שווה אולי לעקוב ולראות אם יש עניין להשתמש בו כדי לחסוך את כל הקוד.

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

הפתרון ממומש על ידי שימוש בגליונות גוגל Google Sheets ושימוש ב Google Apps Script. בקישור ששמתי תוכלו לראות את הפוסט עם הגרסה האחרונה של הגליון או להיכנס לגליון ישירות. בנוסף תוכלו לראות את הפוסט המקורי שמסביר על השיטה ועל איך להשתמש בגליון.

סיכום

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

0 0 דרג
דרג את הפוסט

תוכן עניינים

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

הרשמה
Notify of
2 תגובות
חדש ביותר
הישן ביותר הכי הרבה דירוגים
Inline Feedbacks
הצג את כל התגובות

גם הפוסטים הבאים יעניינו אותך

2
0
אשמח לשמוע את דעתכם, מוזמנים להשאיר תגובהx