WordPressを高速化してPageSpeed Insightsで100点取った方法

今回、目標である「PageSpeed Insights」でスコア100点を取ることに成功しました。高速化は去年くらいから本格的に手を出し始めて、約1年位試行錯誤の上、このような結果を得ることができました。

「GoogleAdSense」を使用してるページは流石に100点は取れませんが、90台をキープできています。

サイトスピード計測サイト「GTmetrix」ではこんな感じ。

「Pingdom Website Speed Test」はこんな感じ。

僕のブログは画像を使いまくった記事が多めですが、1秒かからずサイトが読み込まれています。

使用プラグインは9個です。

素人が1から初めた高速化

僕は別にITの仕事をしてるとか知識があるとかではなく、まったくの素人ですが、いろいろ試行錯誤してこのような結果を得ることができました。

最初はWordPress高速化代行みたいな人にも依頼したことがあったのですが、思ったような結果が得られず、結局自分で最適化してここまでくることができました。

他人にやってもらうのはすごく楽ですが、自分のメディアなのに何が起きてるかわからないリスクがとても怖かったのを覚えています。

ページ表示速度は、使用テーマ、画像の大きさ、数、種類、プラグイン、サーバーなど色々な要素で変化します。僕の方法でも同じような結果は得られないかもしれません。それはご了承ください。

WordPress高速化でやること

大きく分けてやることはこの4つです。

全て無料でやれればよかったのですが、課金が必要な部分がでてきます。
といっても有料プラグインは使っておらず、サーバーとCDNの料金だけなので月額約20ドル（2,100円程度）くらいです。価格に関しては訪問者の人数によっても変動します。

高速化には海外のサービスを使っている場合が多いです。僕は英語もできないので、Google翻訳を使いました。その程度でも問題ありません。

翻訳に関しては「GoogleChrome」を使用していれば、英語ページ内で右クリックを押して「日本語に翻訳」を選択することでページ内が全て日本語化されます。これで言語の壁は破壊できるはずです。

しかしながら、何の知識もなしに高速化は難しいのでググりながらどんなことが起きてるか何をしてるかを把握しながら実行するといいです。

僕も最初は意味不明、日本語でおｋって感じで渋々調べながら最適化しました。これも後々ためにはなってくるので面倒くさがらず調べることをおすすめします。

高速化は不具合との戦いでもあると思っています。

バックアッププラグインは「UpdraftPlus」がおすすめです。フルバックアップを定期的してくれる便利なプラグインです。怖い人はFTPにアクセスしてファイルを全てPCにコピーしてから始めると何が起きても対応できます。

長い記事となりますので一度全て熟読の上、高速化をはじめて下さい。

※わからないことがありましたらコメントでお知らせ下さい。しかしながら、環境が同じとは限らないため原因の特定まで至らない場合があることをあらかじめご了承下さい。

レンタルサーバーの選定

サーバーは「LiteSpeed」を使用しているホスティングがベストです。
日本国内だと「mixhost」「colorfulbox」なんかが有名ですね。

「LiteSpeed」には無料で使えるプラグイン「LiteSpeed Cache」があり、このプラグインが無料なのに高機能すぎてびっくりします。フルページキャッシュを備えた素晴らしいプラグインなのでサーバーの選択は「LiteSpeedWeb」サーバーがおすすめです。

僕は海外ホスティングの「closte」を利用しています。

となっており、高速化に役立つ仕組みが組み込まれています。
「Google Cloud CDN」を導入してるホスティングなんてここだけじゃないかなー他にもあるのかな。

料金は使った分だけ請求される従量制となっています。
とくに「Google Cloud CDN」は料金が高く、訪問者が多いサイトほど料金が高くなるでしょう。僕は対策として「Google Cloud CDN」は無効化して、別のCDNを導入しています。これはまた後述します。

月額制と従量制どっちがいいのかまだ判断できず検証中です。
フルページキャッシュプラグインやCDNを導入すれば元サーバーへの通信量が抑えられ従量制のほうがお得になると踏んでいます。

「closte」の画面はこんな感じで使った分だけ請求されていきます。

「closte」のレビュー記事はこの方がおすすめ（英語ページなので翻訳してね）

Closte.com Review - The Hidden Gem in WordPress Hosting

wpspeedmatters.com

サーバーに関しては同じ「closte」を使用しなくてもいいと思います。

