サイト表示速度改善でCV率アップ
今回はWordPressサイトの速度改善をしていきます。
もう速度最適化は飽きるほどやっていますが、この作業は、コンバージョンアップ効果絶大です！！
面倒くさがらずにやりましょう。
個別記事のコンバージョン率を上げるよりもサイト全体で表示速度を１秒減らすほうが対費用効果はいいです。
今回は、キャッシュ系の重複で逆に遅くなるなどの問題がないように最低限で相性のよいものを厳選しました。
改善結果
ビフォー
アフター
サーバー環境：wpXサーバー
サイト表示速度測定ツール
サイト表示速度を改善する前に、今のサイト表示速度を記憶しておきましょう。
GTmetrix
https://gtmetrix.com/
測定したいURLを入力するとサイト表示速度（秒単位）と、チェック項目をAランクからFランクまでの６段階評価でサイトを評価してくれます。
表示結果が出たらそのURLをコピーしておきます。コピーしたURLは評価結果そのもので、あとからでも見たり改善後の測定結果と比較することができます。
サイト表示速度改善 おすすめ７選
mod_pagespeed設定
（wpX、エックスサーバーの場合）デフォルトでは、OFFになっているのでOFFのままにします。
Autoptimizeと機能がかぶります。キャッシュ系プラグインと同時に使用するとChromeなどの特定ブラウザで画像が表示されない不具合も発生する場合もあります。
この記事の内容が意味不明すぎ！という方はONにして他の設定をしないというのもありです。
ブラウザキャッシュの設定
.htaccessの設定に以下を追加（レンタルサーバー管理画面から追加します）
wpXの場合は、キャッシュ機能を標準装備しているので追加すると逆に遅くなるかも？と思って手持ちの３サイトで実験しましたがいずれも高速化されました。一応、速度が上がるかどうかGTmetrixで評価してみてください。
wpXサポートにブラウザキャッシュを同時にすることは可能か、高速化になるか問い合わせしたところ設定は可能で高速化になるかは回答できないという結果でした。
▶︎ 高速化させる.htaccessの記述をまとめたものを見る
#ブラウザキャッシュの設定 <ifModule mod_expires.c> ExpiresActive On ExpiresByType text/css "access plus 1 days" ExpiresByType image/gif "access plus 10 days" ExpiresByType image/jpg "access plus 10 days" ExpiresByType image/jpeg "access plus 10 days" ExpiresByType image/png "access plus 10 days" ExpiresByType text/js "access plus 1 month" ExpiresByType text/javascript "access plus 1 weeks" ExpiresByType application/x-javascript "access plus 1 weeks" ExpiresByType application/javascript "access plus 1 weeks" </ifModule>
上記は、キャッシュ期限の設定。サーバーによって設定が違うかもしれません。XserverとwpX、mixhostで確認済。
wpXサイトに上記キャッシュ設定を行ったビフォーアフター（左がビフォー・右がアフター）
キャッシュ系プラグイン Autoptimize導入
高度な設定をONにして以下にチェック。レイアウトが崩れたらプラグインを削除してもう一度トライしましょう。
設定変更箇所
HTML コードを最適化
JavaScript コードの最適化（表示に不具合が出る場合はOFFに）
<head> 内へ JavaScript を強制（表示に不具合が出る場合はOFFに）
CSS コードを最適化
インラインの CSS を連結
連結されたスクリプト / CSS を静的ファイルとして保存
Google Font 削除（追加タブ）
SNSボタン高速化プラグイン SNS Count Cache
SNSボタンキャッシュ化のプラグイン。特に設定は不要です。
WordPressテーマ Simplicityを使用している場合は、以下も合わせて設定することで高速化できます。
カスタマイズーSNSーシェアボタンのタイプ（PC）ーテーマカラータイプ（高速）
SNSボタンを設置しなくてもいい場合は、潔く無くすのも手です。
gzip圧縮
サーバーへの転送量を減らす＆表示速度を早めるzip圧縮。単純にファイル圧縮をするので、ファイルサイズが大幅に減ります。以下のコードを.htaccessに追加するだけです。
画像は最初から圧縮されているので省いています。
▶︎ 高速化させる.htaccessの記述をまとめたものを見る
<ifModule mod_deflate.c> SetOutputFilter DEFLATE BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4\.0[678] no-gzip BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary SetEnvIfNoCase Request_URI _\.utxt$ no-gzip </ifModule>
ちなみに、どれくらい違うかというと（別サイトでテストしてます）
左が、改善前
中央が、改善後（gzipなし）
右が、改善後（gzipあり）
※上記はいずれも次のCompress JPEGは実施していません。
ファイルサイズが全然違いますよね。
Compress JPEG & PNG images
画像圧縮サービス TinyPNG のプラグイン版。通称パンダ。
これは毎回使うと画像アップに時間がかかるので画像が溜まってきたタイミングでたまに画像圧縮してあげるだけ。（２ヶ月に１度くらい）
使わないときはプラグイン停止しておきましょう。
EWWWも画像圧縮プラグインとして有名ですが、EWWWはLOSSLESS圧縮といって圧縮率の低い圧縮しか出来ません。
データベース最適化
Accessとかのデータベースを扱っていた人ならすごく納得してもらえる話題。
WordPressは、MYSQLというデータベースで動いています。で、このデータベースというのはMYSQLに限らずデータ量が溜まってくるとテーブル内の検索スピードが激重になってきます。
なので、定期的に１ヶ月に１度くらいは最適化というのをしてあげると速度を保ってくれます。
そこでおすすめなのが、
Optimize Database after Deleting Revisions
というプラグイン。
日本であまり紹介されていなくてWP-Optimizeが紹介されていますが、後者はテーブル形式InnoDBに対応していません。
(ちょっと難しいけど、MYSQLには、InnoDBと MyISAM の２種類のデータ形式があります）
XserverやWPXで標準でインストールされたWordpressを使っている人たちがWP-Optimizeを使うと、データ形式がInnoDB形式だと思われるので「俺、最適化してるんだぜ！」というルンルン気分だけ味わう羽目になります。実際に気づきにくいです。
※よくブログで紹介されていますが、InnoDBに対応していないとは書いていないので。
Optimize Database after Deleting Revisions
はスケジュールも組めますし、データベース最適化以外にもリビジョン削除に対応しています。
オマケ
もしGTmetrixで下のようにYslow指標で googleのウェブフォントURLで指摘があったら Disable Google Fonts というプラグインを入れるとgoogleフォントを無効化してくれます。Autoptimizeを入れない場合はこちらを使うといいかと思います。
サイト表示速度を早くすることよりもGTmetrixの点数を上げることにハマりすぎてもダメですけどね。
高速化させる.htaccessファイルの追記
以下をhtaccessに追記してください。すでに同じような記述がある場合はご注意ください。
#ブラウザキャッシュの設定 <ifModule mod_expires.c> ExpiresActive On ExpiresByType text/css "access plus 1 days" ExpiresByType image/gif "access plus 10 days" ExpiresByType image/jpg "access plus 10 days" ExpiresByType image/jpeg "access plus 10 days" ExpiresByType image/png "access plus 10 days" ExpiresByType text/js "access plus 1 month" ExpiresByType text/javascript "access plus 1 weeks" ExpiresByType application/x-javascript "access plus 1 weeks" ExpiresByType application/javascript "access plus 1 weeks" </ifModule> <ifModule mod_deflate.c> SetOutputFilter DEFLATE BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4\.0[678] no-gzip BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary SetEnvIfNoCase Request_URI _\.utxt$ no-gzip </ifModule>
コメント