WordPress高速化 | PageSpeed Insightsモバイル100点へのロードマップ

この疑問に回答します。

WordPressのサイトで PageSpeed Insights の点数がモバイルだけ低い。どうやって高速化させて解決するか分からない。なるべくならプラグインなどで簡単に対応がしたい。ウェブサイトの高速化方法を探している方に向けて解説します。このウェブサイトも試行錯誤しながら高速化を進めています。

パソコン・モバイルともPageSpeed Insightsの点数は高得点になっています。

パソコン

モバイル

平均で90～95ぐらいの点数が出るようになっています。実用では合格点に達している状態です。

これから紹介する対策を進めれば、「GoogleAdSense」を使用しても誰でもモバイルのPageSpeed Insights点数が100点を目指せるところまで進めることが出来ます。

WordPress高速化で必要なこと

WordPress高速化に必要なことは、大きく分けて5つです。

5つを見てなるほど・・・って思う人もいれば、何じゃこら？って人もいると思います。初心者でも理解できるように詳しく紹介します。

レンタルサーバー以外は無料で対応が可能です。

だから、自分のブログを持っている人は誰でも真似ができるってことです。

レンタルサーバーの選び方

ウェブサーバーは「LiteSpeed」を利用しているレンタルサーバーの一択です。「Apache」を利用しているレンタルサーバーは論外です。

理由は簡単、LiteSpeedは他のサイトからの影響を受けない

レンタルサーバーなのに、VPS（仮想専用サーバー）を利用しているのと同じ感覚です。

これがとても重要です。ウェブサーバーの仕組みを簡単に説明します。

レンタルサーバーの仕組み

レンタルサーバーは、複数のユーザーでサーバー1台のリソース（CPU,メモリ）を共有して利用します。この方法以外は絶対にありません。

この共有してユーザーが利用する方法は、レンタルサーバーのサービス提供会社はどこも同じです。

レンタルサーバーのサービス提供会社は、共有するユーザー数の割合を調整しプラン（エコノミー、スタンダード、プレミアムなど）を提供しています。

安価なプランはユーザー数を多くして、高価なプランはユーザー数を少なくしてプランを作っています。

実際はこんなに単純ではありません。レンタルサーバー提供会社は他の様々なパラメーターを調整しています。

ただ、サーバーやネットワークなどのハードウェアは調達コストを下げるために導入時にコストメリットが最大限になることを考えます。同じものを大量に購入すると価格は下がるので「安価なプラン」も「高価なプラン」もハードウェアは同じことが多いです。

そう考えると、共有するユーザー数の調整が最重要なパラメーターになります。

共有利用での問題（徐々にパワー不足）

レンタルサーバーの仕組みは、誰もがイメージしやすいものだと思います。ここからは、レンタルサーバーを複数ユーザーで共有したときに問題になることを説明します。

普段は複数ユーザーでサーバーリソースを共有利用しても問題は発生しません。なぜなら、サーバーリソース（CPU,メモリ）に不足が出ないように考慮してプランを組んでいるからです。

サーバーの使用率が想定を超えると、画面表示が遅くなったり、エラーが表示されたりしてユーザーに影響がでます。

この説明は全体で見た時の説明です。

さらに具体的に説明するにはサーバーを共有利用しているユーザーのことについて説明しないと見えてきません。

サーバーの使用率が想定を超える原因は様々ですがよくあるパターンです。

ユーザーを詰め込み過ぎた

原因は運営側のミスです。追加でサーバー費用が発生せずに売上が上がるので、詰めれば詰めるほど運営者の利益が増します。しかし、ユーザーにとってはサーバーのパワー不足で不満が出来てきます。

よって、運営企業はバランスを見ながら定期的に調整をしています。

ユーザーの誰かが、Yahoo!砲（ヤフー砲）・Google砲（グーグル砲）に合う。バズる。

ウェブサイトを運営しているユーザーは、アクセスを伸ばすために日々努力しています。優良なコンテンツを公開し続けています。結果、Yahoo!砲・Google砲に出くわします。

サーバー運営会社は推測が出来ないです。しかも、アクセス数の上昇は一時的です。

サーバー運営会社が提供するグレードの高いプランは、余力を多く残して不測の事態に耐えられるように設計しています。安価なプランは余力が小さいのでスグにパワー不足になります。

ユーザーのブログが育ち過ぎた

開設して間もないブログは、アクセス数はすぐないですが、時間が経つにつれてアクセス数が伸びるブログが増えてきます。

運営会社は定期的にサーバーメンテナンスと称してユーザーの再配分を実施します。

ユーザーからみると、時間が経つにつれて徐々に表示スピードの低下などサーバーのパワー不足を感じるようになります。共有利用している各ユーザーのブログが徐々に育ってきます。つまり、アクセス数が増えてサーバーの許容範囲に近づいてきます。

運営会社は、1年に1回とか半年に1回など間隔を置いてバランス調整を行います。

