WordPressの高速化〜表示速度を上げる12の技〜

サイトの表示速度を上げるメリット

サイトの表示速度を上げるメリット

読み込み速度を上げることには、大きなメリットがあります。

メリット1：ユーザービリティの向上

Googleの公式調査によると、モバイルページにおいての「読み込み速度の遅延」と「直帰率」の関係は以下のようになるそうです。

• 読み込みが1秒から3秒になると、直帰率は32%上がる
• 読み込みが1秒から5秒になると、直帰率は90%上がる
• 読み込みが1秒から6秒になると、直帰率は106%上がる
• 読み込みが1秒から10秒になると、直帰率は123%上がる

これは致命的に感じられますね。もっと言うと、読み込み速度の低下により直帰する訪問者は、ただの他のページを見てくれないだけではなく、すぐに帰っていること予想されます。「3分滞在して直帰」ではなく「5秒待って遅いから直帰」という状態なわけですね。

現在のGoogleは検索順位を決めるうえで、検索ユーザーの動きまで見ている説もあります。つまり、読み込みスピードが遅くなり、ユーザーがすぐに帰るようになることは間接的にSEOに悪影響を与える可能性があります（まだ曖昧な部分ですが・・）。

メリット2：SEO的にもGOOD

Googleは200以上のシグナルを用いて、検索順位を決めていると言われています。その中の1つに読み込み速度は含まれていることが予想されます。
また、近いうちに導入される「モバイルファーストインデックス」では、表示速度もランキング要因として組み込まれる予定とのことです（詳細）。表示速度を早めておくことは必須でしょう。

WordPress高速化を考える上で知っておきたいこと

WordPress高速化を考える上で知っておきたいこと

やるべきことを理解しやすくするために、図を用意してみました。完全に理解する必要はないと思いますが、ざっくりと何をやっているのかだけイメージできるようにしましょう。

ページが表示される超ざっくりとした流れ

こちらは、WordPressを使っている場合のページの表示のされ方のイメージです（かなりざっくりですが）。まず、ブラウザから「このページ見せて！」とサーバーにリクエストを送ります。すると、サーバーにひそむWordPressは、ページデータを作ってそれを送り返します。
それをブラウザが読み込んで、華やかなWebページとして表示するわけですね。

大きく２つに分けて考えてみる

この中で読み込み速度を改善すべきポイントは２つあります。

WordPressでのページデータ準備の高速化

WordPressでのページデータ準備の高速化

それでは、まず「ページデータ」を準備する速度の向上方法を見ていきましょう。

WordPress君は、ページデータを作るために色々なことをしています。複数のプログラムを実行し、PHPファイルをつなぎ合わせていきます。さらにデータベースというところに記事の情報（本文やカテゴリー情報などなど…）を取りに行きます。
これらを組み合わせて1つのページを作っているのです。このあたりの処理の速度を上げることが1つめのポイントですね。

対処法1：プラグインを見直してみる

いちばんお手軽な表示速度向上の方法は、プラグインの見直し（停止）をしてみることです。有効化しているプラグインが、ページデータを準備するための処理を重くしている可能性があります。
有名どころだと、以下の２つのプラグインは重くなる原因となる場合がよくあるようです。

WordPressテーマ「SANGO」には、All in One Seo Packは不要です。Popular Postsの方も週間別ランキングとかを作りたい場合でなければ不要です。

対処法2：PHPのバージョンを見直してみる

WordPressはPHPというプログラミング言語で動いています。サーバーで設定されたPHPのバージョンにより処理速度は異なってきます。

PHP7は、PHP5に比べ2倍以上の実行速度を誇り、 メモリ使用量が大幅に改善されています

xserver.ne.jp

サーバー設定で、PHPのバージョンが最新のものになっているかを確認してみましょう。特に古くから同じレンタルサーバーを借りているときには要チェックです。バージョンを上げるだけで表示速度が上がるかもしれません。

対処法3：サーバーを見直してみる

そもそもの話ですが、サーバーの性能も重要なポイントです。サーバーの性能が悪いと、同時にアクセスがあったときに処理速度が遅くなってしまうのです。

対処法4：キャッシュ系プラグインを活用する

こちらは何かとトラブルが起きやすいので、あまりおすすめはできませんが…自己責任で。「WP Super Cache」や「W3 Total Cache」などのキャッシュ系のプラグインを使うと反応速度がグッと早くなる場合があります。

これによりサーバーの反応がグッと速くなる場合があります。一方で、保存データも多くなるので、サーバーの性能が悪いと逆に遅くなってしまったり、エラーが出てしまったりします。
また、自分の運営しているブログの内容を変えて、読み込み直しても表示が変わらなかったりするのでちょっと面倒です（プラグイン設定からキャッシュを１クリックで削除できますが）。

