Chrome 77 の新機能

Chrome 77 がリリースされました。

ピート ルページです。では Chrome 77 のデベロッパー向け新機能を詳しく見ていきましょう。

Largest Contentful Paint

サイトの実際のパフォーマンスを把握して測定するのは、一筋縄ではいかないこともあります。loadDOMContentLoaded などの指標は、ユーザーが画面に何を表示しているかを示すものではありません。First Paint と First Contentful Paint は、エクスペリエンスの開始時のみをキャプチャします。First Meaningful Paint の方が優れていますが、複雑で、誤りがある場合もあります。

Chrome 77 以降で利用できる Largest Contentful Paint API は、ビューポートに表示される最大のコンテンツ要素のレンダリング時間を報告し、ページのメイン コンテンツが読み込まれたタイミングを測定できるようにします。

Largest Contentful Paint を測定するには、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);

Phil が web.dev で Largest Contentful Paint に関する素晴らしい投稿をしています。

フォームの新機能

多くのデベロッパーは、既存の要素のデザインをカスタマイズしたり、ブラウザに組み込まれていない新しいコントロールを作成したりするために、カスタム フォーム コントロールを構築しています。通常は JavaScript と非表示の <input> 要素を使用しますが、これは完璧な解決策ではありません。

Chrome 77 では 2 つの新しいウェブ機能が追加され、カスタム フォーム コントロールの作成が容易になり、既存の多くの制限がなくなります。

formdata イベント

formdata イベントは、任意の JavaScript コードをフォームの送信に参加させるための低レベル API です。これを使用するには、操作するフォームに formdata イベント リスナーを追加します。

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

ユーザーが送信ボタンをクリックすると、フォームで formdata イベントが発行されます。これには、送信されるすべてのデータを保持する FormData オブジェクトが含まれます。送信前に formdata イベント ハンドラで formdata を更新または変更できます。

フォームに関連付けられたカスタム要素

フォームに関連付けられたカスタム要素は、カスタム要素とネイティブ コントロールのギャップを埋めるのに役立ちます。静的 formAssociated プロパティを追加すると、カスタム要素を他のすべてのフォーム要素と同様に扱うようにブラウザに指示します。また、ネイティブ コントロールとの整合性を保つため、入力要素に見られる共通のプロパティ(namevaluevalidity など)も追加する必要があります。

class MyCounter extends HTMLElement {
  static formAssociated = true;

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

詳しくは、web.dev のより優れたフォーム コントロールをご覧ください。

ネイティブ遅延読み込み

前回の動画でネイティブ遅延読み込みがどうだったのかわかりません。すごいと思ったので遅延読み込みは、画面外の <img><iframe> などの重要でないリソースの読み込みを必要になるまで遅らせることができる手法で、ページのパフォーマンスを向上させることができます。

Chrome 76 以降では、ブラウザが遅延読み込みを処理します。カスタムの遅延読み込みコードを記述したり、別の 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 月 11 日と 12 日に開催します。

ウェブ プラットフォームの最新ツールやアップデートについて学んだり、Chrome のエンジニアリング チームから直接話を聞くことができます。

内容は YouTube チャンネルでライブ配信されます。対面で参加したい場合は、Chrome Dev Summit 2019 のウェブサイトで招待をリクエストすることもできます。

など多数

これらは、デベロッパー向け Chrome 77 で行われた変更のほんの一部であり、他にも多くの変更があります。

オリジン トライアルとして提供されている Contact Picker API は、ユーザーが連絡先リストからエントリを選択し、選択した連絡先の限られた詳細情報をウェブサイトと共有できる、新しいオンデマンド選択ツールです。

また、intl.NumberFormat API には新しい測定単位が用意されています。

関連情報

ここでは、重要なハイライトの一部についてのみ説明します。Chrome 77 で追加される変更点については、以下のリンクをご覧ください。

登録

最新の動画をご覧になりたい場合は、Chrome Developers YouTube チャンネルご登録ください。新しい動画が公開されるたびに、メール通知が届きます。

Chrome 78 のリリースと同時に Chrome の新機能をお知らせします