ビデオ: 画像の遅延ロードでイライラを解消するTADAプラグイン 2025
遅いWebページの主な原因の1つは、 。ブロッキングスクリプトは、ロードと実行がWebページのロードをブロックするJavaScriptファイルです。極端な状況では、JavaScriptが読み込まれて解析されている間に、ブラウザがウェブページ全体をダウンロードし、数秒以上空白の画面を表示することがあります。ウェブユーザーは早く退屈する傾向があるので、この状況は絶対に避けなければなりません。
<！ --1 - >幸いにも、JavaScriptのロードと実行を延期してWebページをより速く表示する方法はいくつかあります。
最初の方法は、script要素のdefer属性を使用することです。次のようになります。
defer属性は、外部JavaScriptファイルでのみ使用できます。ドキュメント内のブロックには適用できません。
defer属性を指定すると、ページの解析が完了した後にスクリプトが実行されます。
<！ - 2 - >スクリプトの読み込みと実行を遅らせる別の方法は、Googleが推奨する方法です。ウェブページの一番下に次のコードを挿入することをおすすめします。これを使用するには、サンプルのスクリプト名（ここではmyscript.js）を自分のファイル名に置き換えます。
関数downloadJSAtOnload（）{var要素=ドキュメント。 createElement（ "script"）;素子。 src = "myscript.js";資料。体。 appendChild（element）;} if（window。addEventListener）ウィンドウです。 addEventListener（ "load"、downloadJSAtOnload、false）; else if（ウィンドウ。attachEvent）ウィンドウ。 attachEvent（ "onload"、downloadJSAtOnload）; elseウィンドウ。 onload = downloadJSAtOnload;
JavaScriptを延期するのを助けるもう一つの属性は非同期属性です。 async属性はHTML5で新しく追加されました。以下はその様子です：
<！ - 3 - >defer属性と同様に、async属性は外部スクリプト（src属性が使用される）でのみ使用できます。存在する場合、async属性は、スクリプトを他のページと非同期的に実行させます。つまり、スクリプトはページの残りの部分と同時に実行されます。
どちらの方法を選択しても、ページ上のJavaScriptが正しく動作するかどうかに影響します。遅延ロードを実装した後は、すべてをテストするようにしてください。 JavaScriptを延期すると、ユーザーの待ち時間が大幅に短縮され、すべてのユーザーがより幸せになれるようになります。
