ブログ運営

2017.07.20

WordPressを高速化するまでの流れを具体的に解説


ふと久々にこのサイトの速度を測ってみたら、やったら重くなってました。

Wpspup 4参考PageSpeed Insights

Wpspup 2参考GTmetrix | Website Speed and Performance Optimization

Wpspup 3
参考モバイルサイトの読み込み速度とパフォーマンスをテストする - Google

おいおい、推定離脱率28%って!せっかくサイトに来てくれたのに、4分の1以上は見もせずに帰っちゃうってことだぜ!こりゃやばい!

さすがにこれは放置できんぜ!ということで、重い腰にムチを打って、本格的に高速化に取り組むことにしました。

最終的にどこまで速くなったのか

先に結果だけお見せしますね。以下は改善後の速度測定の結果です。

Wpspup 8

Wpspup 5

Wpspup 7

うん、これなら合格点ですね。

ではここまで速くなった改善の流れを説明していきたいと思います。

改善の準備

高速化に取り掛かる前に、原因と改善するべき部分をしっかり押さえておくのが大事!

ということで、現状確認と原因解明に乗り出したトーマであった。

サイト環境を確認

テーマファイル

WordprssテーマはAffinger4を使ってます。

とにかくカスタマイズ性能が半端なくて、シンプルで使いやすい。ブロガーに超人気のテーマです。このサイトはカスタマイズしすぎてぱっと見わからないと思いますが(笑)

チェック

サーバー

サーバーはMixhost(ミックスホスト)です。

こちらもWordpressと非常に相性いいサーバーで、高性能なエックスサーバーよりもハイスペックにもかかわらずワンコインから使える素敵なサーバーです。

 

Mixhostの詳細はこのレビュー記事からどうぞ!

エックスサーバーからmixhostに乗り換えたらいいことしかなかった
とーま
にしてもこれだけいいテーマファイルとサーバーを使っているのにここまで遅いのはおかしい。なにかしら不具合があるに違いない…

Page Speed Insightの警告を見てみる

Page Speed Insightは速度を図れるだけでなく、速度を遅くしている原因を具体的に指摘してくれます。

Wpspup 6

「修正方法を表示」をクリックすると、さらに詳細を見れます。

さて、指摘された改善策はこんな感じ。

  • 画像を最適化する
  • スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSSを排除する
  • CSSを縮小する
  • HTMLを縮小する
  • JacaScriptを縮小する

症状が重いのものから上に表示されています。

とーま
一番の要因は画像が最適化されてないことにありそうです。1つずつ改善していくことにします

高速化するために行った施策

ここからは実際に行った高速化の施策を具体的に説明していきます。

サムネイルのサイズ最適化

今回重くなっていた一番の原因がここでしたね。

例えばサイドバーの人気記事ランキングがあるんですが、この小さく表示されているサムネイルが、横幅1000px以上の馬鹿でかい画像をそのまま読み込んでました。

人気記事ランキングを表示しているのは「Simple GA Ranking」というプラグインです。

よく使われる「Wordpree Popular Posts」より処理速度が速いプラグインですが、サムネイルなどを表示する場合はカスタマイズが必要になります。

参考ワードプレスの人気記事表示プラグイン「Simple GA Ranking」の設定とサムネイル表示

サムネイルを表示させるソースコードは上記のサイトを参考にしたんですが、このままソースをfunctions.phpに書きこんじゃうと、アイキャッチ画像のサイズをそのまま表示していました。

Wpspup 13

View Image Info という拡張機能で画像情報を取得できます。

サムネイルの詳細を見てみると、本来100px - 67pxで十分なサイズを、1280px - 855pxの大きな画像を読み込んでいるのがわかります。

とーま
これじゃページの容量が大きくなって遅くなるはずだ…

参考 View Image Info (properties) - Chrome ウェブストア

これを解決するために、さらにソースをカスタマイズします。

自動生成されるサムネイルサイズを追加

まずfunctinos.phpに以下の記述を書き込み、表示したい最適なサムネイルサイズを追加します。

add_image_size( 'side-thumb-min', 100, 66, true );

add_image_size関数の意味がわからない人はこちら ↓
参考メディアのサイズを追加する[WordPress]

