SEO, производительность и доступность

01Core Web Vitals: LCP, INP и CLS

Core Web Vitals — три метрики, которыми Google описывает опыт реальных пользователей. Largest Contentful Paint (LCP) — момент, когда появляется основной контент, обычно hero-изображение или заголовок; хорошо — 2.5 секунды или меньше. Interaction to Next Paint (INP) измеряет, насколько быстро страница визуально откликается на клики, тапы и нажатия клавиш за весь визит; хорошо — 200 миллисекунд или меньше. INP заменил First Input Delay в марте 2024 года. Cumulative Layout Shift (CLS) измеряет, насколько неожиданно прыгает контент; хорошо — 0.1 или меньше. Страница проходит проверку, когда 75% реальных визитов укладываются в каждый порог, причём мобильные и десктоп считаются отдельно. Это сигнал ранжирования, но скромный; гораздо важнее их влияние на конверсию и доверие пользователей.

• LCP ≤ 2.5 s: загрузка.
• INP ≤ 200 ms: отзывчивость.
• CLS ≤ 0.1: визуальная стабильность.
• Оценивается по 75-му перцентилю реальных пользователей.

02Как исправить каждую метрику

LCP состоит из четырёх частей: время ответа сервера (TTFB), задержка, прежде чем браузер обнаружит LCP-ресурс, время его загрузки и задержка рендеринга. Исправляйте в этом порядке: кэшируйте HTML на edge, делайте hero-изображение обнаружимым в HTML (а не заданным через JavaScript или CSS background), никогда не загружайте его лениво, ставьте ему fetchpriority="high" и отдавайте в AVIF или WebP нужного размера. INP — про работу главного потока: отправляйте меньше JavaScript, разбивайте длинные задачи, чтобы браузер успевал отрисовать кадр между ними (scheduler.yield() или setTimeout), используйте startTransition для несрочных обновлений React и избегайте тяжёлых сторонних скриптов. CLS — про зарезервированное место: всегда задавайте width и height или aspect-ratio изображениям и встраиваемым элементам, резервируйте место под баннеры и рекламу и используйте fallback-шрифты с совпадающими метриками.

1<!-- LCP image: discoverable, eager, high priority, right size -->
2<img
3  src="/img/hero-1200.avif"
4  srcset="/img/hero-800.avif 800w, /img/hero-1200.avif 1200w, /img/hero-1800.avif 1800w"
5  sizes="(max-width: 768px) 100vw, 1200px"
6  width="1200" height="675"
7  fetchpriority="high"
8  alt="Fresh coffee being poured into a cup" />
9 
10<!-- below-the-fold images -->
11<img src="/img/team.avif" width="800" height="600" loading="lazy" decoding="async" alt="Our team" />

03Обход, индексация и canonical

Поисковые системы работают в три шага: обход (загрузка URL), индексация (сохранение и понимание) и ранжирование. robots.txt управляет обходом, а не индексацией: заблокированный URL всё равно может появиться в выдаче, если на него ссылаются другие сайты. Чтобы не пустить страницу в индекс, разрешите обход и отдайте мета-тег noindex или заголовок X-Robots-Tag. Ссылка canonical сообщает поисковикам, какой URL — основная версия, когда один и тот же контент доступен по нескольким адресам, например с параметрами отслеживания или фильтрами; это сильная подсказка, а не команда. Возвращайте настоящие коды статуса: 301 для постоянных переездов, 404 или 410 для удалённых страниц и никогда — страницу «не найдено» с кодом 200. Убедитесь, что важный контент есть в HTML, отрендеренном на сервере, а не только подгружается клиентским JavaScript.

