Skip to content
概要 ブログ 学習する 探検 パターン Case studies
このページ内
  • プリロードの仕組み
  • ユースケース
    • CSSで定義されたリソースのプリロード
    • CSSファイルのプリロード
    • JavaScriptファイルのプリロード
  • rel=preloadを実装する方法
    • Webpackを使用したJavaScriptモジュールのプリロード
  • 結論

重要なアセットをプリロードして、読み込み速度を向上させる

Nov 5, 2018 — 更新済み May 27, 2020
Available in: English、Español、Português、Русский、中文、한국어
Appears in: 読み込み時間の高速化
Houssein Djirdeh
Houssein Djirdeh
TwitterGitHubGlitchHomepage
Milica Mihajlija
Milica Mihajlija
TwitterGitHubHomepage
このページ内
  • プリロードの仕組み
  • ユースケース
    • CSSで定義されたリソースのプリロード
    • CSSファイルのプリロード
    • JavaScriptファイルのプリロード
  • rel=preloadを実装する方法
    • Webpackを使用したJavaScriptモジュールのプリロード
  • 結論

Webページを開くと、ブラウザはすぐにサーバーからのHTMLファイルをリクエストして、その内容を解析し、その他の外部参照用に個別のリクエストを送信します。開発者はページが必要とするすべてのリソースとどれが最も重要であるかを理解しています。その知識を使用すれば、重要なリソースを事前に要求し、ロードプロセスを高速化することが可能です。この記事には<link rel="preload">を使用してそれを実現する方法について説明します。

プリロードの仕組み #

プリロードは、通常、ブラウザが遅れて検出するリソースに最適です。

Chrome DevToolsネットワークパネルのスクリーンショット。
この例では、@font-faceルールを使って、Pacificoフォントがスタイルシートに定義されています。ブラウザは、スタイルシートのダウンロードと解析が完了した後にのみフォントファイルをロードします。

特定のリソースが現在のページで重要であることがわかっているため、そのリソースをプリロードすることで、ブラウザがロードするよりも前にそのリソースをフェッチするようにブラウザに指示します。

プリロードを適用した後のChrome DevToolsネットワークパネルのスクリーンショット。
この例では、Pacificoフォントがプリロードされているため、ダウンロードはスタイルシートと並行して行われます。

クリティカルリクエストチェーンは、ブラウザが優先順位を付けてフェッチするリソースの順序を表します。Lighthouseは、このチェーンの3番目のレベルにあるアセットを遅延検出と識別します。重要リクエストのプリロード監査を使用して、プリロードするリソースを特定できます。

Lighthouseの「重要なリクエストのプリロード」監査。

HTMLドキュメントのheadに、<link>タグとrel="preload"を追加して、リソースをプリロードできます。

<link rel="preload" as="script" href="critical.js">

ブラウザはプリロードされたリソースをキャッシュするため、必要なときにすぐに利用できます。(スクリプトを実行したり、スタイルシートを適用したりすることはありません。)

プリロード実装後、Shopify、Financial Times、Treeboなどの多くのサイトで、Time to InteractiveやFirst Contentful Paintなどのユーザー中心の指標において1秒の改善が確認されました。

preconnectやprefetchなどのリソースヒントは、ブラウザが適切と判断したときに実行されますが、preloadはブラウザ必須です。最新のブラウザはすでにリソースの優先順位付けの実行に非常に優れているため、preloadを慎重に使用し、最も重要なリソースのみをプリロードすることが重要です。

未使用のpreloadについては、Chromeはloadイベントの約3秒後にコンソール警告を表示します。

未使用のプリロードされたリソースに関するChrome DevToolsコンソールの警告。
preloadはすべての最新のブラウザでサポートされています。

ユースケース #

注意

執筆時点では、Chromeには、他の優先度の高いリソースよりも早くフェッチされるプリロードリクエストに関する未解決のバグがあります。これが解決されるまでは、プリロードされるリソースがどのように「キューを割り込んで」、必要以上に早く要求される可能性があることに注意してください。

CSSで定義されたリソースのプリロード #

@font-faceルールで定義されたフォントやCSSファイルで定義された背景画像は、ブラウザがそれらのCSSファイルをダウンロードして解析するまで検出されません。これらのリソースをプリロードすると、CSSファイルがダウンロードされる前に確実にフェッチされます。

