Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Shogo Sensui
December 13, 2019

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

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

Shogo Sensui

December 13, 2019
Tweet

More Decks by Shogo Sensui

Other Decks in Technology

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