自分が住んでいる国に専用サーバーがあり、Litespeedを使用していることが条件です。
（国外サーバーだとPing値が上がり高速化しても表示速度が落ちます）

去年までは僕のブログもVPS（仮想専用サーバー）で運営していましたが、知識もない人がやると管理、セキュリティ、勉強に時間が食いつぶされるのでおすすめしません。そもそもVPSを導入する人は毎月100～300万PVくらいある人だと思います。

「LiteSpeed」は他のサーバーと比べて大量トラフィックの処理が素晴らしく発達しているので、そう簡単には落ちないので安心して使用して下さい。

WordPressテーマの選定

高速化にとってWordPressのテーマは非常に重要なことです。

STORK、SANGO、Luxeritas、THE THORなど無料有料あわせて色々なテーマを使用してきましたが、僕がおすすめするのは完全無料の「Cocoon」です。

無駄なアニメーションがなく、無料なのに高機能、頻繁のアップデートが決め手になりました。高速化対応、Gutenberg対応、スキン対応、広告対応などなど無料とは思えないほど優れたテーマです。

有料テーマもいいですが、更新されないとゴミになります。作るだけ作ってあとはもう更新しません→別の新しいテーマだしてるってパターンがありこれをやられると最悪です。

テーマを作ってる作者、更新頻度、更新内容もテーマを選ぶ上では重要な要素になります。

「Cocoon」に関しては常に新しい情報の取り込み、すぐにテーマに反映、フォーラム設置等、とてもユーザーフレンドリーで素晴らしい対応が多いです。作者のわいひらさんには頭が上がりません。

海外テーマだと「GeneratePress」「Astra」「OceanWP」あたりがよいですが、海外のブログデザインって日本と全然違うので国内で運営するなら国産テーマが良いと思います。

WordPressテーマは一度決めてしまうと、別のテーマに移行するのはとても大変な作業になります。ほとんどのテーマは独自のタグを使用しているので、全記事リライト、レイアウト再配置なんて当たり前です。記事数が多くなればなるほど移行が苦行になるのでテーマ選びは慎重に行いましょう。

CDN（コンテンツデリバリーネットワーク）の導入

高速化においてCDN（コンテンツデリバリーネットワーク）の導入は必須だと思ってます。

「CDN」って何かというと記事データ、画像、その他WordPressのデータなどを世界中のサーバーに配置して、どんな場所からでも高速にページを表示させるサービスみたいなものです。

元サーバーにアクセスする機会を減らすことができるの先程の「closte」みたいな従量制のサーバーではサーバー代を節約するのに役立ちます。

データセンターが世界中にある「Cloudflare」なんかが有名ですね。
もちろん導入していきます。

Cloudflareの導入

「Cloudflare」を導入する主な目的は、

これらは登録すれば全て無料で使用することができます。

アカウントを作成して、ドメインを登録、ネームサーバ（DNS）の設定をするだけで使うことができます。「Cloudflare」は以前は英語だけでしたが、日本語にも完全対応したので導入敷居はかなり下がったはず。

「Cloudflare」の導入は高速化の目的もありますが、僕が一番使いたいのはリバースプロキシです。

普通はネームサーバ（DNS）はWordPressを運営しているホスティングのサーバーIPを参照先としています。これを「Cloudflare」のサーバーに設定してあげることでサーバーIPを匿名化し、セキュリティを向上させます。

「Cloudflare」の無料プランでできる高速化は、そこまで期待はできないので、ここは別CDNを使用してさらなる高速化をしていきます。（後述）

「Cloudflare」の導入は下記の記事がわかりやすいです。

無料CDNサービスCloudflareの登録方法。無料で転送量の負荷分散。

nelog.jp

僕の「Cloudflare」の設定は以下の通りです。

プロキシステータスを「プロキシ済み」にすることでIPを匿名化できます。

・キャッシュレベル　スタンダード
・ブラウザキャッシュTTL　既存のヘッダーを優先

ページルールの設定は画像のようにしないと管理画面までキャッシュされ、ブログにアクセスした人に見えちゃいけないページもキャッシュする可能性があるので注意が必要です。

こんな感じで設定して下さい。これで管理画面とプレビュー画面はキャッシュが無効になります。一番最後のルールでページをキャッシュするように設定しています。

※画像にない設定項目はデフォルト設定で問題ありません。

BunnyCDNの導入

