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

2019年12月13日に開催された DIST.30 「一歩差がつくCSSテクニック」 https://dist.connpass.com/event/155593/ の「パフォーマンスを高める CSS」のセッション資料です。

Transcript

1. パフォーマンスを高める CSS DIST.30「一歩差がつくCSSテクニック」 Shogo SENSUI (@1000ch)
2. 話の前提として…
3. タイトルに語弊があります • 「パフォーマンスを高める魔法のプロパティ」みたいな話はない ◦ CSS ファイルを追加すればロードが増える ◦ プロパティを追加すればレイアウトやペイントが増える ◦ 処理が増えれば、当然ですが遅くなります • 「より最適な形で CSS を扱いたい」みたいな話をします
4. CSS ファイルを圧 縮する
5. ファイルデータを最 小化する cssnano や csso を使って、コメントやス ペースを削除する。 /* before */ .test { width: 0px; height: 0px; color: #000; } /* after */ .test{width:0;height:0;color:#000}
6. Bootstrap の CSS ファイルの比較 (197KB → 160KB)
7. 未使用のスタイルを 削除する uncss を使うか、DevTools の Coverage Tab で参照されていないプロパティを検 出する。
8. CSS ファイルを参 照する
9. 非同期・並列にロー ドする <link rel=”stylesheet”> で参照する CSS は非同期・並列にロードされる。ファイル 数が膨大でなければ、結合しなくても良 い。@import は同期的に評価され、その 他の処理を妨げるので使わない。 <!-- foo.css をロードする --> <link rel=”stylesheet” href="foo.css"> <!-- bar.css をロードする --> <link rel=”stylesheet” href="bar.css"> <!-- baz.css をロードする --> <link rel=”stylesheet” href="baz.css">
10. CSS からの参照を プリロードする CSS をダウンロードし評価してからリクエ ストされるので、遅延しがちである。<link rel=”preload”> で、背景として参照する画 像やフォントファイルなどをプリロードす る。 <!-- foo.jpg を積極的にロードする --> <link rel=”preload” as=”image” href="foo.jpg"> <!-- bar.woff2 を積極的にロードする --> <link rel=”preload” as=”font” href="bar.woff2">
11. Web フォントの ロードを最適化す る
12. フォーマットを woff2 にする google/woff2 を使って、フォントファイル を圧縮する。フォントファイルのフォーマッ トのうち、圧縮効率が最も高い。 woff2_compress myfont.ttf
13. NotoSans-Regular のフォントファイルの比較 (415KB → 161KB)
14. フォントをサブセット 化する 未使用のグリフを削除するとともに、 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; }
15. 表示ロジックを最適 化する 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; }
16. font-display ディスクリプタの比較 © Font-display playground
17. おわり