かくてもあられけるよ

セミリタイアしてシェアハウスで暮らすノマドなミニマリストのライフハックブログ

WordPressのSimplicity利用者は今すぐやった方がいい高速化テクニック3選+α

半年ほど前から始めた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に向上。

f:id:kenko-san:20161105135531j:plain

GTmetrixもD判定63%からB判定81%まで大幅に改善できた。

f:id:kenko-san:20161105135536j:plain

 WordPressのキャッシュ系プラグインはやめておいた

「WordPressの高速化」といえば、真っ先に挙がるのがキャッシュ系のプラグインだ。W3 Total CacheとWP Super Cacheあたりが有名だが、最近はWP Fastest Cacheが日本語対応で設定も易しく、主流になっているように思われる。

しかし、テーマとして使っているSimplicityはこれらのキャッシュ処理プラグインと相性が悪いことで有名らしく、PCとモバイルで表示が崩れたり、画面が真っ白になってプラグイン削除しても修復不可、という恐ろしいトラブルも起こるようだ。そこでひとまず、プラグインを使わずに実現できる、ブラウザキャッシュとリソース圧縮から試してみた。

高速化テクニック1:.htaccessファイルの修正

Simplicity公式サイトで推奨されているコードを.htaccessファイルに追記してみた。「コピペ一発」という、うたい文句のとおり、既存の.htaccessの後ろにコピペして上書きするだけ。これだけでPageSpeed Insightsのスコアがモバイル/PCとも10くらい向上して、しばらくブログを巡回してキャッシュを溜めると、体感的にもみるみる速度が増してきた。表示や動作にもまったく問題がない。

wp-simplicity.com

プラグインを入れるより手軽に、ノーリスクで10%以上の高速化を期待できるので、WordPressにSimplicityテーマを入れたら、まずやっておいて損はないテクニックだ。

高速化テクニック2:Autoptimizeプラグインの導入

プラグインは怖いといいつつも、CSSやJavaScriptの縮小だけならリスクも少ないかと思い、評判のいいAutoptimizeを入れてみた。WordPressの管理画面からプラグインを入れて、HTML/JavaScript/CSS Optionsのチェックを入れて保存するだけの、超簡単操作。

Autoptimize導入後、PageSpeed Insightsのスコアはモバイル/PCとも変化がなかったが、「修正が必要~修正を考慮」の項目から「CSS/HTML/JavaScriptを縮小する」のメッセージが消えて「合格」になったので、何らかの効果はあったと考えられる。GTmetrixの方はPageSpeed Scoreが6%も向上した。

f:id:kenko-san:20161105133654j:plain

体感的に大きく変わったのは、ページ内の各パーツが徐々に読み込まれるのではなく、最初にかなり時間をかけてから一気にレンダリングされるようになった点だ。トータルの読み込み時間は変わらないように思う。

人間の心理的には、少しずつでも読み込まれた方が安心感があり、画面がまったく変化しない状態で5秒も経つとバグのように見えて離脱率も上がってしまうだろう。数値的には改善が見られたが、体感的なデメリットを考えると、劇的にスピードが上がらなければオフにしてもいいプラグインかもしれない。

高速化テクニック3:EWWW Image Optimizerプラグインの導入

Autoptimizeプラグインを入れて問題なかったので、同様にリスクが低そうな画像圧縮系のEWWW Image Optimizerも導入してみた。Simplicityの公式サイトでも併用が推奨されていたので、問題ないと思う。

設定項目が多いので迷うが、他サイトを参考にHide Conversion Linksのオプションだけチェックを入れて、後はデフォルトのままメディアメニューからBulk Optimizeを走らせてみた。ブログ内に合計1,144枚の画像があり、同一画像、各サイズごとに自動で圧縮をかける。これだけの枚数を処理するのに6時間くらいかかった。

f:id:kenko-san:20161105133145j:plain

