עדכון לגבי התוכניות שלנו למדידת הרספונסיביות באינטרנט.
מוקדם יותר השנה, צוות מדדי המהירות של 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 / 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});
משוב
אנחנו רוצים לעודד מפתחים לנסות את מדדי הרספונסיביות החדשים האלה באתרים שלהם, ולהודיע לנו אם גיליתם בעיה.
אפשר לשלוח באימייל משוב כללי על הגישות המפורטות כאן אל קבוצת Google web-vitals-feedback, ולציין בשורת הנושא "[Responsiveness Metrics]". אנחנו מצפים לשמוע מה דעתכם!