「Cloudflare」は高速化、セキュリティ面を補ってくれますが、無料プランだとそこまでで高速化は見込めません。

「Cloudflare」を有料プランに移行すれば高速化の幅が広がりますが、月額料金でお高めです。

そのため、比較的料金が安い「BunnyCDN」の導入をおすすめします。
低価格で画像の圧縮、WebP配信、CSS、JSの配信など様々な面を補ってくれます。

2つのCDNを使うのには賛否両論ありますが、配信されるデータセンターが増え、元サーバーへの通信量を軽減してくれるので僕はどんどん使うべきだと考えています。

「BunnyCDN」はキャッシュヒット率が高く、訪問者に高確率で高速化したページを提供します。

「BunnyCDN」の画像最適化は「Bunny Optimizer」と呼ばれる月額9ドルの機能を使います。これはCDN料金とはまた別に請求されます。

しかしこれが便利で、投稿者は画像をそのままブログに上げるだけであとは「BunnyCDN」が自動で画像を圧縮してWebP形式で配信してくれる機能です。画像のリサイズやウォーターマーク（透かし挿入）なんかも可能になっています。

プラグインでやればいいのでは？と思う方も多いはずです。僕がそうでした。使っていたプラグインは「ShortPixel Image Optimizer」です。

画像を綺麗に圧縮してくれて好きだったのですが、やたら時間がかかる圧縮と管理画面を表示していないと処理できないプロセス、正常にWebP配信ができない場合があったりとなんだかなーと思いながら使っていました。

「ShortPixel Image Optimizer」も有料であり圧縮できる画像数を購入します。それならもう思い切って月額9ドル払って楽に圧縮できる「Bunny Optimizer」を使おうという判断になったわけです。（画像圧縮プラグインという重い存在も削除できる＆圧縮時間の削減）

ガジェットレビューなんかもブログでやりますが、iPhoneで撮影した画像をそのままクラウドにあげて、そのまま圧縮もリサイズもせずアップロードしています。あとは「Bunny Optimizer」におまかせという流れです。

長々とお話しましたが、そんなわけで僕は「BunnyCDN」の導入をおすすめします。この辺はブログの状態やお財布と相談して判断してみて下さい。

「Bunny Optimizer」を利用しない場合は、WebPが配信できる「ShortPixel Image Optimizer」がおすすめです。

「BunnyCDN」の詳しい設定方法は下記のブログが参考になります。（英語ページなので翻訳してね）

BunnyCDN Review, Comparison & Setup Guide for WordPress

wpspeedmatters.com

僕がブログに設定してる状態は下記の通り。
画像がない部分に関してはデフォルトの設定値になります。

・Force SSL　ON

・Cache Expiration Time　Override 1year
・Browser Cache Expiration Time　Override 1year
・Query String Sort　ON
・Disable Cookies　ON

・Add Canonical Headers　ON

これはONにすることでファイル元のURLがどこにあるか検索エンジンに伝えます。SEO的に有効な設定です。

「Minify CSS Files」と「Minify JavaScript Files」はCSSとJSの圧縮設定です。「Cocoon」だと「BunnyCDN」から配信される「style.css」がおかしくなり、レイアウトが崩れるので圧縮は「Cocoon」に内蔵されている高速化の項目で行っています。

「BunnyCDN」は次項の「LiteSpeed Cache」プラグイン設定でまとめて配信設定します。

プラグインの選定・設定

ここまでくれば高速化の土台は完成しました。あとはプラグインで微調整して高速化を仕上げていきましょう。

使用プラグインは9個です。
高速化に役立つプラグインは詳しく解説していますが、SEOやエディタ用に入れてるプラグインはリンクだけ貼っておきます。

プラグインは多くなればなるほど、高速化に影響があります。必要なものだけを厳選して有効化してください。

お問い合わせフォームに関しては、Googleフォームをページに埋め込む方法がプラグインを使用することもないので便利です。

導入→Googleフォームで簡単！WordPressにお問い合わせを設置する方法

各プラグインの設定と枠割

Flying Images

Chromeでサポートされている画像ネイティブ遅延読み込みを可能にするプラグイン。遅延読み込みすることでページ表示速度を高速化します。
また、無料で使えるCDNも実装されています。今回は「BunnyCDN」を使うのでOFFにしています。

「Exclude Keywords」には遅延読み込みしてほしくない画像名を入力して下さい。僕の場合はロゴ画像を指定しています。

