使用していないJavaScriptの削減とは？サイト高速化で表示速度を劇的に改善する方法

8 min 0 views

サイト運営者の皆さん、PageSpeed Insightsで「使用していないJavaScriptの削減」という項目を見かけたことはありませんか？「なにそれ？どうやって改善するの？」と困惑される方も多いでしょう。

実は、この項目を改善するだけで、サイトの表示速度が劇的に向上する可能性があります。サイト運営10年の私が実際に試してみたところ、PageSpeed Insightsのスコアが20ポイント以上アップしました。

この記事では、使用していないJavaScriptの削減について、初心者の方でもわかりやすく徹底解説します。専門知識がなくても実践できる具体的な方法も紹介しているので、ぜひ最後までご覧ください。

目次

使用していないJavaScriptの削減とは何か

基本的な概念と定義

使用していないJavaScriptの削減とは、ウェブページに含まれているものの、実際には使用されていない（実行されていない）JavaScriptコードを特定し、削除または最適化することで、サイトの表示速度を改善する手法です。

簡単に言うと、「使わないプログラムコードがたくさんあるから、それを整理して軽くしよう」ということですね。

なぜ使用していないJavaScriptが問題なのか

ブラウザは、ページを表示する際に以下のような処理を行います：

  1. JavaScriptファイルのダウンロード
  2. コードの解析・コンパイル
  3. コードの実行

この一連の処理は、実際に使用されないコードに対しても実行されるため、無駄な処理時間が発生してしまいます。

特に、現在のウェブサイトでは以下のような要因でJavaScriptが肥大化しがちです：

  • WordPressテーマ：多機能なテーマほど多くのJavaScriptが含まれる
  • プラグイン：機能を追加するごとにJavaScriptが増える
  • 外部ツール：Google Analytics、広告、チャットボットなど
  • フレームワーク：React、Vue.jsなどのライブラリ

サイト表示速度への影響

使用していないJavaScriptが多いと、以下のような悪影響が発生します：

1. 初回表示速度の遅延

  • ファイルダウンロード時間の増加
  • 解析・コンパイル時間の増加

2. Core Web Vitalsの悪化

  • First Contentful Paint (FCP)：コンテンツの初回表示時間
  • Largest Contentful Paint (LCP)：メインコンテンツの表示時間
  • First Input Delay (FID)：ユーザーが操作してからの応答時間

3. SEOへの悪影響

  • 検索順位の低下
  • モバイル検索での不利

使用していないJavaScriptを確認する方法

PageSpeed Insightsでの確認

まず、PageSpeed Insightsを使って現状を把握しましょう。

  1. PageSpeed Insightsにアクセス
  2. 調査したいページのURLを入力
  3. 「分析」をクリック
  4. 結果画面で「使用していないJavaScriptの削減」の項目をチェック
PageSpeed Insightsでの確認方法

項目の右端の「∨」をクリックすると、具体的にどのJavaScriptファイルが問題になっているかを確認できます。

Chrome DevToolsでの詳細分析

より詳細な分析を行いたい場合は、Chrome DevToolsのCoverageタブが便利です。

手順：

  1. 調査したいページでF12キーを押してDevToolsを開く
  2. 「︙」メニューから「Coverage」を選択
  3. 録画ボタン（●）をクリックして計測開始
  4. ページをリロードまたは操作
  5. 結果を確認

見方：

  • 青色のバー：使用されているコードの割合
  • 赤色のバー：使用されていないコードの割合
  • Usage Visualization：使用率の視覚化

赤色の割合が大きく、かつファイルサイズが大きいものが優先的に対処すべきファイルです。

Lighthouseでの監査

Google Lighthouseは、20キビバイト（約20.5キロバイト）を超える未使用のコードを含むすべてのJavaScriptファイルにフラグを立てます。これにより、改善の優先度を判断できます。

使用していないJavaScriptを削減する方法

1. WordPressプラグインを使用した方法

最も簡単で効果的な方法は、WordPressプラグイン「Flying Scripts by WP Speed Matters」を使用することです。

Flying Scriptsの導入手順

Step 1: プラグインのインストール

  1. WordPress管理画面から「プラグイン」→「新規追加」
  2. 「Flying Scripts」で検索
  3. インストール・有効化

Step 2: 遅延読み込みの設定

  1. プラグイン一覧から「Settings」をクリック
  2. 「Include Keywords」に遅延読み込みさせたいJavaScriptのキーワードを入力
  3. 「Save Changes」をクリック

推奨設定例：

  • gtag（Google Analytics）
  • fbevents（Facebook Pixel）
  • recaptcha（reCAPTCHA）
  • customerchat（Facebook Chat）

