Steve Souders

2019年1月22日火曜日

前回の記事では、非同期でスクリプトをロードする[英語]ことでJavaScriptの影響が軽減され、ユーザー体験が(多く)高速になることを説明した。しかし、たとえスクリプトが非同期でロードされたとしても、ブラウザーは最初のスクリプトが到着するのを待つために、一秒かそれ以上親指を回し続けるかもしれません。この遅延を減らすには、次のようにlink rel=preloadを使用します。

<link rel=”preload” href=”main.js” as=”script”>
Link rel=preloadは、重要なCSSを含むスタイルシート、重要な設計要素で使用されるフォント、ヒーロー・イメージなど、重要なリソースをより迅速にダウンロードするのに便利です。スクリプトでは、ページコンテンツのレンダリングがブロックされ、ページのロード中にCPUを最も多く消費するため、特に重要です。(このトピックについては、このシリーズの次回の記事で説明します。)

as属性を含めることは重要です。ブラウザは、この値を使用してダウンロードの優先順位を決定します。指定できる値は、script、style、font、image、video、audioなどです。プリロードは、本当に重要なコンテンツにのみ使用します。そうしないと、重要度の低いコンテンツが帯域幅とCPUを消費し、重要度の高いコンテンツに割り当てられる可能性が高くなります。スクリプトの場合、このページの最初のいくつかの同期スクリプトには、link rel=preloadが最適です。

Link rel=preloadはしばらく前からありましたが、開発コミュニティではあまり知られていません。それにもかかわらず、Chromeを使って訪れたウェブページの25%にこの機能があるとChromeは報告しています。

しかし、これはlink rel=preloadの採用を誇張しているかもしれません。link rel=preloadのすべての使用を含める代わりに、HTTPアーカイブ・データに基づいて[英語]、link rel=preloadを使用してページのスクリプトをダウンロードしているサイトの数を分析しました。この数字は1%に近いことがわかった(1,255,904ページ中12,469ページ)。この視覚化は、私の主張を明確にしてくれました。

ブラウザにはPreloaderが内蔵されていて、スクリプトのダウンロードが早くなります。HTML文書の構造によっては、マークアップでlink rel=preloadを使用するとさらに高速になる場合があります。しかし、次のようにHTTPレスポンスヘッダとして提供すると、より大きな影響を与える可能性があります。

Link: <main.js>; rel=”preload”; as=”script”

このHTTP応答ヘッダーはHTMLの前にブラウザによって受信されるため、はスクリプト要求をより早く開始できます。一部のブラウザーはまだlink rel=preload responseヘッダーをサポートしていないため、HTTP応答ヘッダーとマークアップの両方を実行することをお勧めします。

同期スクリプトはレンダリングをブロックするため、ユーザの操作が遅く感じられることがわかっています。また、今日のほとんどのスクリプトは同期的にダウンロードされます(非同期ではなく)。それでも、スクリプトのダウンロードにlink rel=preloadを使っているサイトは1%にすぎません。サイトに同期スクリプトがある場合は、そのスクリプトに対してlink rel=preloadを追加するA/Bテストを行います。これはおそらく、ユーザーにとって、より楽しい体験を生み出すのに役立つでしょう。

関連記事　https://speedcurve.com/blog/load-scripts-async/