フジブロっ!

HTML、CSSを独学で楽しく学ぶガテン系のブログ

カスタマイズし過ぎるとサイトスピードは低下する?検証してみた!

どうも!フジグチです!

「ブログをカスタマイズしすぎるとサイトの表示速度が低下する」こんなことを聞いた(読んだ)ことはありませんか?

ブログを書くよりカスタマイズ!

カスタマイズした三日後にはまた別のデザインにカスタマイズ!

というカスタマイズのことしか考えていない私が、

  • テーマのみの場合
  • デザインCSSカスタマイズ後
  • オリジナルテーマ圧縮後

の3パターンでサイトスピードを計測して検証してみました。

カスタマイズで読み込み速度が変わるか検証した

サイトのスピードテスト

スピードテストに使用したツールはPageSpeed Insightsです。

検証したURLは前回の記事です。

1.テーマのみの場合

当ブログの使用テーマはUnderShirtsです。

まずデザインCSSを削除しデフォルトの状態に戻します。

フジブロっ!デザインをデフォルトに戻した状態

この状態で計測した結果がこちら▽

サイトスピードテスト「テーマデフォルトの状態」

2.デザインCSSありの場合

続いてデザインCSSありの場合です。

カスタマイズの状態は今ご覧になっている感じで、デザインCSS内に500行ほどのボリュームです。

この状態で計測した結果がこちら▽

サイトスピードテスト「デザインCSSあり」

3.オリジナルテーマ

続いて当ブログオリジナルテーマ圧縮後の場合です。

「オリジナルテーマ」と言っても1から作成したわけではなく、2の「デザインCSSあり」の状態をUnderShirts内に組み込んだものとなっているので、見た目のデザインは変わりません。

じゃあ何が違うのか?というと不要なCSSを削除しています。

デザインCSS内とUnderShirts内に重複したCSSや、@media~といったメディアクエリがいくつも書かれている場合は1つにまとめています。

それをさらにMinify(圧縮)しました。

ミニフィ (Minify)とは

ホームページの表示を高速化する目的で、ホームページのファイル(HTMLファイル、CSSファイル、JavaScriptファイルなど)のサイズを小さくすること

Minifyすることで全ての「改行」「スペース」不要な「;」などが削除されCSSが軽量化されます。

※テーマの改変はクリエイティブコモンズに注意してください▽

大多数のはてなブログテーマは「ライセンス違反」によりカスタマイズできない - MoonNote

この状態で計測した結果がこちら▽

サイトスピードテスト「デザイン圧縮後」

検証まとめ

3つの測定結果を比べてみると

ほぼ誤差じゃね?

という感じでしたね。

テーマデフォルトの状態よりデザインCSS追加後の方が速度が上がるというのはおかしいので、誤差程度の差しかないといったところです。

参考までに測定時のCSSファイル容量を書いておきます。

テーマのみの場合 29KB
デザインCSSありの場合 46KB
オリジナルテーマ圧縮後 27KB

カスタマイズで速度が落ちると感じるのはJavaScriptやjQueryを使ったカスタマイズをしていたり、Font AwesomeやGoogle Fonts(特に日本語)を使っていると、体感的にも読み込み速度が変わってくるかもしれません。

それでもせっかくの「自分のブログ

小さいことは気にせず、自分だけのカスタマイズを楽しんでみればいいんじゃないでしょうか。

最後までお読み頂きありがとうございました。

トップへ戻る