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というプラグインがあります。特に遅いプラグインがないか確認しましょう。
当サイトでは以下のプラグインを停止しました。
- 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>
画像を最適化する
画像を最適化することで転送量が減り、表示速度アップが期待できます。
画像サイズ(解像度)の最適化
コンテンツの表示幅に合ったサイズの画像を用意しましょう。
当サイトの場合、記事ページのサイドバーや下部にある、記事一覧のアイキャッチ画像が大きいまま使っていました。コンテンツの幅に応じたサイズに縮小しましょう。
WordPressで画像をアップロードした際、自動で3サイズほど書き出されていると思います。その中で適切なサイズを指定しましょう。サイトのデザイン上、自動書き出しのサイズだと適合しない場合、カスタムサイズを出力するようにできます。
functions.phpに以下を追加します。
add_image_size('custom-img', 350, 216)
パラメータが順に、呼び出す名称、幅、高さです。追加したあと、Regenerate Thumbnailsというプラグインを使用することで、追加したサイズを含めてすべての画像を書きだし直してくれます。
画像を圧縮する
画像サイズを最適化できたら圧縮しましょう。圧縮はオンラインサービスかアプリを使いましょう。WordPressのプラグインもあるようです。
オンラインサービス
アプリ
- ImageOptim(Macです)
プラグイン
- EWWW Image Optimizer
レスポンシブに対応した画像読み込み
当サイトはレスポンシブです。PCとスマホで表示領域が異なるため、適切に画像を読み込む必要があります。特にスマホはレティーナ等の高精細ディスプレイにより、専用サイズが必要です。
当サイトでは、適切に読み込まれるようにHTML5のimgタグ、srcset属性を使用するようにしました。srcsetとは、PC用、スマホ用の画像を指定し、サイト閲覧端末の解像度により、自動で読み込む画像を判断してくれるものです。端末によって最適な画像片方だけ読み込まれます。
WordPress4.4よりsrcset対応が追加されたのですが、完璧ではないので無効にし、自作の関数で対応しています。
CSS、JavaScriptを圧縮する
こちらも圧縮(ミニファイ)することで転送量削減、表示速度アップが期待できます。いろいろ方法はあると思いますが、一つだけご紹介します。
その他の対応
可能であれば、JavaScriptの読み込み位置を直前にする、CSSをインライン化するなどで、さらに点数が上がります。WordPressの場合、プラグイン等がJavaScript、CSSを読み込む場合があり、どうしても制御しきれません。対応できれば対応しましょう。