Рендеринг JavaScript – это процесс отображения контента веб-страницы, генерируемого средствами JavaScript.
Браузер получает HTML, CSS и JavaScript код страницы и создает DOM (Document Object Model) – объектное представление страницы. Затем происходит расчет стилей – браузер анализирует CSS код и вычисляет визуальное представление каждого элемента на основе его стилей.
После этого начинается компоновка (layout) элементов страницы. Браузер располагает элементы на странице с учетом их размеров, позиций и других свойств. И уже после компоновки браузер отрисовывает (рендерит) страницу: заполняет пиксели на дисплее и фактически рисует элементы на экране. После этого элементы страницы объединяются в единую картинку кадра.
Этот процесс повторяется при любом изменении DOM или стилей, чтобы обновить изображение. JavaScript может управлять им, манипулируя DOM и CSSOM (объектным представлением CSS). Оптимизация рендеринга важна для производительности.
Поисковые роботы не умеют рендерить JavaScript при первичном сканировании страницы. Контент, генерируемый средствами JavaScript, изначально не виден поисковым роботам. Несмотря на то, что поисковые системы пытаются обрабатывать JS в реальном времени, комплексно это происходит только при повторном сканировании. Том Гринуэй, 2018, Google I/O:
Если страница содержит JavaScript, рендеринг откладывается до момента, когда у нас появятся ресурсы для рендеринга контента на стороне клиента, после чего мы продолжаем индексировать контент. Поэтому Googlebot может проиндексировать страницу до завершения рендеринга, а финальный рендер может быть завершен спустя несколько дней. И когда будет получен финальный рендер, мы проведем ещё одну волну индексации контента, отображаемого на стороне клиента.
JavaScript может генерировать контент после загрузки страницы. Если это происходит с задержкой – робот может не дождаться результата и не проиндексировать контент. Если JavaScript-файлы загружаются без атрибута async или defer, это может блокировать рендеринг контента “наверху” страницы. Робот видит только этот верхний контент.
Джон Мюллер, 2018:
Да, фиксированных сроков нет — в некоторых случаях рендеринг может происходить довольно быстро, но обычно он занимает от нескольких дней до даже нескольких недель. Если ваш сайт часто создает новый/обновляемый контент и вы хотите, чтобы он быстро индексировался, вам нужен этот контент в HTML.
SPA (одностраничные приложения) обычно рендерятся только при помощи JavaScript. Для SEO такие приложения требуют отдельной оптимизации.
Чтобы минимизировать проблемы с JavaScript, используют предварительный рендеринг на сервере (SSR), статическую генерацию страниц (SSG), семантическую HTML-разметку, атрибуты async/defer для скриптов и другие методы.