これで、アイキャッチ画像から横100px、縦66pxの小さいサムネイル画像を生成しておきます。

このサイズだけと解像度の高いretinaディスプレイで表示される際ぼやけるので、2倍のサイズのサムネイルも同時生成するように設定しておきます。

add_image_size( 'side-thumb', 200, 132, true );

複数パターンのサムネイルを生成するようにしておくことで、wordpressのレスポンシブイメージ機能が自動で最適な画像を表示してくれるようになります。そのために2サイズのサムネイルを生成するようにしています。

レスポンシブイメージ機能とは?
wordpressではバージョン4.4より、レスポンシブイメージという機能が追加されました。

Macのretinaディスプレイなど2倍の解像度が必要な場合には大きめの画像を表示、普通のディスプレイでは通常サイズの画像を表示、と、ディスプレイに合わせた最適な画像をwordpressが自動で抽出してくれる機能です。ただし各サイズのサムネイルが生成されていないと機能しません。

参考WordPressも対応してるレスポンシブイメージをかじる感じで説明

プラグインで過去にアップしたサムネイルをリサイズ

以後Wordpressに画像を追加する度に、

  • 100px - 66px
  • 200px - 132px

の2枚のサムネイル画像が自動生成されます。

が!過去にアップしたサムネイル画像は生成されないので、「Simple Image Sizes」もしくは「Regenerate Thumbnails」というプラグインを使ってサムネイル画像を再生成します。

参考Simple Image Sizes — WordPress プラグイン

参考 Regenerate Thumbnails — WordPress プラグイン

最後にfuncitons.phpの、Simple Ga Rankingのサムネイル表示コードの一部を修正し、小さい画像を読み込むようにします。

修正前

$post_thumb_src = wp_get_attachment_image_src( get_post_thumbnail_id( $id ),array( 300, 300 ) );

修正後

$post_thumb_src = wp_get_attachment_image_src( get_post_thumbnail_id( $id ),'side-thumb-min' );

見てみましょう。

Wpspup 14

うん、読み込み画像も小さいサイズのサムネイルになってます。僕の環境はRetina Displayなので実際の2倍サイズの画像を表示しています。

とーま
実はこの時点で一気に軽くなったんですが、せっかくなんでもっと高速化していきます

画像の軽量化

もともとWordpressに画像をアップロードする前に、下記のMacアプリで画像を軽量化してます。しかしこれだけだとwordpressが自動生成した画像などは圧縮されていない状態です。

JPEGmini
カテゴリ: 写真, グラフィック&デザイン
価格: ¥3,500

 

PNG mini
カテゴリ: グラフィック&デザイン, ユーティリティ
価格: ¥240

 

そこで「EWWW Image Optimizer」というプラグインを使います。

このプラグインを使えば、サイト内部の全画像を一括で軽量化できます。

なお一度有効化しておけば以後アップロード・生成される画像は自動で軽量化してくれます。

参考EWWW Image Optimizer — WordPress プラグイン

似たようなプラグインに「Compress JPEG & PNG images」というものがあります。

圧縮してくれるのは月500枚までという制限がありますが、こちらのプラグインの方が圧縮率が高いので、今後はこちらを使っていくつもりです。

参考Compress JPEG & PNG images — WordPress プラグイン

画像読み込みを遅延させる

さらに、画像の読み込みを遅らせて、サイトの読み込みを早めてくれる「Unveil Lazy Load」というプラグインも導入しました。

当サイトにアクセスする際、画像がフェードインして現れるのが確認できるかと思いますが、このプラグインの効果です。

参考Unveil Lazy Load — WordPress プラグイン

有効化するだけでOKです。

プラグインを減らしまくる

プラグインによってはソース内にスクリプトやCSSを増やしかねません。プラグインを入れれば入れるほどサイトは重くなります。

Page Speed Insightに「サーバーの応答時間を短縮する」と記載がある場合にも有効な解決手段になります。

使ってない、なくてもそこまで支障はない、functions.phpに記述することで解決するプラグインををことん減らしました。

とーま
「いつか使うかも」などという考えは捨て去り、勢いに身を任せてガンガン削除しましょう

ソースの圧縮