1# robots.txt
2User-agent: *
3Disallow: /cart
4Disallow: /account
5Disallow: /*?sort=
6 
7Sitemap: https://example.com/sitemap.xml

04Sitemap, структурированные данные и hreflang

Sitemap перечисляет URL, которые вы хотите проиндексировать, с точной датой lastmod; priority и changefreq Google игнорирует. Один файл вмещает до 50,000 URL или 50 MB без сжатия, поэтому крупные сайты используют sitemap index. Структурированные данные, обычно JSON-LD в теге script, описывают страницу словарём schema.org: Organization, Product с Offer, BreadcrumbList, Article, Event. Они могут открыть расширенные результаты, например цены и рейтинги. Для многоязычных сайтов hreflang сообщает поисковикам, какой URL для какого языка или региона. Каждая версия должна перечислять все версии, включая саму себя, ссылки должны быть взаимными, а x-default указывает на запасной вариант. Используйте коды языков вроде en, hy, ru, при необходимости с регионом, например en-GB.

1<link rel="canonical" href="https://example.com/en/products/espresso" />
2<link rel="alternate" hreflang="en" href="https://example.com/en/products/espresso" />
3<link rel="alternate" hreflang="hy" href="https://example.com/hy/products/espresso" />
4<link rel="alternate" hreflang="ru" href="https://example.com/ru/products/espresso" />
5<link rel="alternate" hreflang="x-default" href="https://example.com/en/products/espresso" />
6 
7<script type="application/ld+json">
8{ "@context": "https://schema.org", "@type": "Product", "name": "Espresso beans 1 kg",
9  "offers": { "@type": "Offer", "price": "24.90", "priceCurrency": "EUR",
10              "availability": "https://schema.org/InStock" } }
11</script>

05Оптимизация изображений и шрифтов

Изображения обычно самая тяжёлая часть страницы. Отдавайте современные форматы (AVIF, затем WebP), масштабируйте до отображаемого размера через srcset и sizes, сжимайте и лениво загружайте всё, что ниже первого экрана. Фреймворки помогают: компонент Image в Next.js автоматически генерирует размеры и форматы; в Next.js 16 старый проп priority заменён на preload, а документация рекомендует loading="eager" или fetchPriority="high" для LCP-изображения. Шрифты вызывают и медленное появление текста, и сдвиги раскладки. Хостите их сами, делайте subset под нужные символы (отдельные файлы для латиницы, кириллицы или армянского), делайте preload только одного-двух критичных файлов, используйте font-display: swap и fallback-шрифт с size-adjust, чтобы подмена не сдвигала текст. Вариативные шрифты могут заменить несколько файлов с разной насыщенностью одним.

1@font-face {
2  font-family: "Brand Sans";
3  src: url("/fonts/brand-sans-latin.woff2") format("woff2");
4  font-display: swap;
5  unicode-range: U+0000-00FF;
6}
7 
8/* metric-matched fallback reduces layout shift on swap */
9@font-face {
10  font-family: "Brand Sans Fallback";
11  src: local("Arial");
12  size-adjust: 104%;
13  ascent-override: 92%;
14}

06Основы доступности (WCAG)

WCAG (Web Content Accessibility Guidelines) — это стандарт; обычная цель — версия 2.2 уровня AA, и именно на неё ссылаются законы вроде European Accessibility Act, который применяется с июня 2025 года. Основы закрывают большинство реальных проблем. Используйте семантический HTML: один h1, заголовки по порядку, ориентиры (header, nav, main, footer), button для действий и a для ссылок. Каждому изображению нужен осмысленный alt-текст или alt="", если оно декоративное. Контраст текста — не меньше 4.5:1 или 3:1 для крупного текста и элементов интерфейса. Всё должно работать с клавиатуры, с видимым индикатором фокуса. Формам нужны настоящие label и понятные сообщения об ошибках. Области нажатия — не меньше 24 на 24 CSS-пикселя. Задавайте атрибут lang на каждой странице — для скринридеров на многоязычных сайтах это важно.

• Сначала семантические элементы, ARIA — только когда в HTML нет аналога.
• Клавиатура: порядок Tab, видимый фокус, никаких ловушек, Escape закрывает диалоги.
• Контраст 4.5:1 для текста, 3:1 для крупного текста и элементов управления.
• Тестируйте со скринридером (VoiceOver, NVDA) и при увеличении 200%.

07Измерения: Lighthouse, PageSpeed и CrUX

Данные бывают двух видов. Лабораторные данные получают при симулированной загрузке на фиксированном устройстве и сети: Lighthouse в Chrome DevTools или в CI. Они воспроизводимы и отлично подходят для отладки, но не могут напрямую измерить INP; его заменитель — Total Blocking Time. Полевые данные приходят от реальных пользователей Chrome: Chrome UX Report (CrUX) агрегирует последние 28 дней. PageSpeed Insights показывает оба вида для URL, а Search Console группирует полевые данные по всему сайту. Для собственных подробных цифр подключите библиотеку web-vitals и отправляйте метрики в аналитику, включая то, какой элемент был LCP и какое взаимодействие оказалось медленным. Оптимизируйте по полевым данным, проверяйте исправления в лаборатории, а затем ждите подтверждения в полевых данных.

1import { onLCP, onINP, onCLS } from "web-vitals/attribution";
2 
3function send(metric: { name: string; value: number; rating: string }) {
4  navigator.sendBeacon("/api/vitals", JSON.stringify(metric));
5}
6 
7onLCP(send);
8onINP(send);
9onCLS(send);

08Внутри INP: input delay, обработка и отрисовка

INP показывает примерно худшее взаимодействие за визит; на страницах с большим количеством взаимодействий игнорируется один выброс на каждые 50. У каждого взаимодействия три части, и у каждой своё лечение. Input delay — время до того, как ваш обработчик вообще начнёт работу, обычно потому что выполняется другая длинная задача: гидрация, tag manager или пакет аналитики. Processing time — это сами ваши обработчики событий. Presentation delay — работа после обработчиков до отрисовки следующего кадра: стили, layout и paint всего, что изменилось; она растёт с размером DOM и с большими перерендерами React. Long Animation Frames API (LoAF) сообщает, какие скрипты сделали кадр медленным, вплоть до URL исходника и функции, а attribution-сборка web-vitals прикрепляет эти записи к INP. Итак: дробите конкурирующие длинные задачи, чтобы сократить input delay; сначала рисуйте визуальный отклик, а остальное откладывайте, чтобы сократить обработку; держите DOM маленьким, а обновления локальными, чтобы сократить presentation delay.

