I/O 2019 で発表された 3 つの新しいウェブ パフォーマンスをご紹介します。
Google は、Google I/O 2019 の「Speed at Scale」の講演で、今後 1 年間でウェブ パフォーマンスを向上させることを 3 つ発表しました。
Lighthouse でパフォーマンス バジェットをサポート
LightWallet は Lighthouse の新機能で、パフォーマンス バジェットのサポートを追加します。パフォーマンスバジェットはサイトのパフォーマンスの 基準を確立するものですさらに重要なのは、リリース前にパフォーマンスの低下を簡単に特定して修正できることです。
LightWallet は Lighthouse CLI の最新バージョンで利用可能で、わずか数分で設定できます。詳細については、 こちらの手順をご覧ください。
どのような予算にすればよいかわからない場合は、試験運用版のパフォーマンス予算計算ツールをお試しください。LightWallet 対応の予算構成を生成できます。
ウェブでブラウザレベルの画像と iframe の遅延読み込みが可能に
ウェブページには大量の画像が含まれていることが多く、データ使用量の増加、ページの肥大化、ページの読み込み速度の低下につながります。このような画像の多くは画面外にあり、表示するにはユーザーがスクロールする必要があります。
これまでは、JavaScript ライブラリを使用して画像の遅延読み込みを解決する必要がありましたが、まもなく変更される可能性があります。この夏、Chrome では、標準化された <img> と <iframe> の遅延読み込みをウェブに導入する loading 属性のサポートを開始します。
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 でフラグの背後に実装されています。こちらのデモは、about://flags/#enable-lazy-image-loading フラグと about://flags/#enable-lazy-frame-loading フラグをオンにした Chrome 75 以降でお試しいただけます。
遅延読み込み機能の詳細については、資料を参照してください。
Google Fonts でクエリ パラメータとして font-display がサポートされるようになりました
Google は、display query-string パラメータを使用して、すべての 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 配信、プリフェッチを活用してページを高速化するサイトも含まれます。詳しくは動画をご覧ください。