パフォーマンスを高める 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)
   

   View Slide

2. 話の前提として…
   

   View Slide

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

   View Slide

4. CSS ファイルを圧
   縮する
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

8. CSS ファイルを参
   照する
   

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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;
    }
    

    View Slide

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;
    }
    

    View Slide

16. font-display ディスクリプタの比較 © Font-display playground
    

    View Slide

17. おわり
    

    View Slide