表示速度を向上するべく、ちょこちょこブログの中身を改善してみました。
こういった表示速度をアップさせる施策は、多分今後新たにWordpressでブログ開設するたびに繰り返すと思いますので、メモがてらまとめてみたいと思います。
ブログ表示速度の計測にはPageSpeed Insightsを利用
ブログ表示速度の計測には、Google DevelopersのPageSpeed Insightsを利用しました。googleさんがPC/モバイルでブログの表示がどのくらいの速さか計測してくれます。
例によってwebリテラシーの低い管理人はbeforeの魚拓を撮り忘れちゃったのですが(たはは)、afterは上記画像のようなかんじです。モバイルが66でPCが79という結果に。モバイルもPCも最初は61とか71とかだった気がするので、大体5％くらい改善しました。
表示速度改善にあたっては、特にモバイルを意識
ブログ閲覧者の六割はモバイル
自分の場合、アクセス解析はgoogleアナリティクスを使っているのですが、それを見ますと、当ブログにお越しくださるかたの六割くらいがスマートフォンなどのタブレット端末によるモバイル経由です。
モバイル閲覧者の比率は今後どんどん増えていくでしょうし、僕自身、自分のブログをスマホでチェックしている時にもたっとしているのは嫌なので、今回は特にモバイルの場合での表示速度アップを意識して、改善しました。(ちなみに、キャッシュ系の施策は、以前、既に導入済み)
▼関連記事
サイドバー下部のウィジェットを一部非表示
STINGER5のモバイル表示では、サイドバーがフッタに表示される
当ブログでは、Wordpressテーマとして王道のSTINGER5を採用しています。STINGERは3から5にバージョンアップする際にPC/モバイルのcssが共通になり、端末の画面サイズにあわせて、動的にレイアウトが調節されるようになりました。
PC版の場合、右にサイドバーが表示される2ペイン式ですが、モバイルの場合、このサイドバーは記事下のフッターにずらっと表示される仕様です。
モバイル閲覧者は、サイドバー下部(=フッタ)まで見ないんじゃないか？
当ブログの記事は一記事が長いので、賑やかしとしてサイドバー下部にtwitterとブログパーツを導入していました。
しかし、モバイルの場合、上述のとおり、このサイドバーが記事下部に表示されます。ただでさえ長い記事の下に、更に長いサイドバーがずらずらっと表示されるので、スクロールがすごいことになります。
特に下部のtwitterウィジェットなどは、モバイル画面上での操作性がイマイチですし、訪問者さんも一番下までスクロールしたりはしていないんじゃないかなぁと思いました。
なので、モバイルの場合は、ウィジェットを非表示にしたり、軽いブログパーツへの表示切替をするようにしてみました。
多分、この施策で数％くらいは改善していると思います。
▼関連記事
プロフ画像のリサイズ
草創期の遺産
サイドバーTOP付近にあるプロフ画像ですが、右も左もわからぬブログ開設当初に貼ったまま放置していたため、画像サイズの最適化がされていませんでした。(なんと500pxの画像を縮小表示していたのです！)
サイドバーはどのページでも表示されるわけで、そのプロフ画像が最適化されていないというのは、大変いかんです。よって、小さい画像を別途用意しました。
CSSの縮小
cssやjsの外部ファイルの改行や空白・タブを除去すると、ファイルサイズが小さくなり、読み込みが早くなるそうです。
そこで、滅多に触らないだろうベースのCSS等をいくつか改行レスにしてみました。
画像の圧縮にEWWW Image Optimizerプラグイン
プロフ画像については、画像の縦横幅のリサイズでしたが、こちらは画像自体を圧縮してファイルサイズを小さくしようという施策です。
画像圧縮にはEWWW Image Optimizerというプラグインを導入しました。参考にしたのは、こちらの記事。
全画像を圧縮してみたのですが、そんなに品質的に劣化しているようにも見えないので、これは当たりかなと思います。
うまくいかなかった施策
以下は、うまくいかなかった施策です。
サムネ画像をjpgからgifにしたら軽くなるかと思ったけど、そうでもなかった
一般的な理解として、画像のファイルサイズはPNG→JPG→GIFの順番で軽くなっていくものだという認識が管理人にはありました。
なので、wordpress popular postsの実装に手を加えて、人気記事一覧のサムネ生成する際に、jpgではなくgif画像を生成するようにしてみたのですが、かえってファイルサイズが大きくなってしまいました。
いくつかのファイルで比較してみたのですが、少なくとも確認したケースにおいては、全てjpgの方がファイルサイズが小さく、あれー？という結果に。
小さなサムネ画像などの場合、jpgの方が軽くなるものなのでしょうか。意外です。
js等の非同期(async)処理
ちょっとやってみたのですが、js同士の依存関係を調べるのが大変で断念しました。
検討したものの、どうしようか迷っている施策
画像読み込みの非同期処理を採用するべきか否か
表示速度を改善するうえで、画像やCSSの読み込みを後回しさせて初期表示を高速化する方法があるのですが、これを採用するかちょっと迷い中です。(部分的には、採用している箇所もある)
というのは、先にページを表示させて後から画像を読み込むということは、ページがカクカクッと下に下がっていくということなので。僕、あれがあまり好きじゃないんです。読んでいる位置がどんどん下に流れていっちゃうし、誤クリックしちゃいそうで。
なので、こちらについては、まだ検討段階です。
おわりに
というわけで、モバイル端末の表示速度アップに向けて、ブログ改善、ちょっとがんばってみました。
いかがでしょうか。少しは速くなっていますかね。もし、「ここの表示が崩れているよ」とか「速くなった気がするよ」とか「こういうやり方がオススメだよ」などありましたら、お教えいただければ幸いです。