Step 3: 設定の微調整

  • Timeout：指定秒数後に自動読み込み（推奨：5秒）
  • Disable on pages：特定ページでの除外設定

注意点とリスク管理

Flying Scriptsを使用する際は、以下の点に注意してください：

起こりうる問題：

  • Google Analyticsの計測精度低下
  • 問い合わせフォームの機能停止
  • サイトの表示崩れ
  • 広告表示の遅延

対策：

  • 重要なページ（問い合わせフォーム等）では除外設定を行う
  • 段階的にテストを実施
  • 定期的に動作確認を行う

2. 手動でのコード最適化

技術的な知識がある方は、直接コードを最適化することも可能です。

不要なJavaScriptの特定と削除

手順：

  1. DevToolsのCoverageタブで使用率を確認
  2. 使用率の低いファイルを特定
  3. そのファイルが本当に必要かを判断
  4. 不要であれば削除または読み込み条件を変更

判断基準：

  • 使用率が20%以下
  • 特定のページでのみ使用
  • 代替手段がある

3. コマンドラインツールを使用した方法

開発者向けの方法として、terserを使用したJavaScriptの圧縮があります。

terserの使用方法

インストール：

Copynpm install terser -g

使用例：

Copyterser -c -m -o output.js -- input.js

オプション説明：

  • -c：圧縮を実行
  • -m：変数名・関数名を短縮
  • -o：出力先ファイル指定

4. 条件付き読み込みの実装

必要に応じてJavaScriptを読み込む条件付き読み込みも効果的です。

実装例

デバイス判定による読み込み：

Copy// モバイルデバイスの場合のみ読み込み
if (window.innerWidth < 768) {
    loadMobileScript();
}

ユーザーアクション後の読み込み：

Copy// ユーザーがスクロールした際に読み込み
window.addEventListener('scroll', function() {
    loadScript();
}, { once: true });

5. 外部サービスの最適化

Google Tag Managerの活用

複数のタグを統合管理することで、個別のスクリプト読み込みを減らせます。

メリット：

  • 一元管理による効率化
  • 条件付き配信の設定
  • 読み込み順序の最適化

CDNの活用

**Content Delivery Network（CDN）**を使用することで、JavaScriptの配信を最適化できます。

推奨CDN：

  • CloudFlare
  • Amazon CloudFront
  • Google Cloud CDN

実際の改善事例とその効果

改善事例1：コーポレートサイトの場合

Before：

  • PageSpeed Insightsスコア：モバイル32点、PC77点
  • 主な問題：reCAPTCHA、Google Analytics

After：

  • PageSpeed Insightsスコア：モバイル58点、PC98点
  • 改善幅：モバイル+26点、PC+21点

実施内容：

  • Flying ScriptsでreCAPTCHAを遅延読み込み
  • 問い合わせページでは除外設定を適用

改善事例2：ECサイトの場合

Before：

  • 読み込み時間：4.2秒
  • 直帰率：68%

After：

  • 読み込み時間：2.1秒
  • 直帰率：45%

実施内容：

  • チャットボットの遅延読み込み
  • 商品詳細ページでのみ必要なスクリプトの条件付き読み込み

改善事例3：ブログサイトの場合

Before：

  • Core Web Vitals：すべて「改善が必要」

After：

  • Core Web Vitals：すべて「良好」

実施内容：

  • ソーシャルメディアウィジェットの遅延読み込み
  • 広告スクリプトの最適化

高速化をさらに進めるための追加施策

1. 画像の最適化

JavaScriptの最適化と並行して、画像の最適化も重要です。

推奨手法：

  • WebP形式の使用
  • 適切なサイズでの配信
  • 遅延読み込みの実装

2. CSSの最適化

使用していないCSSの削除も同様に効果的です。

確認方法：

  • DevToolsのCoverageタブでCSS使用率を確認
  • 不要なCSSルールを削除

3. キャッシュの活用

ブラウザキャッシュとCDNキャッシュを適切に設定することで、リピート訪問時の読み込み速度が向上します。

4. サーバーレスポンス時間の改善

**Time to First Byte（TTFB）**の改善も重要な要素です。

改善方法：

  • 高性能なホスティングサービスの使用
  • データベースの最適化
  • サーバーサイドキャッシュの活用

landinghubでの表示速度改善ソリューション

ここまで様々な手法を紹介してきましたが、「自分で設定するのは難しい」「もっと簡単に改善したい」という方におすすめなのが、landinghubです。

landinghubの特徴

landinghubは、表示速度の改善を専門とするランディングページ作成ツールです。

