【PC/モバイル】PageSpeed Insightで100点取れた設定（SWELL＋エックスサーバー＋WP Rocket）

Googleの速度計測ツール「PageSpeed Insights」で、モバイル／PC 両方で100点を取ることができました！

このブログではなく、運営しているアフィリエイトサイトでの点数です。

過去にも高速化は色々と試していて、PCは100点近く取ったことがありますが、モバイルの100点ははじめてです。（モバイルで100点が取れること自体驚きました。。。）

SEO的にもサイトの高速化は効果があります。表示が遅いとユーザーもいらつきますし、それが理由で離脱する＝すぐ離脱されたという履歴が残るのは、マイナス評価に繋がりかねません。

備忘録的に、設定した内容についてメモしていきます。難しい専門知識がなくても、30〜60分ほどで完了します。

ちなみに、以下の環境下での実装となります▼

１．エックスサーバーの高速化設定

まずはサーバーの高速化設定です。エックスサーバーには独自の高速化機能があるので、これをONにしていきます。

Xアクセラレータ：Xアクセラレータ Ver.2
サーバーキャッシュ設定：ON
ブラウザキャッシュ設定：ON

エックスサーバーに限らず、だいたいどのサーバーにも、サーバー側の高速化設定（サーバーやブラウザキャッシュなど）があります。

サーバー速度が遅いとどうにもならないので、「お使いのサーバー名＋高速化設定」などで検索して、推奨設定をしておきましょう。

２．SWELLの高速化設定

運営しているアフィリエイトサイトでは「SWELL」を使っています（だいたい、メインサイトはSWELLで作成しています）。

SWELLにはテーマ側で高速化ができる機能がデフォルトでついています。

せっかくついている機能ですが、後述するプラグイン「WP Rocket」と機能が重複してしまうため、こちらの高速化設定は全て「OFF」にします。

キャッシュ機能はすべてチェックを外します。

内部リンクと外部リンクのキャッシュは、WP Rocketの機能と重複するわけではないので、こちらはチェックを入れています。

ファイルの読み込みは、「SWELLのCSSをインラインで読み込む」だけチェック。

遅延読み込み機能はすべてOFFに。

ページ推移高速化は「使用しない」。

「Font Awesome」を使っていなければ、「読み込まない」を選択。

「機能停止」は「ページ表示時のアニメーションを停止する」にチェックを入れます。

他の項目は特に高速化には関係ないかと思うので、運営者の好みでチェックいれてください。僕はいつも「投稿画像をクリックで拡大表示する機能」は停止しています。

以上でSWELL側の設定は終わりです！

以前はSWELLの高速化機能だけを使っていましたが、うちのサイトの場合、それだけだと良くても70点程度だったので、有料プラグイン「WP Rocket」を導入しました。SWELLの高速化だけで点数が改善されれば、それだけでも良いと思います。

SWELLの高速化機能をONにした上で、WP Rocketのような高速化プラグインを利用すると、機能が重複するせいか逆に点数が下がります。高速化プラグインを利用する場合は、機能が重複しないものを選ぶようにしましょう。

３．WP Rocketの設定

WP Rocket（https://wp-rocket.me/ja/）は有料の高速化プラグインです。年間59＄（1サイトあたり）のサブスクリプションになっています。

WordPressの高速化プラグインは、「Autoptimize」「EWWW Image Optimizer」など、無料で使えるプラグインも色々とあります。

なぜ無料のものがあるのに有料のものを使うかというと、無料のプラグインを組み合わせて色々試行錯誤するより、有料プラグイン一発で良い点数になる方が断然ラクだからです。

「Wordpress 高速化」などで検索すると色々な方法が見つかりますが、自分のサイトには合わなかったり、おすすめとされるプラグインを入れても点数変わらなかったり、自分のサイトに適した方法を見つけるまでに時間がかかります。

運営上のストレスはなるべく減らしたいこともあり、導入すれば一発で高速化が達成できるWP Rocketを、稼ぎ柱のサイトには入れるようにしています。

WP Rocketの設定方法

「Cache」は「Enable caching for mobile devices」のみチェックを入れます。

Cache Lifespanは「24Hours」に設定していますが、高頻度で更新されているサイトであれば、もう少し時間を減らしても良いと思います。

CSS Filesの設定は「Minify CSS files」「Optimize CSS delivery」にチェック。

JavaScript Filesは「Minify JavaScript files」「Load JavaScript deferred」「Delay JavaScript exection」にチェックを入れます。

「Media」は全ての項目にチェック。

「Preload」は「Activate Preloading」と「Enable link preloading」にチェックを入れます。

「Advanced Rules」以下〜「Tools」までの設定はデフォルトのままでOKです。

以上でWP Rocketの設定は終わりです！

ここでの設定は、あくまで僕が100点を取った設定を紹介したものです。お使いのWordpressテーマは、入れている他のプラグインによって、同じ設定をしても表示が崩れることがあります。

設定をしたあとは、PC／モバイルともに不具合がないかを必ず確認。不具合が起きた場合は、主に「File Optimization」に入れているチェックをひとつずつ外し、どの項目が影響しているのかを特定、そのチェックは外すようにしてください。

PageSpeed Insightで携帯/デスクトップ両方で100点を取った設定、のまとめ

１．エックスサーバーの高速化設定を利用する
２．SWELLの高速化設定を切る（３と重複するため）
３．WP Rocketで高速化設定を行う

という流れで実装した結果、モバイル／PCともに100点を出すことができました。

高速化の方法は色々とありますが、WP Rocketを入れて設定すれば、だいたい90点くらいはいけるのではと思います。

高速化でストレスを抱えている方はぜひご参考ください。

阪口ユウキ

あわせて読みたい

僕が14年実践しているアフィリエイトサイト作成の流れ こんにちは、パワートラベラーの阪口（@powertraveler）です。SEOによるアフィリエイトサイト運営を14年（2011年〜）、アフィリエイトの手法を伝えるオンラインスクール...