CSSファイルのプリロード #

クリティカルCSSアプローチを使用している場合は、CSSは2つの部分に分割されます。展開の上のコンテンツをレンダリングするために必要なクリティカルCSSは、ドキュメントの<head>にインライン化され、それ以外のCSSは通常JavaScriptで遅延読み込みされます。クリティカルでないCSSを読み込まれるまでJavaScriptの実行を待機すると、ユーザーがスクロールする際にレンダリングに遅延が発生することがあるため、<link rel="preload">を使用してダウンロードをより早く開始することをお勧めします。

JavaScriptファイルのプリロード #

ブラウザはプリロードされたファイルを実行しないため、プリロードはフェッチをと実行を分離するのに役立ち、Time to Interactiveなどの指標を改善できます。プリロードは、JavaScriptバンドルを分割して、重要なチャンクのみをプリロードする場合に最適にです。

rel=preloadを実装する方法 #

preloadを実装する最も簡単な方法は、ドキュメントの<head>に<link>タグを追加することです。

<head>
<link rel="preload" as="script" href="critical.js">
</head>

as属性を指定すると、ブラウザはプリフェッチされたリソースのタイプに応じて優先度を設定し、適切なヘッダーを設定し、リソースがキャッシュにすでに存在するかどうかを判断するのに役立ちます。この属性に使用できる値には、script、style、font、imageなどがあります。

ブラウザが様々な種類のリソースの優先順位をどのように付けているかを知るには、Chromeのリソースの優先順位とスケジュールに関するドキュメントをご覧ください。

注意

as属性を省略したり、無効な値を設定したりすることは、ブラウザが何をフェッチしているのかわからないため、正しい優先度を決定できないXHRリクエストと同等です。また、スクリプトなどの一部のリソースが2回フェッチされる可能性もあります。

フォントなどの一部の種類のリソースは、匿名モードで読み込まれます。 preloadを使ってcrossorigin属性を設定する必要がある場合は、次のようにします。

<link rel="preload" href="ComicSans.woff2" as="font" type="font/woff2" crossorigin>

注意

crossorigin属性なしでプリロードされたフォントは2回フェッチされます!

<link>要素には、type attribute属性も使用できます。これには、紐付けされたリソースのMIMEタイプが含まれます。ブラウザがtype属性の値を使用することにより、ファイルタイプがサポートされている場合にのみリソースがプリロードされるようにすることができます。ブラウザが指定されたリソースタイプをサポートしていない場合は、<link rel="preload">を無視します。

お試しください

Webフォントをプリロードすることで、ページのパフォーマンスを向上させます。

Link HTTPヘッダーを介して、任意のタイプのリソースをプリロードすることもできます。

Link: </css/style.css>; rel="preload"; as="style"

HTTPヘッダーでのpreloadの指定には、ブラウザがドキュメントを解析して検出する必要がないというメリットがあるため、一部のケースでわずかな改善が得られます。

Webpackを使用したJavaScriptモジュールのプリロード #

アプリケーションのビルドファイルを作成するモジュールバンドラーを使用している場合は、preloadタグの挿入をサポートしているかどうかを確認する必要があります。Webpackのバージョン4.6.0以降では、import()内でマジックコメントを使用することでpreloadがサポートされています。

import(_/* webpackPreload: true */_ "CriticalChunk")

古いバージョンのWebpackを使用している場合は、preload-webpack-pluginなどのサードパーティのプラグインを使用してください。

結論 #

ページ速度を向上させるには、ブラウザが遅れて検出する重要なリソースをプリロードするようにします。すべてをプリロードすると逆効果になるため、preloadを慎重に使用し、実際の影響を測定するようにしてください。

パフォーマンス
最終更新: May 27, 2020 — 記事を改善する
Codelabs

See it in action

Learn more and put this guide into action.

  • Codelab: Preload critical assets to improve loading speed
  • Preload web fonts to improve loading speed
Return to all articles
共有する
サブスクライブする

Contribute

  • バグを報告する
  • ソースを表示する

関連性のあるコンテンツ

  • developer.chrome.com
  • Chrome のアップデート
  • ケーススタディ
  • ポッドキャスト
  • ショー

接続する

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • すべての製品
  • 利用規約とプライバシーポリシー
  • コミュニティガイドライン

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.