I/O 2019 で発表された 3 つの新しいウェブ パフォーマンス機能について説明します。
Google I/O 2019 の「Speed at Scale」の講演で、Google は今後 1 年間でウェブ パフォーマンスを向上させたいという 3 つのことを発表しました。
Lighthouse でパフォーマンス バジェットがサポートされるようになりました
LightWallet は、パフォーマンス バジェットのサポートを追加した Lighthouse の新機能です。パフォーマンス予算は、サイトのパフォーマンスに関する基準を設定します。さらに重要なのは、出荷前にパフォーマンスの低下を特定して修正できることです。
LightWallet は Lighthouse CLI の最新バージョンで利用できます。設定には数分しかかかりません。詳しくは、 こちらの手順をご覧ください。
予算の設定方法がわからない場合は、試験運用版のパフォーマンス 予算計算ツールをお試しください。LightWallet 互換の予算設定を生成できます。
ブラウザレベルの画像と iframe の遅延読み込みがウェブに登場
ウェブページには多くの画像が含まれることが多く、データ使用量、ページの肥大化、ページの読み込み時間の増加につながります。これらの画像の多くは画面外にあり、表示するにはスクロールする必要があります。
これまでは、JavaScript ライブラリを使用して画像の遅延読み込みを解決する必要がありましたが、まもなく変更される可能性があります。この夏、Chrome は loading 属性のサポートを開始します。これにより、標準化された <img> と <iframe> の遅延読み込みがウェブに導入されます。
loading 属性を使用すると、ユーザーがスクロールして近づくまで、ブラウザは画面外の画像と iframe の読み込みを遅らせることができます。loading は次の 3 つの値をサポートします。
lazy: 遅延読み込みに適しています。eager: 遅延読み込みの適切な候補ではありません。すぐに読み込みます。auto: 遅延読み込みするかどうかはブラウザが判断します。
<img src="io2019.jpg" loading="lazy" alt="..." />
<iframe src="video-player.html" loading="lazy"></iframe>
「ユーザーが近くでスクロールしたとき」の正確なヒューリスティックは、ブラウザに委ねられます。一般的には、ブラウザがビューポートに入る少し前に、遅延イメージや iframe コンテンツの取得を開始することが望ましいとされています。
loading 属性は、Chrome Canary のフラグで実装されています。Chrome 75 以降で about://flags/#enable-lazy-image-loading フラグと about://flags/#enable-lazy-frame-loading フラグをオンにして、こちらのデモをお試しいただけます。
遅延読み込み機能の詳細もご覧ください。
Google Fonts でクエリ パラメータとして font-display がサポートされるようになりました
display クエリ文字列パラメータを介して、すべての Google Fonts で font-display のサポートが本番環境で利用可能になったことをお知らせしました。
https://fonts.googleapis.com/css?family=Lobster&display=swap
font-display 記述子を使用すると、ウェブフォントの読み込み時間に応じて、ウェブフォントのレンダリング方法やフォールバック方法を決定できます。auto、block、swap、fallback、optional などのさまざまな値をサポートしています。
以前は、Google Fonts のウェブフォントで font-display を指定するには、フォントをセルフホストする必要がありましたが、今回の変更により、セルフホストする必要がなくなりました。
Google Fonts のドキュメントが更新され、デフォルトのコード埋め込みに font-display が追加されました（下記を参照）。より多くのデベロッパーがこの新しい機能を試すきっかけになれば幸いです。
複数のフォント ファミリーでディスプレイを使用する Glitch のデモをご覧ください。DevTools ネットワーク エミュレーションで試して、font-display: swap の影響を確認します。
もっと見る
また、高度なパフォーマンス パターンを使用してユーザー エクスペリエンスを改善した本番環境のケーススタディもいくつか紹介しました。たとえば、画像 CDN、Brotli 圧縮、スマートな JavaScript 配信とプリフェッチを活用してページの速度を向上させているサイトがこれに該当します。詳しくは、トーク動画をご覧ください。