Структура кода веб-страницы

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

Скорость загрузки сайта

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

В данном контексте под структурой кода подразумевается последовательность данных в HTML-коде страницы сайта, которая непосредственным образом влияет на скорость её загрузки:

<html>
	<head>
		<!-- Данные -->
	</head>
	<body>
		<!-- Данные -->
	</body>
</html>

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

Неэффективная структура кода веб-страницы

Все CMS по умолчанию генерируют веб-страницы со стандартной, но неэффективной с точки зрения оптимизации скорости загрузки структурой HTML-кода, когда все внешние CSS- и JS-файлы подключаются в блоке head:

<head>
	<title>...</title>	
	<link rel="stylesheet" href="/file-1.css" />
	<link rel="stylesheet" href="/file-2.css" />
	<script src="/file-1.js"></script>
	<script src="/file-2.js"></script>
	<script src="/file-3.js"></script>
</head>
Подключение файлов в блоке HEAD
Подключение файлов в блоке HEAD

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

Схема стандартной структуры кода
Схема стандартной структуры кода

Сервис PageSpeed Insights для любой страницы с подключенными в head внешними JS- и CSS-файлами рекомендует их удалить, т. к. они блокируют отображение страницы. В случае, если объём HTML-кода в блоке head слишком велик, то сервис также обращает на это внимание, рекомендуя оптимизировать загрузку видимого контента.

Эффективная структура кода веб-страницы

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

Схема оптимизированной структуры кода
Схема оптимизированной структуры кода

Оптимизация загрузки JS-файлов веб-страницы

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

Google Developers

Для оптимизации загрузки и выполнения JS-файлов потребуется:

  1. Перенести теги script из head в конец body.

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

  2. Обеспечить асинхронную загрузку JS-файлов.

    Это реализуется с помощью атрибутов async или defer в теге script.

Оптимизация загрузки CSS-файлов веб-страницы

Браузеры запрашивают внешние файлы CSS перед отображением контента на экране. Это приводит к задержке и замедляет обработку страницы.

Google Developers

Именно поэтому перенос тегов link rel="stylesheet" из блока head не отложит загрузку CSS-файлов, в отличие от JS-файлов.

Для оптимизации загрузки и выполнения внешних CSS-файлов потребуется:

  1. Разместить в блоке head в теге style внутренние CSS-правила для HTML-элементов, формирующих верхнюю видимую часть страницы

  2. Обеспечить асинхронную загрузку CSS-файлов.

    Это реализуется различными способами посредством JavaScript.

  3. Обернуть все размещенные в блоке head теги link rel="stylesheet" в тег noscript.

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

Оптимизация HTML-кода в верхней части страницы

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

Google Developers

Рекомендация «Уменьшите объем контента в верхней части страницы» актуальна для веб-страниц, в блоке head которых размещен большой объём данных, задерживающий отображение страницы в браузере. Например, правило сработает, если все стили из внешних CSS-файлов разместить в теге style внутри блока head, и если их объём будет слишком велик.

Кроме того, Google рекомендует размещать основной контент сайта как можно ближе к открывающему тегу body:

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

Google Developers

Как изменить структуру кода сайта на CMS?

Для этой цели применяются различные сторонние расширения.

Обеспечить правильную структуру для сайтов на Joomla, WordPress, Magento и Drupal можно с помощью плагина JCH Optimize.

Плагин JCH Optimize (бесплатная версия) может:

  • объединить все внешние CSS- и JS-файлы для каждой страницы сайта в один файл,
  • выбирать место размещения объединённых файлов в коде,
  • обеспечить отложенную загрузку объединённого JS-файла.

Плагин JCH Optimize Pro (платная версия) дополнительно может:

  • включить встроенные (inline) CSS-правила и JS-скрипты в объединённые файлы;
  • извлечь CSS-правила для элементов, формирующих верхнюю часть страницы, и поместить их в тег style внутри блока head для быстрой отрисовки видимой части страницы;
  • обеспечить асинхронную загрузку CSS-файла с помощью JavaScript, разместив скрипт перед закрывающим тегом body;
  • разместить ссылку на объединённый CSS-файл в теге noscript на случай, если браузер не обрабатывает JS.

Выводы и заключение

  • структура HTML-кода веб-страницы определяет время её отображения в браузере;
  • CSS- и JS-ресурсы, подключенные в блоке head, задерживают отображение страницы;
  • для повышения эффективности структуры HTML-кода:
    • внешние JS-ресурсы в тегах script желательно размещать перед закрывающим тегом body;
    • нужно обеспечить асинхронную загрузку CSS- и JS-ресурсов;
    • часть CSS-свойств, отвечающих за отрисовку видимой части страницы, рекомендуется размещать в теге style внутри блока head.
  • эффективная структура кода страниц сайтов, функционирующих на CMS, реализуется сторонними расширениями.

Ссылки

Автор:
Оцените материал:
3.7/5

Добавить комментарий