JSON-LD в head vs CSS-костыли для BreadcrumbList: что лучше для Core Web Vitals
Разбираем, почему разметку хлебных крошек нужно вставлять в head через системный плагин, а не выводить через CSS-хитрости и скрытые HTML-блоки. С цифрами по влиянию на LCP, CLS и FID.
Два подхода
CSS-костыли vs JSON-LD в head
CSS-костыли
Скрытый HTML-блок с микроразметкой. Загружается, но скрыт через CSS — не влияет на UX, зато увеличивает DOM и вес страницы.
JSON-LD в head
Разметка вставляется в <head> через событие onBeforeCompileHead. Не влияет на рендер, легче для краулера.
Влияние на метрики
Что важнее для Core Web Vitals
| Метрика | CSS-костыли | JSON-LD в head |
|---|---|---|
| LCP | Может замедлить отрисовку: скрытые блоки в DOM | Не влияет: не в основном потоке рендера |
| CLS | Возможны сдвиги при загрузке скрытых элементов | Ноль влияния: разметка вне DOM |
| FID | Косвенно: тяжёлый DOM замедляет парсинг | Не влияет |
| TBT | Растёт: лишний HTML-блок | Минимальный: один тег <script> |
Решение
Плагин Reemake Breadcrumbs
Компонент Reemake Breadcrumbs вставляет JSON-LD в <head> через событие onBeforeCompileHead. Никаких скрытых HTML-блоков, никаких inline-стилей. Веб-страница остаётся чистой, Core Web Vitals не страдают.
В коде это одна строка: $doc->addCustomTag() с JSON-LD. Всё остальное ядро Joomla делает само — размещает в правильном месте head и не влияет на рендер.
Кейс · Симметрия
Как мебельная компания ускорила сайт на 12 %
Задача: «Симметрия» — мебельная компания из Перми. На сайте ранее использовались CSS-костыли для BreadcrumbList: скрытый <div> с микроданными, замаскированный через display: none. Общий DOM-вес страницы каталога — 180 КБ HTML.
Что сделали: убрали скрытые блоки, установили Reemake Breadcrumbs. Разметка переехала в head как JSON-LD. Размер HTML-страницы каталога снизился до 152 КБ (−15 %).
Результат: LCP улучшился с 2,8 до 2,4 сек. PageSpeed Insights вырос на 6 баллов. Google Search Console перестал ругаться на «низкое качество Core Web Vitals» для страниц каталога.
Вопросы и ответы
Частые вопросы
Виден ли JSON-LD пользователю?
Нет. Он в head, браузер не отображает его на странице. Это метаинформация для поисковиков и AI-краулеров.
CSS-костыли вообще работают?
Работают для поисковиков, но создают лишний вес DOM. Для маленьких сайтов разница незаметна, для крупных — важна. На каталоге из 5000 товаров это критично.
Что если сайт уже с CSS-костылями?
Найдите скрытые блоки с микроданными. Обычно они выглядят как <div style="display:none">...</div> рядом с визуальными крошками. Удалите их и подключите компонент.
Можно ли использовать Schema.org через свой плагин?
Да, если у вас есть свой шаблон или кастомный плагин. Но это требует времени и поддержки. Reemake Breadcrumbs — готовое решение, покрывающее 95 % случаев.
Проверить Core Web Vitals?
Прогоним сайт через PageSpeed Insights, найдём проблемы, предложим оптимизацию. Заменим CSS-костыли на JSON-LD.
Заказать аудит →
Messenger Max