ふと久々にこのサイトの速度を測ってみたら、やったら重くなってました。
参考GTmetrix | Website Speed and Performance Optimization
参考モバイルサイトの読み込み速度とパフォーマンスをテストする - Google
おいおい、推定離脱率28%って！せっかくサイトに来てくれたのに、４分の１以上は見もせずに帰っちゃうってことだぜ！こりゃやばい！
さすがにこれは放置できんぜ！ということで、重い腰にムチを打って、本格的に高速化に取り組むことにしました。
最終的にどこまで速くなったのか
先に結果だけお見せしますね。以下は改善後の速度測定の結果です。
うん、これなら合格点ですね。
ではここまで速くなった改善の流れを説明していきたいと思います。
改善の準備
高速化に取り掛かる前に、原因と改善するべき部分をしっかり押さえておくのが大事！
ということで、現状確認と原因解明に乗り出したトーマであった。
サイト環境を確認
テーマファイル
WordprssテーマはAffinger4を使ってます。
とにかくカスタマイズ性能が半端なくて、シンプルで使いやすい。ブロガーに超人気のテーマです。このサイトはカスタマイズしすぎてぱっと見わからないと思いますが（笑）
チェック
サーバー
サーバーはMixhost（ミックスホスト）です。
こちらもWordpressと非常に相性いいサーバーで、高性能なエックスサーバーよりもハイスペックにもかかわらずワンコインから使える素敵なサーバーです。
チェック
Mixhostの詳細はこのレビュー記事からどうぞ！
-
-
エックスサーバーからmixhostに乗り換えたらいいことしかなかった
Page Speed Insightの警告を見てみる
Page Speed Insightは速度を図れるだけでなく、速度を遅くしている原因を具体的に指摘してくれます。
「修正方法を表示」をクリックすると、さらに詳細を見れます。
さて、指摘された改善策はこんな感じ。
- 画像を最適化する
- スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSSを排除する
- CSSを縮小する
- HTMLを縮小する
- JacaScriptを縮小する
症状が重いのものから上に表示されています。
高速化するために行った施策
ここからは実際に行った高速化の施策を具体的に説明していきます。
サムネイルのサイズ最適化
今回重くなっていた一番の原因がここでしたね。
例えばサイドバーの人気記事ランキングがあるんですが、この小さく表示されているサムネイルが、横幅1000px以上の馬鹿でかい画像をそのまま読み込んでました。
人気記事ランキングを表示しているのは「Simple GA Ranking」というプラグインです。
よく使われる「Wordpree Popular Posts」より処理速度が速いプラグインですが、サムネイルなどを表示する場合はカスタマイズが必要になります。
参考ワードプレスの人気記事表示プラグイン「Simple GA Ranking」の設定とサムネイル表示
サムネイルを表示させるソースコードは上記のサイトを参考にしたんですが、このままソースをfunctions.phpに書きこんじゃうと、アイキャッチ画像のサイズをそのまま表示していました。
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ディスプレイで表示される際ぼやけるので、２倍のサイズのサムネイルも同時生成するように設定しておきます。
add_image_size( 'side-thumb', 200, 132, true );複数パターンのサムネイルを生成するようにしておくことで、wordpressのレスポンシブイメージ機能が自動で最適な画像を表示してくれるようになります。そのために２サイズのサムネイルを生成するようにしています。
wordpressではバージョン4.4より、レスポンシブイメージという機能が追加されました。
Macのretinaディスプレイなど２倍の解像度が必要な場合には大きめの画像を表示、普通のディスプレイでは通常サイズの画像を表示、と、ディスプレイに合わせた最適な画像をwordpressが自動で抽出してくれる機能です。ただし各サイズのサムネイルが生成されていないと機能しません。
プラグインで過去にアップしたサムネイルをリサイズ
以後Wordpressに画像を追加する度に、
- 100px - 66px
- 200px - 132px
の２枚のサムネイル画像が自動生成されます。
が！過去にアップしたサムネイル画像は生成されないので、「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' );見てみましょう。
うん、読み込み画像も小さいサイズのサムネイルになってます。僕の環境はRetina Displayなので実際の２倍サイズの画像を表示しています。
画像の軽量化
もともとWordpressに画像をアップロードする前に、下記のMacアプリで画像を軽量化してます。しかしこれだけだとwordpressが自動生成した画像などは圧縮されていない状態です。
そこで「EWWW Image Optimizer」というプラグインを使います。
このプラグインを使えば、サイト内部の全画像を一括で軽量化できます。
なお一度有効化しておけば以後アップロード・生成される画像は自動で軽量化してくれます。
参考EWWW Image Optimizer — WordPress プラグイン
似たようなプラグインに「Compress JPEG & PNG images」というものがあります。
圧縮してくれるのは月５００枚までという制限がありますが、こちらのプラグインの方が圧縮率が高いので、今後はこちらを使っていくつもりです。
参考Compress JPEG & PNG images — WordPress プラグイン
画像読み込みを遅延させる
さらに、画像の読み込みを遅らせて、サイトの読み込みを早めてくれる「Unveil Lazy Load」というプラグインも導入しました。
当サイトにアクセスする際、画像がフェードインして現れるのが確認できるかと思いますが、このプラグインの効果です。
参考Unveil Lazy Load — WordPress プラグイン
有効化するだけでOKです。
プラグインを減らしまくる
プラグインによってはソース内にスクリプトやCSSを増やしかねません。プラグインを入れれば入れるほどサイトは重くなります。
Page Speed Insightに「サーバーの応答時間を短縮する」と記載がある場合にも有効な解決手段になります。
使ってない、なくてもそこまで支障はない、functions.phpに記述することで解決するプラグインををことん減らしました。
ソースの圧縮
ソースを圧縮してくれる代表的なプラグインは以下の２つ。
参考Head Cleaner — WordPress プラグイン
参考Autoptimize — WordPress プラグイン
Head Cleanerの方が細かい設定はできますが、不具合が出ることが多いんですよね…
このサイトもHead Cleanerを使ったときはJavascriptが正常に動かないなど不具合があったので、今回はAutoptimizeを使いました。
設定も超簡単で一瞬で終わります。
ソースが圧縮され軽くなります。そして複数の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ファイルは頻繁に触らないので１週間、cssはちょこちょこ触ることもあるので１日に設定しています。
ページキャッシュを活用する
元から使っていたので今回は触ってないですが、ついでに大事なページキャッシュについても簡単に説明します。
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の２倍以上の性能を誇るので、現在使っているテーマやプラグインとの互換性の問題がなければできるだけアップグレードしましょう。
管理画面（Cpanel）に入り、「Select PHP Version」をクリック。
「Switch To PHP Options」をクリック。
PHPバージョンを選択できるので7.1に変更後保存。
高速化とは直接関係ないですが、、upload_max_filesizeの数値も変更しておきました。これは一度にアップできるファイルサイズの上限ですが、デフォルトで2Mと少ないので上げておくと便利です。数字部分をクリックすると選択できるようになります。
PHPのバージョンを変更する度に初期値にリセットされるので注意してください。
まとめ
サラッと書いてますが、原因や改善方法を調べながらやってたので２日位かかってしまいました。（汗）
PageSpeedInsightのスコアで８５点以上が早いサイトであるとGoogleは言ってますが、ひとまず合格点は出たのでしばらくはこの形でサイト運用していきます。
これから高速化に取り組む人にとってこの記事が少しでも手助けになれるとうれしいです！