נדרש משוב: מדד ניסיוני של תגובה לבקשות

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

Hongbo Song
Hongbo Song
X GitHub

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

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

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

מדידת זמן האחזור של אינטראקציה

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

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

אנחנו מתכננים גם למדוד אינטראקציות לא אירועים נפרדים. אינטראקציות הן קבוצות של אירועים נשלח כחלק מאותה תנועת משתמש לוגית (לדוגמה: pointerdown, click, pointerup).

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

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

לדוגמה, בתרשים הבא מוצגת אינטראקציה של לחיצה על מקשים של keydown ואירוע keyup. בדוגמה הזו יש חפיפה של משך הזמן בין שני האירועים האלה. כדי למדוד את זמן האחזור של האינטראקציה עם הלחיצות המקשים, אנחנו יכולים להשתמש ב-max(keydown duration, keyup duration) או ב-sum(keydown duration, keyup duration) - duration overlap:

א' תרשים שמציג את זמן האחזור של האינטראקציה על סמך משך האירוע

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

צבירה של כל האינטראקציות בדף

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

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

אפשרויות של אסטרטגיות צבירה

כדי להסביר כל אחת מהאסטרטגיות הבאות, נבחן ביקור בדף לדוגמה שמורכב מארבע אינטראקציות:

אינטראקציה זמן אחזור
קליק 120 אלפיות השנייה
קליק 20 אלפיות השנייה
לחיצה על מקשים 60 אלפיות השנייה
לחיצה על מקשים 80 אלפיות השנייה

זמן האחזור של האינטראקציה הגרועה ביותר

זמן האחזור הארוך ביותר של אינטראקציה בודדת שהתרחש בדף. בהינתן האינטראקציות לדוגמה שצוינו למעלה, זמן האחזור הגרוע ביותר של האינטראקציה יהיה 120 אלפיות שנ'

שיטות תקציב

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

סוג האינטראקציה סף התקציב
לחיצה/הקשה 100 אלפיות השנייה
גרירה 100 אלפיות השנייה
מקלדת 50 אלפיות השנייה

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

אינטראקציה זמן אחזור זמן אחזור מעבר לתקציב
קליק 120 אלפיות השנייה 20 אלפיות השנייה
קליק 20 אלפיות השנייה 0 אלפיות השנייה
לחיצה על מקשים 60 אלפיות השנייה 10 אלפיות השנייה
לחיצה על מקשים 80 אלפיות השנייה 30 אלפיות השנייה

זמן האחזור של האינטראקציה הגרוע ביותר בהשוואה לתקציב

זמן האחזור של אינטראקציה יחידה, הארוך ביותר בהשוואה לתקציב. בהמשך לדוגמה שלמעלה, הציון יהיה max(20, 0, 10, 30) = 30 ms.

זמן האחזור הכולל של האינטראקציה ביחס לתקציב

סך כל זמני האחזור של האינטראקציות מעבר לתקציב. בהמשך לדוגמה שלמעלה, הציון יהיה (20 + 0 + 10 + 30) = 60 ms.

זמן אחזור ממוצע של אינטראקציה ביחס לתקציב

זמן האחזור הכולל של אינטראקציה שחורגת מהתקציב חלקי המספר הכולל של האינטראקציות. בהמשך לדוגמה שלמעלה, הציון יהיה (20 + 0 + 10 + 30) / 4 = 15 ms.

קירוב האחוזון הגבוה

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

  • אפשרות 1: לעקוב אחר האינטראקציות הגדולות והשנייה הגדולה ביותר במהלך לתקציב. לאחר כל 50 אינטראקציות חדשות, שחרר את האינטראקציה הגדולה ביותר קבוצת ה-50 הקודמת, ומוסיפה את האינטראקציה הגדולה ביותר מתוך הקבוצה הנוכחית של 50. הערך הסופי יהיה האינטראקציה הגדולה ביותר שנותרה מעבר לתקציב.
  • אפשרות 2: מומלץ לחשב את 10 האינטראקציות הגדולות ביותר במסגרת התקציב ולבחור מהרשימה הזו בהתאם למספר הכולל של האינטראקציות. נתון N סך כל האינטראקציות, צריך לבחור את הערך (N / 50 + 1) הגדול ביותר, או את הערך העשירי לדפים עם יותר מ-500 אינטראקציות.

מדידת האפשרויות האלה ב-JavaScript

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

const interactionMap = new Map();

let worstLatency = 0;
let worstLatencyOverBudget = 0;
let totalLatencyOverBudget = 0;

new PerformanceObserver((entries) => {
  for (const entry of entries.getEntries()) {
    // Ignore entries without an interaction ID.
    if (entry.interactionId > 0) {
      // Get the interaction for this entry, or create one if it doesn't exist.
      let interaction = interactionMap.get(entry.interactionId);
      if (!interaction) {
        interaction = {latency: 0, entries: []};
        interactionMap.set(entry.interactionId, interaction);
      }
      interaction.entries.push(entry);

      const latency = Math.max(entry.duration, interaction.latency);
      worstLatency = Math.max(worstLatency, latency);

      const budget = entry.name.includes('key') ? 50 : 100;
      const latencyOverBudget = Math.max(latency - budget, 0);
      worstLatencyOverBudget = Math.max(
        latencyOverBudget,
        worstLatencyOverBudget,
      );

      if (latencyOverBudget) {
        const oldLatencyOverBudget = Math.max(interaction.latency - budget, 0);
        totalLatencyOverBudget += latencyOverBudget - oldLatencyOverBudget;
      }

      // Set the latency on the interaction so future events can reference.
      interaction.latency = latency;

      // Log the updated metric values.
      console.log({
        worstLatency,
        worstLatencyOverBudget,
        totalLatencyOverBudget,
      });
    }
  }
  // Set the `durationThreshold` to 50 to capture keyboard interactions
  // that are over-budget (the default `durationThreshold` is 100).
}).observe({type: 'event', buffered: true, durationThreshold: 50});

משוב

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

שולחים משוב כללי על הגישות שמתוארות כאן web-vitals-feedback Google קבוצה עם "[מדדי תגובה]" בשורת הנושא. אנחנו ממש מחפשים נשמח לשמוע מה דעתך.