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 のフラグの背後に実装されています。about://flags/#enable-lazy-image-loading フラグと about://flags/#enable-lazy-frame-loading フラグをオンにした Chrome 75 以降で、こちらのデモを試すことができます。
遅延読み込み機能の詳細については、こちらをご覧ください。
Google Fonts で font-display がクエリ パラメータとしてサポートされるようになりました
font-display のサポートが、display クエリ文字列パラメータを介してすべての Google Fonts で本番環境で利用可能になったことを発表しました。
https://fonts.googleapis.com/css?family=Lobster&display=swap
font-display 記述子を使用すると、ウェブフォントの読み込みにかかる時間に応じて、ウェブフォントのレンダリング方法やフォールバック方法を決定できます。auto、block、swap、fallback、optional などの値がサポートされています。
以前は、Google Fonts のウェブフォントに font-display を指定するには、セルフホストするしかありませんでしたが、今回の変更により、その必要がなくなりました。
Google Fonts のドキュメントが更新され、デフォルトのコード埋め込みに font-display が含まれるようになりました（下記参照）。この変更により、より多くのデベロッパーがこのエキサイティングな新機能を試すようになることを期待しています。
複数のフォント ファミリーで display を使用する Glitch のデモをご覧ください。DevTools のネットワーク エミュレーションで試して、font-display: swap の影響を確認してください。
動画を見る
また、高度なパフォーマンス パターンを使用してユーザー エクスペリエンスを向上させる、いくつかの本番環境のケーススタディについても説明しました。これには、画像 CDN、Brotli 圧縮、スマートな JavaScript 配信、プリフェッチを活用してページの読み込みを高速化しているサイトが含まれます。トークを視聴して詳細をご確認ください。