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

9 больших советов, как сделать рендеринг страницы более эффективным и менее болезненным

Давайте начнем!

Робот Google не то, что вы думаете.

Googlebot – это просто пользовательский агент. Это идентификатор запроса – модная версия идентификатора звонящего.

Как только запрос получает ответ, работа робота Googlebot завершена, и он не может запросить следующий URI. Собранный ответ проходит через серию сервисов и процессов, прежде чем он появится в SERP.

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

Содержание

Что такое рендеринг страницы?

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

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

след снимаемого из-рендер-процесса

Каждая веб-страница имеет две составляющие – рендеринг страницы происходит между ними

Каждая веб-страница имеет две составляющие:

  • Исходный HTML.
  • Визуализированный HTML.

Первоначальный HTML происходит первый. Это ответ от сервера. В нем есть HTML и ссылки на такие ресурсы, как JavaScript, CSS и изображения, которые необходимы для построения страницы. Чтобы увидеть исходный HTML-код для себя, просмотрите страницу источника.

Визуализированный HTML более широко известен как DOM, аббревиатура от Direct Object Model . Каждая веб-страница имеет DOM. Он представляет исходный HTML плюс любые изменения, сделанные JavaScript, которые вызывал HTML. Чтобы просмотреть DOM, откройте инструменты разработчика браузера в своем браузере и перейдите на вкладку консоли.

просмотреть оказанные в HTML-разработчиков-инструменты

Если вы хотите легко определить разницу между ними, такие инструменты, как расширение Chrome View Rendered Source , выделят линии, которые меняются от одного состояния к другому.

Знание различий между HTML и DOM является ключом к устранению неполадок в JS SEO

Когда содержимое изменяется между исходным HTML и DOM, это страница изменения JavaScript на стороне клиента. ( JavaScript может быть выполнен в другом месте, но мы обсудим это позже.)

Эти изменения указывают на то, что JavaScript выполняется в браузере пользователя. Когда JavaScript выполняется в браузере пользователя, мы называем его «Рендеринг на стороне клиента» (CSR).

Это подвергает вашу веб-страницу риску. Если что-то пойдет не так во время выполнения, эти изменения JavaScript могут никогда не произойти. JavaScript – сложный процесс и самый дорогой ресурс на вашем сайте.

Звучит как проблема разработчика, верно?

Это не так.

У профессионала SEO есть существенный скин в игре.

Google не может индексировать то, что не может отобразить

Для ранжирования мы должны быть проиндексированы. Чтобы быть проиндексированными, мы должны быть обработаны.

Если контент не может быть отображен, это не влияет на то, как Google понимает или повышает ваш сайт.

Давайте посмотрим на сайт со счастливым, здоровым JavaScript.

страница-с-успешного выполнения JavaScript-

Кажется, все в порядке. Похоже, это авторитетный сайт электронной коммерции, который много знает о своей тематике.

Теперь давайте заберем контент, сгенерированный JavaScript. Вы можете сделать это на любом сайте, заблокировав JavaScript в настройках сайта.

Отключено JS

Уф.

Все продукты, которые подчеркивали авторитет сайта, исчезли.

Представьте себе, если бы это был контент, с которым вы усердно работали над оптимизацией и хотели бы получить рейтинг.

Это один из лучших сценариев.

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

Давай сыграем в игру.

Откройте страницу и просмотрите страницу источника. Можете ли вы рассказать, о чем сайт?

SEO - введение в рендеринг
Если вы не можете определить, о чем идет речь, и какой тип поиска соответствует поисковому запросу на основе исходного HTML-кода, то поисковая система тоже не сможет.

Страница должна пройти через процесс рендеринга, чтобы понять.

Как Google отображает (грубый эскиз сайта)

Как бы трудно это ни было, есть четкие шаги и контрольные точки.

SEO - введение в рендеринг

