未使用CSSの削減
カバレッジツール、パージ、モジュール化した記述を使ってスタイルシートを肥大化させる不要なCSSを見つけて削除し、各ページが実際に使うルールだけを配信します。
「未使用CSSの削減」はCoddyKit上の無料Web Performance Optimization & Lighthouseレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはWeb Performance Optimization & Lighthouse学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Web Performance Optimization & Lighthouseコースには全4レッスンが含まれています。
このレッスンの一部はまだ翻訳されておらず、英語で表示されています。
The Cost of Dead CSS
Large frameworks and accumulated styles often ship rules no page uses. Unused CSS inflates download size and parse time, and because CSS is render-blocking, it directly delays first paint.
Measuring Coverage
The DevTools Coverage tab records which CSS bytes actually apply during a session. A high unused percentage signals an opportunity to trim.
Why Frameworks Bloat
Utility and component frameworks include thousands of classes for flexibility. If you use a small subset, the rest is pure dead weight unless removed at build time.
Purging Unused Rules
Tools like PurgeCSS scan your templates for class names and strip any selector not referenced, often cutting stylesheets by 90% or more.
// purgecss.config.js
module.exports = {
content: ['./src/**/*.html', './src/**/*.jsx'],
css: ['./src/styles.css']
};Tailwind's Built-In Purge
Utility frameworks like Tailwind scan your content files and generate only the classes you actually use, producing a tiny production stylesheet automatically.
// tailwind.config.js
module.exports = { content: ['./src/**/*.{html,jsx,tsx}'] };Beware Dynamic Class Names
Purgers work by string matching. Class names built dynamically can be wrongly removed. Use a safelist or full static strings to protect them.
// risky: 'bg-' + color -> may be purged
// safe: full literal
const cls = isError ? 'bg-red-500' : 'bg-green-500';Per-Route CSS
Splitting styles by route means each page loads only its own CSS instead of one global blob. Many bundlers and frameworks do this automatically with CSS code splitting.
CSS Modules and Scoping
Scoped styles via CSS Modules or single-file-component styles keep CSS tied to the component that uses it, making unused styles easier to spot and remove.
Minification
After purging, run a CSS minifier (cssnano, esbuild, lightningcss) to strip whitespace, comments, and redundant rules, and compress with Brotli or gzip in transport.
Verifying the Win
Re-run Coverage and Lighthouse after trimming. Lighthouse explicitly reports Reduce unused CSS with the estimated savings, confirming the improvement.
Workflow Summary
- Measure with the Coverage tab.
- Purge unused selectors at build.
- Safelist dynamic classes.
- Split CSS per route, then minify.
Quick Check
Your build dynamically composes class names like 'bg-' + color and they disappear in production. What is the likely cause and fix?
Recap
You learned to cut render-blocking CSS by measuring coverage, purging unused selectors, scoping styles per component and route, and minifying. Watch for dynamically built class names and safelist them so purging stays safe.
AI チューターと学ぶ Web Performance Optimization & Lighthouse — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 12
- レッスン
- 48
よくある質問
「未使用CSSの削減」レッスンは無料ですか？
はい。「未使用CSSの削減」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Web Performance Optimization & Lighthouseコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Web Performance Optimization & Lighthouseコースには全4レッスンが含まれています。
「未使用CSSの削減」で何を学びますか？
カバレッジツール、パージ、モジュール化した記述を使ってスタイルシートを肥大化させる不要なCSSを見つけて削除し、各ページが実際に使うルールだけを配信します。 ブラウザで直接実行するハンズオンコードでWeb Performance Optimization & Lighthouseを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Web Performance Optimization & Lighthouseを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのWeb Performance Optimization & Lighthouseは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「未使用CSSの削減」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このWeb Performance Optimization & Lighthouseレッスンでコードを書いて実行できますか？
はい。すべてのWeb Performance Optimization & Lighthouseレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。