ソースを圧縮してくれる代表的なプラグインは以下の2つ。

参考Head Cleaner — WordPress プラグイン

参考Autoptimize — WordPress プラグイン

Head Cleanerの方が細かい設定はできますが、不具合が出ることが多いんですよね…

このサイトもHead Cleanerを使ったときはJavascriptが正常に動かないなど不具合があったので、今回はAutoptimizeを使いました。

設定も超簡単で一瞬で終わります。

Wpspup 12

ソースが圧縮され軽くなります。そして複数のCSS、Javascriptをひとまとめにしてくれるので、サーバーへのリクエスト回数が減り高速化できます。

Autoptimizeプラグインを使うことによって以下の問題が改善されました。

  • スクリロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSSを排除する
  • ブラウザのキャッシュを活用する
  • CSSを縮小する
  • HTMLを縮小する
  • JacaScriptを縮小する

Javascriptの読み込みを遅らせる

本来は<head> ~ </head>で読み込まれるJavaScriptを、フッターで読み込むようにすることで処理を遅らせます。

このプラグインを有効化するだけでOKです。

参考 Speed Up – JavaScript To Footer — WordPress プラグイン

高速化しますが、スクリプトが正常に動かなくなる可能性があるので、その時は折り合いを付けながら使ってください。

実は当サイトも動かないスクリプトが出てきたため、今はこのプラグインは停止しています。

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

ブラウザのキャシュは、.htaccessファイルに設定を書き込めばOK。以下のサイトを参考にしました。

参考 WordPressサイト用の.htaccess例 | dogmap.jp

ぼくが書き込んだ設定は以下です。

# 圧縮を有効にする

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


# ブラウザのキャッシュ

ExpiresActive On
ExpiresDefault "access plus 1 seconds"
ExpiresByType text/html "access plus 1 seconds"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 month"
ExpiresByType text/css "access plus 1 days"
ExpiresByType text/javascript "access plus 7 days"
ExpiresByType application/javascript "access plus 7 days"
ExpiresByType application/x-javascript "access plus 7 days"

画像ファイル、javascriptファイルは頻繁に触らないので1週間、cssはちょこちょこ触ることもあるので1日に設定しています。

ページキャッシュを活用する

元から使っていたので今回は触ってないですが、ついでに大事なページキャッシュについても簡単に説明します。

mixHost(ミックスホスト)の場合は、LiteSpeedというコアサーバーを使っているので「LiteSpeed Cache」というプラグインをぶち込んでおけばオッケー。

設定は下記を参考にしてください。

参考WordPressでLiteSpeed Cacheを使用して高速化する方法 | mixhostヘルプセンター

mixhost以外のサーバーを使っている場合、「WP Fastest Cache」というブラグインが設定も簡単でおすすめです。

参考WP Fastest Cache — WordPress プラグイン

PHPのバージョンアップ

Mixhostで使っているPHPのバージョンがデフォルト(PHP5.6)のままだったので、PHP7.1にアップグレードしました。

PHP7はPHP5の2倍以上の性能を誇るので、現在使っているテーマやプラグインとの互換性の問題がなければできるだけアップグレードしましょう。

とーま
MixhostではPHP7の利用が推奨されています

参考PHPのバージョン変更

管理画面(Cpanel)に入り、「Select PHP Version」をクリック。

Wpspup 9

「Switch To PHP Options」をクリック。

Wpspup 11

PHPバージョンを選択できるので7.1に変更後保存。

Wpspup 10

高速化とは直接関係ないですが、、upload_max_filesizeの数値も変更しておきました。これは一度にアップできるファイルサイズの上限ですが、デフォルトで2Mと少ないので上げておくと便利です。数字部分をクリックすると選択できるようになります。

PHPのバージョンを変更する度に初期値にリセットされるので注意してください。

まとめ

サラッと書いてますが、原因や改善方法を調べながらやってたので2日位かかってしまいました。(汗)

PageSpeedInsightのスコアで85点以上が早いサイトであるとGoogleは言ってますが、ひとまず合格点は出たのでしばらくはこの形でサイト運用していきます。

これから高速化に取り組む人にとってこの記事が少しでも手助けになれるとうれしいです!

© 2024 東京ボーイ