Google объясняет рендеринг и его влияние на SEO

Мартин Сплитт из Google объясняет рендеринг и его влияние на SEO

0

Мартин Сплитт из Google принял участие в вебинаре Duda о рендеринге веб-страниц и его влиянии на SEO. Рендеринг — это то, что происходит, когда браузер запрашивает веб-страницу, это ключевая часть оценок Core Web Vitals. Понимание этого помогает снять некоторую загадку с Core Web Vitals.

Рендеринг веб-страницы
Рендеринг веб-страницы — это то, что происходит между браузером и веб-страницей, процесс создания веб-страницы. Эффективный процесс рендеринга приводит к высоким показателям Core Web Vitals.

Менее эффективный рендеринг может повлиять на продажи, доходы от рекламы и даже в определенной степени на наполняемость веб-страниц.

Мартина Сплитта из Google попросили определить, что такое рендеринг.

Скриншот Мартина Сплитта, объясняющего рендеринг
Мартин Сплитт из Google объясняет рендеринг веб-страниц

В ответ Мартин привел аналогию между приготовлением блюда по рецепту и созданием веб-страницы.

HTML означает HyperText Markup Language. Это формат для создания документов, к которым можно получить доступ через браузер посредством процесса рендеринга.

Мартин Сплитт объяснил процесс рендеринга:

«Если вы думаете о HTML как о рецепте, то у вас есть все ингредиенты:

куча текста

куча изображений

У вас есть куча всего.

Но на самом деле у вас нет этого в рецепте. Рецепт — это лист бумаги со всеми этими инструкциями о том, как сделать ту или иную вещь».

Первая часть объяснения Мартина заключается в том, что HTML — это как рецепт, инструкции. Текст и изображения — это то, что используется для создания готового блюда, которым является веб-страница.

Мартин продолжил аналогию, сравнив ресурсы веб-страницы с реальными физическими ингредиентами:

«Итак, ресурсы веб-сайта — это ингредиенты, такие как CSS, файлы JavaScript, а также изображения, видео, все то, что вы загружаете, чтобы страница выглядела так, как она выглядит впоследствии.

А веб-сайт, который вы знаете и используете в своем браузере, который вы видите в своем браузере, это и есть конечное блюдо».

Скриншот Джейсона Барнарда
Джейсон Барнард слушает Мартина Сплитта из Google

Рендеринг как процесс приготовления пищи
Далее Мартин сравнил рендеринг с фактическим процессом взятия ингредиентов (ресурсов, таких как изображения, CSS и т.д.) и приготовления пищи.

Он продолжил:

«А рендеринг — это в значительной степени процесс приготовления пищи».

Ползание Googlebot и рендеринг
Далее Мартин объяснил, что такое рендеринг для Googlebot.

Мартин объяснил Googlebot и рендеринг:

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

А затем рендеринг — это процесс, в котором рендеринг говорит: «Ага! Интересно! Вон там ползун, не мог бы ты принести мне эти десять ингредиентов?

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

Спасибо большое!

А потом мы начинаем готовить.

Вот что такое рендеринг».

Разблокировка (не предоставляется) с Keyword Hero
Просматривайте все свои органические ключевые слова в GA и их конкретные показатели эффективности. Бесплатная пробная версия. Отмена в любое время. Профессиональная поддержка. 4-минутная настройка.

Бесплатная учетная запись
Похожие: Как (и почему) поисковые системы отображают страницы

Разбор HTML для сборки веб-страницы
В следующей части мы познакомимся со словом программирования — разбор. Разбор — это просто взятие всех частей HTML-документа (JavaScript, CSS, HTML-элементы) и следование указаниям по созданию веб-страницы.

Мартин продолжил обсуждение рендеринга:

«Итак, рендеринг анализирует HTML.

HTML в основе своей, когда он поступает от краулинга, является просто кучей текста, удобно отформатированного, но … текста!

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

