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. ファイルデータを最 小化する cssnano や csso を使って、コメントやス ペースを削除する。 /* before */

    .test { width: 0px; height: 0px; color: #000; } /* after */ .test{width:0;height:0;color:#000}
  2. 非同期・並列にロー ドする <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">
  3. 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">
  4. フォントをサブセット 化する 未使用のグリフを削除するとともに、 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; }
  5. 表示ロジックを最適 化する 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; }