BloggerのテーマContempoをリファクタリングしてパフォーマンスを改善しました

私のブログはBloggerが標準で用意しているContempoというテーマを使っています。絵を載せたかったので画像がメインのデザインになっているこのテーマが気に入っているのですが、結構もっさりした動作が気になっていたのでリファクタリングしてみました。

PageSpeed Insightsで測定した結果は以下の通り。

new desktop
new mobile

こちらは以前測定したもの。結構改善されたよね✌

old desktop
old mobile

大きな変更点は以下３つ。

  • 何種類も読み込んでいたWEBフォントの削除
  • 使っていない機能への分岐を削除
  • flexboxでのレイアウトをgridに変更して不要なcssを削除

Bloggerでデフォルトで読み込んでいるスタイルやJavaScriptは、今のデザインを維持するために必要なので残しました。

ついでに少しデザインもいじってみたので良い感じです。
スマホ用の画面のパフォーマンスがもっと改善できたらいいんだけど🙄
また暇なときにちょこちょこいじってみよう。