【PC&携帯】PageSpeed Insightで100点取れた設定(SWELL+エックスサーバー+WP Rocket)

PageSpeed Insightでモバイル/PC共に100点満点取れた設定をシェア【SWELL+エックスサーバー+WP Rocketの高速化設定】
YUKI

こんにちは、パワートラベラーの阪口です(@powertraveler)。2011年から専業アフィリエイターとしてWEBサイト運営に取り組んでいます。

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

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

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

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

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

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

実装環境

サーバー:エックスサーバー
WordPress:SWELL
高速化プラグイン:WPRocket

目次

1.エックスサーバーの高速化設定

Screenshot

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

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

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

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

2.SWELLの高速化設定

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3.WP Rocketの設定

WP Rockethttps://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点を取った設定、のまとめ

1.エックスサーバーの高速化設定を利用する
2.SWELLの高速化設定を切る(3と重複するため)
3.WP Rocketで高速化設定を行う

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

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

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

阪口ユウキ

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

YUKI

記事を読んでいただきありがとうございます!

「世界を自由に飛び回る力をつける」パワートラベラーの理念に共感いただけましたら、ぜひ下記のコンテンツもご覧ください。

無料メールマガジン「POWER TRAVELER通信」

「世界を自由に飛び回る力をつける」をテーマに、企業や国に縛られない働き方やライフスタイルを考えるメールマガジンです。僕が実践していることを中心に、パワートラベラー仲間の事例も紹介しています。

WEB資産構築マニュアル

僕が起業当初から続けている「アフィリエイト広告により収益を上げるWEBサイト」の作り方をまとめたオンラインマニュアルです。WEB上の資産となるサイトをつくる、という想いから「WEB資産」と呼んでいます。

PageSpeed Insightでモバイル/PC共に100点満点取れた設定をシェア【SWELL+エックスサーバー+WP Rocketの高速化設定】

この記事が気に入ったら
フォローしてね!

目次