半年ほど前から始めたWordPressのブログが、最近目に見えて重くなってきた。トップページ、カテゴリーページ、個別記事に関わらず、PC/モバイルとも読み込みに10秒くらいかかって、とても耐えきれない。運営している本人がイライラするくらいだから、わざわざブログを見にきてくれた人の離脱率はかなり上がっていることだろう。
ウェブサイトのボリュームは、平均2,000文字くらいの記事が80個くらい。画像は多めで数えたら1,000以上あった。WordPressのプラグインはいくつか入れたが、その他はCSSをちょっといじって見た目を変えたくらいで、Simplicityのテーマをほとんどデフォルトのまま使っている。
高速化のため、単純にサーバを増強する方法も考えらえるが、ひとまず無料でできる範囲の対策をいろいろ試してみた。以下の対策を検証したWordPressのバージョンは4.6.1-ja、Simplicityは2.3.0gの安定版、それぞれ2016年11月4日現在の最新バージョンを利用している。
結果的にGoogleのPageSpeed Tools > Insightsのスコアはモバイルで60から74、PCで73から86に向上。
GTmetrixもD判定63%からB判定81%まで大幅に改善できた。
キャッシュ系プラグインはやめておいた
「WordPressの高速化」といえば、真っ先に挙がるのがキャッシュ系のプラグインだ。W3 Total CacheとWP Super Cacheあたりが有名だが、最近はWP Fastest Cacheが日本語対応で設定も易しく、主流になっているように思われる。
しかし、テーマとして使っているSimplicityはこれらのキャッシュ処理プラグインと相性が悪いことで有名らしい。PCとモバイルで表示が崩れたり、画面が真っ白になってプラグイン削除しても修復不可、という恐ろしいトラブルも起こるようだ。
そこでひとまず、プラグインを使わずに実現できるブラウザキャッシュとリソース圧縮から試してみた。
①.htaccessファイルの修正
Simplicity公式サイトで推奨されているコードを.htaccessファイルに追記してみた。「コピペ一発」という、うたい文句のとおり、既存の.htaccessの後ろにコピペして上書きするだけ。
これだけでPageSpeed Insightsのスコアがモバイル/PCとも10くらい向上して、しばらくブログを巡回してキャッシュを溜めると、体感的にもみるみる速度が増してきた。表示や動作にもまったく問題がない。
プラグインを入れるより手軽に、ノーリスクで10%以上の高速化を期待できるので、WordPressにSimplicityテーマを入れたら、まずやっておいて損はないテクニックだ。
②Autoptimizeプラグインの導入
プラグインは怖いといいつつも、CSSやJavaScriptの縮小だけならリスクも少ないかと思い、評判のいいAutoptimizeを入れてみた。WordPressの管理画面からプラグインを入れて、HTML/JavaScript/CSS Optionsのチェックを入れて保存するだけの、超簡単操作。
Autoptimize導入後、PageSpeed Insightsのスコアはモバイル/PCとも変化がなかったが、「修正が必要～修正を考慮」の項目から「CSS/HTML/JavaScriptを縮小する」のメッセージが消えて「合格」になった。GTmetrixの方はPageSpeed Scoreが6%も向上した。
体感的に大きく変わったのは、ページ内の各パーツが徐々に読み込まれるのではなく、最初にかなり時間をかけてから一気にレンダリングされるようになった点だ。トータルの読み込み時間は変わらないように思う。
心理的には少しずつでも読み込まれた方が安心感がある。画面がまったく変化しない状態で5秒も経つと、さすがに離脱率が上がってしまうだろう。数値的には改善が見られたが、体感的なデメリットは大きい。劇的にスピードが上がらなければ、オフにしてもいいプラグインかもしれない。
③EWWW Image Optimizerプラグインの導入
Autoptimizeプラグインを入れて問題なかったので、同様にリスクが低そうな画像圧縮系のEWWW Image Optimizerも導入してみた。Simplicityの公式サイトでも併用が推奨されていたので問題ないと思う。
設定項目が多いので迷うが、他サイトを参考にHide Conversion Linksのオプションだけチェックを入れて、後はデフォルトのままメディアメニューからBulk Optimizeを走らせてみた。ブログ内に合計1,144枚の画像があり、同一画像、各サイズごとに自動で圧縮をかける。これだけの枚数を処理するのに6時間くらいかかった。
最適化のログを見ると、もともとjpegで80%くらい圧縮してアップしてあったせいか、各画像のデータ削減率は5～8%程度だった。画像圧縮後、PageSpeed InsightsとGTmetrixのスコアは同じ。体感的にも読み込み速度は変わらず。
このプラグインは、もともと高画質な画像をアップしている人にしか効果がないのかもしれない。あるいは不可逆圧縮をかけ、さらにjpgの画質も下げれば改善できる可能性はある。
番外編：WordPress Popular Postsプラグインの停止
サイドバーのウィジェットに「人気記事」を表示するWordPress Popular Postsのプラグイン（バージョン3.3.4）を使っていた。どうやらこれがページをロードするごとに表示数を集計するので、遅延の原因になることがあるらしい。試しにプラグインを停止してみたら、ページ全体の読み込みが劇的に速くなった。
これだけでPageSpeed Insightsは3スコア、GTmetrixは6%向上。数値的には微々たるものだが、なぜかブラウザに表示されるスピードが3倍以上、高速化した。上述の3つのテクニックのどれよりも効果があったと実感できる。プラグインの停止と有効化を何度か繰り返して検証したが、Popular Postsを止めた速度向上は明らかだった。
Simplicityだと「管理者のみにPV表示」というオプションがあり、WordPress Popular Postsと連携して個別記事の上に全体/月/週/日のPV数を簡易表示できる便利機能もある。トップページに「人気記事」を表示できないのも少し寂しいが、それでも高速化のメリットが大きいので、しばらくこのプラグインは外しておこうと思う。
少々設定は面倒だが、Googleアナリティクスと連携してサクサク動くSimple GA Rankingのプラグインなどもあるようだ。いずれまた人気記事を表示させたくなったら、Popular Posts以外のプラグインを検討してみよう。
ウィジェットやSNS機能の削除は効果なし
サイドバーに追加しているウィジェットをすべて削除してみたが、効果は見られなかった。またSimplicityのSNS設定で、FacebookやTwitterなどのボタンをすべて非表示にしてみたが、これも変化はなかった。
ページの読み込み過程を見ていると、SNS機能はそれなりに通信負荷が高そうだが、本文表示された後に記事下に追加されるので、体感的には遅延があっての気にならないのかもしれない。まあ現状では0が並んでほとんど意味ないSNSボタンなので、当面は非表示にしておいてもよいかと思う。
サーバ内の他サイトも地味にメンテナンス
同じサーバで運用している、WordPress以外のサイトもスリム化してみた。具体的には、10年近くいじっていなかったHTMLやCSSを最近のトレンドに合わせてコーディングし直したり、映像ファイルをサーバ上でなくVimeoにアップしてリンクを張ったり。
事前にサーバの転送量を確認して、サーバからのファイルダウンロードは問題でないとわかっていた。そしてWordPressの高速化にも、ほとんど貢献しなかった。
WordPress管理ページは相変わらず遅いまま
以上の高速化は、WordPressの管理ページの方にはまったく効果がない。記事数が増えてくると、新規投稿して更新したり、ウィジェットをカスタマイズしたり、管理画面内のすべての動作がもっさりしてきた。まるでMovableType時代の「再構築」作業を思い出すようだ。
ダッシュボードの画面を開くだけで30秒くらいかかる。ウィジェットを編集して「保存」ボタンを押すと、適用完了するまで15秒くらいかかる。
お客さん側に見える部分ではないので多少は我慢できるが、そもそもWordPressを入れているXREAのサーバが重いのかもしれないと気付いた。
XREA、コアサーバー、バリューサーバーの比較
WordPressブログを運用しているサーバは、10年以上前から使っているXREAプラス。税込年額2,468円と、無料プランに毛が生えたくらいの格安レンタルサーバだが、一緒に置いているスタティックなHTMLサイトはまったく遅延が見られない。
ログを見ても転送量は1日150MB（月間4.5GB）くらい。
リクエスト数も1日5,000回程度なので、XREAプラスの転送量上限3,000MB/日からすると、まだ5%くらいの利用にすぎない。
XREAはバリュードメインの後継商品、バリューサーバーやコアサーバーに比べると、サーバのスペックが見劣りする。また、VALUE-SERVERの仕様には「最大アカウント数」の記載がないが、CORESERVERの最安プランCORE-MINIでは上限300と記載がある。そして上位プランに行くほど少なくなっている。
XREAプラスのサーバは、広告付き無料ユーザーと共用されていると思うので、恐ろしい数の同居人がいるはずだ。
小手先の高速化を行うくらいなら、サーバを上位プランに乗り換えた方が早いかもしれないが、ひとまず今回は無料で済む範囲でWordPressのメンテナンスを試してみようと思った。バリュードメイン内でのサーバ移行は簡単にできるようなので、今回施した高速化の成果を見て、上位プランへの乗せ換えも検討してみようと思う。
2017年1月にXREAの大幅アップデート予定
久々にXREAのウェブサイトを見たら、全面的にリニューアルされていて、「全プラン最新のCPU、SSDに対応（2017年1月予定）」と記載されていた。具体的な予定スペックは公開されていないが、おそらくコアサーバー、バリューサーバーと同等の最新仕様にアップデートされるのではないかと思う。
契約更新も面倒なので、リニューアルに期待してXREAプラスをそのまま使い続けてみる選択肢もある。一方で、この際バリューサーバーのスタンダードプランあたりを試してみたい気持ちもある。年額で税込4,320円と現在の2倍くらい高くはなるが、はてなブログのProの2年契約よりは安い。
XREAのFAQを見ると、複数アカウント間で有料サービスの契約期限を移動できるが、同一アカウント内で別プランに契約期間を引き継ぐのはできないようだ。年間契約したXREAプラスの期限がまだ数か月残っているので、とりあえず来年1月のアップデートで様子を見てから、契約更新のタイミングでサーバ乗せ換えを検討してみようと思う。
はてなブログのパフォーマンス計測
こちらのはてなブログは、さすがにPro版にして高い料金を払っているせいか、WordPressサイトと同じくらいの記事数でも恐ろしく高速である。サーバーのスペック以外に、キャッシュ関係や高速化対策は十分行われているのだろう。
ところが、はてなブログをPageSpeed Insightsにかけてみると、モバイルは70とそこそこだが、PCが25とひどいスコアになっていた。
GTmetrixのPageSpeed Scoreも27%でFランクである。
結局のところ、表示速度計測ツールのスコアと体感速度とは別物で、気休めにすぎないのかもしれない。HTMLの文法チェッカーと同様で、こだわり始めると少しでもスコアを上げたくなる気持ちにある。しかし、ユーザー側から見ればどうでもいい差で、自己満足に過ぎなかったりする。
ウェブサイトの高速化に血道を上げるよりは、お金を払ってまともなサーバに乗り換え、その分ブログの記事を増やした方が有意義とも考えられる。