Рендеринг страниц

Происхождение и история термина

Английское rendering обозначает здесь формирование представления документа. В рекомендации консорциума W3C от 17 декабря 1996 года, посвящённой CSS1 — первой версии каскадных таблиц стилей, — термин уже используется для отображения веб-документов. Документ описывал, как правила шрифтов, цветов и отступов влияют на их представление. Это историческое свидетельство употребления, а не дата изобретения слова. Сегодня CSS1 имеет статус заменённой рекомендации; применять её как современную спецификацию не следует. ^[6]

С распространением страниц, содержимое которых создаётся программно, рендеринг стал важен и для поиска. В сообщении от 23 мая 2014 года инженеры Google объяснили переход от анализа исходного текстового ответа сервера к выполнению JavaScript и применению стилей. Причина была практической: иначе ценный текст, добавленный программой, мог остаться невидимым поиску. Так браузерная задача построения страницы стала частью обработки документов поисковой системой. ^[7]

Суть и механизм

HTML — язык гипертекстовой разметки — задаёт структуру документа: например, заголовок, абзацы и ссылки. CSS, каскадные таблицы стилей, описывает оформление. JavaScript — язык программирования; написанные на нём сценарии могут менять содержимое страницы. Браузер разбирает HTML и строит DOM, объектную модель документа: дерево элементов и связей между ними. Для правил оформления создаётся CSSOM, объектная модель стилей. ^[1]

Затем браузер объединяет сведения о содержимом и оформлении в дерево отображения. На этапе компоновки он рассчитывает размеры и положение элементов, после чего рисует изображение. Поэтому наличие абзаца в DOM ещё не означает, что абзац виден: правило display: none исключает элемент из дерева отображения. При изменениях страницы часть работы выполняется снова. ^{[1, 2]}

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

Первое изображение необязательно содержит всё, что появится позднее. Браузер может начать показ до получения всех ресурсов; некоторые стили и сценарии, напротив, задерживают его. Критический путь рендеринга — последовательность действий и необходимых ресурсов до начального отображения. Ускоряя его, важно сохранить ресурсы, без которых страница сначала выглядит сломанной. ^[2]

Виды и классификации

В руководстве Google различаются страницы с готовым содержимым в ответе сервера и приложения, которым для получения содержимого необходимо выполнить JavaScript. ^[3] Это полезное основание для сопоставления двух способов подготовки документа:

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

JavaScript SEO — поисковая оптимизация сайтов с программно создаваемым содержимым — рассматривает доступность таких материалов поиску. Рендеринг обозначает сам процесс обработки, а SSR — один из способов подготовки документа. Эти понятия связаны, но отвечают на разные вопросы. ^{[1, 3]}

Как применяется на практике

Продолжим учебный пример. После обновления шаблона интервью читатель видит заголовок, но не текст. Редактор передаёт разработчику адрес страницы и конкретную пропавшую фразу. Они сравнивают исходный ответ сервера, DOM после работы программы и экран. Если фраза появилась в DOM, этап получения и вставки текста уже сработал; далее проверяют оформление. Если её нет, исследуют ответ дополнительного запроса и выполнение программы. Это предложенная редакцией последовательность диагностики, а не описание реального инцидента.

Для поисковой проверки нужны сведения самой поисковой системы. Их нельзя автоматически получить из того, что материал открылся у редактора:

Яндекс также позволяет управлять выполнением JavaScript при обходе. По умолчанию решение оставлено роботу; справка отмечает возможную дополнительную нагрузку на сервер. Это настройка конкретной системы, а не универсальный переключатель для всех поисковиков. ^[5]

Как измерить или проверить

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

Учебный расчёт: проверены десять страниц, представляющих десять разных шаблонов. У двух основной текст отсутствует в выбранном состоянии. Доля проблемных проверок равна числу неудачных проверок, делённому на число всех проверок и умноженному на сто процентов:

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

Полноту содержимого и скорость его появления оценивают раздельно. Руководство web.dev различает самый первый показ и появление содержательной части страницы: первый может показывать лишь фон. Поэтому ранняя отрисовка сама по себе не отвечает на вопрос, когда читатель получил интервью. ^[2]

Ошибки, ограничения и спорные вопросы

Красивый скриншот доказывает только вид выбранного экрана. Он не сообщает, какие сведения находятся в поисковой базе: у Google рендеринг и индексирование выделены отдельно. Обратная ошибка — считать наличие текста в документе доказательством его видимости, хотя стили могут скрывать элементы. ^{[1, 3]}

Время проверки тоже имеет значение. В справке Яндекса описан случай, когда по истечении ожидания в базу поступает лишь успевшая загрузиться часть содержимого; поведение зависит от настройки. Следовательно, наличие заголовка ещё не подтверждает получение всего материала. ^[5] В учебном протоколе стоит заранее определить, какой блок должен появиться, и проверять именно его.

Частые вопросы

Связанные термины

• javascript-seo
• ssr
• indeksatsiya
• skanirovanie
• skorost-zagruzki-sayta
• mobilnaya-adaptatsiya