ブログでもスピードを突き詰める

高速の世界

スピードは常に正義です。「仕事の処理・トレード執行・CPU・ネットワーク・タイピング・スポーツ・・・etc」例を上げれば枚挙にいとまがありません。

私もこれまで様々な分野でスピードにこだわってきたのですが、自分のブログの表示速度が極めて遅いということに気づいてしまいました。(今まで気づかなかったのが情けないですが。。。)

表示速度が速くなる改善を少しずつやっていきますので、同じ悩みを持っている方の参考になれば幸いです。

なぜページの表示速度が重要なのか?

Webサイトの管理者は、サイトに訪問してくれるユーザーに対してストレスのない速度で画面を表示する責務があると思います。

また、Webサイト管理者側にとっても直帰率や滞在時間が下がり良いことがありません。

つまり、スピードが遅いと「ユーザーも管理者も損をする。」ということです。やはりスピードは正義です。


現状の把握

いくつか確認方法はあるのですが、グーグルの「PageSpeed Insights」を利用します。

リンク先でページ速度を確認したいURLを入れて、「分析」をクリックすれば結果が表示されます。

例えば以下のような結果が表示されます。画面にあるとおり「90~100が速い」「50~90が平均」「0~49が遅い」ということなので・・・私のサイトはとんでもないことになっていることが分かりました。

PageSpeed Insightsの結果

Webサイトのページを全て試したところ、75画面で平均39.68でした。

この数値はモバイルで表示した場合のパフォーマンスです。PageSpeed Insightsはかなり秀逸で、1回分析すると「モバイル/パソコン」両方のパフォーマンスを計測することができます。(左上のタブで切り替え可能。)

「パソコン」のパフォーマンスは平均80を超えていたので、早急に対応するべきはモバイル側であることが分かりました。



改善

プラグイン追加

39.68 -> 37.74

WordPressではプラグインで高速化が可能なので、Autoptimizeとlazy loadを入れましたが、私の環境では全くスピードが上がりませんでした。

※渡井のバージョンではlazy loadで一部画面が表示されなくなったので停止しました。


モバイルでのサイトバー削除

37.74 -> 41.20

モバイルではサイドバーが表示できないので一番下に表示されてしまいます。殆ど見られることも無いでしょうし削除しました。


広告減らし

41.20 -> 45.82

Googleアドセンスの自動広告を使っていて完全にお任せモードだったのですが、あまりにも遅い状況で広告を優先している場合ではありませんので大幅に減らしました。


サーバー側の高速化

45.82 -> 46.20

XServerを利用しているので、用意されている高速化設定(Xアクセラレータとmod_pagespeed設定)を試してみましたが、ほぼ数値は変わりませんでした。


画像サイズ調整

46.20 -> 51.82

かなりの効果がありました。「既存の画像サイズの圧縮」と「最初から小さいサイズの画像に差し替え(試しに3画面だけです)」の2つを実施しました。

最初からサイズの小さい画面で構成するのが最も効率が良さそうです。既存画像サイズの圧縮はWordPressのプラグインEWWW Image Optimizerを使いましたが、そこまで効果は出ませんでした。

※知識不足でかなりハマった部分があるので共有します。

画像サイズをいくら小さくしても実際に画面表示するサイズが大きければパフォーマンスが上がりません。例えば画像を圧縮して452KBにした状態でアップロードしましたが、読み込まれるサイズが全く変わらず・・・よく見るとアップロードしたサイズは452KB(フルサイズ)でも画面で使われているサイズは1028KB(ラージ)でした。


不要なプラグイン削除

51.82 -> 61.00

最も簡単で最も効果がありました。

吹き出しのプラグインを1つ入れていたのですが、1つの画面でしか使っていませんでした。1画面のために全画面がこのプラグインのCSSを読み込んでいて無駄に感じたので削除しました。



最後に

今回は時間の関係上ここまでとなりますが、もちろん90を突破できるようにしていきますのでもう少々お待ちください。(改善後のPC側の平均速度は95.86でしたのでモバイルもこの辺りを目標にします。)

貴重な時間を割いて自分のサイトを見に来てくれる方々のために少しでもスピードを上げていきましょう。