Рендеринг

Рендеринг – это превращение кода страницы (HTML, CSS и JavaScript) в готовую страницу, которую видит человек: с текстом, картинками, меню и ссылками. Его выполняет браузер посетителя, а поисковые роботы повторяют ту же работу, чтобы понять, что на странице на самом деле.

Сервер присылает не картинку, а инструкцию. Пока браузер её не выполнит, страницы как таковой нет. На классическом сайте инструкция почти совпадает с результатом: текст уже лежит в HTML. На сайте, где содержимое достраивают скрипты, исходный код и итоговая страница могут отличаться полностью. Для поиска важно, что именно робот увидел после рендеринга.

Пять шагов рендеринга в браузере

Если упростить, у браузера пять шагов:

1. Разбирает HTML и строит дерево элементов, DOM.
2. Загружает CSS и собирает правила оформления.
3. Выполняет JavaScript. Скрипты могут добавить, удалить или изменить элементы DOM.
4. Рассчитывает раскладку: размеры и положение каждого блока на экране.
5. Отрисовывает пиксели.

От этих шагов зависит и скорость. Пока браузер ждёт блокирующий CSS или тяжёлый скрипт, человек смотрит на белый экран. Поэтому метрики Core Web Vitals по сути измеряют рендеринг: когда отрисован главный элемент, как быстро страница отвечает на действия, прыгает ли вёрстка.

Исходный HTML и отрисованная страница

Есть две версии одной страницы. Исходный HTML приходит с сервера, его показывает «Просмотр кода страницы». Отрисованная версия получается после работы скриптов, её показывает инспектор элементов. Возьмём страницу товара:

Цену робот получит, только если отрендерит страницу. Отзывы он может не увидеть даже после рендеринга: робот не нажимает на вкладки.

Как рендерят Googlebot и робот Яндекса

Google обрабатывает страницы в три этапа: сканирование, рендеринг и индексирование. Страницы с ответом 200 встают в очередь на рендеринг, его выполняет актуальная версия Chromium. Если на странице стоит noindex, Google может пропустить рендеринг совсем, поэтому убирать noindex скриптом бесполезно.

Яндекс тоже выполняет JavaScript. В Вебмастере есть настройка «Рендеринг страниц JavaScript» с тремя вариантами: на усмотрение робота (по умолчанию), включить или выключить. Если на сайте серверный рендеринг или пререндер, Яндекс советует рендеринг выключить, чтобы не нагружать сервер лишними запросами. Для страниц, где контент появляется с задержкой, Яндекс описывает объект window.YandexRotorSettings: через него можно сообщить роботу, что страница готова.

Рендеринг и нагрузка на сервер

Чтобы отрисовать страницу, роботу нужно скачать HTML, а с ним все скрипты, стили и ответы API, к которым они обращаются. Одна страница превращается в десяток запросов. Google в блоге для вебмастеров писал, что запросы к файлам CSS и JavaScript, включая AJAX-запросы, тоже расходуют краулинговый бюджет, а Яндекс предупреждает, что рендеринг создаёт дополнительную нагрузку на сервер. Для сайта на сотню страниц это незаметно. Для каталога на десятки тысяч карточек разница видна уже в логах и в скорости обхода.

На сервере или в браузере: где выполняется рендеринг

От этого выбора зависит, что робот получит с первого ответа сервера:

• серверный рендеринг (SSR): сервер отдаёт готовый HTML, скрипты только добавляют интерактивность;
• статическая генерация: HTML собран заранее, при сборке сайта;
• клиентский рендеринг (CSR): сервер отдаёт почти пустой шаблон, всё собирает браузер;
• динамический рендеринг: роботам отдают заранее отрисованную версию. Google называет его временным обходным путём и не рекомендует.

Плюсы и минусы каждого подхода для сайтов на React и Vue разобраны в статье JavaScript SEO: CSR и SSR.

Где посмотреть страницу глазами робота

• Google: в Search Console запустите проверку URL, затем проверку страницы на сайте. Там будут скриншот, отрисованный HTML и список ресурсов, которые не загрузились.
• Яндекс: инструмент «Проверка страницы» в Вебмастере показывает, как робот видит страницу после обработки.
• Сравните текст в отрисованном HTML с тем, что видите в браузере. Всё, чего нет, для поиска не существует.

Почему робот видит страницу не целиком

• Файлы JS и CSS закрыты в robots.txt, и робот собирает страницу без них.
• Ошибка в одном скрипте останавливает выполнение остальных, и часть страницы не появляется.
• Данные приходят от медленного API, и робот заканчивает рендеринг раньше.
• Контент показывается только после клика, прокрутки, выбора города или согласия с cookies.

Режимы рендеринга, очередь Google и проверка в Search Console

Как роботы видят ваши страницы после рендеринга, проверяем на техническом аудите сайта. Если проблема в архитектуре, предлагаем доработку сайта.

Документация Google и Яндекса о JavaScript

• Google Search Central: основы JavaScript SEO
• Google Search Central: динамический рендеринг как обходной путь
• Справка Яндекс Вебмастера: индексирование страниц с JavaScript

См. также: JavaScript SEO: CSR и SSR, Скорость сайта, Индексация сайта, Технология AJAX, LCP.