最適化のログを見ると、もともとjpegで80%くらい圧縮してアップしてあったせいか、各画像のデータ削減率は5~8%程度だった。画像圧縮後、PageSpeed InsightsとGTmetrixのスコアは同じ。体感的にも読み込み速度は変わらず。

このプラグインは、もともと高画質な画像をアップしている人にしか効果がないのかもしれない。あるいは不可逆圧縮をかけ、さらにjpgの画質も下げるとか。

番外編:WordPress Popular Postsプラグインの停止

サイドバーのウィジェットに「人気記事」を表示するWordPress Popular Postsのプラグイン(バージョン3.3.4)を使っていたが、どうやらこれがページをロードするごとに表示数を集計するので、遅延の原因になることがあるらしい。試しにプラグインを停止してみたら、人気記事の順位はめちゃくちゃになってしまったが、ページ全体の読み込みが劇的に速くなった。

f:id:kenko-san:20161105133507j:plain

これだけでPageSpeed Insightsは3スコア、GTmetrixは6%向上。数値的には微々たるものだが、なぜかブラウザに表示されるスピードが3倍以上、高速化した。上述の3つのテクニックのどれよりも効果があったと実感できる。プラグインの停止と有効化を何度か繰り返して検証したが、Popular Postsを止めた速度向上は明らかだった。

Simplicityだと「管理者のみにPV表示」というオプションがあり、WordPress Popular Postsと連携して個別記事の上に全体/月/週/日のPV数を簡易表示できる便利機能もある。トップページに「人気記事」を表示できないのも少し寂しいが、それでも高速化のメリットが大きいので、しばらくこのプラグインは外しておこうと思う。

f:id:kenko-san:20161105133520j:plain

少々設定は面倒だが、Googleアナリティクスと連携してサクサク動くSimple GA Rankingのプラグインなどもあるようだ。いずれまた人気記事を表示させたくなったら、Popular Posts以外のプラグインを検討してみよう。

ウィジェットやSNS機能の削除は効果なし

事前作業として、サイドバーに追加しているウィジェットが多すぎるかもしれないと思って、いったんすべて削除したが、効果は見られなかった。また、SimplicityのSNS設定で、FacebookやTwitterなどのボタンをすべて非表示にしてみたが、これも変化はなかった。

f:id:kenko-san:20161105133346j:plain

ページの読み込み過程を見ていると、SNS機能はそれなりに通信負荷が高そうだが、本文表示された後に記事下に追加されるので、体感的には遅延があっての気にならないのかもしれない。まあ現状では0が並んでほとんど意味ないSNSボタンなので、当面は非表示にしておいてもよいかと思う。

サーバ内の他サイトも地味にメンテナンス

WordPressに手を入れる前に、それ以外の要因を排除しておきたかったので、同じサーバで運用している他サイトもスリム化してみた。具体的には、10年近くいじっていなかったHTMLやCSSを最近のトレンドに合わせてコーディングし直したり、映像ファイルをサーバ上でなくVimeoにアップしてリンクを張ったり…結構時間がかかった。

事前にサーバの転送量を確認して、サーバからのファイルダウンロードなどは問題でないとわかっていたが、動画共有サイトでストリーミングできる方がメンテも閲覧も便利だろう。今回のWordPress高速化とは直接関係がないが、何年も前から古いウェブサイトを手入れしたかったので、これを機会にリニューアルできてよかった。

WordPress管理ページは相変わらず遅いまま

以上の高速化は、WordPressの管理ページの方にはまったく効果がない。記事数が増えてくると、新規投稿して更新したり、ウィジェットをカスタマイズしたり、管理画面内のすべての動作がもっさりしてきた。まるでMovableType時代の呪わしき「再構築」を思い出すようだ。

ダッシュボードの画面を開くだけで30秒くらいかかる。ウィジェットを編集して「保存」ボタンを押すと、適用完了するまで15秒くらいかかる。

f:id:kenko-san:20161105133427j:plain

