WordPressを高速化！PageSpeed Insightsで高得点を目指す方法

WordPressで運営しているサイトが重い、遅いなんてことはありませんか。WordPressは導入しやすく、プラグインで機能追加できる反面、運用していくうちにサイトが遅くなっていく傾向があります。

コンテンツを充実させ内容が良くなっても、サイト表示が遅いと離脱されてしまいます。離脱率が上がると検索上位表示も難しくなってきます。

今すぐサイトをチェックして、サイトを高速、快適に表示し、ユーザー体験を向上しましょう！

現状を確認する

サイトに問題ないか確認しましょう。方法はかんたんです。Googleが無料で提供するPageSpeed Insightsというページでかんたんに確認できます。

以下のサイトにアクセスし、URL欄に確認したいサイトのURLを貼り付けて分析してください。
PageSpeedInsights

モバイルとパソコンの結果が出たと思います。100点中70点くらい目指しましょう。WordPressの場合、必須プラグインや、アナリティクス、アドセンスのせいで100点を取ることはできません。

100点を取ることが大事なのではなく、改善点を洗い出して少しでも良くすることが大事だと思います。

改善する

当サイトの場合、改善前はモバイルが33点、パソコンが50点でした。今はモバイルが65点、パソコンが75点くらいです。1個ずつ対応することで確実に点数をあげることができます。

当サイトも表示の体感速度をかなり上げることができました！

それでは、ひとつずつ見ていきましょう。

サーバーの応答時間を短縮する

おそらくこれが一番の難題です。ググってもなかなか方法が出ません。重要なのでこれから記載します。効果があったことをあげていきます。

the_excerpt()はかなり遅い

当サイトのトップページの新着記事に、記事の抜粋を載せています。WordPressの抜粋といえば、便利なthe_excerpt()ですが、この処理1記事ごとに3〜5秒かかっていました。

【対応方法1】echo get_the_excerpt()に変更する

the_excerpt()をget_the_excerpt()に変更し、結果をechoするだけでかなり早くなります。これだけで、1記事ごとの処理時間が1秒切ります。

the_excerptとget_the_excerptの違いですが、the_excerptはget_the_excerptの取得結果の前後に<p>タグを付与するとのことです。それだけだとは到底思えない速度の差があります。

【対応方法2】get_the_content()を使用し、自作処理で抜粋を作る

驚くことに、the_excerpt()より、the_content()の方がはるかに処理時間が早いです。

そこでget_the_content()で本文をすべて取得し、phpで文字列加工することで、get_the_excerptより1記事あたり0.5秒ほど速くできます。一覧で多数の記事を見せる場合、響いてくると思います。

不要なプラグインを停止、削除する

プラグインは重くなる原因の一つです。不要なプラグインは停止し、完全にいらない場合は削除しましょう。

プラグインの読み込み時間をはかるP3というプラグインがあります。特に遅いプラグインがないか確認しましょう。

WordPressを高速化！PageSpeed Insightsで高得点を目指す方法

当サイトでは以下のプラグインを停止しました。

SNS Count Cache（ちゃんと使ってなかった）
WP Slimstat Analytics（Googleアナリティクスで解析してる）
WordPress Popular Posts → Simple GA Rankingに乗り換え

【2016.08.12更新】(SNS Count Cacheは結局ちゃんと使ってみて、速度的に非常に優秀であることがわかりました。現在は使用しています。)

【2017.04.08更新】(SNS Count Cacheですが、当方の環境では調子が悪いため、削除しています。削除後、データベースからcronのジョブを削除し、サイトの読み込み速度が早くなりました。)

これらが必ずしも重いわけではありませんが、当サイトでは効果がありました。

当サイトで現在有効なプラグインは以下です。

Akismet
All In One SEO Pack
Crayon Syntax Highlighter
Google XML Sitemaps
Simple GA Ranking
SNS Count Cache
Smart Custom Fields
Table of Contents Plus
WP Multibyte Patch
WP REST API

ちなみにCrayon Syntax HighlighterはPageSpeed Insightsでかなり怒られます。

【2016.08.12更新】(シンタックスハイライターは別のものに乗り換えました。詳しくはこちらの記事WordPressのシンタックスハイライトをプラグインなしで！prism.jsがオススメ！をご覧ください。)

PHPのバージョンを上げる

サーバーのPHPのバージョンを確認し、可能であれば上げると効果があります。PHP5.5以上でZend OPCacheというものがPHPコアに実装されました。

OPCacheとは、PHP実行時のコンパイルをキャッシュすることで、毎回コンパイルすることがなくなり、処理が速くなる仕組みです。

WordPressソースのボトルネックを確認できるプラグイン

WordPressでページを読み込む際、PHPのどこが遅いのか確認するのに便利なプラグインがあります。それがDebug Barです。Debug-Bar-Extenderとセットで使います。

以下サイトの記事に使い方が載っています。
WordPressチューニング、その前に使うDebug Bar

圧縮を有効にする

サーバーのHTMLファイル等を圧縮してブラウザへ送信することができます。圧縮することで転送量が減り、表示速度がアップします。さくらレンタルサーバーは対応しています。

.htaccessに以下を貼り付けてください。.htaccessはWordPressインストールフォルダ直下にあります。

<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE font/opentype font/ttf font/eot font/otf
</IfModule>

ブラウザのキャッシュを活用する

こちらも.htaccessで設定できます。

.htaccessに以下を貼り付けてください。

<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 2 weeks"
ExpiresByType image/gif "access plus 1 weeks"
ExpiresByType image/png "access plus 1 weeks"
ExpiresByType image/jpg "access plus 1 weeks"
ExpiresByType image/jpeg "access plus 1 weeks"
ExpiresByType text/html "access plus 1 seconds"
ExpiresByType text/css "access plus 2 weeks"
ExpiresByType text/javascript "access plus 2 weeks"
ExpiresByType application/x-javascript "access plus 2 weeks"
</IfModule>