Вот процесс с полезными практическими шагами!

  1. URL извлекается из очереди сканирования
    • Следующий шаг: выберите страницу, любую страницу.
  2. Робот Google запрашивает URL и загружает исходный HTML
    • Шаг два: Просмотр страницы источника
  3. Исходный HTML-код передается на этап обработки (первая волна обработки службой индексации Google)
    • Шаг три: Можете ли вы рассказать, о чем эта страница?
  4. Этап обработки извлекает ссылки из исходного HTML
    • Следуйте инструкциям: откройте вкладку «Сеть» в инструментах разработчика Chrome и посмотрите общее количество запросов. Каждый из этих запросов учитывается в вашем бюджете сканирования.
      SEO - введение в рендеринг
  5. Эти ссылки возвращаются в очередь сканирования
    • Следуйте: откройте каждый ресурс. По одному. Без обмана. Спросите себя, как этот ресурс повышает ценность. Около 20 ресурсов, вы будете раздражены. 50 ресурсов, начинайте задаваться вопросом, как эти вещи способствуют любым значимым способом. 80 ресурсов, начинайте понимать ненужную ерунду, которую доставляет сайт. Подсказка : держите каждую новую вкладку для каждого и медленно наблюдайте, как ваше здравомыслие ускользает.
  6. После того как ресурсы просканированы, очереди страниц для рендеринга
    • Следуйте: Blink. Возможно, вы забыли, как.
  7. Когда ресурсы становятся доступными, запрос перемещается из очереди рендеринга в рендерер
    • Следуйте инструкциям: попробуйте найти исходную вкладку.
  8. Сервис рендеринга собирает страницу, используя просканированные ссылки
    • Следуйте инструкциям: просмотрите DOM, открыв Инструменты разработчика и просмотрите ресурсы. В качестве альтернативы, если вы потеряли исходную вкладку: воспользуйтесь инспектором URL консоли поиска Google, чтобы отобразить страницу. Инструмент выполняет сканирование и рендеринг одновременно.
  9. Renderer передает обработанный HTML обратно в обработку
    • Следуйте: просмотрите представленный HTML, доступный в GSC.
  10. Вторая волна обработки для индекса Google
    • Продолжайте: можете ли вы рассказать, о чем эта страница? Является ли контент настолько богатым и ценным, что оправдывает все вкладки, которые вам пришлось открыть, чтобы попасть сюда?
  11. Извлекает ссылки из отрендеренного HTML, чтобы поместить их в очередь сканирования
    • Продолжайте: ищите ссылки, доступные в отображаемом HTML, которые не были доступны в ответе сервера.
  12. Перейдите к следующему URL в вашем списке и повторите процесс.

Фантастическая работа! Всего 130 триллионов страниц, и вы станете настоящим ботом!

Как сделать рендеринг более эффективным и менее болезненным

Теперь, когда вы уже познакомились с процессом рендеринга (извините, пожалуйста), давайте поговорим о том, как сделать процесс менее болезненным.

1. Будьте в курсе того, как вы доставляете контент

Чем больше ресурсов на стороне клиента вы используете, тем больше мест для того, чтобы что-то пошло не так.

Представьте, что вы действительно робот Google.

Получил ли какой-либо из этих ресурсов ошибку при запросе?

Любой контент, созданный этим ресурсом, теперь теряется в интернете.

2. Пропустите очередь рендеринга и доставьте критический контент в ответе сервера.

JavaScript должен где-то выполняться. По большей части, это либо на вашем сервере, либо в браузере пользователя.

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

Многие JavaScript-фреймворки, такие как Angular и React, имеют эти функции, доступные изначально.

Получение вашего контента на стороне сервера включает в себя работу с вашими разработчиками и изучение вашей кодовой базы.

Важно понимать, что вам не нужно быть на 100% на стороне клиента или на 100% на стороне сервера. Вместо этого сосредоточьтесь на доставке, что важно, когда это важно.

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

