PageSpeed Insightsの最新ブラウザに従来のJavaScriptを配信しないようにしてくださいとは？対応策も紹介

8 min 5 views

Webサイトの表示速度を測定する際、PageSpeed Insightsで「最新ブラウザに従来の JavaScript を配信しないようにしてください」というメッセージが表示されて困っていませんか？

このエラーは、多くのWebサイト運営者が直面する共通の問題です。特に、WordPressを使用している場合は、テーマやプラグインの影響でこのエラーが発生することがよくあります。

本記事では、この問題の原因から具体的な解決方法まで、初心者の方でも理解できるよう詳しく解説していきます。さらに、Webサイトの表示速度を劇的に改善する方法も合わせてご紹介します。

目次

「最新ブラウザに従来のJavaScriptを配信しないようにしてください」とは？

エラーの意味を理解しよう

このエラーメッセージの意味を簡単に説明すると、「古いブラウザ対応のためのJavaScriptコードが、最新のブラウザにも配信されている」ということです。

具体的には：

  • ポリフィル：古いブラウザで新しいJavaScript機能を使えるようにするコード
  • トランスパイル：新しいJavaScript構文を古いブラウザでも動作するように変換されたコード
  • レガシーコード：古いブラウザサポートのために残されている不要なコード

これらが最新ブラウザにも配信されることで、無駄なデータ通信が発生し、サイトの表示速度が低下してしまいます。

なぜこのエラーが発生するのか

主な原因は以下の通りです：

  1. テーマの設計思想
    • 多くのWordPressテーマは幅広いブラウザサポートを前提に設計されている
    • 古いブラウザ対応のコードがデフォルトで含まれている
  2. プラグインの影響
    • jQueryなどのライブラリが古いバージョンのまま
    • プラグインが独自のJavaScriptを読み込んでいる
  3. 外部ライブラリの使用
    • CDNから読み込んでいるライブラリが古い形式
    • 必要以上に多くのコードを読み込んでいる

エラーの実際の影響

実は、このエラーは「表示速度に直接的な大きな影響を与えるものではない」というのが専門家の見解です。

しかし、以下の点で改善する価値があります：

  • データ使用量の削減：不要なコードを削除することで転送量が減る
  • パフォーマンススコアの向上：PageSpeed Insightsの評価が上がる
  • 将来的な保守性：コードの整理により管理が楽になる

具体的な解決方法

1. JavaScript配信の最適化

最も効果的な解決方法は、モジュール/ノンモジュール戦略を採用することです。

Copy<!-- 最新ブラウザ向け -->
<script type="module" src="modern-script.js"></script>
<!-- レガシーブラウザ向け -->
<script nomodule src="legacy-script.js"></script>

この方法により、最新ブラウザは軽量なモジュール版を、古いブラウザは従来版を読み込むことができます。

2. WordPressでの対応方法

WordPressを使用している場合、以下の手順で改善できます：

functions.phpでの対応

Copy// 最新ブラウザ向けのスクリプト読み込み
function enqueue_modern_scripts() {
    wp_enqueue_script('modern-script', 'path/to/modern-script.js', array(), '1.0.0', true);
    wp_script_add_data('modern-script', 'type', 'module');
}
add_action('wp_enqueue_scripts', 'enqueue_modern_scripts');

プラグインの最適化

多くの場合、プラグインが原因でこのエラーが発生します。特に以下のプラグインは注意が必要です：

  • Contact Form 7
  • reCAPTCHA関連プラグイン
  • jQuery依存のプラグイン

3. Contact Form 7の最適化

Contact Form 7は全ページにJavaScriptを読み込むため、必要なページのみに限定しましょう。

Copy// Contact Form 7の読み込み制限
function cf7_limitation() {
    add_filter('wpcf7_load_js', '__return_false');
    add_filter('wpcf7_load_css', '__return_false');
    
    if(is_page('contact')) {
        if(function_exists('wpcf7_enqueue_scripts')) {
            wpcf7_enqueue_scripts();
        }
        if(function_exists('wpcf7_enqueue_styles')) {
            wpcf7_enqueue_styles();
        }
    }
}
add_action('template_redirect', 'cf7_limitation');

