2019年12月13日に開催された DIST.30 「一歩差がつくCSSテクニック」 https://dist.connpass.com/event/155593/ の「パフォーマンスを高める CSS」のセッション資料です。
パフォーマンスを高める CSSDIST.30「一歩差がつくCSSテクニック」Shogo SENSUI (@1000ch)
View Slide
話の前提として…
タイトルに語弊があります● 「パフォーマンスを高める魔法のプロパティ」みたいな話はない○ CSS ファイルを追加すればロードが増える○ プロパティを追加すればレイアウトやペイントが増える○ 処理が増えれば、当然ですが遅くなります● 「より最適な形で CSS を扱いたい」みたいな話をします
CSS ファイルを圧縮する
ファイルデータを最小化するcssnano や csso を使って、コメントやスペースを削除する。 /* before */.test {width: 0px;height: 0px;color: #000;}/* after */.test{width:0;height:0;color:#000}
Bootstrap の CSS ファイルの比較 (197KB → 160KB)
未使用のスタイルを削除するuncss を使うか、DevTools の CoverageTab で参照されていないプロパティを検出する。
CSS ファイルを参照する
非同期・並列にロードする で参照する CSSは非同期・並列にロードされる。ファイル数が膨大でなければ、結合しなくても良い。@import は同期的に評価され、その他の処理を妨げるので使わない。
CSS からの参照をプリロードするCSS をダウンロードし評価してからリクエストされるので、遅延しがちである。rel=”preload”> で、背景として参照する画像やフォントファイルなどをプリロードする。
Web フォントのロードを最適化する
フォーマットを woff2にするgoogle/woff2 を使って、フォントファイルを圧縮する。フォントファイルのフォーマットのうち、圧縮効率が最も高い。woff2_compress myfont.ttf
NotoSans-Regular のフォントファイルの比較 (415KB → 161KB)
フォントをサブセット化する未使用のグリフを削除するとともに、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;}
表示ロジックを最適化するfont-display 記述子を使い、FOUT(Flash of Unstyled Text) や FOIT (Flashof Invisible Text) を改善する。@font-face {/* ユーザーエージェントが定義する */font-display: auto;/* 短いブロック期の後、永続的にスワップ期を置く */font-display: block;/* 非常に短いブロック期の後、永続的にスワップ期を置く */font-display: swap;/* 非常に短いブロック期の後、短いスワップ期を置く */font-display: fallback;/* 非常に短いブロック期の後、スワップ期を置かない */font-display: optional;}
font-display ディスクリプタの比較 © Font-display playground
おわり