WordPressの表示速度が遅いと感じていませんか？

プラグインに頼ると、競合や予期せぬエラーが発生するリスクがあります。

本記事では、プラグインを一切使わずにWordPressを高速化する方法を徹底解説。

画像最適化、CSS/JavaScript改善、サーバー設定まで、実装コードと共に紹介します。

PageSpeed Insightsで90点以上を目指せる実践的な手順を、初心者から中級者まで分かりやすくお伝えします。

WordPressが遅くなる5つの原因

主にWordPressが遅くなる原因をまとめていきます。

最適化されていない画像ファイル

WordPressサイトが重くなる最大の原因は、画像の扱い方です。

スマートフォンやデジタルカメラで撮影した写真を、そのままアップロードしていませんか？

元の画像サイズが「横4000px×縦3000px」といった巨大なサイズのまま使用すると、表示は小さくても実際のファイル容量は重いまま。

さらに、JPEG形式のまま圧縮せずに使用している場合、1枚あたり数MBになることも珍しくありません。

記事内に複数の画像を使えば、それだけで10MB以上のデータ転送が発生し、ページの読み込みに数秒かかってしまいます。

適切なサイズへのリサイズと圧縮、WebP形式への変換が不可欠です。

CSS・JavaScriptの肥大化と読み込み方法

テーマやカスタマイズによって、CSSとJavaScriptファイルが肥大化していることも大きな原因です。

使っていないスタイルや関数が大量に残っていたり、複数のファイルに分散して読み込まれていると、ブラウザは何度もサーバーにリクエストを送る必要があります。

特にJavaScriptは、読み込まれるとHTMLの解析が一時停止するため、ファーストビューの表示に大きく影響します。

また、古いjQueryライブラリを使い続けている場合、最新のVanilla JavaScriptと比べて実行速度が遅くなります。

コードの最適化と適切な読み込みタイミングの設定が重要です。

サーバーのスペックと設定不足

レンタルサーバーのプランやスペックが、サイトの規模に合っていないケースも多く見られます。

共有サーバーの低価格プランでは、同じサーバーを使用する他のユーザーの影響を受けることがあり、アクセスが集中すると応答速度が低下します。

また、PHPのバージョンが古いままだと、最新版と比較して処理速度が大幅に遅くなります。

PHP 7.4とPHP 8.3では、処理速度に約2倍の差が出ることも。

さらに、Gzip圧縮やブラウザキャッシュといったサーバー側の高速化機能が有効になっていないと、本来の性能を発揮できません。

データベースの肥大化と最適化不足

WordPressは、記事内容やコメント、設定情報などをすべてデータベースに保存しています。

長期間運営していると、不要なリビジョン（記事の編集履歴）、削除済みコメントのゴミデータ、期限切れのトランジェント（一時データ）が溜まり、データベースが肥大化します。

これにより、ページ表示時に必要な情報を取得するクエリの実行時間が長くなり、サイト全体のパフォーマンスが低下します。

特にwp_optionsテーブルの自動読み込みデータが増えすぎると、すべてのページ読み込み時に影響が出ます。

定期的なデータベース最適化とクリーニングが必要不可欠です。

外部リソースと不要なプラグインの影響

Google Analyticsや広告タグ、SNSシェアボタン、YouTubeの埋め込みなど、外部サービスからリソースを読み込むと、それぞれのサーバーへの接続時間が発生します。

特に海外サーバーからの読み込みは遅延の原因になります。

また、多くのプラグインをインストールしていると、使っていない機能のためにCSSやJavaScriptが自動的に読み込まれ、ページが重くなります。1つのプラグインにつき平均2〜3個のファイルが追加されるため、10個のプラグインで20〜30個のリクエストが増加することも。

必要最低限のプラグインに絞り、外部リソースは遅延読み込みで対応することが重要です。

高速化①：WordPressで画像最適化させる方法

プラグインなしで画像を最適化させる方法は、手間がかなりかかります。

landinghubであればタグ1つでほぼ画像の問題は解決できますので、是非こちらもご検討下さい。

下記に最適化の方法を解説してきます。

画像サイズの適正化

WordPressで画像を最適化する第一歩は、適切なサイズを知ることです。

使用しているテーマの記事本文の幅を確認しましょう。一般的なブログテーマでは、本文の幅は800px〜1000px程度に設定されています。

推奨サイズの目安

上記はあくまで目安となります。テーマに合わせる形が重要でですが、サイズがわからない方は上記に合わせる形で設定しましょう。

スマートフォンでの閲覧が主流の現在でも、Retinaディスプレイ対応を考慮して、表示サイズの1.5〜2倍の解像度で用意するのが理想的です。

functions.phpで自動リサイズを設定する

プラグインを使わずに、アップロード時に自動的に画像サイズを制限する方法があります。

WordPressテーマのfunctions.phpに以下のコードを追加することで、大きすぎる画像を自動的にリサイズできます。

// 画像アップロード時の最大サイズを制限
function limit_upload_image_size( $file ) {
    $image = getimagesize( $file['tmp_name'] );
    $max_width = 2000;  // 最大横幅（px）
    $max_height = 2000; // 最大縦幅（px）
    
    if ( $image[0] > $max_width || $image[1] > $max_height ) {
        // 画像をリサイズ
        $editor = wp_get_image_editor( $file['tmp_name'] );
        if ( ! is_wp_error( $editor ) ) {
            $editor->resize( $max_width, $max_height, false );
            $editor->save( $file['tmp_name'] );
        }
    }
    return $file;
}
add_filter( 'wp_handle_upload_prefilter', 'limit_upload_image_size' );

このコードは、アップロードされた画像が指定サイズを超えている場合、自動的に縮小してくれます。

$max_widthと$max_heightの数値を、あなたのサイトに合わせて調整してください。

アップロード前に画像を圧縮する

プラグインに頼らない場合、アップロード前に画像を最適化しておくことが重要です。以下のオンラインツールを活用しましょう。

1. TinyPNG（https://tinypng.com/）
2. Squoosh（https://squoosh.app/）
3. iLOVEIMG(https://www.iloveimg.com/ja/compress-image)

圧縮の手順

1. 画像編集ソフトで適切なサイズにリサイズ
2. 上記ツールで圧縮（JPEG品質70〜85%推奨）
3. WordPressにアップロード

レスポンシブ対応のsrcset属性を活用

HTMLのsrcset属性を使うと、デバイスの画面サイズに応じて最適な画像を自動的に配信できます。

WordPressは自動的にsrcsetを生成してくれますが、手動で制御することも可能です。

srcset属性作成例

<img 
  src="image-800w.jpg" 
  srcset="
    image-400w.jpg 400w,
    image-800w.jpg 800w,
    image-1200w.jpg 1200w
  "
  sizes="(max-width: 600px) 100vw, (max-width: 1000px) 80vw, 800px"
  alt="WordPress高速化"
  loading="lazy"
>

画像の遅延読み込み実装

WordPress 5.5以降では、loading="lazy"属性が標準サポートされています。

functions.phpに以下のコードを追加することで、すべての画像に自動適用できます。

// すべての画像に遅延読み込みを適用
function add_lazy_loading_to_images( $content ) {
    // コンテンツ内のimgタグを検索
    $content = preg_replace_callback(
        '/<img([^>]+)>/i',
        function( $matches ) {
            $img_tag = $matches[0];
            // すでにloading属性がある場合はスキップ
            if ( strpos( $img_tag, 'loading=' ) !== false ) {
                return $img_tag;
            }
            // loading="lazy"を追加
            return str_replace( '<img', '<img loading="lazy"', $img_tag );
        },
        $content
    );
    return $content;
}
add_filter( 'the_content', 'add_lazy_loading_to_images' );

ただし、ファーストビュー（最初に表示される画面）の画像にはloading="eager"を指定し、即座に読み込むようにすることが推奨されます。

次世代画像フォーマットの導入

プラグインに頼らない場合、アップロード前に画像を次世代フォーマットの画像に変換しておくことが重要です。

以下のオンラインツールを活用しましょう。

1. TinyPNG（https://tinypng.com/）
2. Squoosh（https://squoosh.app/）
3. iLOVEIMG(https://www.iloveimg.com/ja/compress-image)

ツールで変換してからアップさせるようにしましょう。

また、画像を配信する設定も必要になります。

.htaccessで自動配信させる方法か、pictureタグで配信する方法があります。

.htaccessでWebP画像を自動配信する

.htaccessファイルにこのコードを追加することで、WebP対応ブラウザには自動的にWebP画像を配信し、非対応ブラウザには元のJPEG/PNG画像を返すことができます。

HTMLコードを一切変更せず、サーバー側で自動判定して最適な画像形式を配信するため、運用が非常に簡単です。

実装コード

<IfModule mod_rewrite.c>
  RewriteEngine On
  
  # WebP対応ブラウザかチェック
  RewriteCond %{HTTP_ACCEPT} image/webp
  
  # リクエストされたJPEG/PNGファイルが存在するかチェック
  RewriteCond %{REQUEST_FILENAME} (.*)\.(jpe?g|png)$
  
  # 対応するWebPファイルが存在するかチェック
  RewriteCond %{REQUEST_FILENAME}.webp -f
  
  # WebPファイルに書き換え
  RewriteRule (.*)\.(jpe?g|png)$ $1.$2.webp [T=image/webp,E=accept:1,L]
</IfModule>

<IfModule mod_headers.c>
  # キャッシュ制御のためのヘッダー追加
  Header append Vary Accept env=REDIRECT_accept
</IfModule>

# WebPのMIMEタイプを追加
AddType image/webp .webp

WebPファイルは元画像と同じディレクトリに「image.jpg.webp」という形式で保存する必要があります。

mod_rewriteとmod_headersモジュールが有効なサーバーで動作します。

pictureタグで配信（細かく制御したい場合）

pictureタグを使うことで、ブラウザが対応する最適な画像形式を自動選択できます。

上から順に評価され、AVIFに対応していればAVIF、非対応でWebPに対応していればWebP、どちらも非対応ならJPEGが表示されます。

基本的な実装

<picture>
  <!-- AVIF対応ブラウザ用 -->
  <source srcset="image.avif" type="image/avif">  
  <!-- WebP対応ブラウザ用 -->
  <source srcset="image.webp" type="image/webp">  
  <!-- フォールバック（すべてのブラウザ対応） -->
  <img src="image.jpg" alt="WordPress高速化" loading="lazy" width="800" height="600">
</picture>

srcset属性と組み合わせることで、デバイスの画面サイズに応じた画像も配信可能です。

JavaScriptなしで動作し、SEO対策に必要なalt属性も設定できるため、.htaccessよりも柔軟な制御ができます。

重要な画像やヒーローイメージに最適です。

参考記事：画像の読み込みが遅い！画像の表示速度を改善するための最適化の方法

高速化②：WordPressでCSS最適化させる方法

WordPressがCSSで遅くなる要因としては、主にレンダリングブロックが要因となります。

プラグインを使わずにCSSのレンダリングブロックを回避する方法を解説していきます。

レンダリングブロックとは？

CSSの内部化（クリティカルCSSとインライン化）

すべてのCSSを内部化するとHTMLが肥大化するため、ファーストビューに必要なCSSだけを内部化します。

まずは下記のようなオンラインツールで必要なCSSを抽出します。

• Critical CSS Generator（https://www.sitelocity.com/critical-path-css-generator）
• criticalCSS.com（https://criticalcss.com/）

header.phpの<head>タグ内に<style>タグを追加して、クリティカルCSSを直接記述します。

functions.phpを使わないシンプルな方法ですが、テーマ更新時に上書きされるリスクがあるため、子テーマでの編集を推奨します。

コード例

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <!-- クリティカルCSSを直接記述 -->
    <style id="inline-critical-css">
        body{margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
        .site-header{background:#333;color:#fff;padding:1rem}
        .site-title{margin:0;font-size:1.5rem}
        .main-content{max-width:1200px;margin:0 auto;padding:2rem}
        h1{font-size:2rem;margin-bottom:1rem}
        /* ファーストビューに必要なCSSのみ記述 */
    </style>
    
    <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>

ファーストビューに必要な最小限のCSS（ヘッダー、ナビ、レイアウト基本構造）のみを記述し、装飾系は外部CSSで読み込みます。

HTMLに直接記述するため即座に適用され、初期表示が高速化されます。

非同期CSS読み込み

通常、CSSファイルはレンダリングブロックリソースとして動作し、読み込みが完了するまでページの表示が待機状態になります。

非同期CSS読み込みとは、CSSの読み込み中でもHTMLの解析を続行し、ページを先に表示させる技術です。

preloadとmedia属性を使った遅延読み込みの方法

header.phpの<head>タグ内に以下のコードを記述します。

<link rel="preload" href="<?php echo get_stylesheet_uri(); ?>" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>"></noscript>

rel="preload"でCSSファイルを先読みし、onloadイベントで読み込み完了後にrel="stylesheet"に変更することで適用します。

これによりHTMLの解析を止めずにCSSをバックグラウンドで読み込めます。

<noscript>タグはJavaScript無効環境用のフォールバックです。

通常の<link rel="stylesheet">と置き換えるだけで実装でき、レンダリングブロックを削減してファーストビューの表示が0.5〜1秒高速化されます。

クリティカルCSSのインライン化と組み合わせると最も効果的です。

未使用のCSS圧縮と削除

未使用CSSの削除と圧縮により、ファイルサイズを50%以上削減できます。

まずChrome DevToolsのCoverageツールで未使用CSS（赤色表示）を特定し、手動で削除します。

次にfunctions.phpで不要なWordPressデフォルトCSS（wp-block-library等）をwp_dequeue_style()で削除。

functions.phpでの削除コード

// WordPressデフォルトの不要なCSSを削除
function remove_unused_default_css() {
    // ブロックエディタのCSS（クラシックエディタ使用時は不要）
    wp_dequeue_style( 'wp-block-library' );
    wp_dequeue_style( 'wp-block-library-theme' );
    
    // クラシックテーマスタイル
    wp_dequeue_style( 'classic-theme-styles' );
    
    // グローバルスタイル（カスタムCSSのみ使用時）
    wp_dequeue_style( 'global-styles' );
    
    // 絵文字スタイル
    remove_action( 'wp_print_styles', 'print_emoji_styles' );
    
    // 絵文字検出スクリプトも削除
    remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
}
add_action( 'wp_enqueue_scripts', 'remove_unused_default_css', 100 );

CSSの圧縮方法

不要なコードを削除した後、残ったCSSを圧縮します。

オンラインツール「CSS Minifier」で空白・改行・コメントを削除して圧縮します。

ショートハンドプロパティへの変換や色コードの短縮も効果的です。

ページタイプ別にCSSファイルを分割し、必要なページでのみ読み込む条件分岐を実装すれば、各ページで30〜50KBの削減が可能です。

PageSpeed Insightsの警告も解消されます。

Webフォントの最適化

Webフォントは美しいタイポグラフィを実現できる一方で、ページの表示速度に大きな影響を与えます。

特に日本語フォントは、英語フォントと比較して10〜100倍のファイルサイズになることがあります。

下記のように最適化していきましょう。

font-display: swapの活用

最も簡単で効果的な最適化は、font-display: swapを設定することです。

@font-face {
    font-family: 'CustomFont';
    src: url('font.woff2') format('woff2');
    font-display: swap; /* ← 重要 */
}

CSSの@font-faceにfont-display: swap;を追加するだけで、フォント読み込み待機中にシステムフォントで文字を表示し、ダウンロード完了後にWebフォントへ切り替えます。

Googleフォントの場合はURL末尾に&display=swapを追加します。

これによりFOIT（文字が見えない問題）が解消され、ユーザーはすぐに本文を読み始められます。

PageSpeed InsightsのFCPとLCPスコアが改善し、特にモバイル環境で1〜2秒の高速化が期待できます。

システムフォントへの切り替え検討

システムフォントは、ユーザーのデバイスに標準でインストールされているフォントです。

Webフォントのようにダウンロードする必要がないため、読み込み時間ゼロで即座に表示されます。

CSSでfont-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", Meiryo, "Noto Sans JP", sans-serif;と指定することで、macOSではヒラギノ、WindowsではメイリオやYu Gothic、AndroidではNoto Sansが自動選択されます。

CSSでの実装

body {
    font-family: 
        /* iOS/macOS Safari */
        -apple-system,
        
        /* macOS Chrome/Edge */
        BlinkMacSystemFont,
        
        /* macOS 10.11以降 */
        "Hiragino Sans",
        
        /* macOS 10.10以前 */
        "Hiragino Kaku Gothic ProN",
        
        /* Windows */
        "Segoe UI",
        "Yu Gothic",
        Meiryo,
        
        /* Android */
        "Noto Sans JP",
        "Noto Sans CJK JP",
        
        /* 最終フォールバック */
        sans-serif;
    
    /* レンダリング最適化 */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

Webフォント使用時と比較して2〜5MBのデータ転送が不要になり、ページ表示が1〜3秒高速化します。

デザインの統一性はやや低下しますが、各OSに最適化された読みやすいフォントが表示され、アクセシビリティも向上します。

速度を最優先する場合に最適な選択肢です。

参考記事：CSSの最適化で表示速度を改善

高速化③：WordPressでJavaScript最適化させる方法

JavaScriptの遅延読み込みは、ページの初期表示速度を劇的に改善する最も効果的な施策の一つです。

適切に実装することで、ファーストビューの表示が1〜3秒短縮され、PageSpeed Insightsのスコアを大幅に向上させることができます。

具体的な改善方法をご紹介していきます。

JavaScriptの遅延読み込み

通常、ブラウザはHTMLを読み込む際にJavaScriptファイルを発見すると、そのダウンロードと実行が完了するまでHTMLの解析を一時停止します。

これをレンダリングブロックと呼びます。

遅延読み込みとは、JavaScriptのダウンロードと実行を後回しにすることで、HTMLの解析とページ表示を優先する技術です。

defer属性を使った遅延読み込み

最もシンプルで効果的な方法です。defer属性を追加するだけで、JavaScriptの実行をHTML解析完了後に遅延できます。

HTMLでの直接記述

<!-- 最適化前：レンダリングブロック -->
<script src="<?php echo get_template_directory_uri(); ?>/js/main.js"></script>

<!-- 最適化後：defer属性追加 -->
<script defer src="<?php echo get_template_directory_uri(); ?>/js/main.js"></script>

functions.phpで自動的にdefer属性を追加する方法もあります。

WordPressが出力するすべてのJavaScriptに自動的にdefer属性を追加します。

// すべてのJSファイルにdefer属性を自動追加
function add_defer_to_all_scripts( $tag, $handle ) {
    // 除外するスクリプト（jQueryなど依存関係があるもの）
    $exclude_handles = array(
        'jquery',
        'jquery-core',
        'jquery-migrate',
        'admin-bar',      // 管理バー
    );
    
    // 除外リストに含まれる場合はそのまま返す
    if ( in_array( $handle, $exclude_handles ) ) {
        return $tag;
    }
    
    // 既にdefer属性がある場合はスキップ
    if ( strpos( $tag, 'defer' ) !== false ) {
        return $tag;
    }
    
    // defer属性を追加
    return str_replace( ' src', ' defer src', $tag );
}
add_filter( 'script_loader_tag', 'add_defer_to_all_scripts', 10, 2 );

async属性を使った非同期読み込み

async属性は、ダウンロード完了後すぐに実行されるため、実行順序が保証されない独立したスクリプトに適しています。

HTMLの解析を止めずにダウンロードできますが、実行時には解析が一時停止します。

実行順序が保証されないため、他のスクリプトに依存しない独立したスクリプト（Google Analytics、Facebook Pixel、Twitter Widget等）に適しています。

functions.phpで特定のスクリプトにasync属性を追加できます。

// 特定のスクリプトにasync属性を追加
function add_async_to_scripts( $tag, $handle ) {
    // async属性を追加するスクリプトのリスト
    $async_handles = array(
        'google-analytics',
        'google-adsense',
        'facebook-pixel',
        'twitter-widget',
    );
    
    // リストに含まれる場合はasync属性を追加
    if ( in_array( $handle, $async_handles ) ) {
        return str_replace( ' src', ' async src', $tag );
    }
    
    return $tag;
}
add_filter( 'script_loader_tag', 'add_async_to_scripts', 10, 2 );

deferは実行順序が保証されHTML解析後に実行されるため、ほとんどのケースではdeferの方が推奨されます。

asyncは計測ツールやSNSウィジェットなど、他のコードと独立して動作するスクリプト専用です。

参考記事：JavaScriptの最適化

サードパーティスクリプトの管理

Google Analyticsなどのタグは50〜70KBと非常に重く、ファーストビューの表示を大幅に遅延させます。

functions.phpでwindow.addEventListener('load')を使用し、ページ読み込み完了後に動的にスクリプトを挿入することで遅延読み込みが可能です。

GA4の遅延読み込みコード

function defer_google_analytics() {
    ?>
    <script>
    window.addEventListener('load', function() {
        var gaScript = document.createElement('script');
        gaScript.async = true;
        gaScript.src = 'https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX';
        document.head.appendChild(gaScript);
        
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());
        gtag('config', 'G-XXXXXXXXXX');
    });
    </script>
    <?php
}
add_action( 'wp_head', 'defer_google_analytics', 30 );

GA4は約20KB、Adsenseは約30〜50KBのスクリプトをバックグラウンドで読み込むため、初期表示が1〜2秒短縮されます。

計測データやコンバージョン追跡には影響せず、PageSpeed InsightsのFCPとLCPが大幅に改善します。

サードパーティスクリプトの中で最も効果が高い最適化手法です。

特にYouTube埋め込み、Twitter/Facebookウィジェット、Google Mapsは重いため、クリック時に初めて読み込む方式が効果的です。

YouTubeのfacade実装

// YouTube埋め込みを軽量なサムネイルで代替
function youtube_facade_script() {
    ?>
    <style>
    .youtube-facade {
        position: relative;
        padding-bottom: 56.25%;
        background: #000;
        cursor: pointer;
    }
    .youtube-facade img {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }
    .youtube-facade .play-button {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 68px;
        height: 48px;
        background: red;
        border-radius: 12px;
    }
    .youtube-facade .play-button:before {
        content: "";
        border-style: solid;
        border-width: 11px 0 11px 19px;
        border-color: transparent transparent transparent #fff;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-40%, -50%);
    }
    </style>
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        document.querySelectorAll('.youtube-facade').forEach(function(el) {
            el.addEventListener('click', function() {
                var videoId = this.dataset.videoId;
                var iframe = document.createElement('iframe');
                iframe.src = 'https://www.youtube.com/embed/' + videoId + '?autoplay=1';
                iframe.width = '560';
                iframe.height = '315';
                iframe.allow = 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture';
                iframe.allowFullscreen = true;
                this.innerHTML = '';
                this.appendChild(iframe);
            });
        });
    });
    </script>
    <?php
}
add_action( 'wp_footer', 'youtube_facade_script' );

HTML使用例

<div class="youtube-facade" data-video-id="VIDEO_ID">
    <img src="https://img.youtube.com/vi/VIDEO_ID/maxresdefault.jpg" alt="動画サムネイル">
    <div class="play-button"></div>
</div>

SNSウィジェットの遅延読み込み

// Twitter/Facebookウィジェットを遅延読み込み
function defer_social_widgets() {
    ?>
    <script>
    window.addEventListener('load', function() {
        // Twitterウィジェット
        var twitterScript = document.createElement('script');
        twitterScript.async = true;
        twitterScript.src = 'https://platform.twitter.com/widgets.js';
        document.body.appendChild(twitterScript);
        
        // Facebookウィジェット
        var fbScript = document.createElement('script');
        fbScript.async = true;
        fbScript.crossOrigin = 'anonymous';
        fbScript.src = 'https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v12.0';
        document.body.appendChild(fbScript);
    });
    </script>
    <?php
}
add_action( 'wp_footer', 'defer_social_widgets', 100 );

PageSpeed Insightsの「サードパーティコードの影響を抑制」警告を解消でき、初期表示が2〜3秒短縮されます。

高速化④：WordPressの不要なJavaScriptの削除

WordPressは、テーマやプラグインによって多数のJavaScriptファイルを自動的に読み込みます。

しかし、その多くは実際には使用していない不要なスクリプトです。

これらの不要なJavaScriptは、ページの表示速度を大幅に低下させる原因となります。

jQuery Migrateの削除

jQuery Migrateは、古いバージョンのjQueryで書かれたコードの互換性を保つためのライブラリです。最新のテーマやプラグインを使用している場合は不要です。

// jQuery Migrateを削除
function remove_jquery_migrate( $scripts ) {
    if ( ! is_admin() && isset( $scripts->registered['jquery'] ) ) {
        $script = $scripts->registered['jquery'];
        
        // jQuery Migrateへの依存を削除
        if ( $script->deps ) {
            $script->deps = array_diff( $script->deps, array( 'jquery-migrate' ) );
        }
    }
}
add_action( 'wp_default_scripts', 'remove_jquery_migrate' );

絵文字関連スクリプトの削除

絵文字を使用していない、またはシステム絵文字で十分な場合は削除できます。

// 絵文字関連のスクリプトとスタイルを完全削除
function disable_emoji_scripts() {
    // フロントエンド
    remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
    remove_action( 'wp_print_styles', 'print_emoji_styles' );
    
    // 管理画面
    remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
    remove_action( 'admin_print_styles', 'print_emoji_styles' );
    
    // RSSフィード
    remove_filter( 'the_content_feed', 'wp_staticize_emoji' );
    remove_filter( 'comment_text_rss', 'wp_staticize_emoji' );
    
    // メール
    remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' );
    
    // TinyMCE
    add_filter( 'tiny_mce_plugins', 'disable_emoji_tinymce' );
    add_filter( 'wp_resource_hints', 'disable_emoji_dns_prefetch', 10, 2 );
    
    // SVG絵文字のURL無効化
    add_filter( 'emoji_svg_url', '__return_false' );
}
add_action( 'init', 'disable_emoji_scripts' );

// TinyMCEから絵文字プラグインを削除
function disable_emoji_tinymce( $plugins ) {
    if ( is_array( $plugins ) ) {
        return array_diff( $plugins, array( 'wpemoji' ) );
    }
    return array();
}

// DNS Prefetchから絵文字CDNを削除
function disable_emoji_dns_prefetch( $urls, $relation_type ) {
    if ( 'dns-prefetch' === $relation_type ) {
        $emoji_svg_url = apply_filters( 'emoji_svg_url', 'https://s.w.org/images/core/emoji/2/svg/' );
        $urls = array_diff( $urls, array( $emoji_svg_url ) );
    }
    return $urls;
}

埋め込みスクリプト（wp-embed）の削除

WordPress投稿の埋め込み機能を使用していない場合は削除できます。

// 埋め込みスクリプト（wp-embed.js）を削除
function remove_wp_embed_script() {
    if ( ! is_admin() ) {
        wp_deregister_script( 'wp-embed' );
    }
}
add_action( 'wp_enqueue_scripts', 'remove_wp_embed_script', 100 );

// 埋め込み関連のheadタグも削除
function remove_embed_links() {
    remove_action( 'wp_head', 'wp_oembed_add_discovery_links' );
    remove_action( 'wp_head', 'wp_oembed_add_host_js' );
}
add_action( 'init', 'remove_embed_links' );

Contact Form 7のJS削除

問い合わせフォームは特定のページにしか設置していないのに、全ページで読み込まれています。

// Contact Form 7のJSを問い合わせページ以外で削除
function remove_contact_form7_scripts() {
    // 問い合わせページ以外で削除
    if ( ! is_page( array( 'contact', 'お問い合わせ', 'contact-us' ) ) ) {
        wp_dequeue_script( 'contact-form-7' );
        wp_dequeue_script( 'google-recaptcha' ); // reCAPTCHAも削除
    }
}
add_action( 'wp_enqueue_scripts', 'remove_contact_form7_scripts', 100 );

functions.phpでwp_dequeue_script()を使用して削除できます。

主な削除対象は、jQuery Migrate（約10KB）、絵文字検出スクリプト（約7KB）、埋め込みスクリプト（約1.5KB）です。

プラグインのJSは条件分岐で制御し、Contact Form 7は問い合わせページのみ、WooCommerceは商品ページのみ読み込むよう設定します。

ページタイプ別にis_single()やis_archive()で判定し、不要なスクリプトを削除することで、合計50〜150KBの削減が可能です。

PageSpeed InsightsのTBTスコアが大幅に改善されます。

参考：TBTスコアとは？

高速化⑤：WordPressのサーバーを最適化させる方法

サーバー最適化は、WordPress高速化の基盤となる重要な施策です。PHPバージョンを最新（8.3推奨）にすることで処理速度が最大3.8倍向上し、.htaccessでGzip圧縮とブラウザキャッシュを設定すれば転送量を60〜80%削減できます。

さらにデータベースの最適化やHTTP/2の有効化により、サーバー応答時間を大幅に短縮。

下記で具体的に解説していきます。

参考記事：サーバーの速度改善方法

PHPバージョンの最適化

PHPバージョンは、WordPressの実行速度に直結する最も重要な要素の一つです。

古いPHPバージョンを使い続けていると、最新版と比較して処理速度が2〜3倍遅くなります。

PHPバージョンを最新に更新するだけで、プラグインやコードを一切変更せずにサイト全体が高速化されます。

特にPHP 7.0以降は大幅なパフォーマンス改善が行われており、PHP 8.0以降ではJIT（Just-In-Time）コンパイラの導入によりさらに高速化されています。

レンタルサーバーの管理画面から簡単に変更でき、無料で実施できる最もコストパフォーマンスの高い高速化施策です。

各サーバーの管理画面から変更を行ってみましょう。

ただし、古いテーマやプラグインは最新PHPで動作しない場合があるため、事前の互換性確認とテストが必須です。

WordPressダッシュボードでphpバージョンを確認する方法

1. WordPressダッシュボードにログイン
2. 「ツール」→「サイトヘルス」をクリック
3. 「情報」タブをクリック
4. 「サーバー」セクションを展開
5. 「PHPバージョン」を確認

.htaccessによる高速化

.htaccessはApacheサーバーの設定ファイルで、サーバー全体の設定を変更せずにディレクトリ単位で動作を制御できます。

WordPressの高速化では、Gzip圧縮によるファイルサイズ削減、ブラウザキャッシュの有効化による再訪問時の読み込み高速化、KeepAlive設定による接続効率化などが可能です。

適切に設定すれば、プラグインなしで読み込み速度を30〜50%改善できます。

ただし、記述ミスするとサイトが表示されなくなるため、必ずバックアップを取ってから編集し、変更後は動作確認を行いましょう。

.htaccessファイルの編集

以下のコードを.htaccessファイルに追加します。既存の内容（# BEGIN WordPressなど）は削除せず、その上か下に追加してください。

# ================================================
# Gzip圧縮の有効化
# ================================================
<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html text/css text/javascript application/javascript application/json image/svg+xml
</IfModule>

# ================================================
# ブラウザキャッシュの有効化
# ================================================
<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType image/jpg "access plus 1 year"
  ExpiresByType image/jpeg "access plus 1 year"
  ExpiresByType image/png "access plus 1 year"
  ExpiresByType image/webp "access plus 1 year"
  ExpiresByType text/css "access plus 1 month"
  ExpiresByType application/javascript "access plus 1 month"
  ExpiresByType text/html "access plus 0 seconds"
</IfModule>

# ================================================
# ETagの削除
# ================================================
<IfModule mod_headers.c>
  Header unset ETag
</IfModule>
FileETag None

HTTP/2・HTTP/3の有効化

HTTP/2は従来のHTTP/1.1と比べて、複数ファイルを1つの接続で同時転送できる「多重化」、ヘッダー情報の圧縮、サーバープッシュ機能により、ページ読み込み速度が30〜50%向上します。

HTTP/3はさらに進化し、UDP通信により接続確立が高速化され、パケットロスにも強くなります。

多くのレンタルサーバーでは管理画面から簡単に有効化でき、エックスサーバーやConoHa WINGなどは標準対応済みです。

SSL証明書が必須条件で、設定後はブラウザが自動的に最適なプロトコルを選択します。

参考記事：HTTP/3とは？HTTP/2との違い

≈

WordPressは記事、コメント、設定などすべてのデータをMySQLデータベースに保存しています。

長期運用すると、リビジョン（記事の変更履歴）、ゴミ箱内の投稿、スパムコメント、一時データなどが蓄積し、データベースが肥大化します。

これによりクエリ（データ取得）の処理時間が増加し、ページ表示速度が低下します。

定期的にデータベースを最適化することで、不要なデータを削除し、テーブル構造を整理でき、クエリ速度が20〜40%向上します。

phpMyAdminやWP-CLIを使えば、プラグインなしで安全に最適化できます。

削除対象データと効果

WordPressのデータベース最適化の手順

1. バックアップを取る
2. リビジョンを削除
3. ゴミ箱・下書きを削除
4. スパムコメントを削除
5. 孤立したメタデータを削除

バックアップを取る

データベース操作は失敗するとサイトが復旧不能になる可能性があるため、必ずバックアップを取得してください。

phpMyAdminでバックアップ

1. レンタルサーバーの管理画面からphpMyAdminを開く
2. 左側のデータベース一覧からWordPressのDBを選択
3. 上部の「エクスポート」タブをクリック
4. 「簡易」を選択して「実行」をクリック
5. .sqlファイルがダウンロードされる

リビジョンを削除

WordPressは記事を保存するたびに履歴を保存します。1記事で50個以上のリビジョンが溜まることもあります。

phpMyAdminで削除

1. phpMyAdminを開く
2. 「SQL」タブをクリック
3. 以下のコードを入力して「実行」

ゴミ箱・下書きを削除

phpMyAdminで削除

-- ゴミ箱の投稿を削除
DELETE FROM wp_posts WHERE post_status = 'trash';

-- 自動下書きを削除
DELETE FROM wp_posts WHERE post_status = 'auto-draft';

スパムコメントを削除

phpMyAdminで削除

-- スパムコメントを削除
DELETE FROM wp_comments WHERE comment_approved = 'spam';

-- ゴミ箱のコメントを削除
DELETE FROM wp_comments WHERE comment_approved = 'trash';

孤立したメタデータを削除

投稿やコメントを削除しても、関連するメタデータ（カスタムフィールドなど）が残ることがあります。

phpMyAdminで削除

-- 孤立した投稿メタデータを削除
DELETE pm FROM wp_postmeta pm
LEFT JOIN wp_posts p ON p.ID = pm.post_id
WHERE p.ID IS NULL;

-- 孤立したコメントメタデータを削除
DELETE cm FROM wp_commentmeta cm
LEFT JOIN wp_comments c ON c.comment_ID = cm.comment_id
WHERE c.comment_ID IS NULL;

-- 孤立したユーザーメタデータを削除
DELETE um FROM wp_usermeta um
LEFT JOIN wp_users u ON u.ID = um.user_id
WHERE u.ID IS NULL;

一時データ（Transient）を削除

WordPressやプラグインが作成する一時キャッシュデータです。期限切れのものは削除できます。

phpMyAdminで削除

-- 期限切れTransientを削除
DELETE FROM wp_options 
WHERE option_name LIKE '%_transient_%' 
AND option_value < UNIX_TIMESTAMP();

データベーステーブルの最適化

削除操作の後、テーブルの断片化を解消します。

phpMyAdminで最適化

1. phpMyAdminを開く
2. WordPressのデータベースを選択
3. すべてのテーブルにチェックを入れる（wp_posts、wp_optionsなど）
4. 下部の「選択したテーブルを」プルダウンから「テーブルを最適化する」を選択
5. 「実行」をクリック

参考記事：データベース最適化で速度改善

高速化⑦：WordPress本体とテーマの最適化

WordPress本体を最新バージョンに保つことで、パフォーマンス改善とセキュリティ強化が実現します。

テーマやウィジェットなどWordPress本体に関わる部分の最適化を紹介します。

高速テーマの選定

テーマ選びはWordPress高速化の最重要ポイントです。

多機能テーマは便利ですが、使わない機能まで読み込むため遅くなります。

軽量テーマは必要最小限のコードで構成され、ページサイズが50〜70%小さくなります。

シンプルなデザインほど高速で、カスタマイズ性も高くなります。

一部のテーマではありますが比較表を作成しました。

選定時はPageSpeed Insightsでデモサイトを計測し、スコア90以上、ファイルサイズ100KB以下を目安にしましょう。

ウィジェットとサイドバーの見直し

ウィジェットは便利ですが、設置しすぎるとHTTPリクエストが増加し、ページ速度が低下します。

特にサイドバーに人気記事、SNSフィード、カレンダー、タグクラウドなどを大量配置すると、データベースクエリやJavaScript実行が重複し、表示速度が20〜30%遅くなります。

使用頻度の低いウィジェットを削除し、必要最小限（3〜5個程度）に絞ることで、HTTPリクエストを10〜15個削減できます。

特にモバイル表示ではサイドバーが下部に移動するため、ファーストビューに影響しないウィジェットは思い切って削除しましょう。

JavaScriptを使うウィジェットは遅延読み込みすることも効果的です。

プラグインの最小化

WordPressプラグインは便利ですが、インストールしすぎるとページ読み込み速度が大幅に低下します。

1つのプラグインにつき平均2〜5個のCSS/JavaScriptファイルが読み込まれ、10個インストールすれば20〜50個のHTTPリクエストが増加します。

特にページビルダー系、SNS連携、アクセス解析プラグインは重く、速度低下の主原因です。

理想は10個以内、高速化を重視するなら5個以内に抑えましょう。

不要なプラグインは削除し、同じ機能を持つプラグインは統合します。

テーマ標準機能やfunctions.phpで代替できるものは、プラグインに頼らず実装することで劇的な高速化が実現できます。

高速化⑧：WordPressのHTML構造を最適化させる方法

HTML構造の最適化は、ブラウザのレンダリング速度を向上させる重要な施策です。

不要なHTMLコメントやインライン属性、divの多重ネストを削減し、シンプルな構造にすることで、DOMサイズが縮小されます。

セマンティックHTML（header、nav、article、aside）を正しく使い、idやclass属性を整理することで、CSSセレクタの効率も向上します。

参考：DOMとは

HTMLの軽量化と実装方法

HTMLの軽量化とは、不要な改行・スペース・コメントを削除し、ファイルサイズを圧縮することです。

WordPressが出力するHTMLには、デバッグ用コメントや過剰な空白、未使用のメタタグが含まれており、これらを削除すれば10〜20%の軽量化が可能です。

functions.phpにコードを追加するだけで、HTML圧縮、WordPressバージョン情報の削除、RSSフィード無効化などが実現できます。

特にHTMLコメント削除だけでも数KB削減でき、モバイル通信では体感速度が向上します。

プラグイン不要のため、サーバー負荷も増えず安全に実装できます。

HTML軽量化の手順

ステップ1：functions.phpを開く

1. FTPソフトまたはレンタルサーバーのファイルマネージャーでアクセス
2. /wp-content/themes/使用中のテーマ名/functions.phpを開く
3. 必ずバックアップを取ってから編集

ステップ2：HTML圧縮コードを追加

以下のコードをfunctions.phpの最後に追加します。

// ==========================================
// HTMLの軽量化・最適化
// ==========================================

// HTML出力を圧縮（改行・スペース削除）
function compress_html_output($buffer) {
    // HTML圧縮処理
    $buffer = preg_replace('/<!--(?!\s*(?:\[if [^\]]+]|<!|>))(?:(?!-->).)*-->/s', '', $buffer); // HTMLコメント削除
    $buffer = preg_replace('/\s+/', ' ', $buffer); // 連続するスペースを1つに
    $buffer = preg_replace('/>\s+</', '><', $buffer); // タグ間の改行削除
    $buffer = trim($buffer); // 前後の空白削除
    
    return $buffer;
}

// 圧縮を有効化
function start_html_compression() {
    ob_start('compress_html_output');
}
add_action('template_redirect', 'start_html_compression', 0);

ステップ3：不要なWordPress標準機能を削除

以下のコードも追加して、さらに軽量化します。

// ==========================================
// 不要な機能の削除
// ==========================================

// WordPressバージョン情報を削除（セキュリティ向上も）
remove_action('wp_head', 'wp_generator');

// Windows Live Writerメタタグを削除
remove_action('wp_head', 'wlwmanifest_link');

// RSDリンクを削除
remove_action('wp_head', 'rsd_link');

// 短縮URLを削除
remove_action('wp_head', 'wp_shortlink_wp_head');

// 前後記事のリンクを削除（必要な場合はコメントアウト）
remove_action('wp_head', 'adjacent_posts_rel_link_wp_head');

// REST APIのリンクを削除（使わない場合）
remove_action('wp_head', 'rest_output_link_wp_head');
remove_action('wp_head', 'wp_oembed_add_discovery_links');

// DNS Prefetchを削除（必要なものだけ後で追加）
function remove_dns_prefetch($hints, $relation_type) {
    if ('dns-prefetch' === $relation_type) {
        return array_diff(wp_dependencies_unique_hosts(), $hints);
    }
    return $hints;
}
add_filter('wp_resource_hints', 'remove_dns_prefetch', 10, 2);

ステップ4：不要なインライン属性を削除

// ==========================================
// 不要な属性の削除
// ==========================================

// type属性を削除（HTML5では不要）
add_filter('style_loader_tag', 'remove_type_attr', 10, 2);
add_filter('script_loader_tag', 'remove_type_attr', 10, 2);

function remove_type_attr($tag, $handle) {
    return preg_replace("/type=['\"]text\/(javascript|css)['\"]/", '', $tag);
}

// 画像のsrcset属性を削除（必要な場合はコメントアウト）
add_filter('max_srcset_image_width', '__return_false');
add_filter('wp_calculate_image_srcset', '__return_false');

ステップ5：head内のクリーンアップ

// ==========================================
// head内の最適化
// ==========================================

// 絵文字関連スクリプトを削除
remove_action('wp_head', 'print_emoji_detection_script', 7);
remove_action('wp_print_styles', 'print_emoji_styles');
remove_action('admin_print_scripts', 'print_emoji_detection_script');
remove_action('admin_print_styles', 'print_emoji_styles');

// Embed機能を削除
function disable_embeds_code_init() {
    remove_action('rest_api_init', 'wp_oembed_register_route');
    add_filter('embed_oembed_discover', '__return_false');
    remove_filter('oembed_dataparse', 'wp_filter_oembed_result', 10);
    remove_action('wp_head', 'wp_oembed_add_discovery_links');
    remove_action('wp_head', 'wp_oembed_add_host_js');
}
add_action('init', 'disable_embeds_code_init', 9999);

// jQuery Migrateを削除
add_filter('wp_default_scripts', function($scripts) {
    if (!is_admin() && isset($scripts->registered['jquery'])) {
        $script = $scripts->registered['jquery'];
        if ($script->deps) {
            $script->deps = array_diff($script->deps, ['jquery-migrate']);
        }
    }
});

これだけで約45KBの削減とHTTPリクエスト4個減少を実現できます。

エラーが出た場合はバックアップから復元し、一つずつコードを追加して原因を特定しましょう。

構造化データの最適化

構造化データ（Schema.org形式のJSON-LD）は、Googleが記事内容を正確に理解するための重要な情報です。

記事タイプ（Article、BlogPosting）、著者情報、公開日、画像URLなどを適切に設定すると、検索結果にリッチスニペット（評価星、画像サムネイル）が表示され、クリック率が20〜30%向上します。

プラグインなしで実装する場合、functions.phpでJSON-LDを出力するコードを追加します。

必須項目を正しく記述し、Googleリッチリザルトテストで検証することが重要です。

高速化⑨：CDNの導入

CDN（Content Delivery Network）は、世界中に配置されたサーバーネットワークから、ユーザーに最も近いサーバーがコンテンツを配信する仕組みです。

通常、日本のサーバーから海外ユーザーがアクセスすると遅延が発生しますが、CDNを使えば各地域のサーバーから高速配信されます。

画像、CSS、JavaScriptなどの静的ファイルをCDN経由で配信することで、サーバー負荷が軽減され、ページ表示速度が30〜50%向上します。

Cloudflareなら無料で利用でき、プラグインなしでも設定可能です。SSL対応、DDoS攻撃防御、自動キャッシュなどの機能も含まれ、セキュリティと速度を同時に改善できます。

参考記事：CDNとは

wordpressの高速化まとめ

ここまで、プラグインに頼らずWordPressを高速化する方法を徹底解説してきました。

画像最適化で30〜70%のファイルサイズ削減、CSS/JavaScript最適化でレンダリング高速化、サーバー設定（PHP 8.3、.htaccess、データベース最適化）で処理速度を劇的に向上できます。

これらの施策を組み合わせれば、PageSpeed Insightsで90点以上のスコアも十分達成可能です。

最初は難しく感じるかもしれませんが、一つずつ着実に実装していけば、必ず成果が現れます。

高速なサイトはユーザー体験を向上させ、SEO評価も高まり、コンバージョン率アップにつながります。今日から少しずつ始めて、理想の高速サイトを実現しましょう！