Здесь есть заголовок, хорошо.

Затем там есть изображение, а рядом с изображением — куча текста, а под изображением — еще один заголовок, он меньше, это заголовок более низкого уровня… а потом — видео, а под видео — еще текст, и в этом тексте — три ссылки, ведущие сюда, сюда и сюда.

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

Роль JavaScript в рендеринге
Некоторые JavaScript очень важны для рендеринга (создания) веб-страницы. Довольно много JavaScript, например, сценарии, связанные с контактной формой, на самом деле не нужны при создании интерактивной веб-страницы, которую посетитель сайта может прокручивать, читать и нажимать на навигационное меню.

Для ускорения рендеринга веб-страницы (и улучшения показателей Core Web Vitals) некоторые некритичные JavaScript могут быть отложены или вовсе исключены, если они не нужны для веб-страницы.

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

Мартин объяснил:

«И как часть рендеринга, на самом первом этапе, мы выполняем JavaScript, потому что JavaScript, по сути, является рецептом внутри рецепта.

Поэтому JavaScript может быть таким: «А теперь иди и нарежь этот лук!

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

И именно для этого нужен JavaScript, верно?

…Выполнение JavaScript — это только часть рендеринга».

Скриншот Бартоша Горалевича
Скриншот Бартоша ГоралевичаРазное: Rendering SEO Manifesto: Почему нам нужно выйти за рамки JavaScript SEO

Дерево макетов
Далее Мартин начинает говорить о дереве макетов. Он ссылается на Document Object Model, которая представляет собой иерархическое расположение всех частей веб-страницы.

Различные «кусочки и части» веб-страницы похожи на листья дерева. В HTML эти листья на том, что Мартин называет деревом компоновки, называются узлами.

Мартин объясняет дерево макета:

«Но потом, когда выполнение JavaScript закончилось или если JavaScript не выполнялся, это тоже нормально.

Но что происходит потом, так это то, что мы собираем, как бы выясняем эти кусочки и части и как нам нужно собрать их на странице, и это приводит к тому, что мы называем дерево макета.

А дерево макета говорит нам, насколько велики вещи, где на странице они находятся.

Если они видны или не видны, если одна вещь находится за другой.

Эта информация также важна для нас, как и выполнение JavaScript, потому что JavaScript может изменить, удалить или добавить содержимое, которого не было в исходном HTML, когда он был доставлен сервером.

Вот это и есть рендеринг в двух словах.

От HTML до потенциально кучи пикселей на экране. Это и есть рендеринг».

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

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

Мартин Сплитт объясняет дорогостоящий рендеринг
Google-Martin-Splitt-expensive-renderingМартин объясняет влияние дорогого рендеринга:

«В этом случае Google Search испытывает точно такую же борьбу, как и реальный пользователь.

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

Вот в чем дело. И …были люди, которые называли JavaScript CO2 интернета, и я не думаю, что это полностью неверно.

…Чем дороже вы его делаете, тем хуже он для нас как опыт.

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

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

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

Это как бы одна и та же проблема или один и тот же вызов, и мы все с ним сталкиваемся, включая Google Search».

Скриншот Мартина Сплитта из Google
Google Мартин Сплитт

Понимание важности рендеринга
Основные веб-принципы могут быть несколько абстрактными и загадочными, особенно когда технари говорят об объектных моделях документов, деревьях DOM и рендеринге.

Аналогии Мартина Сплитта помогли снять часть этой загадочности с одной важной части понимания показателей Core Web Vitals — рендеринга.

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

Наконец, он разъяснил концепцию рендеринга. Это помогает продвинуть разговор по улучшению скорости веб-страниц и производительности Core Web Vitals, потому что мало что может замедлить или остановить прогресс в понимании чего-то важного, как технический жаргон.

Вам также могут понравиться Еще от автора

Оставьте ответ

Ваш электронный адрес не будет опубликован.