1const yieldToMain = () =>
2  "scheduler" in globalThis && "yield" in scheduler
3    ? scheduler.yield()
4    : new Promise((resolve) => setTimeout(resolve, 0));
5 
6button.addEventListener("click", async () => {
7  showAddedState();      // 1. visual feedback in this frame
8  await yieldToMain();   // 2. let the browser paint
9  await saveCart();      // 3. heavy work afterwards
10  sendAnalytics();
11});

09Мгновенные переходы: bfcache и speculation rules

Самая быстрая загрузка страницы — та, которой не было. Back/forward cache (bfcache) хранит полный снимок страницы в памяти, поэтому «Назад» и «Вперёд» восстанавливают её мгновенно, без сети и без повторного выполнения JavaScript. Страница теряет это преимущество, если регистрирует обработчик unload, держит определённые открытые соединения в момент ухода пользователя или исключена заголовками вроде Cache-Control: no-store. В DevTools, в разделе Application и Back/forward cache, можно протестировать страницу и увидеть точный список причин блокировки. Для переходов вперёд Speculation Rules API позволяет браузерам на Chromium делать prefetch или полный prerender вероятных следующих страниц — по списку или по совпадению ссылок — с настройкой eagerness, например moderate (старт при наведении). Предварительно отрендеренная страница при открытии показывает почти нулевой LCP. Другие браузеры правила игнорируют, так что это безопасное прогрессивное улучшение. Делайте prerender только для GET-страниц без побочных эффектов, исключайте ссылки logout или add-to-cart и откладывайте аналитику до реального показа страницы через document.prerendering.

1<script type="speculationrules">
2{
3  "prerender": [{
4    "where": { "and": [
5      { "href_matches": "/*" },
6      { "not": { "href_matches": "/logout" } },
7      { "not": { "href_matches": "/cart/*" } },
8      { "not": { "selector_matches": "[data-no-prerender]" } }
9    ]},
10    "eagerness": "moderate"
11  }]
12}
13</script>

10Краулинговый бюджет и рендеринг на больших сайтах

Сайт на несколько сотен страниц сканируется полностью. Когда URL сотни тысяч, как в фасетном каталоге, краулинговый бюджет становится реальным: Googlebot тратит ограниченное число запросов на сайт, и оно зависит от того, насколько быстр и здоров ваш сервер и насколько востребованы ваши URL. Потери создают бесконечные пространства URL: комбинации фильтров, порядки сортировки, параметры сессии или трекинга, бесконечные календари. Управляйте этим слоями. Заметно ссылайтесь только на те фасетные страницы, которые хотите проиндексировать. Остальные комбинации канонизируйте на базовую страницу или запрещайте параметры в robots.txt, если их не нужно даже запрашивать; помните, что заблокированный URL не сможет показать свой noindex. В sitemap держите только канонические индексируемые URL с честным lastmod. Логи сервера, отфильтрованные по верифицированному Googlebot, показывают, куда на самом деле уходит сканирование. Рендеринг тоже важен: Google выполняет JavaScript, но отдельным, более дорогим шагом, поэтому контент и ссылки, которые появляются только после клиентской загрузки, находятся позже и менее надёжно.

• Быстрые стабильные ответы (низкий TTFB, мало ошибок 5xx) позволяют Googlebot сканировать больше.
• Возвращайте 404 для пустых комбинаций фильтров вместо тонкой страницы с 200.
• Отчёт Crawl stats в Search Console показывает коды ответов, типы файлов и статус хоста.

11Доступность за пределами чеклиста: имена, роли и живые обновления

Автоматические инструменты ловят только часть нарушений WCAG; для остального нужно понимать дерево доступности. Браузер превращает DOM в дерево объектов, у каждого есть роль (button, link, dialog), доступное имя (из текста, label, aria-label или aria-labelledby), состояния вроде expanded или checked и необязательное описание. Скринридеры читают это дерево, а не ваши пиксели; смотрите его в панели Accessibility в DevTools. Там проявляются более глубокие проблемы: иконочные кнопки без имени; самописные выпадающие списки, которыми нельзя управлять с клавиатуры; одностраничные переходы, которые меняют контент, не перемещая фокус, так что пользователи скринридеров не знают, что страница сменилась (переводите фокус на новый h1 или объявляйте заголовок); статусные сообщения вроде «добавлено в корзину», которые видны глазами, но никогда не озвучиваются. Для объявлений используйте live region, например role='status', который уже есть в DOM до того, как вы поменяете его текст. Нативный элемент dialog с showModal() сам удерживает фокус и обрабатывает Escape. Тестируйте ключевые сценарии с VoiceOver или NVDA.

1<button type="button" aria-label="Open cart" aria-expanded="false" aria-controls="cart">
2  <svg aria-hidden="true" focusable="false"><!-- icon --></svg>
3</button>
4 
5<!-- present on page load; changing its text is announced politely -->
6<p role="status" class="visually-hidden" id="cart-status"></p>
7 
8<dialog id="cart" aria-labelledby="cart-title">
9  <h2 id="cart-title">Your cart</h2>
10  <!-- opened with cart.showModal(): focus is trapped, Escape closes -->
11</dialog>