חדש ב-Chrome 77

Pete LePage

אנחנו משיקים עכשיו את Chrome 77.

קוראים לי Pete LePage, ועכשיו נצלול פנימה ונראה מה חדש למפתחים בגרסה 77 של Chrome.

Largest Contentful Paint ‏(LCP)

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

Largest Contentful Paint API, שזמין החל מ-Chrome 77, מדווח על משך העיבוד של רכיב התוכן הגדול ביותר שגלוי באזור התצוגה, ומאפשר למדוד מתי נטען התוכן הראשי של הדף.

כדי למדוד את המהירות שבה נטען רכיב התוכן הכי גדול (LCP), צריך להשתמש ב-Performance Observer ולחפש אירועים מסוג largest-contentful-paint.

let lcp;
const po = new PerformanceObserver((eList) => {
  const e = eList.getEntries();
  const last = e[e.length - 1];
  lcp = last.renderTime || last.loadTime;
});

const poOpts = {
  type: 'largest-contentful-paint',
  buffered: true
}
po.observe(poOpts);

לרוב, דף נטען בשלבים, ולכן יכול להיות שהרכיב הגדול ביותר בדף ישתנה. לכן, צריך לדווח לשירות הניתוח רק על האירוע largest-contentful-paint האחרון.

addEventListener('visibilitychange', function fn() {
  const visState = document.visibilityState;
  if (lcp && visState === 'hidden') {
    sendToAnalytics({'lcp': lcp});
    removeEventListener('visibilitychange', fn, true);
  }
}, true);

פיל פרסם פוסט מעולה בנושא Largest Contentful Paint ב-web.dev.

יכולות חדשות בטפסים

מפתחים רבים יוצרים פקדי טפסים בהתאמה אישית, כדי להתאים אישית את המראה והתחושה של רכיבים קיימים או כדי ליצור פקדים חדשים שלא מובנים בדפדפן. בדרך כלל, הפתרון הזה כולל שימוש ב-JavaScript וברכיבי <input> מוסתרים, אבל הוא לא פתרון מושלם.

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

האירוע formdata

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

const form = document.querySelector('form');
form.addEventListener('formdata', ({formData}) => {
  formData.append('my-input', myInputValue);
});

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

רכיבים מותאמים אישית המשויכים לטופס

רכיבים מותאמים אישית שמשויכים לטופס עוזרים לגשר על הפער בין רכיבים מותאמים אישית לבין אמצעי בקרה מקומיים. הוספת מאפיין formAssociated סטטי מורה לדפדפן להתייחס לרכיב המותאם אישית כמו לכל שאר רכיבי הטופס. מומלץ גם להוסיף מאפיינים נפוצים שנמצאים ברכיבי קלט, כמו name, ‏ value ו-validity, כדי להבטיח עקביות עם אמצעי הבקרה המקוריים.

class MyCounter extends HTMLElement {
  static formAssociated = true;

  constructor() {
    super();
    this._internals = this.attachInternals();
    this._value = 0;
  }
  ...
}

בקישור הבא תוכלו לקרוא את המאמר בקרות טופס מתקדמות יותר ב-web.dev כדי לקבל את כל הפרטים.

טעינה מדורגת מקורית

לא ברור לי איך החמצתי את הטעינה האיטית המובנית בסרטון האחרון שלי! הוא די מדהים, אז החלטתי לכלול אותו עכשיו. טעינת פריטים בזמן אמת היא טכניקה שמאפשרת לדחות את הטעינה של משאבים לא קריטיים, כמו רכיבי <img> או <iframe> מחוץ למסך, עד שנדרשים, וכך לשפר את הביצועים של הדף.

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

כדי להודיע לדפדפן שאתם רוצים תמונה או טעינה איטית של iframe, משתמשים במאפיין loading="lazy". תמונות ותגי iframe שנמצאים 'מעל לקו התפר' נטענים כרגיל. התמונות שמתחת יאוחזו רק כשהמשתמש יגלול לידן.

<img src="image.jpg" loading="lazy" width="400" height="250" alt="...">

פרטים נוספים זמינים במאמר טעינה איטית ברמת הדפדפן לאינטרנט באתר web.dev.

Chrome Dev Summit 2019

כנס Chrome Dev Summit יתקיים ב-11 וב-12 בנובמבר.

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

השידור החי יתבצע בערוץ YouTube שלנו. אם אתם רוצים להשתתף באופן אישי, תוכלו לבקש הזמנה באתר של Chrome Dev Summit 2019.

ועוד.

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

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

בנוסף, יש יחידות מדידה חדשות ב-intl.NumberFormat API.

קריאה נוספת

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

להרשמה

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

קוראים לי פיט לייפ (Pete LePage), ואחרי שגרסת Chrome 78 תפורסם, אספר לכם מה חדש ב-Chrome.