間隔を開けずにバランス調整を実施すればいいのですが、サービス停止（ウェブページ閲覧不可）が伴うので、計画的に実施するしか方法がありません。

運営会社は、ユーザーが他社へ乗り換えされないように日々努力しています。

共有利用での課題（ユーザーへの不公平）

サーバーのリソース（CPU,メモリ）は、余力があれば誰でも利用できます。

サーバーは月間PVが100万PVでも、1,000PVでも必要に応じたリソースを提供します。

月間PVが100万PVのサイトでも、速度を求めない使い方を行っていることがあります。ブログ運営者はコストが安い方がいいのでエコノミープランを利用している可能性があります。

特定のユーザーが、サーバーのリソースを占有することは頻度が多いです。他のユーザーにとっては、何故か分からないけど、サーバーのレスポンスが悪くなる機会がよく発生して対策方法の無い問題に直面します。

ユーザーはサーバーを選択できないので、運でしかありません。

ウェブサーバー Apache の課題

この問題に直面するのがウェブサーバーである「Apache」です。Apacheはこの問題の解決策を持っていません。

Apacheの設定をカスタマイズし、チューニングすることで課題が表面化しないようにすることは出来ますが、残念ながら根本解決ができません。

Apacheは他にも様々な問題を抱えています。この問題を解決するためのアプローチの違いで、「Nginx」や「LiteSpeed」が開発されました。

「Nginx」は高負荷でもサーバーの処理能力が低下しないように設計され、「LiteSpeed」は、ユーザーに公平にリソース提供ができるように設計されています。

Nginxの特徴（利点）はレンタルサーバーでは部分的にしか発揮できないので、WordPressをNginxで提供しているレンタルサーバーは皆無だと思います。リバースプロキシやキャッシュサーバーとして一部に利用するぐらいです。

レンタルサーバーで利点を最大限に活用できる「LiteSpeed」を選択するべきです。

LiteSpeedを選択する理由

LiteSpeedの特徴は、ユーザー毎にリソース配分を指定できることです。CPU,メモリの上限値をユーザー毎に設定することができます。

これで、ユーザーによる不公平なリソース利用を防止することができます。

ユーザーは設定された上限値までしかリソースを利用できません。高負荷になってもリソースの利用を制限することができます。

つまり、他のユーザーに影響を与えることがない。別のユーザーから見ると、

自分の契約プランで提供されるリソースを、100％保証してくれます。

つまり、LiteSpeedを利用するとレンタルサーバーではなくVPS（仮想専用サーバー）を利用している環境に近いです。

他に影響を与えずにサービス提供ができるのは、とても重要なことです。サーバーやネットワークなどのインフラ管理者が長年望んでいた機能です。

WordPressテーマの選び方

WordPress高速化はテーマ選定が重要です。選択したテーマがポンコツで高速化の足を引っ張ることがあります。

WordPressテーマを変えるだけで PageSpeed Insights の点数が跳ね上がることはよくあります。人気のテーマを選択してください。

テーマは無料・有料どっちがよい？

WordPressテーマは、無料と有料があります。高速化の観点からみると、無料と有料の差は誤差範囲です。

今は「有料だから高速化できる」ということでは無いこと理解してください。

ユーザー目線ではなく技術者目線で考えると、WordPressテーマは頻繁にバージョンアップを繰り返しているものを選びましょう。

バージョンアップはネガティブなことではありません。ポジティブなことです。

WordPress本体がバージョンアップしているので、テーマも追従している証拠です。不具合も随時対応する方が良いことに決まっています。

ユーザーからすると、バグでエラーになるのか自分のカスタマイズが原因なのかすぐには分からないですからね。

無料のCocoonを利用中

このウェブサイトは、無料のCocoonを利用しています。最近はCocoonが高機能化により複雑さを増していますがマニュアルが充実しているので初心者の方でも使いこなせると思います。

Cocoonは、テーマ内にWordPress高速化の機能が充実しています。プラグインを入れずに解決できるのは非常にメリットが高いです。

この後に詳しく説明していきますが、WordPress高速化は誰もが望む機能なのでテーマ、プラグインなどあらゆる場所に、同じ機能が盛り込まれています。

重複機能を、手あたり次第に設定することは辞めてください。想定外の挙動に解決するのに苦労します。

目的を理解し、設定を行うのは1カ所にしましょう。

テーマ（Cocoon）での高速化

私はテーマに実装されている高速化機能を全て利用しています。チェックを付けて有効化するだけなので設定は難しくないです。

「Cocoon設定」ー「高速化」

Cocoonに実装されている高速化機能です。

デフォルト値は全てチェック（無効化）が付いていません。すべてチェックを付けて有効化してください。

WordPressプラグインの選び方

WordPressプラグインは、必要最低限にしてください。プラグインを入れれば入れるほど遅くなります。

WordPressの「利便性向上」と「高速化」は反比例すると理解してください。

私がWordPress高速化の目的に導入しているプラグインは次の通りです。

