Оптимізація CSS: critical CSS та purge непотрібних стилів
Непотрібний CSS збільшує розмір файлу та уповільнює FCP. Bootstrap з кількома компонентами займає 140 кБ — після purge залишається 5–15 кБ. Tailwind із повним набором — 3,5 МБ; після purge — 5–50 кБ.
Tailwind CSS: автоматичний purge
Tailwind 3+ видаляє непотрібні класи при production-збірці автоматично на основі аналізу контенту:
// tailwind.config.ts
import type { Config } from 'tailwindcss';
export default {
content: [
'./resources/views/**/*.blade.php',
'./resources/js/**/*.{ts,tsx}',
// Важливо: включити всі файли де використовуються класи
'./resources/js/**/*.json', // якщо класи генеруються динамічно
],
theme: { extend: {} },
plugins: [],
} satisfies Config;
Динамічні класи (конкатенація строк) — purge не знайде їх:
// Погано — purge не побачить
const color = 'red';
<div className={`text-${color}-500`} /> // text-red-500 буде видалений
// Добре — повні імена класів
const colorMap = {
red: 'text-red-500',
blue: 'text-blue-500',
};
<div className={colorMap[color]} />
PurgeCSS для Bootstrap/кастомного CSS
// postcss.config.js
import purgecss from '@fullhuman/postcss-purgecss';
export default {
plugins: [
purgecss({
content: [
'./resources/views/**/*.blade.php',
'./resources/js/**/*.tsx',
'./public/**/*.html',
],
safelist: {
// Класи додані JS/Livewire/Alpine
standard: ['modal-open', 'show', 'active', 'fade'],
deep: [/^modal/, /^alert/, /^toast/],
greedy: [/swiper/],
},
defaultExtractor: content =>
content.match(/[\w-/:]+(?<!:)/g) || [],
}),
],
};
Critical CSS — inline стилі для першого екрана
Ідея: стилі потрібні для рендеринга above-the-fold контенту вставляти inline у <head>. Решту — завантажувати асинхронно.
Автоматично через Vite (critters):
// vite.config.ts
import { defineConfig } from 'vite';
import { critters } from 'critters';
export default defineConfig({
plugins: [
critters({
preload: 'media', // async load для некритичних
pruneSource: true, // убрати з зовнішнього CSS те що вже inline
logLevel: 'silent',
})
]
});
Вручну для Laravel:
// Blade: inline critical CSS, async для решти
<style>{!! file_get_contents(public_path('css/critical.css')) !!}</style>
<link rel="preload" href="{{ mix('css/app.css') }}" as="style"
onload="this.onload=null;this.rel='stylesheet'">
<noscript>
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
</noscript>
Генерація critical CSS — critical npm-пакет або penthouse:
npx critical https://example.ru/ --inline --minify > critical.css
CSS-in-JS — проблеми производительності
Styled-components, Emotion генерують CSS в runtime — додаткове навантаження на JS. Для production краще статичний CSS:
- Tailwind CSS — утилітарні класи, немає runtime overhead
- CSS Modules — локальні класи, компілюються в статичний CSS
- Vanilla Extract — typed CSS, zero-runtime
// CSS Modules у React
import styles from './ProductCard.module.css';
function ProductCard({ product }) {
return (
<div className={styles.card}>
<img className={styles.image} src={product.image} alt={product.name} />
<h3 className={styles.title}>{product.name}</h3>
</div>
);
}
Мініфікація та стиснення
// vite.config.ts — LightningCSS для швидкої мініфікації
export default defineConfig({
css: {
transformer: 'lightningcss',
lightningcss: {
targets: browserslistToTargets(browserslist('>= 0.5%')),
drafts: { customMedia: true },
}
},
build: {
cssMinify: 'lightningcss',
}
});
LightningCSS також автоматично додає вендорні префікси та полісфіли під налаштований browserslist.
Метрики
Цілі після оптимізації:
| Метрика | До | Мета |
|---|---|---|
| CSS bundle (gzip) | 50–140 кБ | < 20 кБ |
| Tailwind після purge | 3,5 МБ | 5–50 кБ |
| Render-blocking CSS | Є | Немає (critical inline) |
| Покриття CSS | 10–30% | > 80% |
DevTools → Coverage → перезавантажити сторінку → побачити % непотрібного CSS.
Час оптимізації: 4–8 годин для налаштування purge + critical CSS у збірці.