К основному контенту

Оптимизация кода видимого содержимого

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

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

Чтобы страница загружалась быстрее, ограничьте объем данных, которые должны отображаться в ее верхней части (код HTML, изображения, CSS, JavaScript). Это можно сделать несколькими способами:
  • измените структуру HTML таким образом, чтобы сначала загружался важный контент, располагающийся в верхней части страницы
  • уменьшите объем данных, которые используются вашими ресурсами
Измените структуру страницы так, чтобы в первоначальном ответе сервера содержалась информация для отображения верхней, видимой части страницы. Остальное можно загрузить позже. Возможно, вам придется разделить код CSS на две части: встроенная часть, отвечающая за стили в верхней части страницы, и часть, загрузку которой можно отложить. Подробнее об этом можно прочитать в разделе - "оптимизация CSS".

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

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

Минификация

После того как сайт был оптимизирован, чтобы работать с различными устройствами и загружать важный контент в первую очередь, уменьшите количество данных, необходимых для отображения страницы:
  • Уменьшите объем ресурсов. Объем HTML, CSS и JavaScript можно снизить, удалив ненужные пробелы и комментарии. Для дальнейшей оптимизации можно использовать инструменты, изменяющие названия переменных.
  • При возможности используйте CSS вместо изображений.
  • Включите сжатие.

Дополнительные материалы:

Комментарии