SEOやセキュリティ対策などが目的のプラグインは除外しています。

EWWW Image Optimizer とは

EWWW Image Optimizerとは、画像をアップロードすると同時に自動で画像サイズを圧縮してくれるプラグインです。しかも、次世代フォーマット（WebP）にも変換してくれます。

次世代フォーマットとは、Google PageSpeed Insights で「改善できる項目」に「次世代フォーマットでの画像の配信」で表現されるフォーマットのことです。

ウェブサイトで一般的に利用される画像はJPG、GIF、PNGなどです。Google PageSpeed Insightsでは、JPEG 2000、JPEG XR、WebP などの画像フォーマットの使用が、ページの表示速度向上に繋がるので推奨されます。

EWWW Image Optimizerを利用すれば、自動的に画像サイズを圧縮し、さらにWebP画像を作成し軽量化を図ります。結果、WordPress高速化につながります。

Flying Pages by WP Speed Matters とは

Flying Pages by WP Speed Matters とは、ページ内のリンク先を先読みし表示を高速化するプラグインです。

通常は、ウェブページを開くとブラウザは必要なデータを取得して画面に表示します。必要なデータをすべて取得すると待機状態になります。ユーザーがページ内のリンクをクリックして別ページに遷移すると、ブラウザはリンク先のデータを読み込み始まます。

Flying Pages は、表示するウェブページのデータ読み込みが終わると、自動的にリンク先のウェブページを読み込み始めます。ユーザーがリンクをクリックすると、既にデータ読み込みが完了しているので、高速にページ遷移が完了します。

Flying Pages のプレロード機能（先読み）は、ページ内のリンク先を先読みして高速化するものです。ウェブページそのものを高速化するものではありません。

つまり、Google PageSpeed Insights の点数アップに直接は結びつきませんが、ユーザーの体感が向上することができます。

関連記事　Flying Pages 先読み高速化プラグインの使い方

Flying Scripts by WP Speed Matters とは

Flying Scripts WP Speed Matters とは、JavaScriptを読み飛ばすプラグインです。ユーザーによる操作（マウスホバー、スクロールなど）が無くなるまでJavaScriptを実行しません。

JavaScriptは非常に大量のリソースを消費します。

最初のレンダリングに必要ないJavaScriptの実行を遅らせることでレンダリング時間、インタラクティブまでの時間、最初のCPUアイドルなどを削減します。

JavaScriptは重要な役割を果たしているので制御はとても重要です。

Flyng Scriptsを利用するとJavaScriptを読み飛ばします。PageSpeed Insightsでは、劇的な点数アップができるようになります。

関連記事　Flying Scripts – JavaScript 読み飛ばし高速化プラグインの使い方

LiteSpeed Cache とは

LiteSpeed Cashe とは、LiteSpeed専用の高機能キャッシュプラグインです。キャッシュの制御だけでなく、後述するCDNとの連携や、「.htaccess」の編集、CSS 圧縮化や結合まで様々なことができます。

LiteSpeed Cashe は高機能なので設定の敷居は高いです。しかし、デフォルト設定でも問題ありません。細部まで手をいれてチューニングが必要と考える場合はドキュメントを読み込んでください。

画像の軽量化する方法

WordPressプラグインで紹介した「EWWW Image Optimizer」よりも画像を圧縮できる方法がります。オンラインの画像圧縮サイトを使用するだけで「EWWW Image Optimizer」よりも高圧縮することができます。

WordPress高速化はコンテンツの軽量化が最重要です。画像を高圧縮するとファイルサイズが小さくなり、ウェブサイトの画面表示が速くなります。

私は画像をWordPressにアップする際は必ず、オンラインの画像圧縮サイトで圧縮したものをアップするようにしています。

画像圧縮サイトで有名なのは下記通りです。

元画像によりますが「EWWW Image Optimizer」よりも高圧縮になります。

私は「EWWW Image Optimizer」を次世代フォーマット（WebP）への変換ツールとして利用しています。

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

CDNとは、ウェブコンテンツを効率的に配信するための仕組みのことです。インターネット上にコンテンツをキャッシュさせて、最適なサーバーが自動的に配信してくれます。

コンテンツを代理で配信してくれるため、WordPressサーバーの負荷を下げることができます。

WordPress高速化では必須サービスです。今では色々な企業がCDNサービスを提供しています。昔は Akamai ぐらいしかなくてコストが高かったです。今は個人利用ができるサービスが多くあります。

私は無料で利用できる「CloudFlare」を利用しています。無料でもCDNの基本を押さえているので十分に高速化が期待できます。

まとめ

WordPress高速化に必要なことは、1つを行えばいいものではありません。これさえ実施しておけばOKというものでもありません。ユーザーで出来ることは限られています。

WordPress高速化は知識が必要です。色々頑張って力尽きるぐらいなら、既にある高速化の技術を利用するようにしてください。なるべくシンプルです。複雑化させるとメンテナンスができなくなります。