Оптимізація CSS: critical CSS та purge невикористаних стилів
Повільне завантаження сторінки часто пов'язане з надлишковим CSS. Render-blocking CSS затримує перший контентний рендер (FCP) і збільшує Largest Contentful Paint (LCP). Bootstrap з коробки важить 140 кБ, але після видалення невикористаних класів залишається 5–15 кБ (зниження на 96%). Tailwind у development-режимі — 3.5 МБ; після purge — 5–50 кБ. Ми маємо 7+ років досвіду в оптимізації CSS та реалізували 50+ проєктів. На ринку з 2018 року (7+ років). Ми налаштовуємо critical CSS та purge для будь-якого стеку: від Laravel до Next.js, досягаючи FCP < 1 секунди. Результат — проходять Core Web Vitals без компромісів. За 2–3 дні впроваджуємо critical CSS та purge під ключ.
Чому оптимізація CSS критична для Core Web Vitals?
LCP (Largest Contentful Paint) — час рендерингу найбільшого елемента на екрані. Якщо CSS завантажується синхронно (render-blocking), браузер не малює контент до повного завантаження стилів. Inline critical CSS усуває цю затримку: стилі для above-the-fold контенту вставляються прямо в <head>, решта завантажується асинхронно. Critical CSS у поєднанні з purge прискорює LCP у 2-3 рази порівняно з традиційним завантаженням CSS.
Приклад: на сайті з Bootstrap у critical CSS потрапляють лише стилі для шапки, героя та кнопок — близько 5 кБ замість 140 кБ. LCP падає з 4 до 1.5 секунд (покращення на 62%). FCP знижується з 2.5 до 1.2 секунд.
Налаштування purge CSS
Purge видаляє класи, не знайдені в шаблонах. У Tailwind 3+ purge вбудовано через конфіг content:
// 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`} />
// Добре — повні імена класів
const colorMap = {
red: 'text-red-500',
blue: 'text-blue-500',
};
<div className={colorMap[color]} />
Safelist: призначення та налаштування
Safelist — білий список класів, які purge не повинен видаляти. Іноді класи додаються через JavaScript, наприклад, Bootstrap модалки: modal-open, show. Якщо вони не зустрічаються в HTML-шаблонах, purge видалить їх — зламається функціональність. Налаштовуємо safelist у конфігу PurgeCSS:
// postcss.config.js
import purgecss from '@fullhuman/postcss-purgecss';
export default {
plugins: [
purgecss({
content: [
'./resources/views/**/*.blade.php',
'./resources/js/**/*.tsx',
'./public/**/*.html',
],
safelist: {
standard: ['modal-open', 'show', 'active', 'fade'],
deep: [/^modal/, /^alert/, /^toast/],
greedy: [/swiper/],
},
defaultExtractor: content =>
content.match(/[\w-/:]+(?<!:)/g) || [],
}),
],
};
Покрокове налаштування purge CSS
-
Аудит поточного CSS. Використовуємо Coverage в DevTools, аналіз бандлів, виявлення render-blocking.
-
Конфігурація purge. Налаштовуємо PurgeCSS або Tailwind JIT, вказуємо шляхи до шаблонів.
-
Створення safelist. Додаємо класи, що використовуються динамічно (модалки, алерти, анімації).
- Тестування. Перевіряємо, що нічого не зламалося, візуальний регрес.
- Деплой. Інтегруємо purge у збірку (Vite, Webpack, Laravel Mix) і розгортаємо на production.
Вибір стратегії: runtime CSS vs статичний CSS
CSS-in-JS (styled-components, Emotion) генерують стилі в runtime — додаткове навантаження на JS. Для production переважніший статичний CSS. Tailwind JIT працює в 10 разів швидше за попередні версії PurgeCSS, а PurgeCSS робить CSS-файл у 10-20 разів меншим.
| Параметр |
CSS-in-JS |
Static CSS (Tailwind, CSS Modules) |
| Runtime overhead |
Так |
Ні |
| Розмір бандлу |
+50–150 кБ (runtime) |
0 кБ |
| Tree-shaking |
Складний |
Простий |
| Підтримка SSR |
Вимагає налаштування |
З коробки |
| CSS Containment |
Відсутня |
Можливість використання |
Статичний CSS кращий для Core Web Vitals: він не блокує рендеринг (після critical inline) і менше навантажує CPU. Для динамічного контенту можна використовувати content-visibility: auto, а також CSS containment (contain: layout style paint) для ізоляції компонентів та покращення продуктивності ререндеру.
Для Vite critical CSS налаштовується через critters:
// vite.config.ts
import { defineConfig } from 'vite';
import { critters } from 'critters';
export default defineConfig({
plugins: [
critters({
preload: 'media',
pruneSource: true,
logLevel: 'silent',
})
]
});
У Laravel critical CSS вставляється вручну:
<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>
Мініфікація — виконується LightningCSS у Vite або cssnano. Попередня обробка за допомогою LightningCSS використовує modern CSS features (nesting, layers) та конвертує їх у поліфіли для старих браузерів. На виході: CSS bundle < 20 кБ, покриття > 80%.
Порівняння метрик до та після покращення
| Метрика |
До оптимізації |
Після |
| Розмір CSS (Bootstrap) |
140 кБ |
5 кБ |
| LCP |
4.0 с |
1.5 с |
| FCP |
2.5 с |
1.2 с |
| TTFB |
0.8 с |
0.6 с (без змін) |
Типові помилки при оптимізації CSS
- Ігнорування динамічних класів — purge видаляє їх, ламаючи інтерфейс.
- Неправильний safelist — модальні вікна, алерти перестають стилізуватися.
- Critical CSS не оновлюється при зміні контенту.
- Забувають про iframe та сторонні скрипти — їх CSS теж впливає на метрики.
- Переоптимізація: видалення класів, що використовуються в неочевидних місцях (архіви, статичні сторінки).
Що входить у роботу з прискорення CSS?
- Аудит поточного CSS: Coverage в DevTools, аналіз бандлів, виявлення render-blocking.
- Налаштування purge: конфігурація PurgeCSS або Tailwind JIT, створення safelist.
- Витяг critical CSS: автоматично через critters або вручну за допомогою
npx critical.
- Мініфікація та стиснення: LightningCSS / esbuild, Gzip / Brotli.
- Інтеграція у збірку: Vite, Webpack, Laravel Mix, Next.js.
- Перевірка метрик: LCP, FCP, TBT до та після.
- Документація: опис налаштувань, рекомендації щодо підтримки.
Результат: проходження Core Web Vitals, CSS bundle мінімального розміру, збереження функціональності та стилів.
Ми використовуємо PurgeCSS, Tailwind JIT, critters та PostHTML залежно від стеку. Все налаштовується під вашу збірку. Гарантуємо покращення LCP на 40-60% або проведемо додаткову оптимізацію безкоштовно.
Вартість нашої роботи — від 5000 грн за проєкт, що окупається за місяць завдяки прискоренню сайту. Економія на трафіку після оптимізації може сягати 2000-5000 грн на місяць. Зв'яжіться з нами для детального аудиту вашого проєкту. Отримайте консультацію щодо відповідних інструментів. Оцінимо ваш CSS за 1 день. Замовте покращення CSS та прискорте ваш сайт.
Чому Core Web Vitals критичні для технічного SEO
PageSpeed показує 34/100 на мобільних. У Search Console — червоні метрики по всіх сторінках категорій. Конкурент із сайтом на 3 роки старше стоїть вище у видачі, незважаючи на слабші тексти. Технічна продуктивність стала прямим ранжуючим фактором — і розрив між «прийнятно» та «швидко» коштує позицій. Ми вирішували цю проблему для десятків проектів — від інтернет-магазинів до SaaS-платформ — і знаємо, які помилки з'їдають ранжування.
Як досягти хороших показників Core Web Vitals?
Core Web Vitals: що реально впливає на позиції
Google використовує три метрики як сигнали ранжування (Page Experience): LCP (Largest Contentful Paint), CLS (Cumulative Layout Shift), INP (Interaction to Next Paint, замінив FID з останнього великого оновлення алгоритму).
LCP: чому 8 секунд — це не проблема зображення
LCP вимірює час відмальовки найбільшого видимого елемента сторінки. Найчастіше — hero image або H1. Пороги: добре < 2.5s, погано > 4s.
Типовий діагноз на реальному проекті: інтернет-магазин одягу, LCP 7.8s на мобільних. Елемент — hero image категорії, 4.2MB JPEG без srcset, завантажується через CSS background-image (не <img>). Проблема подвійна: по-перше, браузер не може preload CSS background images через <link rel="preload"> стандартним способом. По-друге, 4.2MB на мобільному з'єднанні — це фізично повільно.
Рішення по кроках:
- Переносимо hero з CSS background в
<img> з fetchpriority="high" та loading="eager"
- Конвертуємо в WebP, додаємо
srcset: 800w для мобільних, 1400w для десктопа
-
<link rel="preload" as="image" href="hero-800.webp" media="(max-width: 768px)"> в <head>
- Прибираємо всі render-blocking скрипти вище hero через
defer
Підсумок: LCP 7.8s → 1.9s. Без зміни хостингу, без CDN.
Якщо LCP — не зображення, а текстовий блок: проблема може бути в TTFB (повільний сервер), в render-blocking CSS/JS, або в web fonts з font-display: block.
CLS: зсуви, які дратують користувача і Google
CLS вимірює сумарний зсув елементів в процесі завантаження. Пороги: добре < 0.1, погано > 0.25. CLS 0.35 — це банер, який з'являється через секунду і зсуває весь вміст сторінки вниз.
Джерела CLS:
- Зображення без заданих розмірів.
<img src="photo.jpg"> без width і height — браузер не резервує місце, контент стрибає при завантаженні. Фікс: явні width/height або aspect-ratio в CSS.
- Рекламні блоки та віджети. Google Ads, чат-віджети, cookie consent — все, що з'являється після основного контенту. Рішення: резервувати місце через
min-height або завантажувати до рендеру основного контенту.
- Web fonts. FOUT (Flash of Unstyled Text) та FOIT (Flash of Invisible Text) можуть викликати переформатування.
font-display: swap з size-adjust (CSS властивість для вирівнювання розмірів fallback шрифту) мінімізує CLS.
- Динамічний контент. Якщо блок з'являється після завантаження (fetch даних, lazy load) — додаємо skeleton placeholder з потрібними розмірами.
| Типовий сценарій |
CLS до |
CLS після |
Основний фікс |
Банер знижок без min-height |
0.42 |
0.02 |
min-height: 300px |
| Картинки в статтях без атрибутів |
0.18 |
0.01 |
width/height + aspect-ratio |
| Віджет чату, що завантажується через 3с |
0.35 |
0.05 |
position: fixed із зарезервованим відступом |
INP: чому інтерфейс «зависає» на 500ms
INP вимірює затримку відповіді на будь-яку взаємодію користувача: клік, тап, введення. Пороги: добре < 200ms, погано > 500ms. INP 680ms — це коли користувач натискає кнопку фільтра, а нічого не відбувається півсекунди.
Головна причина високого INP — заблокований main thread. JavaScript-бандл 2.1MB парситься і виконується синхронно. Поки виконується, користувацькі події не обробляються.
Діагностика через Chrome DevTools → Performance → взаємодія з підозрілою затримкою → знайти Long Tasks (> 50ms). Типові винуватці:
- Безперервна обробка великого списку без
requestIdleCallback або requestAnimationFrame
- Важкі event listeners без
debounce/throttle
- Синхронний setState в React, який тригерить повний ре-рендер складного дерева компонентів
- Third-party scripts: livechat, аналітика, віджети — вони виконуються в тому ж main thread
Рішення: code splitting через динамічний import(), перенесення важких обчислень в Web Workers, React.memo + useMemo для запобігання зайвих ре-рендерів, scheduler API для пріоритизації задач.
Schema.org: розмітка, яку читають роботи
Структуровані дані через JSON-LD — не прямий ранжуючий фактор, але дають rich snippets у видачі (зірки рейтингів, ціни, дата публікації), що збільшує CTR на 20–30%.
Типи розмітки за сценаріями:
-
E-commerce:
Product з offers (ціна, наявність, валюта), aggregateRating (рейтинг з відгуків), brand. BreadcrumbList для навігації. ItemList для сторінок категорій.
-
Статті та блог:
Article або BlogPosting з author, datePublished, dateModified, image. Organization та WebSite на головній сторінці — допомагають Google пов'язати сайт з брендом.
-
Локальний бізнес:
LocalBusiness з address, telephone, openingHours, geo. Критично для локального SEO.
-
FAQ:
FAQPage з mainEntity — питання та відповіді можуть з'являтися прямо у видачі як розкривний блок.
Валідація: Google Rich Results Test та Schema Markup Validator. Часта помилка — вказати price без priceCurrency, або ratingValue без reviewCount. Google ігнорує неповну розмітку.
Як проводити технічний SEO-аудит
Сканованість. robots.txt блокує потрібні сторінки (або навпаки, не блокує службові). Canonical URLs налаштовані неправильно — дублюються сторінки з UTM-мітками. Sitemap містить сторінки з noindex. Все це Screaming Frog або Sitebulb покажуть за годину сканування.
Core Web Vitals в масштабі. Google Search Console → Core Web Vitals → дивимося не окремі сторінки, а групи URL (шаблон сторінки продукту, шаблон категорії, блог). Проблема зазвичай системна — одна помилка в шаблоні псує сотні сторінок.
JavaScript SEO. Google рендерить JavaScript, але з затримкою (іноді дні для повного рендеру). Для критичного контенту — SSR або SSG обов'язкові. Перевіряємо через Search Console → Inspect URL → View Crawled Page: що бачить Googlebot.
Internal linking. Орфанні сторінки (немає вхідних внутрішніх посилань) втрачають PageRank. Бите посилання (404) — сигнал якості.
Типові помилки при впровадженні Schema.org
- Вказано
price без priceCurrency — розмітка ігнорується.
-
ratingValue без reviewCount — у видачі не показується.
- Кілька
Product на одній сторінці без @type: ItemList — Google бере тільки перший.
- JSON-LD в GTM — Google не завжди бачить динамічну розмітку, краще серверний рендеринг.
| Етап роботи |
Що входить |
Термін |
| Аудит |
Сканування, аналіз Core Web Vitals, аудит Schema, звіт з пріоритетами |
1–2 тижні |
| Оптимізація одного шаблону |
LCP, CLS, INP, впровадження SSR/SSG, налаштування preload |
2–4 тижні |
| Повна технічна оптимізація |
Всі шаблони, code splitting, Web Workers, моніторинг в CI |
4–10 тижнів |
| Впровадження Schema.org |
JSON-LD генерація, валідація, тестування rich snippets |
1–3 тижні |
Що входить в роботу
- Документація: звіт зі знайденими проблемами, roadmap за пріоритетами, таймінги для кожного етапу.
- Доступи: налаштування моніторингу (SpeedCurve, Sentry Search Console), передача dashboard.
- Навчання: розбір типових помилок для вашої команди (1–2 дзвінки).
- Підтримка: супровід протягом місяця після деплою — перевірка метрик, фікс регресій.
Зв'яжіться з нами — ми оцінимо ваш проект за 2 дні і покажемо, скільки позицій можна повернути за рахунок технічного SEO. Досвід роботи з проектами рівня сотень тисяч відвідувань на місяць — гарантуємо вимірний результат в Core Web Vitals до/після. Замовте аудит у цій формі — отримайте персональний чек-лист з 15 пунктів.
