webページ高速に表示させるcssの記述方法とメンテナンス方法をまとめてみる

長年運用しているサイトのcssファイルは、下記のような理由から、webサイトの表示を遅くしてしまっている場合が多々あります。

- cssの書き方がブラウザレンダリングに優しくない
- 使われていない記述が残っている
- 重複している記述がある

上記3点を解決し、webページを少しでも早く表示させるために、cssファイルをメンテナンスする方法をまとめてみたいと思います。

## ブラウザレンダリングに優しいcssの記述をする
CSSセレクタのマッチングは右から左へ処理されます。下記のような記述の場合を例に見てみます。

```css
table tbody tr th {
  color: #ccc;
}
```

このような記述の場合、下記のような試行をおこない、マッチングするセレクタを探します。
1)要素名がth
2)その親要素名がtr
3)その親要素がtbody
4)その親要素がtable

下記のような記述をすれば、要素名がthのものを探すだけなので、レンダリングの負荷が軽く済みます。

```css
th {
  color: #ccc;
}
```

### 間接セレクター・全称セレクターの使用も注意 

使いどころによっては便利な間接セレクタや全称セレクタも、要素のマッチングを行う際に高負荷をかけるのでパフォーマンスを意識するなら使用は避けるべきです。

```css
/* 間接セレクター */
h2 ~ p {
  color: #ccc;
}

/* 全称セレクター */
.header > * {
  color: #ccc;
}
```

### BEMでcssを記述する

既存のcssファイルをメンテナンスする際には工数がかかりすぎるので、手を出しづらいですが、css設計にBEMを導入するのも検討してもいいかもしれません。

BEMはすべてのDOMに対して、単一のclassをつけることができるので、ブラウザレンダリングに優しい記述を保てるようになります。

```css
.item {…}

.item-nav {…}

.item-nav__item {…}

.item-nav__item--active {…}

```

## 不要な記述を削除する
読み込まれているcssの中で未使用な記述を削除すれば、その分ファイルのサイズが減り、ページ表示の高速化につながります。
cssファイルの中で使用されていない記述をチェックする方法として下記2つを紹介します。

### デベロッパーツールのカバレッジ機能
1つ目は、デベロッパーツールのカバレッジ機能。

チェックしたいページをchromeで開いたら、devツールのカバレッジ機能を表示。
![2019-01-27_162236.png](https://qiita-image-store.s3.amazonaws.com/0/146968/16aafdd4-3083-25d7-ad81-d520bc9b9bf1.png)

カバレッジ機能を表示した状態で再読み込みすると、使用されていない箇所が赤くハイライトされて表示されるので、簡単に使われていない記述を把握することができます。
<img width="1432" alt="スクリーンショット 2019-01-30 21.09.22.png" src="https://qiita-image-store.s3.amazonaws.com/0/146968/05a1d703-4a6e-7a1f-13d4-91d4b8a7d418.png">

### Unused CSS
2つ目はオンライン上で使われていない記述をチェックできる「[Unused CSS](https://www.jitbit.com/unusedcss/)」というサイト。

ページを表示したら、チェックしたいページのURLをペーストしてボタンを押すだけです。
<img width="1042" alt="スクリーンショット 2019-01-30 21.12.13.png" src="https://qiita-image-store.s3.amazonaws.com/0/146968/3888fc91-8180-e1d7-3581-09311e0cc3ee.png">

チェックが完了すると、使用されていないclassがずらっと表示されます▼
<img width="987" alt="スクリーンショット 2019-01-30 21.12.51.png" src="https://qiita-image-store.s3.amazonaws.com/0/146968/763778e9-0659-dfe0-706e-901dacb44811.png">


## 重複している記述を削除する
最後は重複している記述を教えてくれる「[csscss](https://www.npmjs.com/package/gulp-csscss)」というアプリケーションの紹介。
「csscss」のインストールと実行にはRubyが必要です。

Rubyをインストールしたら下記のコマンドでcsscssをインストール。

```terminal
gem install csscss
```

インストールが完了したら、重複を確認したいcssファイルのパスを指定するだけです。

```terminal
csscss -v https://hikkoshizamurai.jp/css/red/detail.css
```

コマンドを叩くと重複しているコードにハイライトを当て、指摘してくれます。
<img width="776" alt="hoge.png" src="https://qiita-image-store.s3.amazonaws.com/0/146968/ef8bdb8f-6446-356c-4c20-ae30a1c89e0e.png">


## まとめ
cssファイルをメンテナンスする方法を3つ紹介してきました。
webページの表示速度にcssファイルが影響している場合は、今回紹介した方法で一度メンテナンスしてみてください。


【参考資料】
[Webフロントエンド ハイパフォーマンス チューニング](https://www.amazon.co.jp/Web%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89-%E3%83%8F%E3%82%A4%E3%83%91%E3%83%95%E3%82%A9%E3%83%BC%E3%83%9E%E3%83%B3%E3%82%B9-%E3%83%81%E3%83%A5%E3%83%BC%E3%83%8B%E3%83%B3%E3%82%B0-%E4%B9%85%E4%BF%9D%E7%94%B0-%E5%85%89%E5%89%87/dp/4774189677)
[スタイル計算のスコープと複雑さの軽減](https://developers.google.com/web/fundamentals/performance/rendering/reduce-the-scope-and-complexity-of-style-calculations?hl=ja)
[CSSCSSでCSSスタイルの重複を整理する](https://qiita.com/hibikikudo/items/988c20c98abe0bdb3705)