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

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

Два популярных метода рендеринга включают рендеринг на стороне клиента (CSR) и рендеринг на стороне сервера (SSR).

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

Google и JavaScript

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

Например, в Поиск подкаста Off The Recordобсуждалось, что Google отображает все страницы для поиска, включая страницы с большим количеством JavaScript.

Это вызвало содержательную беседу является LinkedInи еще пара выводов из подкаста и продолжающихся обсуждений:

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

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

Полный комментарий Мартина Сплитта на LinkedIn по этому поводу был следующим:

«Мы не отслеживаем «насколько дорогой была эта страница для нас?» или что-то в этом роде. Мы знаем, что значительная часть сети использует JavaScript для добавления, удаления, изменения контента на веб-страницах. Нам просто нужно отобразить, чтобы увидеть все это. На самом деле не имеет значения, использует ли страница JavaScript или нет, потому что мы можем быть уверены, что увидим весь контент только после того, как он будет отрисован».

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

ЧИТАТЬ  Внутренняя камера Arlo Essential 1-го поколения и 2-го поколения | Цифровые тенденции

Общие рекомендации по JavaScript

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

  • Не блокируйте ресурсы JavaScript с помощью Robots.txt или правил сервера.
  • Избегайте блокировки рендеринга.
  • Избегайте внедрения JavaScript в DOM.

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

Клиентский рендеринг — относительно новый подход к рендерингу веб-сайтов.

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

Он работает путем отображения JavaScript-кода веб-сайта в вашем браузере, а не на сервере.

Сервер отвечает простым HTML-документом, содержащим файлы JS, вместо того, чтобы получить все содержимое из HTML-документа.

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

От управления логикой до извлечения данных из API, сайты, отображаемые клиентом, делают все «независимо». Страница становится доступной после выполнения кода, поскольку каждая страница, которую посещает пользователь, и соответствующий ей URL-адрес создаются динамически.

The Процесс КСО выглядит следующим образом:

  • Пользователь вводит в адресную строку URL-адрес, который он хочет посетить.
  • Запрос данных отправляется на сервер по указанному URL.
  • При первом запросе клиента на сайт сервер доставляет статические файлы (CSS и HTML) в браузер клиента.
  • Клиентский браузер сначала загрузит HTML-контент, а затем JavaScript. Эти HTML-файлы подключают JavaScript, запуская процесс загрузки, отображая символы загрузки, которые разработчик определяет для пользователя. На этом этапе веб-сайт все еще не виден пользователю.
  • После загрузки JavaScript контент динамически генерируется в браузере клиента.
  • Веб-контент становится видимым по мере того, как клиент перемещается по сайту и взаимодействует с ним.

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

Рендеринг на стороне сервера — наиболее распространенный метод отображения информации на экране.

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

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

Вот как поэтапно происходит процесс SSR:

  • Пользователь вводит в адресную строку URL-адрес, который он хочет посетить.
  • Сервер отправляет браузеру готовый к отображению HTML-ответ.
  • Браузер отображает страницу (теперь доступную для просмотра) и загружает JavaScript.
  • Браузер выполняет React, делая страницу интерактивной.

В чем разница между рендерингом на стороне клиента и на стороне сервера?

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

ЧИТАТЬ  Учет роли человеческого фактора в утечке данных

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

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

Однако рендеринг на стороне клиента является более дешевым вариантом для владельцев веб-сайтов.

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

При использовании CSR на сервер отправляется меньше HTTP-запросов, в отличие от SSR, где каждая страница визуализируется с нуля, что приводит к более медленному переходу между страницами.

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

Недостатком CSR является более длительное время начальной загрузки. Это может повлиять на SEO; сканеры могут не дождаться загрузки контента и покинуть сайт.

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

Когда использовать рендеринг на стороне сервера

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

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

Когда использовать клиентский рендеринг

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

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

Что лучше: рендеринг на стороне сервера или на стороне клиента?

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

ЧИТАТЬ  WordPress 6.4. Сбой на сайтах при использовании популярного конструктора страниц

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

Как правило, CSR лучше подходит для динамических веб-сайтов, тогда как SSR лучше всего подходит для статических веб-сайтов.

Частота обновления контента

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

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

С другой стороны, CSR отлично подходит для обеспечения экономически эффективного рендеринга веб-приложений, его проще создавать и поддерживать; он лучше подходит для задержки первого ввода (FID).

Еще одним соображением в отношении КСО является то, что метатеги (описание, заголовок), канонические URL-адреса и теги Hreflang должны отображаться на стороне сервера или отображаться в первоначальном HTML-ответе, чтобы сканеры могли идентифицировать их как можно скорее, а не только отображаться в отображаемом HTML.

Соображения относительно платформы

Поддержание технологии CSR, как правило, обходится дороже, поскольку почасовая ставка для разработчиков, владеющих React.js или Node.js, обычно выше, чем для разработчиков PHP или WordPress.

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

Для тех, кто рассматривает вариант headless WordPress, например, с использованием Фронтитиважно отметить, что вам придется нанять как разработчиков React.js, так и разработчиков PHP.

Это связано с тем, что Headless WordPress использует React.js для фронтенда, но при этом требует PHP для бэкенда.

Важно помнить, что не все плагины WordPress совместимы с headless-настройками, что может ограничить функциональность или потребовать дополнительной индивидуальной разработки.

Функциональность и цель веб-сайта

Иногда вам не нужно выбирать между ними, поскольку доступны гибридные решения. И SSR, и CSR могут быть реализованы в рамках одного веб-сайта или веб-страницы.

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

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

Такие страницы, как учетные записи пользователей, не обязательно должны ранжироваться на страницах результатов поисковой системы (SERP), поэтому подход CRS может быть более эффективным с точки зрения UX.

Оба подхода — CSR и SSR — являются популярными подходами к рендерингу веб-сайтов. Вам и вашей команде необходимо принять это решение на начальном этапе разработки продукта.

Дополнительные ресурсы:

Главное изображение: ТипПатт/Шаттерсток



Source link