Поисковики, мы ожидали большего! Что не так с рендерингом кода в браузере

Когда дело доходит до отображения фрагментов кода на веб-странице, у разработчиков есть два пути: обработать скрипт на стороне сервера (хостинга) или доверить эту задачу браузеру.

Долгое время поисковые системы не очень хорошо справлялись с рендерингом кода в браузере, но потом заявили о решении этой проблемы. Так, Яндекс добавил в Вебмастере опцию предпочтительного рендеринга (пока на стадии бета-тестирования). Но так ли хорошо она работает?

Специалисты Kokoc.com (Kokoc Performance) провели эксперимент и вынуждены сообщить – по нашему мнению, ПС пока не обрабатывают скрипты должным образом.

Что такое рендеринг кода

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

Рендеринг кода – это процесс преобразования исходного текста программы в его визуальное представление на веб-странице. Основная его цель – сделать так, чтобы пользователь увидел полноценную страницу со всеми элементами, улучшить восприятие информации, сделать код не только функциональным, но и эстетически приятным элементом контента.

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

Особенности рендеринга на сервере

При серверном рендеринге (на хостинге) весь процесс обработки кода происходит на сервере во время сборки сайта. Пользователю отправляется уже готовый HTML с расставленными тегами и классами для стилизации. Вся страница полностью отрисована и контент доступен.

Схема рендеринга на сервере

Плюсы этого подхода:

1. Высокая производительность на клиенте. Браузер получает готовую разметку и ему остается только применить CSS-стили. Это избавляет от необходимости загружать и запускать тяжелые JavaScript-библиотеки для подсветки, что особенно критично для слабых устройств и медленных сетей.

2. Лучше для SEO. Поисковые боты видят код уже в полноценном и структурированном виде. Хотя сами цвета их не волнуют, семантическая разметка может положительно влиять на понимание контента страницы.

3. Предсказуемость и надежность. Код обрабатывается в контролируемой серверной среде один раз. Вы всегда уверены в результате, и он не зависит от включенного JavaScript в браузере пользователя.

Но есть и минусы – например, большая нагрузка на сервер. Для больших сайтов с тысячами страниц предварительная обработка всего кода может увеличить время сборки.

Особенности рендеринга в браузере

Клиентский рендеринг (в браузере) предполагает, что сервер отправляет браузеру чистый, необработанный код. Специальная JavaScript-библиотека, загруженная на страницу, находит эти блоки и «раскрашивает» их прямо в браузере пользователя.

Схема рендеринга в браузере

Плюсы:

1. Простота реализации. Достаточно подключить один скрипт и одну таблицу стилей к странице – и библиотека автоматически обработает все найденные блоки кода.

2. Меньшая нагрузка на сервер. Сервер не тратит ресурсы на обработку, он просто отдает статические файлы.

Минусы, однако, намного глобальнее:

1. Если скрипт обрабатывается в браузере, велика вероятность, что поисковики «не увидят» огромную часть кода и не могут корректно проанализировать структуру и содержание сайта. В результате поисковик формирует искаженное представление о ресурсе, которое не соответствует тому, что видит реальный пользователь. В индекс поисковой системы попадает некрасивый, неразмеченный «сырой» код. Это оказывает прямое влияние на важные аспекты:

• Мобильная адаптация. Система может сделать вывод о том, что сайт не оптимизирован для мобильных устройств.

• Восприятие дизайна. Контент может быть проиндексирован в неотформатированном виде, что создаст впечатление устаревшего или непривлекательного дизайна.

• Видимость контента. Ключевая информация, подгружаемая скриптами, рискует остаться незамеченной для поисковых роботов.

2. Зависимость от JavaScript. Если пользователь отключил JS в браузере, он так и не увидит подсвеченный код.

Как Яндекс решил проблему (и решил ли?)

Еще недавно сложности с рендерингом скриптов были настоящей головной болью оптимизаторов. Ресурсы, целиком построенные на скриптах, часто даже не брали в работу, поскольку роботы видели пустые страницы, а исправить эту ситуацию было затруднительно.

Однако поисковые системы усовершенствовали свои алгоритмы и заявили, что научились индексировать контент независимо от способа его подгрузки. Так, Яндекс добавил в Вебмастер специальную опцию выбора предпочтительного рендеринга (пока в стадии бета-тестирования).

«Рендеринг страниц JavaScript» – это настройка в Вебмастере, которая позволяет указать роботу Яндекса, как индексировать страницы сайта на JavaScript. А также сообщить роботу, если контент загружается с задержкой.

Казалось бы, проблема решена – ура, салют и поздравления. Однако мы получили экспериментальное подтверждение, что сайт с рендерингом скриптов в браузере все же имеет намного худшую видимость, чем с рендерингом на сервере. Увы, мы наглядно увидели это на примере нашего клиента из сферы EdTech.

При проведении технического аудита сайта нас смутило, что через панель разработчика и через просмотр кода страницы код был разный. Вебмастер сообщал о дублирующихся метатегах, несмотря на их уникальность в исходном коде страниц. Кроме того, наблюдалась проблема с обработкой внутренних ссылок: хотя соответствующие страницы успешно индексировались поисковыми системами, парсер не всегда корректно их сканировал.

При изучении проблемы мы выяснили, что дело было в рендеринге кода – несмотря на то, что в Вебмастере был включен рендеринг скриптов, а сохраненная версия страниц в индексе содержала контент. Мы настоятельно рекомендовали клиенту настроить рендеринг скриптов на сервере.

Отрывок из аудита клиенту, где подсвечиваем момент с рендерингом

Клиент внес необходимые правки, и буквально сразу трафик сайта ракетой взлетел вверх. С апреля по июль 2025 трафик вырос примерно на 25 000 визитов в месяц, а год к году – в 2,28 раза.

Также растет видимость сайта в Яндексе. Опять же год к году запросов в топ-3 Яндекса стало больше в 2,5 раза, а Google – в 8,9 раз!

Но не серверным рендерингом единым!

Хочется отметить, что все не так просто. Да, мы получили подтверждение того, что рендеринг на хостинге срабатывал недостаточно. Однако настройка рендеринга на хостинге (сервере) – не панацея!

Если у вас неоптимизированный сайт, не проработаны коммерческие факторы, мало контента или он некачественный – одним рендерингом проблему не решить. У нашего клиента был отлично проработанный сайт, потому после устранения ошибок мы и получили мощный результат. Если бы на сайте были другие ошибки, такого результата пришлось бы ждать намного дольше.

Оптимизируйте сайт, работайте над структурой, пишите полезный экспертный контент, развивайте бренд, закупайте рекламу – только тогда ресурс будет работать в полную силу!

Оригинал статьи на SEOnews