主な特徴：

  • 自動最適化機能：JavaScriptの無駄な読み込みを自動で最適化
  • 高速表示技術：独自の技術により高速表示を実現
  • SEO対策：Core Web Vitalsの改善に特化
  • 簡単操作：専門知識不要で誰でも使用可能

実際の改善実績

landinghubを使用したクライアントの改善実績：

改善例1：

  • 改善前：PageSpeed Insightsスコア 45点
  • 改善後：PageSpeed Insightsスコア 95点
  • 改善幅：+50点

改善例2：

  • 改善前：表示速度 5.2秒
  • 改善後：表示速度 1.8秒
  • 改善幅：65%短縮

landinghubが解決できる問題

  • JavaScriptの最適化：不要なコードの自動削除
  • 画像の最適化：WebP変換と適切なサイズ配信
  • CSSの最適化：使用していないCSSの削除
  • キャッシュの活用：効率的なキャッシュ戦略

表示速度の改善を本格的に取り組みたい方は、ぜひlandinghubをご検討ください。

よくある質問とトラブルシューティング

Q1: Flying Scriptsを使ったらサイトが動かなくなった

A: 以下の手順で対処してください：

  1. 設定の確認：Include Keywordsの設定を確認
  2. 段階的な除外：問題のあるスクリプトを特定し、除外設定を追加
  3. プラグインの無効化：一時的にプラグインを無効化して動作確認

Q2: Google Analyticsの計測に影響はないか

A: 遅延読み込みにより、若干の計測精度低下の可能性があります。

対策：

  • タイムアウト設定を短くする（3-5秒）
  • 重要なページでは除外設定を行う
  • Google Tag Managerを使用して最適化

Q3: どのスクリプトを遅延読み込みすべきか

A: 以下の優先順位で判断してください：

高優先度（遅延読み込み推奨）：

  • チャットボット
  • ソーシャルメディアウィジェット
  • 広告関連スクリプト
  • 一部の分析ツール

低優先度（注意が必要）：

  • フォーム関連スクリプト
  • 決済システム
  • セキュリティ関連スクリプト

Q4: 改善効果が見られない場合

A: 以下の点を確認してください：

  1. キャッシュの削除：ブラウザキャッシュとCDNキャッシュを削除
  2. 他の要因の確認：画像、CSS、サーバーレスポンスも確認
  3. 設定の見直し：除外設定が多すぎないか確認

継続的な改善のためのモニタリング

1. 定期的な測定

月1回の頻度で以下のツールを使用して測定しましょう：

  • PageSpeed Insights
  • Google Search Console
  • GTmetrix
  • WebPageTest

2. Core Web Vitalsの監視

Google Search Consoleの「Core Web Vitals」レポートを定期的に確認し、以下の指標を監視してください：

  • LCP：2.5秒以下
  • FID：100ミリ秒以下
  • CLS：0.1以下

3. ユーザー行動の分析

Google Analyticsで以下の指標を監視：

  • 直帰率：改善により低下することが期待される
  • セッション時間：改善により増加することが期待される
  • ページビュー/セッション：改善により増加することが期待される

4. 競合他社との比較

定期的に競合他社のサイト速度を調査し、自社の位置を把握しましょう。

まとめ

「使用していないJavaScriptの削減」は、サイトの表示速度改善において非常に効果的な施策です。

今回紹介した内容をまとめると：

重要なポイント

  1. 使用していないJavaScriptは表示速度を大幅に悪化させる
  2. Flying Scriptsを使えば簡単に改善できる
  3. 段階的なテストと監視が重要
  4. 継続的な改善が必要

実践すべきアクション

  1. 現状の把握：PageSpeed InsightsとDevToolsで現状を確認
  2. Flying Scriptsの導入：WordPressサイトの場合は最優先
  3. 段階的な最適化：重要度の低いスクリプトから開始
  4. 継続的な監視：定期的な測定と改善

期待できる効果

  • PageSpeed Insightsスコア：20-50点の向上
  • 表示速度：30-60%の短縮
  • SEO効果：検索順位の改善
  • ユーザー体験：直帰率の改善

表示速度の改善は、SEO対策とユーザー体験向上の両方に効果的です。特に、モバイルファーストインデックスの時代において、サイト速度の重要性はますます高まっています。

まずは今回紹介した方法を試してみて、自社サイトの表示速度改善に取り組んでみてください。もし本格的な改善をお考えの場合は、landinghubのような専門ツールの活用もおすすめです。

<PREV
「レンダリングを妨げるリソースの除外」とは？初心者でもわかる対策を紹介！
関連記事

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です