パフォーマンスを高める CSS / Performance Optimized CSS

Slide 1

Slide 1 text

パフォーマンスを高める CSS DIST.30「一歩差がつくCSSテクニック」 Shogo SENSUI (@1000ch)

Slide 2

Slide 2 text

話の前提として…

Slide 3

Slide 3 text

タイトルに語弊があります ● 「パフォーマンスを高める魔法のプロパティ」みたいな話はない ○ CSS ファイルを追加すればロードが増える ○ プロパティを追加すればレイアウトやペイントが増える ○ 処理が増えれば、当然ですが遅くなります ● 「より最適な形で CSS を扱いたい」みたいな話をします

Slide 4

Slide 4 text

CSS ファイルを圧縮する

Slide 5

Slide 5 text

ファイルデータを最小化する cssnano や csso を使って、コメントやスペースを削除する。 /* before */ .test { width: 0px; height: 0px; color: #000; } /* after */ .test{width:0;height:0;color:#000}

Slide 6

Slide 6 text

Bootstrap の CSS ファイルの比較 (197KB → 160KB)

Slide 7

Slide 7 text

未使用のスタイルを削除する uncss を使うか、DevTools の Coverage Tab で参照されていないプロパティを検出する。

Slide 8

Slide 8 text

CSS ファイルを参照する

Slide 9

Slide 9 text

非同期・並列にロードするで参照する CSS は非同期・並列にロードされる。ファイル数が膨大でなければ、結合しなくても良い。@import は同期的に評価され、その他の処理を妨げるので使わない。

Slide 10

Slide 10 text

CSS からの参照をプリロードする CSS をダウンロードし評価してからリクエストされるので、遅延しがちである。で、背景として参照する画像やフォントファイルなどをプリロードする。

Slide 11

Slide 11 text

Web フォントのロードを最適化する

Slide 12

Slide 12 text

フォーマットを woff2 にする google/woff2 を使って、フォントファイルを圧縮する。フォントファイルのフォーマットのうち、圧縮効率が最も高い。 woff2_compress myfont.ttf

Slide 13

Slide 13 text

NotoSans-Regular のフォントファイルの比較 (415KB → 161KB)

Slide 14

Slide 14 text

フォントをサブセット化する未使用のグリフを削除するとともに、 unicode-range 記述子による参照で必要に応じてロードする。 @font-face { font-family: 'Noto Sans JP'; font-weight: 400; src: local('Noto Sans Japanese Regular'), local('NotoSansJapanese-Regular'), url(https://example.com/foo.woff2) format('woff2'); unicode-range: U+f916-f959, U+f95b-f9f2, U+f9f4-f9f5; } /* ... */ @font-face { font-family: 'Noto Sans JP'; font-weight: 400; src: local('Noto Sans Japanese Regular'), local('NotoSansJapanese-Regular'), url(https://example.com/bar.woff2) format('woff2'); unicode-range: U+3004, U+3013, U+3020-303b; }

Slide 15

Slide 15 text

表示ロジックを最適化する font-display 記述子を使い、FOUT (Flash of Unstyled Text) や FOIT (Flash of Invisible Text) を改善する。 @font-face { /* ユーザーエージェントが定義する */ font-display: auto; /* 短いブロック期の後、永続的にスワップ期を置く */ font-display: block; /* 非常に短いブロック期の後、永続的にスワップ期を置く */ font-display: swap; /* 非常に短いブロック期の後、短いスワップ期を置く */ font-display: fallback; /* 非常に短いブロック期の後、スワップ期を置かない */ font-display: optional; }