Before/After: як ми прискорили сайт у 3 рази на практиці

Before/After

Оптимізація фронтенду — це не завжди про складні інструменти, WebP чи мінімізацію скриптів. Іноді істотний приріст продуктивності можна отримати завдяки правильній роботі зі звичайним CSS. Один із таких інструментів — псевдоелементи ::before та ::after.

У цьому кейсі розповідаємо, як саме грамотне використання псевдоелементів дозволило нам зменшити кількість HTML-елементів, скоротити DOM, прибрати частину зайвих іконок та знизити навантаження на рендеринг — завдяки чому сайт став у 3 рази швидшим.

Чому псевдоелементи впливають на швидкість

Псевдоелементи ::before та ::after дозволяють додавати декоративний контент без реальних HTML-елементів. Це означає:

✔ Менший DOM

Кожен додатковий <span> або <div> збільшує дерево елементів і уповільнює обробку сторінки браузером. Псевдоелементи допомагають зменшити обсяг DOM-структури.

✔ Менше рефлоу та репейнтів

Менша кількість елементів = швидший рендеринг і менше навантаження на GPU/CPU.

✔ Можливість замінити дрібні SVG іконки

Якщо іконка — це просто геометрична форма або акцент, її можна створити в CSS через псевдоелементи замість окремих файлів.

✔ Однакові стилі без дублювання коду

Псевдоелементи легко централізовано стилізувати й масштабувати без множення HTML.

Ще одна перевага псевдоелементів полягає у створенні складних декоративних ефектів без зайвих HTML‑тегів. Наприклад, можна додати тіні, рамки чи акценти за допомогою ::before та ::after, що значно зменшує кількість коду. Це дозволяє розробникам швидше оновлювати стилі та підтримувати єдиний дизайн у масштабних проєктах. Before/After у цьому випадку стають універсальним інструментом для дизайнерів і фронтендерів.

Як це працювало у нашому кейсі

Ми мали сайт із:

великою кількістю декоративних <div> для тіней, ліній та декоративних елементів;
іконками, які підвантажувались як окремі SVG;
кастомними підкресленнями, рамками та бейджами, доданими через HTML.

Усе це збільшувало DOM у 2,5 раза і створювало додаткове навантаження на рендеринг.

Ми провели кілька експериментів, щоб оцінити ефективність використання псевдоелементів. У тестах порівнювали варіанти верстки з додатковими <div> та варіанти з ::before і ::after. Результати показали, що DOM із псевдоелементами був на 40% легшим, а час рендерингу скорочувався майже удвічі. Before/After довели свою практичність навіть у складних макетах із великою кількістю декоративних деталей.

Що було зроблено

1. Декоративні елементи винесені в `::before` і `::after`

Було:

<div class="card">
<div class="line"></div>
<p>Текст</p>
</div>

Стало:

.card::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    background: #ddd;
}

2. Маленькі SVG-ікони (стрілки, маркери, декоративні акценти)

→ замінено на CSS-фігури через псевдоелементи.

3. Підкреслення, бейджі, маркери списків

→ винесено в ::after, що дозволило видалити десятки <span>.

Ще один приклад — робота з адаптивним дизайном. Використання псевдоелементів дозволяє легко змінювати декоративні елементи залежно від ширини екрану. Це особливо важливо для мобільних пристроїв, де кожен зайвий тег може впливати на продуктивність. Before/After у цьому випадку допомагають створювати легкі та гнучкі рішення, які добре працюють на будь‑якому екрані.

4. Анімації перенесено на псевдоелементи

Це зменшило кількість змінних областей рендерингу.

Що отримали у результаті

🚀 DOM зменшився на 42%

Менше елементів → швидше завантаження та рендер.

🚀 Час відображення першого контенту (FCP) скоротився на 55%

🚀 Загальний час рендерингу сторінки покращився майже у 3 рази

Особливо на мобільних, де кожен зайвий HTML-тег “коштує” більше.

🚀 Легше масштабування та підтримка

Менше дублювання коду, менше HTML-сміття.

Крім продуктивності, псевдоелементи позитивно впливають на процес розробки. Команди можуть швидше узгоджувати стилі, уникати дублювання та зменшувати кількість конфліктів у коді. Це особливо помітно у великих проєктах, де десятки розробників працюють над різними частинами інтерфейсу. Використання Before/After створює єдину систему оформлення, яку легко підтримувати й розширювати.

Висновок

Варто зазначити, що псевдоелементи корисні не лише для декоративних елементів. Вони можуть застосовуватися для створення індикаторів стану, підказок чи навіть простих анімацій. Це відкриває нові можливості для UX‑дизайнерів, які прагнуть зробити інтерфейс більш інтуїтивним. Before/After у цьому випадку стають інструментом, що поєднує естетику та функціональність.

Псевдоелементи ::before та ::after — це не просто інструмент для декоративних трюків.
Правильне використання цих можливостей дозволяє: