簡単！ワードプレスとXサーバーで高速化施策※XサーバーでなくてもOK

B! ブックマーク

SEOにおいてページの表示速度は非常に重要な要素の一つです。Googleも公式に「ページの読み込み速度」をランキングシグナルとして採用していると発表しており、表示が遅いサイトは検索順位に悪影響が出る可能性があります。

さらに、速度が遅いサイトはユーザーの離脱率も高くなりやすく、結果としてサイトのPV（ページビュー）やCV（コンバージョン）が落ちる原因にもなります。

ここでは筆者の環境（2024新・Xサーバー）でワードプレスの速度改善を行っていき、最終的にPageSpeed Insights（ページスピードインサイト）でスコア90超えを狙うのを最終目標にし、そこに至るまでの内容を公開していきたいと思います。

Xサーバーメインの施策になりますが、他サーバでも機能やプラグインで賄える部分もあると思いますので、お試しください。

結果から言いますと、スマホのスコアは52→60→77へ。PCのスコアは74→91→88へとスコアが改善されました。
今回はその施策内容をお伝えしたいと思います。

事の始まり

事の始まりは些細なことでした。
Xサーバーが2024年に新サーバーになり、従来比約3倍のスピードアップになったんだとか。しかも従来ユーザーは無料で新サーバーにアップグレードできると聞きまして、早速新サーバーへ移行しました。

それでPageSpeed Insightでワクワクしながら計測してみた結果がこれ↓

んん…これは…以前と変わってない⤵︎ ⤵︎ ⤵︎
期待外れの数値でした。ちょっと期待が多すぎたのでショックが大きかったんですね。
ガジェットブログを運営する者としてもう少しスピードの評価が欲しい…
それで他に施策の施しようがないかと思い、調べて行き着いたのが今回の施策なわけです。

具体的な施策内容

具体的にどう施策をすればいいのか、各サイトを参照にまとめあげ、以下にリストアップしてみました。

1. 不要プラグインの削除
2. キャッシュの最適化（サーバー・プラグイン）
3. 画像圧縮と最適化
4. HTML/CSS/JSのコード最適化
5. 画像・動画の遅延読み込み（Lazy Load）
6. Xサーバーで「XPageSpeed」機能をONにする
7. Xサーバーで「Xアクセラレータ」機能をONにする
8. サーバーでPHPのバージョンを最新にする
9. サーバー＆データベースの見直し
10. 事前読み込み（プリロード）の設定
11. フォントを軽くする

2〜5まではXサーバーの機能の「XPageSpeed」で賄えてしまうため、6の項目の同機能で施策を行います。
Xサーバー以外の方は後ほどプラグインをご紹介します。

以上を1つずつ実践していこうと思います。
施策内容をなるべく共有出来るよう、努めて参りますので宜しくお願い致しますね。

その1.不要プラグインの整理

過多なプラグインによって読み込みに時間が掛かったり、競合が発生して処理が倍かかり、サイトススピードが重くなることは原因の一つとも言えます。

まずは長らく使ってないプラグインを「削除」します。「無効化」ではなく「削除」が一番効果的です。
なぜならばプラグインは無効化しても設定ファイルなどは残ったままなので、それが処理に影響するようなんですね。なので削除です。また、用途が被ったプラグインもひとつに絞って削除しましょう。どうしても消したくて時々使うんだよなぁ的なプラグインは生かしておいても良いと思います。

プラグインによっては削除すると表示がおかしくなる場合もあるかもしれないので、レンタルサーバーのバックアップ機能を使って念の為サイトデータをバックアップとっておきましょう。

その2.「XPageSpeed」を設定する

Xサーバー独自の高速化機能である「XPageSpeed」を設定します。
Xサーバーのサーバーパネルにログインし「XpageSpeed」のリンクをクリックします。
そして全てのチェックをONにします。※Javascriptの遅延読み込みだけは環境によっては画面崩れが発生する可能性があるので、ONにして具合が悪いようならばOFFにしましょう。

以上、キャッシュプラグインで出来ることがXサーバーの「XPageSpeed」機能でも出来るので、プラグインインストールによる誤動作の心配も少ないです。

その3.「Xアクセラレータ」の機能もONにしておく

その4.サーバーでPHPのバージョンを最新にする

PHPは新しくなるたびに速度の改善が見られるので、定期的にチェックして常に最新バージョンの一つ前にしておくのをオススメします。この機能はXサーバー以外のレンタルサーバーにもあると思いますのでご確認ください。※最新版にすると稀に画面崩れを起こすこともあるので、様子を見ながら切り替えてくださいね。筆者は最新の8.3.10でチャレンジしています笑

途中結果

これで一度どれくらい速くなったか確認してみましょう。

PCでの結果は顕著にアップしました！74→91へスコアアップ。これはもう限界数値ではないでしょうか。これだけの施策で90超えはすごいです。
スマホはパフォーマンスが52→60まで上昇しました。地味ですが、確実に数値アップしています。今後の施策でどこまでスコアが伸びるでしょうか。

あ、ちなみにPageSpeed Insights（ページスピードインサイト）で速度を測定する際は、ブラウザのキャッシュを削除してから行ってくださいね。できればサーバキャッシュも削除できると完璧です。

その5.サーバー＆データベースの見直し

ここではサーバー機能をデータベース更に見直し、より速度の向上化を狙っていきたいと思います。

PHPメモリリミットを増やす

どうしてこれが重要？
プラグインが多い、あるいは大きな画像や多機能テーマを使っている場合、メモリ不足でエラーや速度低下を引き起こすことがあります。メモリリミットを十分確保することで、WordPressが安定して動作しやすくなります。

php_value memory_limit 256M

データベース（MySQL）のお掃除

どうしてこれが重要？
WordPressは投稿やコメント、オプション設定などをMySQLデータベースに保存しています。記事のリビジョンやスパムコメント、古い一時データが溜まるとDBが肥大化し、速度が落ちる原因になるのだそうです。

ワードプレスの「W3 Total Cache」をインストールする

これはサーバによるのですが、アクセス数が多いサイトなどはRedisやMemcachedなどのオブジェクトキャッシュを使うとさらなる高速化が可能です。
あまり聞き慣れない機能ですが、興味のあるかたは調べてみてください。サーバが対応していることが条件で、サーバの上位プランだと対応していることもあります。

また「W3 Total Cache」と言ったキャッシュプラグインをワードプレスに入れると、XPageSpeedでは補完しきれなかったキャッシュ機能を使うことができ、相乗効果でスピードアップが狙えます。

以下に私の同プラグインの設定を載せておきますので、ご参考ください。

・ページキャッシュ／有効化ON
・ページキャッシュ方法／ディスク：拡張

圧縮／有効化OFF

「ページキャッシュ」項目の「Advanced Settings」タブ内の設定。

「圧縮」項目内の「Advanced Settings」タブ内の設定。全てのチェックを外す。

これで設定OKです。
PS/その後、iPhoneで表示のエラーが出たため、プラグインを停止しました。
※XPageSpeedをOFFにしても駄目でした(泣)
残りの施策で結果が出れば良いのですが…

その6.事前読み込み (プリロード) の設定

事前読み込み (プリロード) の設定は、ユーザーの次の行動を予測してあらかじめリソースを読み込んでおくことで、体感速度を大幅に向上させるテクニックです。
たとえば、次のページに移動するときに必要となるCSSや、JavaScriptなどを事前に読み込んでおくことで、ユーザーがページを遷移した瞬間に表示が速くなります。

事前読み込み（プリロード）のコード

以下のコードをお使いの子テーマのfunctions.phpにコードを追加してください。
下記のコードはCSSとJSファイルを各2つずつ事前に読み込むように設定しています。CSSとJSのファイル名、及びパスはご自身のものに書き換えてください。

function add_preload_links() {
    // プリロードするCSSファイル
    echo '<link rel="preload" href="' . get_template_directory_uri() . '/css/customizer-style.min.css" as="style" type="text/css" crossorigin="anonymous">' . "\n";
    echo '<link rel="preload" href="' . get_template_directory_uri() . '/css/slick.min.css" as="style" type="text/css" crossorigin="anonymous">' . "\n";

    // プリロードするJSファイル
    echo '<link rel="preload" href="' . get_template_directory_uri() . '/js/slick.min.js" as="script" type="text/javascript" crossorigin="anonymous">' . "\n";
    echo '<link rel="preload" href="' . get_template_directory_uri() . '/js/lozad.min.js" as="script" type="text/javascript" crossorigin="anonymous">' . "\n";
}
add_action('wp_head', 'add_preload_links');

プリロードしたファイルを使用するコード

プリロードされたCSSファイルやJSファイルは、通常どおりキューに追加してWordPressで読み込む必要があります。

以下はのコードを同じく子テーマのfunctions.phpに記述してください。※ファイル名とパスはご自身のものにしてくださいね。

