この投稿にアクセスしたそこのあなた。検索結果のリンクをクリックしてからページが表示されるのがあまりにも速くてびっくりしたと思います。
個人差はあるかもしれませんが、恐らくページが早く表示される分には嬉しいと思う人が多いことでしょう。 そう思っているのは人間だけでなく、GoogleのAIも思っているようです。
実際にGoogleはページの表示速度がSEOにおける評価に影響を与えることを明かしていて、検索順位を上げるためにはサイト（ブログ）を爆速化する必要があります。
そこで今回は、WordPress環境においてサイト（ブログ）を爆速化する方法を紹介していきたいと思います。
SEOと表示速度
冒頭で表示速度とSEOの関係についてざっと説明しましたが、もうちょっとだけ深めていきたいと思います。
Googleが掲げる事実
Googleは私たちの神様です。私たちがWebサイトの投稿を更新すると、インターネットという際限なく広い空間からその記事を見つけてくれて、それを検索結果という居場所に導いてくれます。
しかしGoogleはすべてのサイトのすべての記事を無条件に検索結果に並べてくれるほど優しくはなく、ある価値観に従って検索結果に載せたり順位を変えるということをしています。
その「価値観」とやらを垣間見ることができるのが「Googleが掲げる10の事実」というものですね。
文字通り10個のGoogleの価値観が並べられているわけですが、今回注目したいのはそのうちの三つですかね。
Googleが掲げる10の事実
- ユーザーに焦点を絞れば、他のものはみな後からついてくる。
- 遅いよりは速いほうがいい。
- 情報を探したくなるのはパソコンの前にいるときだけではない。
一部抜粋
Googleは常にユーザー（検索エンジンなどの利用者）に焦点を当てていて、ユーザーが心地よいと感じることからすべての価値が生まれていくと主張しております。つまり第一に、利用者を快適にさせる工夫が大切なのです。
冒頭で述べた通り、検索結果のリンクを押してからサイトが表示されるまでとても速かったら快適だと感じる人が多いでしょう。
また、二番目の文では直接的にそのことを示していますね。恐らくこの遅い・速いの議論は情報の提供速度なども含意していると思いますが、確実に表示速度のことも示しているでしょう。
また三番目の文では、人間は電車に乗っている時でも学校の中でも、スマートフォンでもタブレットを使ってでも情報を探したくなるだろうということが示されています。
そしてそういったあらゆる環境や利用機器に左右されずに、コンスタントに情報を提供し続けれるサイトこそ優秀だと示しているかと思います。
一般的にパソコンよりもスマートフォンの方が性能が低く、Wi-Fiよりもモバイルネットワークの方が回線速度が遅かったり、データ使用料が高かったりします。 そのため、外でスマートフォンを使っている時に快適にページが表示されるようなサイト作りを意識するべきなのです。
そしてこれらの価値観は検索エンジンのAIに組み込まれていると考えられるため、表示速度を改善することでSEOにおける評価が高くなることが期待されます。
表示速度と離脱率の実情
上で紹介したのはGoogleの価値観そのものなので、正直なところ実際にユーザーが同様に思っているとは限りません。
しかしこちらをご覧ください。Think with GoogleというGoogleのブログが共有した調査結果で、ページの表示速度が1秒から3秒になるだけで、サイトの閲覧をあきらめて検索結果等に戻る確率は32%上がるとのことです。
極端ではあるのですが、1秒から10秒になってしまったら123%も上昇してしまうとのことです。表示速度が10秒というのはちょっと考えにくいですが、5秒くらいなら大いにあり得ますね。 そしてたったの5秒を待てなくて違う検索結果に飛んでしまう可能性が高いことがわかります。
たったの5秒という嫌な言い方をしてしまいましたが、でも特定の情報を見つけたくて割と急いでいる時、5秒待っても画面が白いままだったら確かに戻りたくなりますよね。
とりあえずGoogleの検索エンジンがどう思っていたとしても結局離脱率が上昇したらSEOランクを下げられかねないので、対策が必要そうです。
ページの読み込み処理をおさらい
検索結果をクリックしてからページが完全に表示されるまで、あらゆる処理が行われます。ページの表示速度を速くするためには、そもそも「どうやって表示されているのか」を少しでも理解する必要があると思うので、ここでおさらいしたいと思います。
サーバーサイド
Webサーバーにリクエスト送信
レンタルサーバーなどを借りてブログ運営をしている人だったら想像がつくと思いますが、サイトを読み込むときはまず最初にサーバーで処理が行われます。
ブラウザから特定のアドレスにアクセスしたときにDNSサーバーからWebサーバーのIPアドレスを教えてもらい、そしてそのIPアドレスにアクセスすることでXserverなどのレンタルサーバー等にリクエストを送れるのです。 ここまでの処理は0.1秒もかからないくらいです。
そしてこのHTTPリクエストを受け取るのはサーバーの中で動いているWebサーバー（NginxやApache等）です。 これらのアプリケーションは指定されたアドレスを元に、サーバー上のプログラムを実行してくれたりファイルを表示してくれます。
実はもうこの段階でページの表示速度に関係していて、例えば一般的にApacheよりもNginxというアプリケーションを使った方が処理が速かったり、大量のリクエストに耐えれるなどのメリットがあったりします。
WordPress読み込み
NginxなどのWebサーバーはリクエストをもらった後にWordPressを呼び出すことになります。静的なWebサイトであればWebサーバーが直接的にコンテンツを配信してくれてすぐ表示できるのですが、WordPress環境では基本的に動的なWebサイトしか作れないので、以後の表示処理はWordPressに任せます。
WordPressが呼び出されるとき、wp-config.phpなどの設定ファイルやwp-load.phpなどの機能をまとめているファイルなども同時に読み込まれます。
加えて、テーマファイルやプラグインファイル等も読み込まれます。そのため、テーマやプラグインが重たすぎる（ソースコードが多すぎるなど） と表示速度の低下につながるのです。
しかもこの段階ではまだサーバー側の処理なので、クライアント側（ブラウザ表示）は画面が真っ白で何も表示されていない状態となっています。この状態が続くのは嫌ですよね。
テンプレート、コンテンツの読み込み
WordPressの設定ファイルなどが一通り読み込まれたところで、指定されている記事に適しているテンプレートを読み込みます。例えば通常の投稿であればsingle.phpですね。
また、同時にWordPress関数を使って指定された記事の情報（メタ情報、本文等）を取得します。 WordPress関数を使っているのでPHPプログラムだけで完結しているように感じますが、記事の情報自体はデータベースに格納されていて、MariaDBなどのアプリケーションを経由することで取得できます。
そのため、データベースに不要なデータが蓄積していると表示速度に影響する恐れがあります。といってもその影響は限りなく小さいですが。
こうしてテンプレートの中身が埋まり、HTMLコードを完成させることができました。ここまでがサーバーサイドでの処理ですね。サーバーサイドでの処理ということで、この段階ではサーバーのスペック（CPU、ストレージ、メモリ、回線速度等）も関わってくるということになります。
また、先ほども説明したようにこの段階ではまだクライアント側（スマホなど）に一切情報が送信されておらず、画面は白いままです。 この時間が続くのが一番直帰率の増加を招くと思いますね。
クライアントサイド
ソースのダウンロード
サーバーでの処理が終わってHTMLコードが生成されたら、あとはそれをブラウザ上に表示していくだけです。
まず最初に、HTTPリクエストの返信としてHTMLコードをクライアント側にダウンロードします。この時にインターネット通信が発生するわけなので、ソースコードが多すぎるとページの表示速度に影響が出てしまう恐れがあります。 もちろんメインのHTMLソースコードだけではなく、HTMLから呼び出しているJavaScriptやCSSなどのソースコードもダウンロードされることになります。
HTMLパース
そしてHTMLコードがダウンロードできたら、まず最初にHTMLコードを解析（HTMLパース） していきます。ここからは完全にブラウザの仕事であり、クライアントサイド（スマホやPC）の処理となります。
HTMLパース処理ではHTMLソースコードを上から順に見ていって解釈しつつ、途中で外部CSS読み込み処理や外部JavaScript読み込み処理（<script src=”~”></script>）を見つけたらそれを処理して、またHTMLパース処理に戻るという手順で進めていきます。
ここに関しては以下の記事でとても丁寧に説明されていたので、ぜひご参考にどうぞ。
https://zenn.dev/ak/articles/c28fa3a9ba7edb
ちなみに<script>タグに「defer」や「async」などがついていたらその実行は後らされ、HTMLパースが優先的に行われるようになります。
レンダリング
そしてHTMLパースが一通り終わったところでようやく文字などをブラウザ上に表示していきます。ここで初めてブラウザが真っ白ではなくなるということですね。 上の手順番号⑤～⑥にあたります。
そしてHTMLパースが終わったタイミングで遅延スクリプトや遅延CSSなどが読み込み＆実行されていきます。 そのため、遅延スクリプトは時としてはレンダリング処理を妨げることがあり、遅延しているからといって爆速でサイトが表示されるとは限らないです。
レンダリング完了
そしてレンダリングが一通り完了したら、このタイミングで画像等の読み込みが行われます。ここで読み込む画像が多すぎたり解像度が大きすぎると大きな負荷がかかり、ページの読み込み時間に影響を及ぼす可能性があります。
また、このタイミングでjQuery(document).ready()の中の処理が実行されます。jQuery(function())と同値ですね。
この段階では一通りレンダリングが終わってページは見れるようにはなっているのですが、厳密にはまだページの読み込みは完了していなくて、ブラウザのタブ上にはぐるぐるマークが表示されていたりします。
ページ読み込み完了
そして画像などが完全に読み込まれた後に、ようやくぐるぐるマークが消えてページの表示処理完了という風になります。
そしてJavaScriptのwindow.onload = function()で定義した関数がこのタイミングで実行されるようになります。
これでクライアント側での表示処理も終了です。これ以降のJavaScriptの処理等はページの表示処理には直接的には影響を与えません。
以上で表示処理のおさらいは終わりです。思ったよりもたくさんの処理をかましているってことがお分かりいただけたかと思います。
でも逆に言えば、ここまで多くの処理をかましているのだから、サイトを高速化できるポイントがたくさんあるということですね。
サイト爆速・軽量化のヒント
さて、それでは以上を踏まえた上で、どうすればサイト（WordPress環境）を爆速化・軽量化できるのかについて説明していきます。
対策を重要順に
- WordPressプラグイン・テーマの見直し
- JavaScriptファイル読み込み方法を見直し
- 画像の最適化
- HTML,CSS,JSコード最適化
- サーバーアプリケーションの見直し
- 不要データの削除・データベースの整理
- サーバースペック改善
あくまでも個人的な意見ですが、対策を重要順にあげてみました。 それではここからは、重要順とか一旦気にせずに上で紹介したWebページの表示手順の順番で爆速化・高速化のヒントを説明します。
サーバーサイド
まずサーバーサイドです。先ほども説明した通り、サーバー側の処理中はブラウザが真っ白のままなのでなるべく速く処理を終わらせたいところです。
サーバーのスペックを向上
重要度：★☆☆☆☆
一連の処理はサーバーという物理的なコンピュータで行われるわけなので、処理速度はもちろんそのスペックに依存します。 とはいえWebページの表示自体そこまで重たい処理というわけではないので、同時アクセス数が100とかを超えてくるようなサイトでもない限り、サーバーのスペックはあまり気にしなくて良さそうです。
なお、CPUはともかく、ストレージに関してはHDDではなくSSDの方が望ましいです。望ましいというか、SSDじゃないと結構話にならないですね。 とはいえここら辺は利用者が変えられるものではないですし、現在ほとんどのサーバーでSSDが採用されているので心配いらないでしょう。
サーバーアプリケーションの見直し・設定
重要度：★★☆☆☆
Webサーバーを建てるためにApacheやNginxなどのアプリケーションがありますが、Nginxの方が比較的高速なので利用できるなら利用しましょう。 とはいえ、Nginxはその特性上、WordPressなどの動的Webサイトよりも静的Webサイトの方が本領が発揮できるみたいなので、正直WordPress環境下ではそこまでの違いは出なさそうです。
また、WordPress等のアプリケーションを実行するために使われる「PHP」のバージョンについてですが、できる限り最新のものを使うようにしましょう。
以下のサイトで丁寧に説明されていますが、PHPのバージョンの違いによってWordPressの処理時間が最大で1.5倍程度変わってくることもあるそうな。
https://kinsta.com/jp/blog/php-benchmarks/
レンタルサーバーでは利用するPHPのバージョンを切り替える機能があったりするので、ぜひ最新版にアップグレードしてください。
https://make.wordpress.org/core/handbook/references/php-compatibility-and-wordpress-versions/
なお、PHPバージョンが新しすぎたりWordPressのバージョンが古かったりするとうまく動作しないことがあるかもしれないので、上の公式サイトから互換性を確認しましょう。
また、自分でPHPプログラムを作っている場合、PHP 7.4では使えてPHP 8.1では使えないなどの下位互換性がない関数があったりするのでそこも含めて気を付けましょう。
プラグインやテーマについても同様のことが言えます。しっかりと互換性があるか確認したうえでバージョンの切り替えを行うようにしてください。
加えて、Xserverでいう「Xアクセラレータ」などのサーバー側キャッシュ系高速化機能も割と効果があるので、使えるだけ使ってみてください。
WordPressプラグイン・テーマの見直し
重要度：★★★★☆
続いてWordPress編に入っていきます。 WordPressのバージョンについては先ほども説明した通り、なるべく最新版のものを使うようにしましょう。 高速化のためってのもありますが、セキュリティ的にも重要な対策です。
また、先ほど説明したように、テーマファイルとプラグインファイルが重たすぎると表示速度に結構影響が出てしまいますので、見直しをするようにしましょう。
テーマファイルは自分でたやすく編集できるものでもないですが、プラグインファイルについては使用するプラグインの個数を減らすことで対策をすることができます。
以下の記事でまとめましたが、私はプラグインを一度見直し本当に必要だと感じるもの以外はすべてそぎ落とした結果、たったの2つとなりました。
【え、2つだけ!?】本当に必要だと思うプラグイン【WordPress】
プラグインを減らすことでサーバサイドの対策ができ、上の記事で紹介したプラグインを導入することでクライアントサイドの対策を行うことができます。
WordPress不要データの整理・データベース整理
重要度：★☆☆☆☆
WordPressを長いこと使っていたり、たくさんプラグインを使っていたりすると、それだけ不要ファイルというものが溜まっていきます。 それらはデータベース等やストレージ等を圧迫して空き容量を減らしてしまうだけでなく、サイトの表示速度に影響が出てしまうことがあります。
そこで、一度整理しておいた方が良いです。ここでおすすめするのは「WP-Optimize」です。 不要なコメントのデータやリビジョン（投稿の下書き情報等）などの不要な情報を削除してくれます。
https://netaone.com/wp/wp-optimize/
このプラグインの使い方については、こちらのページで丁寧に説明されていました。
また同時に、投稿のリビジョン機能（自動で保存してくれる機能） 自体を無効にすることで、今後データベースにリビジョンデータが溜まりにくくなって、高速化に貢献できます。
define('WP_POST_REVISIONS', false);方法としては上のような記述をWordPressの設定ファイルである「wp-config.php」に追記するだけです。
クライアントサイド
HTMLコード対策
重要度：★☆☆☆☆
もちろんコードは長いより短い方が良いです。階層構造も必要以上に深くしないようにしましょう。ただ、ここら辺はテーマをいじることができる方じゃないと難しい対策かもしれませんね。
また、基本的にスクリプトを読み込むときは「defer」などをつけるようにしましょう。そうすることでHTMLパース（解析）を優先的に行うことができ、結果的に表示速度の向上につながります。
加えて、スクリプトの読み込みはheadタグの中ではない方が良いです。
また、クラス名やID名なども必要以上にたくさんつけないようにしましょう。階層構造になっている場合、一番上の親要素にだけクラス名を付与しても、そのクラス名を使って任意の子要素を特定できるのがほとんどです。
HTMLコード等の対策については以下のサイトで丁寧に説明されているので是非ご覧ください。
https://www.bugbugnow.net/2019/05/web-page-acceleration.html
CSSコード対策
重要度：★★☆☆☆
CSSコードも、もちろん短い方が良いです。また、セレクタも必要以上に長くしすぎないようにしましょう。要素が特定できる必要最低限の記述で抑えれれば良いです。
加えて、style.cssなどのサイト内の全ページで読み込まれるスタイルシートにすべてのCSSを書き込むのではなく、特定のページでしか使わないようなスタイルはそのページ内でインラインで（HTMLに直接書き込む等）記述するなどの工夫をすることで、最小限のデータ読み込みで済みます。
また、Googleフォント等、インターネットからダウンロードしないと使えないフォントは極力使わないようにしましょう。 これが案外サイトの表示速度に影響していたりします。
JSコード対策
重要度：★★☆☆☆
よく「jQueryは重いからやめろ」とか言われていますが、個人的にjQueryを使うことにそこまで問題はないと思っています。 ただし、ちゃんとした手順でjQueryを読み込まないと二重で読んでいたりするので注意が必要です。
【WordPress】間違ったjQueryの読み込み方【みんなやってる】
また、CSSの時の下りと同じで一部のページでしかjQueryを使わないのであれば、そのページだけで読み込むようにしましょう。 ただし、どのページでもそこそこ使っていて、jQueryの恩恵を受けている（バニラJSで記述するよりもコードが短く済んでいる） 場合は、jQueryを積極的に使うべきだと思います。
確かにjQuery自体はそこそこ重たいのですが、その分処理のコード量を少なくすることができるので、結果としてそこまでサイトの表示速度に影響を与えません。ただ、バニラJSで書いてもほぼ記述量が変わらないような場合はjQueryを使わないようにしましょう。
また、jQueryを使っていると「jQuery(function());」という、DOM読み込み完了後に実行してくれる関数を使いがちですが、DOM読み込み完了時点ではまだ画像等が読み込まれていなくて厳密にはページ表示処理は終わっていないので、表示処理を阻害してしまうことにつながります。
そのため、できるだけJavaScriptの「window.onload = function()」という記述を使うようにした方が良いと思います。
スクリプト読み込み対策
重要度：★★★☆☆
先ほど紹介したように、タグでスクリプトを読み込むときは基本的に「defer」などをつけて遅延読み込みをすることを推奨しております。
ただし、最初にサイトの表示処理の説明をしたときに言った通り、async,deferを付けたとしても、スクリプトの実行タイミングとレンダリングのタイミングがある程度被ってしまうので、レンダリング処理を妨げてしまうことにつながります。
そこで、ページ読み込み完了後に読み込んでも良いようなスクリプトについては、JavaScriptを使ってページ読み込み完了にheadタグの中などにスクリプトを読み込むタグを追加することで、ページ表示処理に一切干渉せずに遅延読み込みを行うことができるようになります。
これで一番効果を得ることができたのがGoogle広告用のスクリプトの読み込みとGoogleアナリティクス用のスクリプトの読み込みですね。 以下の記事で実践しています。
【99点】Google広告とアナリティクスのJSを遅延読み込みする方法【WordPress】
恐らくほとんどのサイトでこのコードが表示レンダリング処理を妨げていると思います。
そして実際、上のような対策を施すことでページの表示速度が体感でもわかるくらい速くなりました。
また、さらなる高みを目指して脱jQueryなどを含むあらゆる対策を施して、モバイル100点を実現することができた方法も紹介します。
【モバイル100点】プラグインなしでWordPress爆速化【阿部寛に勝利】
当サイトのPageSpeedスコア
ざっと対策方法について紹介したところで、これらの対策を行ったら一体どれくらい高速になるのかお見せしましょう。ここではGoogleが提供しているサイト分析ツールを使います。
当サイトのとある記事ですね。
モバイル99点
モバイル版では非常に評価が厳しいのですが、それで99点なのでかなりすごいです。
そしてSEOスコアについても98点取れています。素晴らしいですね。
パソコン100点
パソコンについては100点をとれました。なかなかに高速です。
BableTechでは今後も、サイトのカスタマイズ方法等について発信していきたいと思います。