Руководство маркетолога по рендерингу на стороне сервера

Опубликовано: 2021-07-26

Язык программирования — непростая для понимания концепция, особенно когда ваша работа по поисковой оптимизации в основном сосредоточена на нетехнической стороне. Но вот что касается технического SEO: его знание поможет вам понять, какие изменения необходимо внести на ваш сайт для повышения рейтинга в поисковых системах.
Поскольку в июне Google выпустила Core Web Vitals, который является частью обновления Page Experience, каждый маркетолог, который еще не изучил техническое SEO, захочет сделать это сейчас.
И когда ваш веб-сайт построен на основе JavaScript, одна часть, которую нужно изучить, — это рендеринг на стороне сервера.

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

Рендеринг на стороне сервера — это когда процесс получения веб-страницы, получения кода, отображения содержимого на экране — все это происходит на сервере.
В ССР:

  • Сервер отправляет готовый к обработке ответ браузеру;
  • Браузер отображает страницу, делая ее готовой для просмотра, а затем загружает JavaScript;
  • Затем браузер выполняет React, когда страница готова к просмотру, и
  • После этого веб-страница готова к интерактивности.

То, как все это происходит, сделало его лучшим вариантом по сравнению с другими типами рендеринга: рендеринг на стороне клиента (где JavaScript отображается браузером, также известным как клиент) и динамический рендеринг (где пользователи получают контент, отображаемый клиент-сервером, и поисковые системы). получить контент, отображаемый на стороне сервера). Даже Google поощряет веб-разработчиков выбирать рендеринг на стороне сервера.
Почему?

[Пример успеха] Управление сканированием ботов Google

Имея более 26 000 ссылок на продукты, 1001Pneus нуждался в надежном инструменте для мониторинга их эффективности SEO и уверенности в том, что Google выделяет свой краулинговый бюджет на правильные категории и страницы. Узнайте, как успешно управлять краулинговым бюджетом для веб-сайтов электронной коммерции с помощью OnCrawl.
Читать тематическое исследование

Преимущества ССР

  • Это помогает загрузить веб-страницу, когда интернет-соединение пользователя медленное.
  • Это позволяет ускорить загрузку страниц, способствуя лучшему взаимодействию с пользователем.
  • Он создает полную HTML-страницу, предотвращая трудоемкий процесс выборки данных.
  • Он позволяет загружать страницы со всеми их элементами, даже если у пользователя маломощное устройство, например, смартфон старого поколения.
  • Это способствует эффективности SEO, поскольку позволяет поисковым системам точно сканировать и индексировать страницы; боты могут легко сканировать страницы, так как они понимают JS

В целом, SSR помогает вам лучше обслуживать онлайн-клиентов, потому что посетители вашего сайта не будут ждать, пока страницы отобразятся на их устройствах. Быстрые переходы между страницами также гарантируют, что ваши пользователи никогда не увидят пустую страницу, что позволит им сразу же использовать ваш сайт.
Поскольку Google расширяет свою кампанию, чтобы предоставлять более точные результаты с помощью улучшенных алгоритмов, основанных на пользовательском опыте, SSR лучше для вашей эффективности SEO по сравнению с рендерингом клиент-сервер.
Но, как и все остальное в цифровом маркетинге, единый подход редко работает для всех. В некоторых случаях рендеринг на стороне сервера может быть проблемой. Как говорит Google, SSR «не панацея».

Недостатки ССР

  • Это требует много работы, потому что одно и то же приложение выполняется дважды: один раз на клиенте, а затем на сервере.
  • Это может задержать время до первого байта
  • Это может повлиять на внутренние ссылки или качество страницы, так как он не может отображать сторонний JS (например, пользовательский контент, обзоры продуктов и т. д.) или любой контент, не входящий в ваш статический HTML; боты их не увидят
  • URL-адреса, которые не обновляются, могут означать, что боты не смогут видеть новые статьи, что может привести к упущенному трафику.

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

Почему SSR имеет отношение к CWV?

Веб-разработчики и SEO-специалисты месяцами работали в ожидании развертывания CWV. Около 60 процентов опрошенных SEO-агентств были заняты улучшением показателей клиентов CWV. Если вы используете SSR, вам, возможно, не придется выполнять существенную работу, чтобы оправдать ожидания.
Поскольку SSR способствует скорости, ваш веб-сайт уже может преуспеть с одной из метрик: самой большой отрисовкой контента (LCP).
LCP фокусируется на воспринимаемом опыте загрузки. Он измеряет время загрузки страницы, когда в области просмотра отображается самое большое изображение или текст веб-страницы. Чтобы получить хороший результат, вы должны стремиться к 75-процентной загрузке страницы менее чем за 2,5 секунды.
Основными трудностями при получении хорошего LCP являются блоки JS и CSS, блокирующие рендеринг; медленное время загрузки ресурсов, медленный отклик сервера и рендеринг на стороне клиента.
Переход на SSR — это лишь одно из решений для улучшения оценки LCP, поскольку ваша проблема может не ограничиваться CSR. Вы захотите поработать со своими веб-разработчиками, чтобы сначала определить, что вызывает отставание вашего LCP.
Если исходный код страницы показывает код, который не имеет смысла (и ваш разработчик скажет вам об этом), проблема может заключаться в CSR. Если ваш разработчик обнаружит, что TTFB плохой, возможно, вы имеете дело с медленным временем отклика сервера.
Другие показатели CWV:

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

Оба они не имеют отношения к SSR, поэтому вам стоит приложить больше усилий к этим показателям, поскольку SSR частично заботится о LCP.

Как узнать, правильно ли SSR отображает веб-страницы

Лучший способ узнать, правильно ли SSR отображает ваши страницы, — это использовать инструменты. Одним из них является Mobile Friendly Test. Это инструмент, который предоставляет вам моментальный снимок того, как ваши веб-страницы будут отображаться для роботов Googlebot, и показывает вам ошибки во время рендеринга, если таковые имеются.
В Google Search Console также есть инструмент проверки URL-адресов, который позволяет вам увидеть, отображает ли поисковая система ваши страницы. Используйте его для проверки отсутствующего контента или любых ошибок, связанных с заблокированным JavaScript или CSS.
Вы также можете перейти к View Render Source, бесплатному расширению Chrome. Он расскажет вам, как браузер отображает страницу из исходного HTML в работающий DOM. Расширение проиллюстрирует разницу между необработанной и визуализированной версией, а также покажет, как JS модифицировал страницы во время рендеринга.
Еще одно расширение Chrome, которое стоит попробовать, — SiteCrawler. Сканер с поддержкой JS сканирует карты сайта, ссылки и изображения и сравнивает страницы, содержащие только HTML, и страницы с поддержкой JS.

Подведение итогов

Большая часть работы по SEO включает в себя оптимизацию страниц, которые уже были «доставлены» клиенту или браузеру. Но когда вы исследуете, как эти страницы «попадают» к клиенту и как вы можете улучшить то, как это происходит, пользователи лучше проводят время на вашем веб-сайте.
Боты правильно сканируют ваши страницы. Ваши страницы индексируются. Ваш сайт лучше ранжируется в поисковых системах.
Обновления поисковых систем наряду с изменениями в поведении потребителей также требуют изменений на вашем веб-сайте. С предстоящим развертыванием CWV сейчас самое время изучить SSR, технический аспект, который повлияет на ваши усилия по SEO.