どうも！フジグチです！
「ブログをカスタマイズしすぎるとサイトの表示速度が低下する」こんなことを聞いた（読んだ）ことはありませんか？
ブログを書くよりカスタマイズ！
カスタマイズした三日後にはまた別のデザインにカスタマイズ！
というカスタマイズのことしか考えていない私が、
- テーマのみの場合
- デザインCSSカスタマイズ後
- オリジナルテーマ圧縮後
の３パターンでサイトスピードを計測して検証してみました。
サイトのスピードテスト
スピードテストに使用したツールはPageSpeed Insightsです。
検証したURLは前回の記事です。
１.テーマのみの場合
当ブログの使用テーマはUnderShirtsです。
まずデザインCSSを削除しデフォルトの状態に戻します。
この状態で計測した結果がこちら▽
２.デザインCSSありの場合
続いてデザインCSSありの場合です。
カスタマイズの状態は今ご覧になっている感じで、デザインCSS内に500行ほどのボリュームです。
この状態で計測した結果がこちら▽
３.オリジナルテーマ
続いて当ブログオリジナルテーマ圧縮後の場合です。
「オリジナルテーマ」と言っても１から作成したわけではなく、２の「デザインCSSあり」の状態をUnderShirts内に組み込んだものとなっているので、見た目のデザインは変わりません。
じゃあ何が違うのか？というと不要なCSSを削除しています。
デザインCSS内とUnderShirts内に重複したCSSや、@media～といったメディアクエリがいくつも書かれている場合は１つにまとめています。
それをさらにMinify（圧縮）しました。
ミニフィ (Minify)とは
ホームページの表示を高速化する目的で、ホームページのファイル（HTMLファイル、CSSファイル、JavaScriptファイルなど）のサイズを小さくすること
Minifyすることで全ての「改行」「スペース」不要な「;」などが削除されCSSが軽量化されます。
※テーマの改変はクリエイティブコモンズに注意してください▽
大多数のはてなブログテーマは「ライセンス違反」によりカスタマイズできない - MoonNote
この状態で計測した結果がこちら▽
検証まとめ
３つの測定結果を比べてみると
ほぼ誤差じゃね？
という感じでしたね。
テーマデフォルトの状態よりデザインCSS追加後の方が速度が上がるというのはおかしいので、誤差程度の差しかないといったところです。
参考までに測定時のCSSファイル容量を書いておきます。
| テーマのみの場合 | 29KB |
| デザインCSSありの場合 | 46KB |
| オリジナルテーマ圧縮後 | 27KB |
カスタマイズで速度が落ちると感じるのはJavaScriptやjQueryを使ったカスタマイズをしていたり、Font AwesomeやGoogle Fonts（特に日本語）を使っていると、体感的にも読み込み速度が変わってくるかもしれません。
それでもせっかくの「自分のブログ」
小さいことは気にせず、自分だけのカスタマイズを楽しんでみればいいんじゃないでしょうか。
最後までお読み頂きありがとうございました。