CDNは「BunnyCDN」を使うのでチェックを外してOFFにします。

Flying Pages

ユーザーがクリックする前にページをプリロードして、高速でページを表示させるプラグイン。外国産プラグインですが、日本でも有名になってるようで大御所のブログでも使っているのを見かけました。

ページを読み込んだ時に順番にプリロードされていきますが、僕はマウスホバー（リンクの上をマウスが通過した時）したときに読み込まれるようにしています。（Preload only on mouse hoverにチェックを入れる）

これでユーザーがページを見る前にリンクを触ったときにはプリロードが始まり高速でページを提供します。

Flying Scripts

JavaScriptをユーザーが操作するまで実行を遅延させるプラグイン。
ユーザーがページを開いてリンクをホバーしたり何かアクションした時に初めてJavaScriptを読み込ませることができます。

ユーザーがアクションを起こさなくてもタイムアウト値を設定することで、その時間がすぎれば自動で読み込まれるようになります。

JavaScriptのリソースは非常に高いので、それを遅らせることによって瞬時にページを読み込ませる技術です。

WordPressテーマ「Cocoon」を使ってる僕は上記のように設定しています。

「adsbygoogle.js」がGoogleAdSenseを読み込むJavaScriptファイルになっており、これを指定することでAdSenseを遅延読み込みさせることが可能です。この設定でグンとページ表示速度が上がるはずです。

その他のJavaScriptに関しては基本的に外部スクリプトまたはテーマで使用されるJavaScriptを設定します。

自分のページを開き右クリックして検証を選択する。
「Network」タブを開きます。再度ページをリロードすることでNetworkタブにどんどんファイルが読み込まれます。

読み込まれたファイルの中で「.js」というファイルを見つけて、そのファイル名を「Flying Scripts」に設定すれば遅延読み込みさせることができます。

ただ、注意点があり何でもかんでも遅延させると不具合が発生します。
表示が崩れたり、テーマの機能が動作しなかったり等。

面倒な人は「adsbygoogle.js」を遅延させるだけでかなり高速化できるのでおすすめです。これによって収益が落ち込むなどは今の所確認できません。（ただ遅延させてるだけなのでほとんど影響ないはず）

「Timeout」の数値は検証した結果2秒で設定するのがちょうど良かったです。
AdSenseが2秒後に表示されるか要確認。

Google XML Sitemaps

サイトマップを自動生成して検索エンジンに通知してくれるプラグイン。
SEO的にサイトマップは作成してほしいので入れています。

設定は下記のブログが参考になります。
Google XML Sitemapsの設定方法

LiteSpeed Cache

「LiteSpeedWebサーバー」のみで使用できる高機能キャッシュプラグイン。

無料なのに頻繁にアップデートされてる優良プラグインです。「LiteSpeed」サーバーでWordPressを始めると大概、デフォルトでインストールされています。

設定に関してはデフォルトで問題ないですが、もっと煮詰めたい人は「LiteSpeed Cache WordPress Plugin – UNOFFICIAL GUIDE」を熟読することをおすすめします。（英語ページなので翻訳してね）

僕の設定も上記とほぼ同じ設定です。一部違う設定は下記です。

「CSSを非同期ロード」はレイアウト崩れが起きやすいですが「Cocoon」だと有効化してもレイアウト崩れ等なく使用することができました。

これをONにするとスコアがぐんっと上がるので特に不具合がなければONにしましょう。不具合が出るならOFF推奨です。

「LiteSpeed Cache」はCDNの設定もできるので、ここで配信設定をします。
CDNの項目で導入した「Cloudflare」と「BunnyCDN」の設定をします。

「BunnyCDN」のホストネームをCDN URLに入力してあげます。
これだけで画像、CSS、JSは「BunnyCDN」から配信されます。

Networkタブで確認してみると「BunnyCDN」から配信されてることがわかるはずです。もし配信されないようならLiteSpeedのキャッシュをクリアしてみてください。

CDNから配信したくないファイルは除外パスで設定することで除外することができます。残念ながら「BunnyCDN」から「style.css」を配信するとレイアウト崩れが確認できたので除外指定しています。（Cocoonの場合だけかもしれませんが、要動作確認です）

「Cloudflare」はメールアドレス、グローバルAPIキー、ドメインを設定することで「LiteSpeed Cache」からキャッシュ管理することができます。

