【Google】JavaScriptでウェブサイトを最適化するための6つのヒント

JavaScriptは一般的に、ユーザーにとってより豊かで魅力的なエクスペリエンス提供するために、WEBサイトで使用されます。また、Webサイトのパフォーマンスの問題の一般的な原因にもなりえます。

Googleの公式Youtubeチャンネル「Google Search Central」において開発者関係エンジニアであるAlan Kentが、eコマースサイトの改善に役立つJavaScriptライブラリとフレームワークに関連する6つのヒントについて話をしていたのでまとめます。

 

参考：6 Tips for optimizing your website with JavaScript(2022年5月17日配信)
https://www.youtube.com/watch?v=sq_-3WM4wZA

 

今回はJavaScriptの発見方法としてGoogleの無料ツール「PageSpeed Insights」を用います。

登録不要ですぐに利用できます。

https://pagespeed.web.dev/

 

1.JavaScriptファイルの急増を回避する

サイト上のJavaScriptファイルの数が急増しないようにしてください。

注意しないと、特に各UIコンポーネントが別々のファイルにある場合、JavaScriptファイルの数が過剰になる可能性があります。

ブラウザがダウンロードする必要のあるJavaScriptファイルの数を減らすと、Webサイトのパフォーマンスを向上させることができます。

 

発見方法

PageSpeed Insightsレポートの「 リクエスト数を少なく、転送サイズを小さく維持してください 」という項目には、サイトに固有の推奨事項が一覧表示されます。

リクエスト数を少なくし、転送サイズを小さくするための推奨事項を探してください。

JavaScriptファイルを含む、要求されたリソースタイプの数とサイズの概要については、推奨事項をクリックしてください。

 

改善方法

この問題は、さまざまな方法で修正できます。Googleが推奨する1つのオプションは、小さいファイルを組み合わせて1つの大きいファイルをダウンロードすることです。

もう1つの修正は、ファイルを結合せずにパフォーマンスを向上させることができるため、サイトでHTTP2をサポートすることです。

レンタルサーバーを利用している場合などはSSL化を行うことで自動的に適応されている場合が多いです。

 

2.過度のDNSルックアップを回避します

参照JavaScriptファイルのDNSルックアップの数が多すぎると、ユーザーのサイトへの最初のアクセスが遅くなる可能性があるため、避けてください。

要するに、過度に多い他のドメイン上のJavaScriptファイル読み込みを避けましょうという話です。

 

発見方法

PageSpeed Insightsを利用し、「JavaScript の実行にかかる時間」などの項目でURLで使用されるドメイン名のリストを表示できます。

Chromeデベロッパーツールの「ネットワーク」タブは、参照されているすべてのドメイン名を確認するもう1つの方法です。

 

改善方法

DNSルックアップの数を減らすために、外部から参照されるJavaScriptファイルのコピーを自分のサイトでホストすることを検討することをお勧めします。

 

3.非効率的なJavaScriptを排除する

非効率的なJavaScriptは、Webページの速度を低下させ、ユーザーエクスペリエンスを低下させる可能性があるため、削減または排除します。

具体的には長く可読性の低いJavaScriptや読み込みタイミングが悪いスクリプトの読み込みなどが挙げられます。

 

発見方法

GoogleのPageSpeedInsightsレポートで次の項目を探してください。

 

JavaScript の実行にかかる時間：これは、JavaScriptコードの解析または実行に大量のCPU時間が費やされたスクリプトを報告します。

レンダリングを妨げるリソースの除外：これには、ページをレンダリングする前に実行される可能性のあるJavaScriptが含まれるため、ユーザーはコンテンツが表示されるまでの待ち時間が長くなります。

Document.write：誤用すると、他の操作の実行がブロックされるため、ページで重大なパフォーマンスの問題が発生する可能性があります。
受動的なリスナーが使用されています：受動的なリスナーは、JavaScriptコードがスクロールを防止する関数を呼び出さないことをブラウザーに示唆し、JavaScriptの実行中であってもブラウザーがページをスクロールできるようにします。

 

改善方法

非効率的なJavaScriptを排除することは、サイトの健全性を保つ上で非常に重要です。

解決策は通常、JavaScriptコードを別の方法で記述することを含みます。手法には、既存のコードのプロファイリングや、より強力なコンポーネントの独自の縮小バージョンの作成が含まれます。

 

4.未使用のJavaScriptを排除します

未使用のJavaScriptも非効率的ですが、Googleは、この問題はそれ自体でそれを呼び出すのに十分一般的であると言います。

サイト間でコードを再利用すると、不要なJavaScriptが含まれる可能性があります。

呼び出されることのないJavaScriptは、Webブラウザーでダウンロードして解析する必要があり、これはリソースの浪費です。

 

発見方法

GoogleのPageSpeedInsightsレポートで次の項目を探してください。

 

使用していない JavaScript の削減：これは、ページの読み込みの一部として実行されなかったJavaScriptを示します。
過大なネットワーク ペイロードの回避 ：これは、大規模なライブラリのダウンロードを呼び出すことにより、改善すべき領域を特定します。
第三者の使用の最小化 ：JavaScriptの解析、コンパイル、および実行に費やされる時間を含みます。

 

改善方法

Googleは、決して呼び出されないJavaScriptを識別するために使用できる、ツリーシェイクと呼ばれる手法を推奨しています。木を揺すると落ちる果実のように、未使用のJSファイルを一つづつ削除していく方法だそうです。

 

5.JavaScriptファイルを圧縮します

ダウンロード時にJavaScriptファイルが圧縮されていることを確認してください。Webブラウザはファイルの内容を解凍するためにより多くのCPU時間を費やす必要がありますが、Googleは総合的に評価すると圧縮する方法を推奨しています。

 

発見方法

PageSpeed Insightsレポートには、圧縮することでメリットが得られる可能性のあるJavaScriptファイルを強調するセクションがあります。

[テキスト圧縮を有効にする]をクリックすると、圧縮が推奨されているファイルが表示されます。

 

改善方法

ほとんどのWebブラウザーまたはコンテンツ管理システムには、適切に構成されている場合にダウンロードを圧縮するためのサポートが組み込まれています。

 

6.JavaScriptコードに適切なキャッシュ期間を設定します

JavaScriptファイルが適切なキャッシュ有効期限ヘッダーとともに返されることを確認してください。

これにより、ブラウザはキャッシュ内のJavaScriptファイルが古くなっているかどうかを確認するオーバーヘッドを回避でき、パフォーマンスが向上します。

 

発見方法

Chromeデベロッパーツールの[ネットワーク]タブで、ダウンロードされたJavaScriptファイルのHTTP応答ヘッダーを確認できます。CacheControlなどのヘッダーを探します。

 

またはPageSpeed Insightsで、「静的なアセットでの効率的なキャッシュ ポリシーの使用」というタイトルの機会を探します。それをクリックすると、JavaScriptファイルを含む、適切に設定されたキャッシュヘッダーの恩恵を受ける可能性のあるリソースのリストが表示されます。

 

改善方法

一般的に使用されるJavaScriptファイルのキャッシュを強化する方法は、共有のパブリックロケーションからファイルを参照することです。

ユーザーが同じJavaScriptファイルを再利用するサイトにアクセスした場合、ブラウザーは以前にダウンロードしたファイルのコピーを使用できるため、パフォーマンスが向上します。