Такие элементы, как дополнительный контент, нижний колонтитул сайта и элементы вне экрана, могут подождать.

JSON-LD в вашем исходном HTML-коде – отличный способ передать Googlebot шпаргалку, но убедитесь, что у вас есть контент, который также интересует пользователя.

3. Отправляйте только те скрипты, которые вам нужны

В 2019 году доминирующими затратами на скрипты стали время загрузки и время загрузки процессора.

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

Google Chrome имеет встроенную функциональность, чтобы помочь вам увидеть, сколько кода используется.

Как определить бесполезные сценарии

  • Откройте Инструменты разработчика.
  • Нажмите на 3 точки в правом верхнем углу.
  • Выберите больше инструментов, Покрытие.
  • Перезагрузите страницу.

SEO - введение в рендеринг

В качестве цели, здоровая, эффективная страница должна быть менее 1 МБ.

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

4. Приоритет человеческого опыта над блестящими чертами

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

Сторонние сценарии могут негативно повлиять на производительность, рендеринг, безопасность и конфиденциальность пользователей.

Думайте о загрузке стороннего скрипта как о предоставлении кому-то вашего ключа от дома.

5. Ленивая загрузка изображений и скрипты без блокирования рендеринга

Картинка стоит тысячи слов, верно?

Вот вещь 1000 слов – это около 2 КБ.

Согласно HTTPArchive, изображения являются наиболее востребованным ресурсом и в среднем составляют 900 КБ запросов.

SEO - введение в рендеринг

Начиная с Chrome 76, ленивая загрузка изначально поддерживается. Просто добавьте атрибут, loading="lazy"чтобы получить максимальное значение с наименьшим возможным билетом разработчика.

Точно так же вы можете также загружать сценарии асинхронно, добавив простой атрибут: <rel=”myscript.js” async defer>

6. Держите наборы скриптов маленькими

Если размер вашего скрипта превышает 50–100 кБ, разбейте его на отдельные меньшие пакеты.

Несколько небольших пакетов более эффективны, чем один большой пакет скриптов.

Если ваш сайт использует мультиплексирование HTTP / 2, несколько запросов и ответов могут быть запущены одновременно.

7. Кэш, Кэш, Кэш

Помните приведенное выше упражнение? Представьте, что вам нужно каждый раз возвращаться к повторно используемому ресурсу JS. Этого дополнительного шага можно легко избежать, кэшируя ресурсы как можно дольше.

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

Ознакомьтесь с основами веб-технологий Google, а затем посоветуйтесь с вашими инженерами, чтобы получить представление о том, как и что вы в настоящий момент кэшируете.

8. Производительность и рендеринг страницы напрямую связаны

Google использует Chromium для рендеринга по ряду причин. Одним из них является то, что он может захватывать критические моменты времени – от времени до первого байта (TTFB) до времени до интерактивного (TTI).

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

Чем эффективнее и эффективнее будут ваши ресурсы, тем эффективнее будет отображаться страница.

Lighthouse – это бесплатный инструмент для тестирования, который поможет вам выявить узкие места в производительности.

9. Помните, что ни одна технология не является хорошей или плохой

JavaScript является инструментом и имеет эффективное приложение, создающее богатый интерактивный и персонализированный опыт. Молоток – это тоже инструмент.

Молотки отлично подходят для подвешивания картин, молотки отлично подходят для работы с гвоздями, но это не делает молоток идеальным для домашнего педикюра.

Знай разницу между своими ногтями. Не вините инструмент.

Какой лучший способ визуализации? Это зависит…

Это зависит от технологий, которые вы используете. Это зависит от ваших деловых целей.

Это зависит не от списания ответа на вопрос, на который Google не хочет отвечать.

Технология нюансов. Рендеринг является одним из многих процессов, которые происходят в промежутках между ними.

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

Источник

PS: Вы можете заказать сео продвижение и технические доработки у нашей компании.