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

wp_speed


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秒ほど速くできます。一覧で多数の記事を見せる場合、響いてくると思います。

get_the_contentは本文中のタグもそのまま取得するので、必要に応じて除去してください。PHPのstrip_tagsで除去できます。

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

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

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

wp-speed01

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

  • 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実行時のコンパイルをキャッシュすることで、毎回コンパイルすることがなくなり、処理が速くなる仕組みです。

さくらレンタルサーバーのスタンダードプランの場合、コントロールパネルから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というプラグインを使用することで、追加したサイズを含めてすべての画像を書きだし直してくれます。

wp-speed02

画像を圧縮する

画像サイズを最適化できたら圧縮しましょう。圧縮はオンラインサービスかアプリを使いましょう。WordPressのプラグインもあるようです。

オンラインサービス

アプリ

プラグイン

  • EWWW Image Optimizer

レスポンシブに対応した画像読み込み

当サイトはレスポンシブです。PCとスマホで表示領域が異なるため、適切に画像を読み込む必要があります。特にスマホはレティーナ等の高精細ディスプレイにより、専用サイズが必要です。

当サイトでは、適切に読み込まれるようにHTML5のimgタグ、srcset属性を使用するようにしました。srcsetとは、PC用、スマホ用の画像を指定し、サイト閲覧端末の解像度により、自動で読み込む画像を判断してくれるものです。端末によって最適な画像片方だけ読み込まれます。

WordPress4.4よりsrcset対応が追加されたのですが、完璧ではないので無効にし、自作の関数で対応しています。

CSS、JavaScriptを圧縮する

こちらも圧縮(ミニファイ)することで転送量削減、表示速度アップが期待できます。いろいろ方法はあると思いますが、一つだけご紹介します。

その他の対応

可能であれば、JavaScriptの読み込み位置を直前にする、CSSをインライン化するなどで、さらに点数が上がります。WordPressの場合、プラグイン等がJavaScript、CSSを読み込む場合があり、どうしても制御しきれません。対応できれば対応しましょう。

まとめ

ここまでできたら再度、PageSpeedInsightsで確認してみてください。かなり改善されているはずです。体感速度も上がったのではないでしょうか。今回の対応に丸二日ほどかけましたが、かなり勉強になりました。知らないことが多数ありました。

WordPress高速化が、自身のサイトを見直すいいきっかけになりました。体感速度も向上し、非常に満足しています。当記事をご覧頂いている方も是非一度、PageSpeedInsightsをチェックしてみてください。

スポンサーリンク

この記事が気に入っていただけたらシェアお願いします。励みになります。
prev JavaScript初心者向け!関数、オブジェクト、メソッド書き方ガイド next VCCWのローカル環境を高速化!NFSマウントを設定する方法

スポンサーリンク

Comment

  1. マルス より:

    WP初心者で、わからない事ばかりだけど.htaccessへのコピペ2つでモバイル3点、PC4点上がりました。

    ※PageSpeedInsightsでコピペ前後に20回試行して平均とっております。

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です