function enqueue_theme_scripts() {
    // CSSファイルを読み込む
    wp_enqueue_style('customizer-style', get_template_directory_uri() . '/css/customizer-style.min.css', array(), '1.0.0', 'all');
    wp_enqueue_style('slick-style', get_template_directory_uri() . '/css/slick.min.css', array(), '1.0.0', 'all');

    // JSファイルを読み込む
    wp_enqueue_script('slick-script', get_template_directory_uri() . '/js/slick.min.js', array('jquery'), '1.0.0', true);
    wp_enqueue_script('lozad-script', get_template_directory_uri() . '/js/lozad.min.js', array(), '1.0.0', true);
}
add_action('wp_enqueue_scripts', 'enqueue_theme_scripts');

これでファイルの事前読み込み（プリロード）の完成です。

それでは最後の施策に移りたいと思います。

フォントを軽くする

フォントですが、意外と読み込みに時間が掛かるらしく、軽量化の施策においては必要不可欠とされています。しかしXサーバーユーザーであれば「TypeSquare」というプラグインで提供されるWebフォントは必要な文字ファイルだけを読み込んで表示させる仕組みとなっている為、素早く表示させることが可能です。なので私はこの恩恵を既に受けているのですね。実際に広告デザインで使い慣れた「モリサワ・新ゴシック」というフォントを使っています。

なので私はこの項目は何もすることがないのです。しかし読者の方々は同じ環境とはいかないでしょうから、できる限りの施策を以下に示します。

最近のモダンブラウザであれば、woff2フォントを使用するのが最適解の様でして、筆者もTypeSquareとどちらが速いのか気になっています。

以下、フォントを使用するためのCSSになります。

@font-face {
    font-family: 'MyFont';
    src: url('/fonts/font.woff2') format('woff2'), 
         url('/fonts/font.woff') format('woff');
    font-display: swap;
}

古いブラウザにも配慮して、念の為woff2の古い書体である「woff」も使用フォントに加えています。是非使ってみてくださいね。

woff2フォントとは

WOFF2 は、Web Open Font Format (WOFF) をさらに圧縮したフォント ファイル形式です。これは、Web フォントのファイル サイズを小さくする方法として開発されたもので、読み込みを高速化し、帯域幅の使用を抑えます。 WOFF2 は、Brotli と呼ばれる圧縮アルゴリズムを使用してフォント データを圧縮します。これにより、同等の WOFF フォントよりもファイル サイズが大幅に小さくなる可能性があります。この形式は、Chrome、Firefox、Safari、Opera、Edge (バージョン 14 以降) など、ほとんどの最新の Web ブラウザーでサポートされています。

引用：FILEFORMAT

それではこれで高速化の施策は以上になります。
どれだけ速くなったか、結果を見てみたいと思います。

最終結果

ワクワク・ドキドキしますね。でも過度な期待は禁物です。

おおお！スマホのスコアが大幅に伸びていますね！元が52で現在が77なのでこれには感激です。PCは91→88に落ちましたが、これは誤差の範囲でしょうか。かなり高いスコアを維持しているので、PCはこれでお役目御免にしましょう。

スマホですが、スコア90を達成できなかったのは残念ですが、それでもまともなレベルの速度に成り、施策は一定の効果があったと思います。本当はLargest Contentful Paint (LCP)が3秒以下が理想なのですが、これ以上を追求しようとするならCDNの導入などが検討されるかも知れませんね。。皆さんのスコアも良い結果が出ていると嬉しいです。

まとめ

今回サイトスピードの高速化を行ってみたのですが、今まで大掛かりな施策は行わず、小手先でやっていたのですが、今回みたいにちゃんと結果が出たのはとても嬉しいです。

でもまだ高みは目指せそうなので、今後はCDNの導入も視野に入れてトライしてみたいと思います。（うちくらいのサイトでCDNが効果あるか疑問ですが…）その時はまた更新しますね。
ページスピードインサイトで目指せ90スコア超え！

B! ブックマーク

TOMO広告ディレクター・デザイナー

広告デザイン歴20年、ガジェット好きのトランスジェンダーです。 2021年2月より「ガジェットマニアZ」を運営開始し、ガジェットに関する情報をブログで発信しています。他にもファッション・キャンプ・登山・ダーツ・料理（調理師歴8年半）・オーディオ・ホームシアター・文房具・ゲーム好きです。

詳細なプロフィールはこちら
メール（記事執筆依頼など）はこちら
著者の他の記事を見る