大規模な処理速度: ウェブ パフォーマンスの最新情報

I/O 2019 で発表された 3 つの新しいウェブ パフォーマンス機能について説明します。

Katie Hempenius
Katie Hempenius

Google I/O 2019 の「大規模なスピード」に関するセッションで、Google は来年ウェブのパフォーマンスを改善するための 3 つの取り組みを発表しました。

Lighthouse でパフォーマンス バジェットがサポートされるようになりました

LightWallet は、パフォーマンス バジェットのサポートを追加した Lighthouse の新機能です。パフォーマンス予算は、サイトのパフォーマンスに関する基準を設定します。さらに重要なのは、出荷前にパフォーマンスの低下を特定して修正できることです。

ファイルサイズの予算を超えているアセットを示す LightWallet レポート。

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 Fontsfont-display のサポートが本番環境で利用可能になったことをお知らせしました。

https://fonts.googleapis.com/css?family=Lobster&display=swap

font-display 記述子を使用すると、ウェブフォントの読み込み時間に応じて、ウェブフォントのレンダリング方法やフォールバック方法を決定できます。autoblockswapfallbackoptional などのさまざまな値をサポートしています。

以前は、Google Fonts のウェブフォントに対して font-display を指定するには、そのフォントをセルフホストする必要がありましたが、今回の変更により、その必要がなくなりました。

Google Fonts のドキュメントが更新され、デフォルトのコード埋め込みに font-display が追加されました(下記を参照)。より多くのデベロッパーがこの新しい機能を試すきっかけになれば幸いです。

URL にクエリ パラメータとして font-display が含まれている Google Fonts 埋め込みコード

複数のフォント ファミリーでディスプレイを使用する Glitch のデモをご覧ください。DevTools ネットワーク エミュレーションで試して、font-display: swap の影響を確認します。

もっと見る

また、高度なパフォーマンス パターンを使用してユーザー エクスペリエンスを改善した本番環境のケーススタディもいくつか紹介しました。たとえば、画像 CDN、Brotli 圧縮、スマートな JavaScript 配信とプリフェッチを活用してページの速度を向上させているサイトがこれに該当します。詳しくは、講演動画をご覧ください。