グローバルAPIキーは「マイプロフィール」→「APIトークン」→「Global API Key」から確認できます。設定が完了したら保存を押します。

これで「LiteSpeed Cache」の設定は完了です。

Login rebuilder

WordPressのログインページである「wp-login.php」はとても攻撃を受けやすいです。そのログインページのURLを変更してくれるセキュリティプラグイン。WordPress初めたら必ず導入しておくべきプラグインです。

Simple Tags

タグ付を簡単に整理できるプラグイン。

TinyMCE Advanced

ブロックエディター (Gutenberg) とクラシックエディター (TinyMCE) をカスタマイズできるプラグイン

UpdraftPlus

WordPressをフルバックアップしてくれるプラグイン。
スケジュール機能もあり。

WebSub/PubSubHubbub

ページを更新した時にいち早くインデックスしてくれるプラグイン。

Cocoonの高速化設定

無料テーマ「Cocoon」にも高速化の項目があります。

HTML、CSS、JavaScriptの圧縮はこちらで行っています。

ブラウザキャッシュ、Googleフォント、WEBフォントは全てOFFにして「LiteSpeed Cache」にまかせています。

画像遅延読み込みは「Flying Images」にまかせます。

事前読み込みに関しては、外部スクリプトを事前に読み込んでくれる機能なのでデフォルトのまま使っています。

WordPress高速化のまとめ

有料となる部分は「サーバーとBunnyCDNの代金のみ」となります。
トラフィック（訪問者数）にもよりますが、月額約20ドル（2,100円程度）くらいです。価格に関しては訪問者数によって変動します。

ここまで読んでいただきありがとうございました。
以上で僕がWordPress高速化で行った全てです。

1から作業するととても大変ですが、その分ページ速度は高速化していっているはずなので、諦めないで頑張ってみて下さい。

最後まで読んでいただきありがとうございました。

高速化については日々研究しているので、また新たな発見がありましたこちらを更新致します。

「FlyingPress」を導入してさらに高速化

記事を書いてから大きな変化がありました。

「FlyingPress」と呼ばれるオールインワンな高速化プラグインがリリースされました。

となっており、高速化プラグインはこれをインストールしておけば全てやってくれる万能プラグインです。実際に当ブログにもインストールしており、スコアは下記にようになりました。

「GTmetrix.com」のスコアが改善、「PageSpeed Insights」のスコアも100点まではいかないものの99点が安定して出るようになっています。

「FlyingPress」を導入したことにより使用プラグインも大幅に減り10個以下にすることができました。

「FlyingPress」は有料プラグインとなっており、1サイト年間39ドルで使用することができます。その後はサイトが増えるごとに価格が上がります。

プラグインには30日間返金ポリシーもあるので、サイトでうまくいかなかった場合は返金してもらうことができます。もちろんサポートチケットを発行して助けてもらうことも可能です。

「FlyingPress」はリリースされたばかりのプラグインです。作者はまだまだ望んだ機能を実装していないとの発言をしているので今後もバージョンアップで高速化の機能が追加されていきそうです。

もし、気になったら「FlyingPress」見てみてください。

FlyingPress - Taking WordPress to new heights

flying-press.com

高速化のボツネタ

高速化で使わなかった話。

「Cloudflare」のCacheEverythingページルールを使う方法

「Cloudflare」にはフルページキャッシュを可能とする「CacheEverything」というページルールがあります。これを利用すればさらなる高速化、通信量の削減が見込めます。

しかしながら、この機能を使うと管理バーやコメントが機能せず、反映するにはいちいちキャッシュをクリアする必要があります。また、訪問者に見えてはいけないページなどもキャッシュする可能性があり、実用できませんでした。

ところが先日それを改善する「WP Cloudflare Super Page Cache」がリリースされました。

これは上記にあった重要なページや管理バーのキャッシュをバイパスしてくれる機能が備わっています。つまり、このプラグインを導入すれば「CacheEverything」とうページルールも問題なく使用することが可能になります。

ただ、残念なことに「LiteSpeed」サーバーではうまくバイパスできない不具合があったため今回紹介はできませんでした。

「Apache」「NGINX」などのサーバーを使ってる人は問題なく使用できるはずなので、おまけとして追記しておきます。

使い方に関してはWP Cloudflare Super Page Cacheを御覧ください。