CSSへ書込み1000行超えでサイトの表示速度への影響を調べてみた

2017/12/032017/12/09

今まで当ブログで紹介してきたような子テーマのスタイルシート（CSS）に追記するカスタマイズは、WEBページの表示速度にどれほど影響するのか、自分でも疑問に思っていたので実験してみることにしました。

CSSにコードを書き込んでどんどんデザインが自分好みの形になっていくと、サイトに対しての愛着も湧いてきて記事を書き続けるモチベーションにもつながります。

しかしずっと気になっていたことなのですが、それって果たして表示速度に影響を与えないんだろうかと。

サイトの表示速度の重要性

サイトの表示速度って、遅いと待ってられなくなって離脱しますっていう人も中には多いのではないでしょうか。自分に置き換えて考えてみても、ページを切り替えるたびに長い間待たされると「なんじゃこのサイトは」となってさっさと次のサイトへ行っちゃいます。

ページ表示速度はSEOの評価の一つになっているとGoogleも公表しているように、WEBサイトの運営者にとってWEBサイトの表示速度は、PV数、引いては検索順位にも影響してくる非常に重要な要素の一つなんです。

速さの為に選んだテーマはLuxeritas

このブログを始めるに当たって無料のワードプレステーマを探していたのですが、良さそうだなと思った【Simplicity】と【Luxeritas】の2つにまで絞ったあと、最終的に決め手となったのが…

SEO 最適化済み、レスポンシブ、
高カスタマイズ性を持つ無料の WordPress テーマです。

また、多機能であるにも関わらず、
Webページを高速に表示するための仕組みが満載されており、非常に高速に動作します。

名前はラテン語の Lux（光）と Celeritas（速）のガッチャンコ形。

引用：https://thk.kanzae.net/wp/

この『非常に高速に動作します』という文句に背中を押され、Luxeritasのテーマにすることにしました。

実際の表示速度についても、調べれば色々な人が検証をして良好な結果が出ているのでここでは控えますが、ちゃんと速い、ということだけはわかりました。

ただ、Simplicityのようにフォーラムがなく、Luxeritasがリリースされてまだ間もないということもあり、まだまだ深いカスタマイズをするには情報が少ない印象があります。

すでに完成された感のあるLuxeritasですが、今のところ1～2週間に一度くらいの間隔でバージョンアップされており、これからもどんどん完成度が高まっていくのだろうと期待しています。

CSS関連のサイトは内容が難しい

スタイルシート（CSS）に追記していくことで、Luxeritasの特徴でもある『高速な動作』が損なわれては元も子もありませんよね。

ということで、自分でCSSが与える影響のことをググって調べてみたのですが、上位表示されているサイトの内容がまた非常に難解。専門用語のオンパレードにほとんど理解できずそっとじしました。

でもなんとなくわかったのは、『CSSに追記するとWEBページの表示速度に影響を及ぼす場合があるよ！』ということです。

この『影響を及ぼす場合がある』っていうのはなかなかの曲者の表現で、影響を及ぼす場合があるっていうのは、無い場合もあるっていうことだし、あるのかないのかはっきりしない。どっちなんだ。

って細かなケースについて調べようとすると、また鬼の専門用語に阻まれ答えが分からない。

そこで実験

結局知りたいのは、今のカスタマイズで遅くなるの？ならないの！？ということだと思います。

それだけだったら、今までCSSに書いたコードをバックアップ取っておいてから、そのコードを消す前と後でのサイト表示速度をツールで測ればいいだけなので、私でも簡単に調べることができますよね。

あとはCSSに書き込んでいるボリュームが十分にあるかどうかですが、その点、当ブログのCSSは追記分だけで1000行を超えているので、ある程度の評価は出来るのではないでしょうか。

実験の条件と使用するツール

実験に使うサイトは本ブログではなく、余っていたドメインに同じテーマ、同じプラグイン、同じCSSを適用させたコピーブログです。

アドセンスなどの広告がないだけで、それ以外は条件はこのブログと同じにしています。

ページ評価【PageSpeed Insights】

GoogleのサービスでPageSpeed Insightsというページの速度評価をしてくれる無料ツールで測定。

測定回数は1回だけだと間違った数字が出る可能性もあるので、5回の平均点としました。

ツールの画面はこんな感じ。

このツールはページの総合的な解析をしてくれて、その評価として100点満点中の何点かを教えてくれます。

モバイルとパソコン2つの環境での評価を同時に出してくれるというスグレモノですが、このツールだけだとページを開くときに何秒かかっているかというのがわかりません。

秒数測定【Page load time】

この測定はパソコンのみですが、実際にページを開いた時に何秒かかるかをchromeの『Page load time』というプラグインを使って10回測定します。

その中で一番低い値と高い値を除いた平均点で評価。測定の際には毎回キャッシュをクリアすることとします。

ページを読み込むと、そのページを開くまでに何秒かかったのかという秒数がカウントされます。

こちらは結構ばらつきがあるので、『PageSpeed Insights』に比べて倍の10回測定にしています。

測定結果発表

CSS書込み有

※赤い色の数値は最大値と最小値なので省きます

CSS書込み無

※赤い色の数値は最大値と最小値なので省きます

集計結果

評価の見方としては、秒数は短く、点数は多い方が勝ち。

ということで、【CSS書込み有】の方が2勝0敗1引き分けで勝ってしまいました。

あれ？

予想では【CSS書込み有】の方が若干遅くなると思いきや、モバイル平均点こそ『同点引き分け』ですが、表示秒数とパソコン平均点で勝ってしまい、なんと予想に反して下剋上勝利となってしまいました。

まぁ測定ツール自体がどこまで正確なのかは置いておいてですが。

結果、CSSの影響はほぼ無し

これまでではっきりしたことは、私のやっているカスタマイズ程度ではサイトの表示速度にほとんど影響を与えないということが分かりました。

この実験をするまでは、どんどんCSSへ追記してボリュームが増えていくにしたがって「せっかくベースの設計でいいものを作っていただいているのに、それを無駄にしてしまっていたらどうしよう」という一抹の罪悪感があったのですが、あまり神経質にならなくてもよさそうなのでほっとしました。

ただ、これからWordpressやLuxeritasのバージョンが変われば分からないですし、測定ツールやサーバー環境、カスタマイズの内容でも全く違う結果になる可能性もあります。

そして常識的に考えても、子テーマへのCSS書込みが表示速度に対して良い影響を与えることはまずあり得ないので、CSSへの書込みはどうしても変更したい部分にのみ留めた方がよいことは間違いありません。