俺のウェブサイトが死ぬほど重いことに気づいた。ページが表示されるまでに6秒かかって、読み込みが完了するまでに20秒ぐらいかかる。あほか。
この記事の目次（クリックでジャンプ）
結論にも書いてるんだけどプラグインは無駄だ。ウェブサイトの高速表示によるユーザビリティと検索順位の向上を目指している人は、俺と同じ失敗をしないでほしい。表示速度計測ツールのランクに意味はない。
自分のサイトの表示速度の見方
自分で自分のウェブサイトチェックしても、自分のサイトだから何回も見てるし、既にブラウザのキャッシュにデータが入ってるから表示が早い。だから今まで気づかなかった。今回ワードプレステーマを変更する機会があって、そのタイミングで今まで手を付けていなかったところを見直すことにした結果、表示まで6秒もかかっていることに気づいた。
Chromeを使っている人が自分のウェブサイトの表示速度を確認したいときは、パソコンであればCtrl+F5同時押しでキャッシュを削除してからの再読み込み、スマホであればシークレットタブを開いてそこから自分のウェブサイトにアクセスすることで確認できる。
表示開始まで6秒
そこで確認できたのはウェブサイトが表示されるまで6秒、読み込みが完了するまで20秒という事実だった。おそすぎる。ガジェマガにアクセスした人はよく今まで諦めることなく6秒も待ち続けてくれた。ありがとう。その後三日三晩対策をすることで表示開始を1秒まで改善したので、そのためにやったこと、そして辞めたことを備忘録として残したい。
注意点
表示速度改善の作業に正解はない。どれが効果があってどれが効果がないかはウェブサイトによりけりだ。そのため、1つ変更してはチェックするヒットアンドエラーの作業が必要になる。俺は1つ変更する度にウェブサイト表示速度計測ツールで速度をチェックしつつ、サイトのレイアウトに異常がないことを確認する作業を繰り返した。つまりなにをしているか理解する必要はなくて、単純にウェブサイトが高速化されているか、きちんとウェブサイトが表示できているかの二点を確認しながら牛歩戦術で進めていけばいい。
ウェブサイト表示速度継続ツール
ウェブサイト表示速度計測ツールはGoogle PageSpeed Insightsが最も有名だが、現在は仕様変更により殆どのサイトで計測できなくなっている。それに代わるツールとしてGTmetrixを利用した。使い方は計測したいページのURLを貼り付けてスタートボタンを押すだけだ。気をつけてほしいのはウェブサイト全体の計測というわけではなく、トップページのURLだとトップページのみの計測になるということだ。記事ページも計測したいなら個別の記事ページのURLを貼り付けないといけない。
1 不要プラグインの停止（継続）
多くの人が使っていて、かつ重いことで有名なプラグインであるAll In One SEO PackとWP Popular Postを思い切ってオフに。その他プラグインを精査して必要最低限のものにした。スピードに拘りたいならプラグインは少なければ少ないほどいい。
2 .htacssへの追記（やめた）
Gzip圧縮（やめた）
サーバーから送信されるデータをGzip圧縮するためのコードを書き込んだ。Gzip参考（→.htaccessファイルでgzip圧縮させてサイト表示速度を向上させる方法）
<IfModule mod_deflate.c> SetOutputFilter DEFLATE #古いブラウザ対策 BrowserMatch ^Mozilla/4\.0[678] no-gzip BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch \bMSIE\s(7|8) !no-gzip !gzip-only-text/html #画像は圧縮しない GIF、JPEG、PNG、ICO SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary #圧縮するファイル AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/xml AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE text/js AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/atom_xml AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/x-javascript AddOutputFilterByType DEFLATE application/x-httpd-php AddOutputFilterByType DEFLATE application/x-font-ttf AddOutputFilterByType DEFLATE application/x-font-woff AddOutputFilterByType DEFLATE application/x-font-opentype </IfModule>
ウェブサイト読み込みはまずサーバーからデータを読み込んで、それをブラウザが描写するんだけど、Gzip圧縮のコードを.htacssへ追記することで読み込みデータ量を少なくできるらしい。これによって読み込み速度が改善するんだけど、ガジェマガではウェブサイトキャッシュプラグインとしてWP Fastest Cacheを使っていて、 このプラグインに同じ機能があることに気づいたので、この記述はやめた。
Keep Alive設定を追記（やめた）
サーバーと通信できる状態を維持し続けるKeep Aliveを設定。その都度のやりとりが減って高速化に繋がるらしい。
# Enable Keep-Alive を設定
<IfModule mod_headers.c>
Header set Connection keep-alive
</IfModule>
ブラウザキャッシュ設定を追記（やめた）
ブラウザに一定期間キャッシュして一度訪れた人は高速で表示できる設定を追記。
# ブラウザキャッシュの設定
<IfModule mod_headers.c>
<ifModule mod_expires.c>
ExpiresActive On
# キャッシュ初期化（1秒に設定）
ExpiresDefault "access plus 1 seconds"
# MIME Type ごとの設定
ExpiresByType text/css "access plus 1 weeks"
ExpiresByType text/js "access plus 1 weeks"
ExpiresByType text/javascript "access plus 1 weeks"
ExpiresByType image/gif "access plus 1 weeks"
ExpiresByType image/jpeg "access plus 1 weeks"
ExpiresByType image/png "access plus 1 weeks"
ExpiresByType image/svg+xml "access plus 1 year"
ExpiresByType application/pdf "access plus 1 weeks"
ExpiresByType application/javascript "access plus 1 weeks"
ExpiresByType application/x-javascript "access plus 1 weeks"
ExpiresByType application/x-shockwave-flash "access plus 1 weeks"
ExpiresByType application/x-font-ttf "access plus 1 year"
ExpiresByType application/x-font-woff "access plus 1 year"
ExpiresByType application/x-font-opentype "access plus 1 year"
ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
</IfModule>
</IfModule>
正直どれも体感できる違いはなかった。GSmetrix等の表示速度計測対策ツール対策でしかないのでやらなくてもいいと思う。
3 functions.phpへの追記（継続）
これは効果が大きかった。グーグルアドセンスを筆頭とする重いJavascriptの読み込みを最後にすることでコンテンツの表示を高速化する記述だ。明確に表示が早くなった。
//レンダリングブロックしているJavascriptの読み込みを遅らせる
function move_scripts_head_to_footer_ex(){
//ヘッダーのスクリプトを取り除く
remove_action('wp_head', 'wp_print_scripts');
remove_action('wp_head', 'wp_print_head_scripts', 9);
remove_action('wp_head', 'wp_enqueue_scripts', 1);
//フッターにスクリプトを移動する
add_action('wp_footer', 'wp_print_scripts', 5);
add_action('wp_footer', 'wp_print_head_scripts', 5);
add_action('wp_footer', 'wp_enqueue_scripts', 5);
}
add_action( 'wp_enqueue_scripts', 'move_scripts_head_to_footer_ex' );
ちなみにプラグインのJavaScript to FooterやHead Cleanerでも同じことが出来る。
4 W3 Total Cache（やめた）
有名キャッシュソフト。高機能だけどエラーが起きることでも有名。
キャッシュソフトはユーザーがアクセスするたびにワードプレスを1から構築するのを辞めて、予め用意しておいたウェブサイトをユーザーに見せるプラグインで、導入すると明らかな効果を実感できる。
W3 Total Cacheはガジェマガだと表示が崩れるので利用を取りやめた。その代わりWP Fastest Cacheを使ってる。こっちはエラーもなく順調に使えてる。
5 WP Fastest Cache（継続）
有名キャッシュプラグイン。W3 Total Cacheの代わりに導入。使いやすいし不具合もないし、表示速度も速くなった。チーターがかわいい。
6 CloudFlare（やめた）
有名CDNアプリ。設定することで最適なCloudFlareのサーバーからウェブサイトをユーザーに提供できるようになる。サーバーの負荷軽減と表示速度高速化に役立つ。どうも不安定なのとあまり効果を実感できないので取りやめた。あとW3 Total Cacheとの組み合わせは最悪だと思う。バグって死ぬほど重くなった。こわい。もう触りたくない。
7 Autoptimize（やめた）
CSS、javascript、htmlを圧縮してウェブサイトの表示を早くするらしい。特に効果を感じなかった。
8 Head Cleaner（やめた）
上のAutoptimizeと同じようにCSS、javascript、htmlを圧縮してウェブサイトの表示を早くするらしい。また、javascriptをフッターで読み込ませる機能なども盛り込まれている。javascriptは上記のfunctions.phpの項目で手動で対策しているし、これも特に効果を感じなかった。
9 EWWW Image Optimizer（やめた）
画像をリサイズと圧縮してくれるプラグイン。俺はアップロードの段階で縮小専用で画像をリサイズしてるから使うの辞めた。このプラグインの機能には圧縮もあるけど、ガジェマガでは画像の品質には拘りたいと思っているので圧縮する必要はないと判断した。
10 PB Responsive Images（継続）
閲覧者の表示解像度によって画像のサイズを変更してくれるプラグイン。ガジェマガではこのプラグインを使って画像のサイズを出し分けることでデータ容量を少なくしてる。具体的には、スマホ表示なら画像の解像度最大768px、タブレットなら800px、PCなら900pxの画像を表示している。スマホサイトは横幅450pxも無いからもう少し768pxの画像を表示する必要はないんだけど、画面サイズに画像サイズを合わせると画像の劣化が激しい。納得できるレベルのところで768pxを選択した。画像サイズとウェブサイトの高速表示は切り離せない関係にあるけど、PB Responsive Imagesは見事に要望に応えてくれた。ガジェマガはデータ通信制限にかかった庶民にも優しいウェブサイトでありたい。
設定を変更しようとするとページが真っ白になって反映されないけど、phpを直接いじることで解決できる。やり方は別記事で解説している（→【PB Responsive Images導入】画面サイズに合わせた画像を出し分けてページを軽量化する）
11 Unveil Lazy Load（やめた）
画像の読み込みを送らせて高速表示するプラグイン。今表示されている画像しか読み込まないことで表示速度を改善している。使い方は簡単で、インストール→有効化だけだ。ただ、このプラグインを入れることで画像が画像検索に引っかからなくなるらしい。少しでも検索からの流入を増やすことを優先したいからこのプラグインはやめた。
12 表示開始まで1秒を切った決め手はサーバー移転（最強）
最終的に元も子もない話をしてしまうと、Xserverに乗り換えたんだけど、これが一番効果が大きかった。もし現在Xserver以外のサーバーを使っていて、読み込み速度に頭を抱えている人は移転した方が早い。
プラグインは無駄
とにかくウェブサイトの表示を高速化するために悩み抜いて色んな設定をし続けた結果、始めは表示開始まで6秒かかっていたところ、こねくり回して3秒まで縮めることができた。ただ、それでも数ある有名サイトは1秒以内には表示を開始していた。この差はサーバーだった。
Xserver最強
俺は万が一の可能性も考えてアダルト可のFUTOKAを利用していたんだけど、これを高性能で有名なXserverに乗り換えることで1秒以内に表示を開始できるようになった。たくさんのプラグインを入れることでウェブサイト表示速度計測ツールの判定は上がるかもしれないけど、重要なのはそこではない。
SEOに大きく影響する表示開始速度
ユーザーがストレスを感じるのはウェブサイトが表示されるまでの時間で、表示されてしまえば読み込みが完了するまでの時間を意識することはほとんど無い。多くの場合スクロールしてる間に読み込みが完了してしまう。そしてウェブサイトが表示されるまでの時間はサーバーの応答速度が大きく影響していて、プラグインでどうにかできる問題ではなかった。
ウェブサイト表示速度計測ツールでいくら高得点を出そうと無意味だ。表示開始が遅ければユーザーは離脱する。なんでも良いから1秒以内に表示して、ユーザーにページが切り替わったと思わせることで離脱率は下がり、ページビューは伸びる。これは間違いない。
実際ガジェマガはサーバーをXserverに移転してSSL暗号化通信に対応してテーマをAffingerJETに置き換えた翌日からページの検索順位が幹並上がってアクセスが20%増えた。重要なことなので繰り返すけど、プラグインをこねくり回すのは無駄だ。
プラグインには副作用も
三日三晩で色々こねくり回した結果ガジェマガのCSSは崩れて、更にプラグインのバグに見舞われて表示まで20秒かかるようになってしまったこともあった。これだと本末転倒だ。プラグインでどうにかしようという発想を捨てて根本となるサーバーを良いものにしたほうがいい。
サーバー移転の判断基準
そのために追加料金を払って、手間暇かけてまでサーバーを移転する必要があるかは悩む。ガジェマガはブログで生活できるまで成長させる予定なので、初期投資を惜しまないことにした。表示速度改善はSEOと回遊率の改善に繋がる。サーバーを移転することでブログ収益が増えて、いずれ元が取れると判断した。
それに書いても書いても成果が出ない時に自分に対してできる言い訳は無くしておきたい。時間をかけて成長させるストックビジネスであるブログにおいて、表示速度とかSSL暗号化とか有料テーマとか、SEOに影響があるとされているものは先に対策しておいて損はない。足を引っ張る要素を潰せばあとはコンテンツだけに注力すればいい。
だからそこまで考えていない人は手間暇と追加料金を払ってまでサーバーを移転する必要はないと思う。
