GoogleのPageSpeed Insightsでサイトをチェックすると、読み込みスピードを速くする方法として「レンダリングをブロックするリソースの読み込みを遅延させるか、非同期に読み込むか、これらのリソースの重要部分を HTML 内に直接インライン化してください」と提案されることがあります。
これはHTMLの描画完了前にJavaScriptの読み込みが発生しているため、ページを表示する速度が遅くなっていることを指しています。ページの読み込みスピードは、SEOやユーザー体験に大きく影響するため、可能であれば対策しておくことをおすすめします。
今回は、JavaScriptファイルを非同期で読み込むことができるasync属性について説明します。
JavaScriptファイルを非同期読み込みにする方法
JavaScriptファイルを非同期読み込みにするには、HTML5からサポートされたasync属性を使います。この属性を使用することで、JavaScriptの読み込みがページのレンダリングをブロックするのを防ぎ、ページの表示速度を向上させることができます。
async属性の使い方
通常、外部JavaScriptは以下のように記述していると思います。
<script src="hoge.js"></script> このコードにasyncを追加することで、JavaScriptファイルが非同期で読み込まれ、ページのレンダリングが並行して進むようになります。
<script src="hoge.js" async></script> 非常にシンプルですね。これにより、JavaScriptの読み込みとHTMLの描画が同時に行われるため、ページの表示速度が速くなります。
async属性の注意点
async属性は非常に便利ですが、注意すべきポイントがあります。それは非同期で読み込むため、JavaScriptファイルの実行順序が保証されないということです。
例えば、複数のJavaScriptファイルが依存関係を持っている場合、読み込む順序が変わってしまうと正しく動作しない可能性があります。特に、jQueryのように他のスクリプトが依存するライブラリは、順序が重要です。
このような場合には、async属性の代わりにdefer属性を使用することが推奨されます。defer属性を使用することで、JavaScriptファイルは非同期で読み込まれますが、HTMLの解析が完了するまで実行が遅延されるため、順序が維持されます。
<script src="hoge.js" defer></script> defer属性は、複数のJavaScriptファイルを順序通りに実行する必要がある場合に有効です。したがって、asyncとdeferを使い分けることが重要です。
レンダリングブロックの原因とその対策
ページの表示速度が遅くなる原因の一つとして、レンダリングをブロックするリソースの存在が挙げられます。特に、ページのヘッダー部分に配置されたJavaScriptファイルは、読み込みが完了するまでページのレンダリングを遅らせることがあります。
これを防ぐために、以下の対策を検討してください：
- JavaScriptをフッターに配置する：ページのレンダリングを優先させ、JavaScriptファイルはページの最後に配置することで、読み込みを遅延させる方法です。
- 重要なスタイルをインライン化する：ページの初期表示に必要なCSSをインラインで埋め込むことで、レンダリングをブロックする時間を短縮します。
- 非同期や遅延読み込みを活用する：async属性やdefer属性を使って、JavaScriptの読み込みを遅延させるか非同期で行うようにします。
- 圧縮と最適化：JavaScriptやCSSファイルを圧縮して、ファイルサイズを減らし、読み込み速度を向上させます。
これらの対策を組み合わせることで、ページの表示速度を大幅に改善することが可能です。
ページ表示速度がSEOに与える影響
ページの表示速度は、Googleが検索順位を決定する要因の一つです。特にモバイルファーストインデックスの導入により、モバイル環境での表示速度が重要視されるようになりました。ページの読み込みが遅いと、検索エンジンの評価が下がり、結果として検索順位が低下する可能性があります。
また、ページの読み込みが遅いと、ユーザーがサイトを離脱する可能性も高まります。これにより、直帰率が上がり、ユーザー体験が悪化するため、ビジネスにも影響を与えることがあります。したがって、サイトの表示速度を最適化することは、SEO対策としても非常に重要です。
まとめ：async属性を活用したページ最適化
async属性を活用することで、JavaScriptの読み込みを最適化し、ページの表示速度を向上させることができます。ただし、すべてのスクリプトに適用するのではなく、依存関係のないスクリプトに使用することが重要です。場合によってはdefer属性を使い分け、最適な結果を得ることができます。
ページ表示速度を改善するための対策は、SEOやユーザー体験の向上に直結します。今回紹介した技術を取り入れて、より速く、使いやすいウェブサイトを目指しましょう。