お客さん側に見える部分ではないので多少は我慢できるが、そもそもWordPressを入れているXREAのサーバが重いのかもしれないと気付いた。

XREA、コアサーバー、バリューサーバーの比較

WordPressブログを運用しているサーバは、10年以上前から使っているXREAプラス。税込年額2,468円と、無料プランに毛が生えたくらいの格安レンタルサーバだが、一緒に置いているスタティックなHTMLサイトはまったく遅延が見られない。

ログを見ても転送量は1日150MB(月間4.5GB)くらい。

f:id:kenko-san:20161105133542j:plain

リクエスト数も1日5,000回程度なので、XREAプラスの転送量上限3,000MB/日からすると、まだ5%くらいの利用にすぎない。

f:id:kenko-san:20161105133601j:plain

XREAはバリュードメインの後継商品、バリューサーバーやコアサーバーに比べると、サーバのスペックが見劣りする。また、VALUE-SERVERの仕様には「最大アカウント数」の記載がないが、CORESERVERの最安プランCORE-MINIでは上限300と記載があり、上位プランに行くほど少なくなっている。XREAプラスのサーバは、広告付きで無料のXREAユーザと共用されていると思うので、恐ろしい数の同居人がいるはずだ。

f:id:kenko-san:20161105133615j:plain

小手先の高速化を行うくらいなら、サーバを上位プランに乗り換えた方が早いかもしれないが、ひとまず今回は無料で済む範囲でWordPressのメンテナンスを試してみようと思った。バリュードメイン内でのサーバ移行は簡単にできるようなので、今回施した高速化の成果を見て、上位プランへの乗せ換えも検討してみようと思う。

2017年1月にXREAの大幅アップデート予定

久々にXREAのウェブサイトを見たら、全面的にリニューアルされていて、「全プラン最新のCPU、SSDに対応(2017年1月予定)」と記載されていた。具体的な予定スペックは公開されていないが、おそらくコアサーバー、バリューサーバーと同等の最新仕様にアップデートされるのではないかと思う。

f:id:kenko-san:20161105133203j:plain

そうなると契約更新も面倒なので、XREAプラスをそのまま使い続けてみるという選択肢もあるが、一段階アップしたバリューサーバーのスタンダードプランあたりを試してみたい気持ちもある。年額で税込4,320円と、現在の2倍くらい高くはなるが、はてなブログのProの2年契約よりも安いくらいだ。

XREAのFAQを見ると、複数アカウント間で有料サービスの契約期限を移動できるが、同一アカウント内で別プランに契約期間を引き継ぐのはできないようだ。年間契約したXREAプラスの期限がまだ数か月残っているので、とりあえず来年1月のアップデートで様子を見てから、契約更新のタイミングでサーバ乗せ換えを検討してみようと思う。

はてなブログのパフォーマンス計測

こちらのはてなブログは、さすがにPro版にして高い料金を払っているせいか、WordPressサイトと同じくらいの記事数でも恐ろしく高速である。今回施したようなキャッシュ関係とか、高速化の対策はふんだんに施されているのかもしれない。

ところが、はてなブログをPageSpeed Insightsにかけてみると、モバイルは70とそこそこだが、PCが25とひどいスコアになっていた。

f:id:kenko-san:20161105133320j:plain

GTmetrixのPageSpeed Scoreも27%でFランクである。

f:id:kenko-san:20161105133309j:plain

結局のところ、表示速度計測ツールのスコアと体感速度とは別物で、気休めにすぎないのかもしれない。HTMLの文法チェッカーと同様で、こだわり始めると少しでもスコアを上げようと躍起になりがちだが、ユーザ側から見ればどうでもいい差で自己満足に過ぎなかったりする。

ウェブサイトの高速化に血道を上げるよりは、とっととお金を払ってまともなサーバに乗り換えて、その分ブログの記事を増やした方が有意義だとも考えられる。