4. reCAPTCHAの最適化

reCAPTCHAも同様に、必要なページのみに限定できます。

Copy// お問い合わせページを除き、reCAPTCHAを読み込ませない
function load_recaptcha_js() {
    if(!is_page('contact')) {
        wp_deregister_script('google-recaptcha');
    }
}
add_action('wp_enqueue_scripts', 'load_recaptcha_js', 100);

表示速度向上のための包括的な対策

1. 使用していないJavaScriptの削減

不要なJavaScriptを削除することで、大幅な高速化が期待できます。

診断方法

  1. Chrome DevToolsを開く
  2. 「Coverage」タブで未使用コードを確認
  3. PageSpeed Insightsの「使用していないJavaScriptの削減」をチェック

対策方法

Copy// 不要なスクリプトの削除
function remove_unused_scripts() {
    if(!is_admin()) {
        wp_deregister_script('jquery-migrate');
        wp_deregister_script('wp-embed');
    }
}
add_action('wp_enqueue_scripts', 'remove_unused_scripts');

2. レンダリングを妨げるリソースの除外

JavaScriptの読み込みを遅延させることで、初期表示速度が向上します。

Copy// JavaScriptをフッターで読み込む
function move_scripts_to_footer() {
    if(!is_admin()) {
        wp_scripts()->add_data('jquery', 'group', 1);
        wp_scripts()->add_data('jquery-core', 'group', 1);
        wp_scripts()->add_data('jquery-migrate', 'group', 1);
    }
}
add_action('wp_enqueue_scripts', 'move_scripts_to_footer');

3. 画像の最適化

JavaScriptと併せて画像の最適化も重要です。

推奨形式

  • WebP形式の採用：従来のJPEGより30%程度軽量
  • 適切なサイズ設定：表示サイズに合わせたリサイズ
  • 遅延読み込み：スクロールに応じて画像を読み込み

実装例

Copy<img src="placeholder.jpg" 
     data-src="actual-image.webp" 
     alt="説明文"
     loading="lazy">

4. キャッシュの活用

ブラウザキャッシュの設定

Copy# .htaccess
<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType text/javascript "access plus 1 year"
    ExpiresByType application/javascript "access plus 1 year"
</IfModule>

CDNの活用

CDN（Content Delivery Network）を使用することで、世界中のユーザーに高速でコンテンツを配信できます。

  • Cloudflare：無料プランでも高機能
  • AWS CloudFront：AWSユーザーに最適
  • Google Cloud CDN：Google系サービスと連携

高度な最適化テクニック

1. Code Splitting

大きなJavaScriptファイルを分割して、必要な部分のみを読み込む手法です。

Copy// 動的インポート
const loadModule = async () => {
    const module = await import('./heavy-module.js');
    module.init();
};

2. Tree Shaking

使用していないコードを自動的に削除する技術です。

Copy// webpack.config.js
module.exports = {
    mode: 'production',
    optimization: {
        usedExports: true,
        sideEffects: false
    }
};

3. Service Worker

オフライン対応とキャッシュ戦略を実装できます。

Copy// service-worker.js
self.addEventListener('fetch', event => {
    event.respondWith(
        caches.match(event.request)
            .then(response => response || fetch(event.request))
    );
});

LandingHubでの表示速度対策

LandingHubでは、これらの課題を解決するための最適化されたランディングページ作成環境を提供しています。

LandingHubの優位性

  1. 最新技術の採用
    • 最新のJavaScript ESモジュールをサポート
    • 自動的な最適化機能を内蔵
  2. 不要なコードの排除
    • 必要最小限のJavaScriptのみを読み込み
    • レガシーブラウザ対応コードの自動切り替え
  3. 高速化機能
    • 自動画像最適化
    • 遅延読み込み機能
    • CDN配信

導入メリット

従来のWordPressでは手動で行う必要があった最適化作業が、LandingHubでは自動化されています。

  • 開発時間の短縮：最適化作業が不要
  • 保守性の向上：アップデートで自動的に最新化
  • パフォーマンス保証：常に最適な状態を維持

測定と改善のサイクル

1. 現状把握