W3 Total Cache

日本ではこちらが特に人気な印象があります。設定項目は多めですが、上のリンク先のような丁寧な解説記事もあるので手は出しやすいのではないかと思います。

WP Super Cache

こちらは「W3 Total Cache」よりも設定画面がシンプルで、使うのが簡単です。「WordPress.com」の開発・運営元の Automattic社が提供するプラグインなので、継続的なメンテナンスが期待できそうです（実際なところすごくこまめなアップデートがあります）。僕もキャッシュ系プラグインを使用するときには、こちらを使っています。

なお、会員登録などの機能がついたサイトの場合には、キャッシュ系プラグインを使用するのはやめておきましょう。

対処法5：余計なリビジョンなどのデータを消す

WordPressでは「下書き」や「リビジョン（記事内容の更新履歴）」が自動でどんどんと保存されていきます。「気がついたら下書きの数が200以上に…」なんてことも。また、ゴミ箱に削除記事がたくさん溜まってしまうこともありますね。
これらのデータが溜まりすぎると、WordPressの処理がもったりと重くなってしまいます。

Optimize Database after Deleting Revisionsが便利

「Optimize Database after Deleting Revisions」というプラグインを使えば、削除済み記事やリビジョンなどを一括削除することができます。詳しい使い方は下の記事が参考になります。

ブラウザでのページデータ読み込みの高速化

ブラウザでのページデータ読み込みの高速化

次にブラウザがページデータを読み込む時間を短縮する方法を見ていきましょう。

ここで表示速度を遅くする原因は主に「画像」や「CSS」「JavaScript」などのファイルの読み込みにあります。なるべく読み込むファイル数を少なくする、そして読み込むファイルの容量を軽くすることが基本的な方針になります。

対処法6：画像の容量を小さくする

言うまでもなくページに貼り付けられている画像の容量が大きいほど、読み込むのに時間がかかります。以下の2点は意識しておきましょう。

画像の容量チェックにはImage Size Infoが便利

ブログ上の画像容量を測るには、Chrome拡張機能の「Image Size Info」がとても便利です。計測したい画像を右クリックして「View Image Info」をクリックするだけで、上のように画像データを見ることができます。

これを使って「◯◯メガバイト」というような画像がウッカリ貼られていないかチェックしてみると良いかもしれません。メガバイト級の画像は間違いなく表示速度を大きく落とします。

画像の圧縮にはEWWW Image Optimizerが便利

画像の圧縮には「EWWW Image Optimizer」というプラグインを使うのがおすすめです。WordPressに画像をアップロードする時に自動で圧縮を行ってくれるだけでなく、既にアップロード済みの画像もまとめて圧縮してくれます。詳しい使い方は下の記事をご覧くださいませ。

対処法7：画像の読み込みを遅延させる

遅延ロード（英名：Lazy Load）という手法を使えば、画像を効率的に読み込むことができ、表示速度を上げることができます。

WordPressならプラグインを使うと簡単

WordPressの場合には「BJ Lazy Load」などのプラグインを使えば簡単に遅延ロードを実現することができます（BJ Lazy Loadの場合には、プラグインをインストールして有効化するだけでOKです）。

遅延ロードの注意点

現状では、遅延ロードにより後から読み込まれる画像をGoogleBotは認識してくれません。つまり、Googleには画像がない状態として認識されてしまいます。
とはいえ、遅延ロードによるSEOへの影響は、個人的に何回もテストしましたが（複数の記事でオン・オフを切り替えて反応を確かめました）、遅延ロードを利用しても検索順位が落ちることはありませんでした。

「GoogleBotが来たときにだけ遅延ロードをしない」という対応も可能ですが、Botに対してだけ表示内容を変えるのはスパムだと認識される可能性もあるので要注意かもしれません。

対処法8：ブラウザのキャッシュを活用する

こちらは、さきほどのサーバー側のキャッシュとは別物です。ブラウザのキャッシュのイメージを図にしてみました。

画像やCSSファイルなどをページを見てくれる人のブラウザに保存しておくことで、もう一度訪れてくれたときや別のページを見てくれたときに、保存しておいたものをパッと表示することができます。

ブラウザキャッシュの設定方法

ブラウザキャッシュを有効化するためには、サーバー内にある.htaccessというファイルに以下のコードを追記します。

.htaccessは、 wp-contentや wp-adminなどが入っているディレクトリ階層で見つかるはずです。編集は基本的にFTPソフトで行います。

<ifModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpeg "access plus 14 days"
ExpiresByType image/png "access plus 14 days"
ExpiresByType image/gif "access plus 14 days"
ExpiresByType image/svg+xml "access plus 14 days"
ExpiresByType text/css "access plus 7 days"
ExpiresByType application/javascript "access plus 1 month"
ExpiresByType application/x-javascript "access plus 1 month"
ExpiresByType text/javascript "access plus 1 month"
</ifModule>

これでページにアクセスした際に画像やCSS、JavaScriptをブラウザにキャッシュされるようになります。access plus ◯◯の部分で保存する期間を指定しています。ここは必要に応じて調整して頂ければと思います。

なお、ブラウザのキャッシュの設定をすると、もちろん自分のブラウザにもキャッシュが残ります。ブログをカスタマイズする際には外しておいてほうが楽かもしれませんね。

なお、キャッシュの詳しい解説と削除方法については下の記事で解説しています。

キャッシュとは？IT初心者でも分かるように解説

対処法9：コードを圧縮する

HTML/CSS/JavaScriptのファイルの容量が重いと表示スピードが遅くなります。また、読み込むファイル数が多いと、その分だけ取得に時間がかかります。
WordPressのプラグインによっては、専用のCSSやJavaScriptが用意されています。とくに装飾系のプラグインを有効にしていると、そのぶん読み込むCSS/JavaScript数が増え、気づかないうちに表示速度を遅くする原因になっていたりします。

圧縮プラグインの定番はAutoptimize

WordPressのコード圧縮系のプラグインといえばAutoptimizeが人気です。複数のCSSファイル/JavaScriptを結合してそれぞれ1つにしてくれたり、余白や改行を消してファイルサイズを軽くしてくれます。

ただし、場合によってはJavaScriptがうまく効かなくなる場合などもあるので、使用するときには注意が必要です（その場合には、JavaScriptだけ圧縮をオフにするなどして対応しましょう）。

サルワカのWordPressテーマSANGOの場合には、すでにCSSの圧縮機能が搭載済みです。SANGOで圧縮機能をオンにしていて、かつAutoptimizeを使っている場合には、CSSの圧縮はオフにしておくのがおすすめです。

対処法10：JavaScriptをフッターで読み込む

PageSpeed Insightsで表示速度を計測したときに「スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する」というように表示された場合にはこちらの手段が有効です。

ざっくりと言うと「JavaScriptの読み込みは後回しにして、他のファイルを先に読み込んだ方がいいよね」という考え方になります。

有名なプラグインは「JavaScript to Footer」

WordPressの場合「JavaScript to Footer」や「Head Cleaner」などのプラグインを使うと、簡単にJavaScriptファイルがフッターで読み込まれるようになります。

ただし、これらのプラグインを使うと、ヘッダーで読み込まれるべきものまでフッターで読み込まれるようになり、エラーが発生する可能性大です。注意して使うようにしましょう。「SANGO」を使っている方はこれらのプラグインを使わない方が良いでしょう（ある程度最適化済みです）。

対処法11：YouTube動画を最適化する

YouTube動画の埋め込みは、表示速度を遅くする大きな原因になります。YouTube動画の読み込みを改善する方法として「サムネイル画像を生成して置き換える」という技があります。
具体的な方法は以下の記事が参考になるかと思います。

↓jQueryを使う場合

↓プラグインを使う場合（Lazy Load for Videosというプラグインが良いかと思います）

毎回のように記事内に動画を貼る場合には、上記の最適化をしておくと良いでしょう。

対処法12：そもそも余計なものを除く

何よりも確実に効果的なのは「余計なものを表示させないようにする」ことです。例えば、以下の点を見直してみましょう。

「余計なものを取り除くことで、他の部分が見てもらいやすくなる」ということはよくあります。できる限りシンプルなページ構成にすることが大事ですね。

表示速度を評価してみよう

表示速度を評価してみよう

皆さん使われているので説明するまでも無いかもしれませんが、ページの表示速度は以下の2つのツールを使ってチェックすると良いのではないかと思います。

PageSpeed Insights

Google公式のツールです。表示速度を評価してくれるだけでなく「◯◯を改善したらさらに高速化できますよ」と日本語で指示を出してくれるので分かりやすいのですよね。個人的にはこちらを使うことが多いですね。

GTmetrix

こちらも定番ツール。「合計ページサイズ」などPageSpeed Insightsにはないような情報を教えてくれたりもします。ただし、日本語には対応していないので注意。

高速化のための試行錯誤をしながら、こまめに評価を繰り返していくと「何に効果があって、何に効果が無いのか」が把握しやすいですね。