JavaScript の遅延読み込みについて_JavaScript のヒント

JavaScript の遅延読み込みは、解決策を見つけるのに夢中になる可能性がある Web 上の問題の 1 つです。

多くの人は「それなら defer や async を使う」と言い、「それなら JavaScript コードをページ コードの最後に置く」と言う人さえいます。

上記の方法では、Web ページが完全にロードされた後に外部 JS をロードする問題を解決できません。上記の方法では、Google のページ速度テスト ツールから「javascript の読み込みの遅延」という警告が表示される場合もあります。したがって、ここでの解決策は、Google ヘルプ ページの推奨解決策になります。

JavaScript を遅延ロードする方法

以下は Google が推奨するコードです。このコードは、36cc49f0c466276486e50c850b7e4956 タグの前 (HTML ファイルの下部近く) に配置する必要があります。また、外部 JS ファイル名を強調表示しました。

<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "defer.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>

ここでは何が行われるのでしょうか?
このコードは、ドキュメント全体がロードされるまで待ってから、外部ファイル「defer.js」をロードすることを意味します。

具体的な手順

1. 上記のコードをコピーします

2. HTML の 36cc49f0c466276486e50c850b7e4956 タグの前 (HTML ファイルの下部近く) にコードを貼り付けます。

3. 「defer.js」を外部 JS ファイル名に変更します

4. ファイルパスが正しいことを確認してください。例: 「defer.js」のみを入力する場合、「defer.js」ファイルは HTML ファイルと同じフォルダーに存在する必要があります。

このコードはどこで使用できるか (どこで使用できないか)

このコードは、ドキュメントがロードされるまで、指定された外部 JS ファイルをロードしません。したがって、通常のページ読み込みに依存する JavaScript コードをここに配置しないでください。代わりに、JavaScript コードを 2 つのグループに分ける必要があります。 1 つのグループは、ページで必要なためすぐに読み込まれる JavaScript コードであり、もう 1 つのグループは、ページが読み込まれた後に動作する JavaScript コード (クリック イベントの追加など) です。実行前にページが読み込まれるまで待機する必要がある JavaScript コードは、外部ファイルに配置してからインポートする必要があります。

たとえば、このページでは、遅延読み込み用に上記のファイル、つまり Google アナリティクス、Viglink (収益を上げる方法)、および下部に表示される Google バッジ (私のソーシャル メディア) を使用しています。私にとって、上記の無関係なコンテンツを初期段階でロードする必要がないため、最初のページのロード時にこれらのファイルをロードする理由はありません。もしかしたら、あなたのページにも同じ性質のファイルがあるかもしれません。では、Web ページのコンテンツを表示する前に、これらのファイルが読み込まれるまでユーザーに待ってもらいたいでしょうか?

他の方法を使用してみてはいかがでしょうか?

コードを直接挿入し、スクリプトを下部に配置し、「defer」または「async」を使用すると、最初にページをロードしてから JS をロードするという目的を達成できず、ブラウザ間で一貫したパフォーマンスが得られません。

なぜそれが重要なのでしょうか?

その重要性は、Google がランキング要素の 1 つとしてページ速度を使用しており、ユーザーもページが速く読み込まれることを望んでいるという事実によるものです。モバイル検索エンジンの最適化にとっても非常に重要です。 Google は、ページの最初の読み込みにかかる時間に基づいてページ速度を測定します。これは、ページの読み込みイベントをできるだけ早く取得する必要があることを意味します。ページの初期読み込み時間は、Google がウェブページの品質を評価する方法です (ユーザーはページが読み込まれるのを待っていることを忘れないでください)。 Google は、上記の無関係なコンテンツを重要度の順に並べ、すべてのリソース (js、css、画像など) を重要なレンダリング パスから遠ざけることを積極的に推進および推奨しています。そうすることには努力の価値があります。それがユーザーを喜ばせ、Google を喜ばせるのであれば、そうすべきです。

使用例

このコードの使用例を確認できるページを作成しました。

テスト用のサンプル ファイル

分かりました。説明のために、テスト用にいくつかのサンプル ページを作成しました。どのページも同じことを行います。これは通常の HTML ページで、2 秒間待機してから「hello world」を出力する JavaScript スクリプトが含まれています。これらのファイルをテストすると、メソッドが 1 つだけあり、その読み込み時間に 2 秒の待ち時間が含まれていないことがわかります。

スクリプトを直接挿入するページ –

ここをクリック

「defer」を使用する外部スクリプトを含むページ –

ここをクリックしてください 上記の紹介コードを使用したページ –
ここをクリック

重要なポイント

最優先事項は、コンテンツをできるだけ早くユーザーに配信することです。そして、JavaScript コードをどのように扱うかについて考えたこともありませんでした。ただし、ユーザーは、重要ではないスクリプトのコンテンツを待たされる必要はありません。フッターがどれほどクールであっても、フッターまでスクロールしないユーザーが、フッターをクールにする JavaScript ファイルをロードする理由はありません。

以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。