まずは現在のサイトの状況を正確に把握しましょう。

測定ツール

  • PageSpeed Insights：Googleの公式ツール
  • GTmetrix：詳細な分析が可能
  • WebPageTest：実際のブラウザでの測定

測定項目

  • First Contentful Paint (FCP)：最初のコンテンツ表示時間
  • Largest Contentful Paint (LCP)：最大コンテンツ表示時間
  • Cumulative Layout Shift (CLS)：レイアウトシフト値

2. 改善実施

優先順位を決めて段階的に改善していきます。

改善順序

  1. Critical Rendering Pathの最適化
  2. JavaScriptの最適化
  3. 画像の最適化
  4. キャッシュの設定

3. 効果測定

改善後は必ず効果測定を行い、さらなる改善点を探します。

測定のポイント

  • 複数回測定：安定した結果を得るため
  • 異なるデバイス：モバイル・デスクトップ両方で確認
  • 時間帯変更：サーバー負荷の影響を考慮

トラブルシューティング

よくある問題と解決方法

問題1：改善後にサイトが動かない

原因：必要なJavaScriptまで削除してしまった

解決方法：

Copy// 段階的に無効化して原因を特定
function debug_scripts() {
    if(!is_admin()) {
        // 一つずつコメントアウトして確認
        // wp_deregister_script('jquery-migrate');
        // wp_deregister_script('wp-embed');
    }
}

問題2：特定のページでエラーが発生

原因：ページ固有の機能が動作しない

解決方法：

Copy// 条件分岐を使用
if(!is_page('special-page')) {
    wp_deregister_script('heavy-script');
}

問題3：スコアが改善されない

原因：キャッシュが効いている、または他の要因

解決方法：

  1. キャッシュクリア
  2. 別のツールでも測定
  3. 段階的な改善

デバッグ方法

Chrome DevToolsの活用

  1. Networkタブで読み込み状況を確認
  2. Performanceタブでボトルネックを特定
  3. Consoleでエラーをチェック

ログの確認

Copy// デバッグ用ログ出力
function debug_log($message) {
    if(WP_DEBUG) {
        error_log($message);
    }
}

将来を見据えた対策

1. HTTP/3の準備

次世代プロトコルHTTP/3への対応準備を進めましょう。

対応内容

  • QUIC対応サーバーの検討
  • 多重化を前提とした設計
  • セキュリティ強化

2. Core Web Vitalsの進化

Googleの評価指標は継続的に進化しています。

注目指標

  • Interaction to Next Paint (INP)：ユーザーインタラクション応答性
  • Time to First Byte (TTFB)：サーバー応答時間
  • 新しいレイアウトシフト指標

3. WebAssemblyの活用

高速化が必要な処理にはWebAssemblyの活用も検討しましょう。

Copy// WebAssembly使用例
const wasmModule = await WebAssembly.instantiateStreaming(
    fetch('module.wasm')
);

まとめ

「最新ブラウザに従来のJavaScriptを配信しないようにしてください」というエラーは、現代のWeb開発において避けて通れない課題です。

しかし、適切な対策を講じることで：

  • 表示速度の向上
  • ユーザー体験の改善
  • SEO効果の向上
  • 保守性の向上

これらの恩恵を得ることができます。

特に重要なのは、段階的かつ継続的な改善です。一度に全てを変更するのではなく、測定→改善→測定のサイクルを繰り返すことで、確実に成果を上げることができます。

また、手動での最適化作業に限界を感じている場合は、LandingHubのような最適化されたプラットフォームの活用も検討してみてください。開発効率とパフォーマンスの両立が可能になります。

Webサイトの高速化は、今や基本的な要件となっています。ユーザーにとって快適で、検索エンジンにも評価される優れたWebサイトを作るために、これらの対策を積極的に取り入れていきましょう。

継続的な改善により、必ず良い結果が得られるはずです。まずは現状把握から始めて、一歩ずつ前進していきましょう。

<PREV
Page Speed Insights「適切なサイズの画像」とは？改善方法を紹介
NEXT>
PageSpeed InsightsのCSSの最小化の改善方法について
関連記事

コメントを残す

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