サードパーティのスクリプトはパフォーマンスに影響します。そのため、スクリプトを定期的に監査し、効率的な読み込み方法を使用することが重要です。この Codelab では、サードパーティ リソースの読み込みを最適化する方法について説明します。次の手法について説明します。
スクリプトの読み込みを延期する
重要でないリソースの遅延読み込み
必要なオリジンへの事前接続
付属のサンプルアプリには、サードパーティのソースから取得した 3 つの機能を備えたシンプルなウェブページが含まれています。
動画の埋め込み
折れ線グラフをレンダリングするためのデータ可視化ライブラリ
ソーシャル メディア共有ウィジェット
まずアプリのパフォーマンスを測定し、それぞれの手法を適用してアプリのパフォーマンスのさまざまな側面を改善します。
パフォーマンスの測定
まず、全画面ビューでサンプルアプリを開きます。
- [Remix to Edit] をクリックしてプロジェクトを編集可能にします。
- サイトをプレビューするには、[アプリを表示] を押してから、全画面表示 を押します。
ページで Lighthouse のパフォーマンス監査を実行し、ベースライン パフォーマンスを確認します。
- Ctrl+Shift+J キー(Mac の場合は Command+Option+J キー)を押して DevTools を開きます。
- [Lighthouse] タブをクリックします。
- [モバイル] をクリックします。
- [パフォーマンス] チェックボックスをオンにします。([監査] セクションの他のチェックボックスをオフにします)。
- [Simulated Fast 3G, 4x CPU Slowdown] をクリックします。
- [ストレージを消去] チェックボックスをオンにします。
- [Run audits] をクリックします。
マシンで監査を実行した場合、正確な結果は異なる場合がありますが、First Contentful Paint(FCP)の時間はかなり長く、Lighthouse では調査すべき 2 つの提案(レンダリング ブロック リソースの排除と必要なオリジンへの事前接続)が提案されています。(指標がすべて緑色になっている場合でも、最適化によって改善は見込まれます)。
サードパーティの JavaScript を遅延させる
「レンダリング ブロック リソースの排除」の監査では、d3js.org からのスクリプトを延期することで時間を節約できることが判明しました。
D3.js は、データを可視化するための JavaScript ライブラリです。サンプルアプリの script.js
ファイルでは、D3 ユーティリティ関数を使用して SVG 折れ線グラフを作成し、ページに追加します。ここではオペレーションの順序が重要です。script.js
は、ドキュメントが解析されて D3 ライブラリが読み込まれた後に実行する必要があるため、index.html
の </body>
終了タグの直前に含まれています。
ただし、D3 スクリプトがページの <head>
に含まれているため、残りのドキュメントの解析がブロックされます。
スクリプトタグに追加される次の 2 つのマジック属性でパーサーをブロック解除できます。
async
を使用すると、スクリプトがバックグラウンドでダウンロードされ、ダウンロードの完了後に最初のタイミングで実行されます。defer
を使用すると、スクリプトがバックグラウンドでダウンロードされ、解析が完了した後に実行されます。
このグラフはページ全体にとって重要ではなく、スクロールしなければ見えない範囲にある可能性が高いため、defer
を使用してパーサー ブロックがないことを確認してください。
ステップ 1: defer
属性を使用してスクリプトを非同期で読み込む
index.html
の 17 行目で、defer
属性を <script>
要素に追加します。
<script src="https://d3js.org/d3.v3.min.js" defer></script>
ステップ 2: オペレーションの順序が正しいことを確認する
D3 が延期されたため、D3 の準備が整う前に script.js
が実行され、エラーが発生します。
defer
属性が指定されたスクリプトは、指定された順序で実行されます。D3 の準備が整った後で script.js
が実行されるようにするには、これに defer
を追加して、ドキュメントの <head>
(D3 の <script>
要素の直後)に移動します。これでパーサーがブロックされなくなり、ダウンロードがより早く開始されます。
<script src="https://d3js.org/d3.v3.min.js" defer></script>
<script src="./script.js" defer></script>
サードパーティ リソースを遅延読み込みする
スクロールしなければ見えない範囲にあるリソースはすべて、遅延読み込みに適しています。
サンプルアプリでは、iframe に YouTube 動画が埋め込まれています。ページで行われたリクエストの数と、埋め込みの YouTube iframe からのリクエストを確認するには:
- サイトをプレビューするには、[アプリを表示] を押してから、全画面表示 を押します。
- Ctrl+Shift+J キー(Mac の場合は Command+Option+J キー)を押して DevTools を開きます。
- [Network] タブをクリックします。
- [キャッシュを無効にする] チェックボックスをオンにします。
- [Throttling] プルダウン メニューで [Fast 3G] を選択します。
- ページを再読み込みする。
[Network] パネルには、このページで合計 28 件のリクエストが送信され、約 1 MB の圧縮リソースが転送されたことが表示されます。
YouTube iframe
が行ったリクエストを特定するには、[Initiator] 列で動画 ID 6lfaiXM6waw
を探します。すべてのリクエストをドメイン別にグループ化するには:
[Network] パネルで列のタイトルを右クリックします。
プルダウン メニューで [ドメイン] 列を選択します。
リクエストをドメインで並べ替えるには、[ドメイン] 列のタイトルをクリックします。
新しい並べ替えにより、Google ドメインに対する追加のリクエストがあることがわかります。YouTube iframe では、スクリプト、スタイルシート、画像、フォントに対して合計 14 件のリクエストが行われます。ただし、ユーザーが実際に下にスクロールして動画を再生しない限り、すべてのアセットが必要なわけではありません。
ユーザーがページのそのセクションまでスクロールダウンするまで動画の遅延読み込みを待つことで、ページが最初に行うリクエストの数を削減できます。このアプローチにより、ユーザーのデータが保存され、初期読み込みが高速化されます。
遅延読み込みを実装する 1 つの方法は、Intersection Observer を使用することです。これは、要素がブラウザのビューポートに出入りしたときに通知を受け取るブラウザ API です。
ステップ 1: 最初に動画が読み込まれないようにする
動画 iframe を遅延読み込みするには、まず、通常の方法で読み込まれないようにする必要があります。そのためには、src
属性を data-src
属性に置き換えて、動画の URL を指定します。
<iframe width="560" height="315" data-src="https://www.youtube.com/embed/lS9D6w1GzGY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
data-src
は、標準の HTML 要素に関する追加情報を格納するためのデータ属性です。データ属性には、「data-」で始まる任意の名前を指定できます。
src
がない iframe は読み込まれません。
ステップ 2: Intersection Observer を使用して動画を遅延読み込みする
ユーザーがスクロールして動画を読み込むには、そのタイミングを把握する必要があります。そこで出番となるのが Intersection Observer API です。Intersection Observer API を使用すると、トラッキングする要素がビューポートを出入りするたびに実行されるコールバック関数を登録できます。
まず、新しいファイルを作成して lazy-load.js
という名前を付けます。
- [New File] をクリックして名前を付けます。
- [Add This File] をクリックします。
ドキュメント ヘッドにスクリプトタグを追加します。
<script src="/lazy-load.js" defer></script>
lazy-load.js
で、新しい IntersectionObserver
を作成し、実行するコールバック関数を渡します。
// create a new Intersection Observer
let observer = new IntersectionObserver(callback);
次に、observe
メソッドで引数として渡して、observer
に再生するターゲット要素(この場合は動画 iframe)を指定します。
// the element that you want to watch
const element = document.querySelector('iframe');
// register the element with the observe method
observer.observe(element);
callback
は、IntersectionObserverEntry
オブジェクトと IntersectionObserver
オブジェクト自体のリストを受け取ります。各エントリには target
要素と、寸法、位置、ビューポートに入った時刻などを記述するプロパティが含まれます。IntersectionObserverEntry
のプロパティの一つは isIntersecting
です。これは、要素がビューポートに入るときの true
と等しいブール値です。
この例では、target
は iframe
です。target
がビューポートに入ると、isIntersecting
は true
と等しくなります。実際の動作を確認するには、callback
を次の関数に置き換えます。
let observer = new IntersectionObserver(callback);
let observer = new IntersectionObserver(function(entries, observer) {
entries.forEach(entry => {
console.log(entry.target);
console.log(entry.isIntersecting);
});
});
- サイトをプレビューするには、[アプリを表示] を押してから、全画面表示 を押します。
- Ctrl+Shift+J キー(Mac の場合は Command+Option+J キー)を押して DevTools を開きます。
- [コンソール] タブをクリックします。
上下にスクロールしてみます。isIntersecting
の値が変更され、ターゲット要素がコンソールにログに記録されます。
ユーザーが特定の位置までスクロールしたときに動画を読み込むには、loadElement
関数を実行する条件として isIntersecting
を使用します。この関数は、iframe
要素の data-src
から値を取得し、iframe
要素の src
属性として設定します。その置き換えによって動画の読み込みがトリガーされます。次に、動画が読み込まれたら、observer
で unobserve
メソッドを呼び出して、ターゲット要素の監視を停止します。
let observer = new IntersectionObserver(function (entries, observer) {
entries.forEach(entry => {
console.log(entry.target);
console.log(entry.isIntersecting);
});
});
if (entry.isIntersecting) {
// do this when the element enters the viewport
loadElement(entry.target);
// stop watching
observer.unobserve(entry.target);
}
});
});
function loadElement(element) {
const src = element.getAttribute('data-src');
element.src = src;
}
ステップ 3: パフォーマンスを再評価する
リソースのサイズと数がどのように変化したかを確認するには、DevTools の [ネットワーク] パネルを開いて、ページを再度再読み込みします。[Network] パネルには、ページで 14 件のリクエストがあり、わずか 260 KB であることが表示されます。これは大きな改善です。
ページを下にスクロールして [ネットワーク] パネルを確認します。動画にアクセスすると、そのページで追加のリクエストがトリガーされていることを確認できます。
必要なオリジンに事前接続する
重要性の低い JavaScript を遅延させ、YouTube リクエストを遅延読み込みしたので、今度は残りのサードパーティ コンテンツを最適化します。
rel=preconnect
属性をリンクに追加すると、そのリソースのリクエストが行われる前にドメインへの接続を確立するようにブラウザに指示します。この属性は、ページが必要とする確実なリソースを提供するオリジンに最適です。
必要なオリジンに事前接続するで提案した最初のステップで実施した Lighthouse の監査では、staticxx.facebook.com と youtube.com への早期接続を確立することで約 400 ミリ秒を節約できます。
YouTube 動画が遅延読み込みされるようになったため、ソーシャル メディア共有ウィジェットのソースである staticxx.facebook.com のみが残ります。このドメインへの早期接続は、<link>
タグをドキュメントの <head>
に追加するだけで簡単に確立できます。
<link rel="preconnect" href="https://staticxx.facebook.com">
パフォーマンスを再評価する
以下に、最適化後のページの状態を示します。この Codelab のパフォーマンスを測定するセクションの手順に沿って、別の Lighthouse 監査を実施します。