ページ表示スピードを改善！ちょっとした工夫でできるCSSパフォーマンスの話

この記事は、株式会社エイチームフィナジー の Advent Calendar 2019 13日目です。

インハウスデザイナーで、普段は LPO などをすることが多いです。よろしくお願いします。

CSSパフォーマンスを改善する理由

Google の発表では「3 秒以上を表示に要しているサイトでは 53 % のユーザーが離脱する」
Amazon の発表では「0.1 秒遅くなると、売り上げが 1 % 減少し、1 秒高速化すると 10 % の売上が向上する」と発表しています。
サイトパフォーマンスを向上させることは事業として非常に重要なことの一つと言えます。

パフォーマンス改善のアプローチは多方面色々とありますが、今回は CSS に特化したパフォーマンスの話をさせていただきます。

どんなやり方があるの？

アプローチは大きく分けて 2 軸、ファイル自体の軽量化と、レンダリング時の最適化です。
ブラウザのページ表示の仕組みはものすごくざっくり言うと、ファイルをダウンロードした後内容を解析し、レンダリング処理を行い表示します。
ファイル自体を軽くすること、レンダリングされやすい書き方にすることは画面表示にポジティブな影響があります。
では早速それぞれ紹介していきます！

ファイル自体の軽量化

まずはファイル自体を軽くしてダウンロードを早くするための方法です

ショートハンド（一括指定）で記述

• 基本的なことではありますが、margin、background などまとめられるプロパティは一括指定で記述しましょう。
  
  コードもすっきりします。

margin: 10px 20px 10px 20px;

　↓

margin: 10px 20px;

古いベンダープレフィックスを削除

• ブラウザ対応をどこまでカバーするのかによりますが、不要なプレフィックスはコード量が増える一因です。
  
  ファイルの肥大化だけではなくメンテナンス性も下がります、削除＆書かないようにしましょう！
  
  border-radius のプレフィックスをいつまでもつけないようにご注意ください。
• 必要な場合は、Autoprefixer などで自動付与が良さそうです。
• Autoprefixer

border-radius:30px;
-webkit-border-radius: 30px;  /* 不要 */
-moz-border-radius: 30px;     /* 不要 */

ファイルの結合＆ Minify 化

• 結合は複数にまたがる CSS ファイルを一纏めにしてリクエスト回数を減らします。
• Minify 化は無駄な空白、コメント、改行などを削除してファイルサイズを軽減させます。
• オンラインで Minify 化できるサイトもありますが、管理のことを考えて タスクランナーで自動化させることをオススメします。

/* レイアウトCSS */
.hoge_Wrap {
  color: #ffffff;
  background-color: #888888;
}

　↓

.hoge_Wrap{color:#fff;background-color:#888}

不要なコードを削除

• 重複や未使用のルールを削除してファイルを軽くしましょう。不要コードを削除することはメンテナンスの向上にも繋がります。
• chromeの開発ツール
  
  • 実は開発ツールの More tools > Coverage から使っていないルールを確認することができます。
    
    赤線が引かれているルールが不要ルールになります。
    
  • ※サイト全体で使われているものではなく、開いているページ・デバイスでの判定なのでお気をつけください。
    
    赤線だからといって無闇に削除するとえらいことになります…。

色々できる便利ツール

• 自分も今回調べて知ったのですが、書いたショートハンドの記述、ファイルの結合＆Minify 化、構造像の最適化や不要なコードの削除などができるツールがあるそうです。
• CSSO、cssnano
  • CSSファイルの構造最適化（似たようなルールを一纏めにするなど）
    ・ミニファイ・重複コードの削除・空ルールの削除などの機能があり、ファイルを軽くすることができます。
  • CSSO
  • cssnano
• PurgeCSS
  • CSSファイルからページで未使用のスタイルを検索し、削除したものを新規CSSファイルとして生成するツールになります。
  • UNCSS、DropCSSも同様の機能がありますが、PurgeCSSの方が様々なビルドツールと組み合わせて使うことが可能です。
  • 参考：CSSファイルから未使用のスタイルを削除する方法
  • PurgeCSS

レンダリング時の最適化

次はレンダリングされやすい書き方にするというアプローチです。

セレクタは短くする

• ブラウザはセレクタの解析を右側（末尾）側からするってご存知でしたか？
  
  不要なネストはさせない（無駄な検索を抑える）ことでレンダリングが早くなります。
• セレクタの数を抑えるという点では、BEM はレンダリングが早い書き方と言えます（セレクタのマッチング処理回数が減るため）

div p a {
  color: #008080;
}

こういうコードがあるとまず右側の a を探しに行き、そこから p を検索、その後 div の検索処理に入ります。

.hoge {
  color: #008080;
}

この場合は上記のように class を設定した方がレンダリングスピードはアップします。

CSS をインライン化

• 別途CSSをダウンロードする必要がないので、HTMLファイル内にインラインで記述することがレンダリングとしては一番早いです。（もちろん管理上どうなのか、という問題はあります。）
• １ 枚ものの LP であれば選択肢としてありですね。

FV の CSS のみインライン化

• CCSS（Critical CSS）という、ファーストビューの CSS のみインラインで記述、使わない CSS は遅延読み込みといった対応をすることで表示を高速化させるという方法があります。
• ツールもあるようです。
  
  Critical Path CSS Generator
  
  改善したいページのURLを入力し、「Generate」ボタンをクリックすることでコードが生成されます。

最後に

• 書くだけだならばどうとでも書くことはできますが、上記のことを頭に入れてパフォーマンスを意識した CSS の書き方ができるとより良いです◎
• それでは皆さま、良いマークアップライフを