CSSの読み込みを高速化するための5つのポイント

読み込み速度を高速化することは、戦略上非常に重要なことです。
ユーザーエクスペリエンス(UX)の面からも、SEO上の観点からも、読み込みの遅いサイトより速いサイトのほうが有利です。

UXの観点では、Google Researchのブログ記事より、サイトの読み込み速度が速ければ速いほど、ユーザーは快適に感じ、サイト内の滞在時間まで長くなることが分かっています。
さらにKissmetricsによれば、読み込みに3秒以上かかってしまうと、40％の人が読み込みを諦めて離脱してしまうことが分かっています。

SEOに関して言えば、Googleが検索結果を決めるのに使っている200以上もの要素の中の一つに明らかにページ読み込み速度を使っていることが明らかになっています。
もちろん、GoogleだけでなくBingもページの読み込み速度を重視しています。

ferretでは、これまでSVGを使った画像の最適化方法やコンテンツSEOなどで、サイト内の高速化のためのノウハウをご紹介してきました。
今回は、CSSの読み込みを高速化するための5つのポイントをご紹介していきます。

CSSの読み込みを高速化するための5つのポイント

Source: pexels.com

1. セレクタは浅い階層にとどめておく

プログラミングの世界では細かく指示を出すことが重要だと考えられていますが、CSSの世界では、そうではありません。
基本的には、いつでもどこでも、セレクタの階層を浅く設定しておいたほうが、キロバイト単位でCSSを軽くすることができます。

例えば、次のようなCSSがあるとしましょう。

header nav ul li .nav-menu-item { … }

これは文字数が多いのでCSS自体のファイルサイズも大きくなるだけでなく、ブラウザにも負担をかけてしまうので、ミリ秒単位で読み込みが遅くなってしまう原因にもなります。

したがって、上記のCSSであれば、以下のようにするだけでよいのです。

.nav-menu-item { … }

ブラウザの負担になってしまうというのは、ブラウザはセレクタを右から左に読み込むからです。
セレクタがより深い階層にあれば、それだけブラウザがレンダリングするのに時間をかけてしまいます。

理想的にはシングルセレクタで済ませたいものですが、これは必ずそれ以外すべてのセレクタを削らなければならないということではありません。
場合によってはいくつかのセレクタを加えても構いませんが、バランス良く、実践的なコーディングを心がけていきましょう。

2. ショートハンドプロパティを使う

ショートハンドで記述できるプロパティを使うのは常識的だと思う人もいるかもしれません。
しかし、もっと省略して書くことができる箇所はあります。

例えば、フォントサイズや行間、フォントの種類などを決める時には、通常このように書きます。

font-size: 1.5rem;
line-height: 1.65;
font-family: "Helvetica", sans-serif

しかし、これはfontプロパティを使ってショートハンドでまとめることができます。

font: 1.5rem/1.618 "Arial", "Helvetica", sans-serif;

これはほんの一例に過ぎませんが、ショートハンドプロパティを使うことで、ロングハンドのプロパティよりもおよそ40％のスペースを節約できます。
最初は可読性に欠けると感じるかもしれませんが、読み込み速度も上がり、修正も１箇所のプロパティを見るだけで済むので、使う価値は大いにあるでしょう。

3. リソースプレロードを使う

リソースプレロードとは、ブラウザにHTML全体を読み込ませる前にページに表示される予定のアセットをあらかじめ用意してサーバーのHTTPヘッダーから直接読み込ませることを言います。

例えば、CSSを読み込む際には、通常headタグ内以下のようなタグを入れます。

<link rel="preload" href="style.css" as="style">

あるいは、HTTPヘッダーではこのようになります。

Link: <style.css>; rel=preload; as=style

どちらであってもHTML全体を読み込む前に、style.cssを優先して読み込むことができるのですが、HTTPヘッダーを使った方が好ましいようです。
HTTPヘッダーであれば、HTML本体を読み込む前にCSSを読み込んでいるので、より反応が早くなるからです。

4. csscssを使って余剰を取り除く

Screenshot on 25th July

CSSを人の手で書いていると、案外余計なコードを書いていることがあります。
例えば、h2とpタグで同じフォント色や行間、マージンを取っているにもかかわらず、2回書いてしまったりという具合です。

その時に役に立つのが、RubyベースのCSSチェッカーであるcsscssです。

使い方は簡単で、まず以下のコマンドを打ってcsscssをインストールします。
Macの場合はRubyがすでにインストールされているので、ターミナルを起動し、以下のコマンドを打ちます。

gem install csscss

インストールしたら、以下のようにCSSファイルを指定します。

csscss -v style.css

このコマンドによって、共通して使用している部分を指摘してくれます。

{h2} AND {p} share 3 declarations
  - color: #0060e6
  - line-height: 1.65
  - margin: 0 0 1.5rem

この指摘にしたがって、共通部分をまとめていきます。

h2, p{
　　color: #0060e6;
　　line-height: 1.65;
　　margin: 0 0 1.5rem;
}

このように、無意識に2回使っているプロパティの余剰部分を取り外すだけで、CSSのサイズが大幅に短縮します。
csscssは非常に簡単に使えるので、ぜひインストールしてみてください。

5. cssnanoを使ってcssを圧縮する

Screenshot on 25th July

もう一つ便利なツールなのが、Node.jsのnpmで使えるcssnanoというツールです。
cssnanoを使うことで、CSSファイルの余分な空白や改行を取り除いてファイルを圧縮することができます。

npmのインストールに関しては、下記をご覧ください。

参考：
知っておいて損はなし！新人Webデザイナーのための「npm」入門

まず、npmで以下のコマンドを打ってcssnanoをインストールします。

npm i -g cssnano-cli

続いて、読み込むCSSファイルと、生成するファイル名を指定します。

cssnano style.css optimized-style.css

たったこれだけでCSSのファイルサイズが圧縮されるなんて便利ですよね。
空白や改行がなくなるだけで大きくファイルサイズを減らすことができるので、ぜひ試してみてください。

まとめ

CSSの具体的な書き方から、便利なツールまで、CSSの軽量化に貢献するノウハウをご紹介させていただきました。
もちろん、CSSの軽量化は、ページの読み込み速度に関わる一部分でしかありませんが、あらゆる軽量化テクニックと組み合わせることで、大きな効果を発揮していきます。

1秒でも短い読み込み速度を目指すため、ぜひこうしたポイントを実践していきましょう。