I/O 2019 で発表された 3 つの新しいウェブ パフォーマンス機能について説明します。
Google I/O 2019 の「大規模なスピード」に関するセッションで、Google は来年ウェブのパフォーマンスを改善するための 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 配信とプリフェッチを活用してページの速度を向上させているサイトがこれに該当します。詳しくは、講演動画をご覧ください。