Мы используем файлы cookie для обеспечения работоспособности сервиса, улучшения навигации и маркетинговых активностей Serpstat. Нажимая "Принять и продолжить", вы соглашаетесь с нашей Политика конфиденциальности

Сообщить об ошибке

Отменить
9569 1
How-to Читать 7 минут

Как ускорить загрузку верхней части страницы сайта

Как ускорить загрузку header на сайте
АУДИТ САЙТА — СКОРОСТЬ ЗАГРУЗКИ
Инструкцию одобрил
SEO-специалист в Luxeo
Чтобы ускорить загрузку страниц, необходимо модифицировать код, оставив в начале только самые важные для функционирования компоненты, добавленные непосредственно в HTML-разметку. Загрузку JS-скриптов и прочих медленных элементов нужно отложить.

Каким должен быть header для сайта

Быстрая загрузка сайта положительно влияет на ранжирование, поведенческие факторы и конверсию. Согласно статистическим данным Google Analytics, большинство пользователей покидают сайт, если скорость его загрузки превышает 3 секунды.

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

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

Для коммерческих проектов в хедер сайта обычно добавляют следующую информацию:

  • основное меню;
  • логотип и рекламный слоган компании;
  • контакты — обязательно телефоны, можно также указать e-mail, мессенджеры, группы в соцсетях;
  • режим работы;
  • тематическое изображение либо рекламный баннер — необходимо учитывать формат и размер картинки, чтобы она не замедлила скорость загрузки;
  • ссылки на разделы с условиями доставки, оплаты, возврата и гарантийного обслуживания;
  • ключевые конверсионные кнопки — заказ обратного звонка либо подписка на новости:
Меню в хедере сайта
Как альтернативу данному варианту, можно использовать минималистичный дизайн, в котором header сайта состоит из небольшого количества элементов:
Минималистический header сайта
В следующем примере хедер перегружен множеством фотографий в рамках и большим количеством пунктов меню, еще сильнее ухудшает юзабилити затейливый шрифт:
Перегруженная шапка сайта

Загрузка header сайта: способы ускорения

Модификация клиентской части кода позволяет существенно повысить скорость загрузки сайта. При оптимизации кода стоит обратить внимание на несколько моментов.

Загрузка JS-скриптов в последнюю очередь

На большинстве современных веб-страниц размещается много громоздких файлов с JavaScript-кодами, замедляющими загрузку. Пока все скрипты не загрузятся, экран пользователя остается пустым. Чтобы не происходило подобных задержек, используют асинхронную загрузку, при которой JS-скрипты запускаются последними.

Реализовать это можно с помощью специальной библиотеки extsrc.js, разработанной специалистами Google, чтобы обеспечить загрузку всех скриптов только после того, как страница загружена и показана пользователю. Сначала необходимо загрузить данный скрипт на свой сервер и подключить его в HTML-коде страницы. После этого добавить все скрипты в формате:
<script extsrc="url/some-js-file.js"></script>
То есть стандартный атрибут скрипта src заменяется на extsrc.

Для тех скриптов, в которых однозначно не используется метод document.write, можно использовать asyncsrc="url/some-js-file.js", чтобы еще больше ускорить загрузку.

Перенос CSS-файлов

Лишние файлы CSS также лучше перенести в footer, а остальные — объединить в один файл и подключать в самом начале страницы в разделе <head>:
Объединение и перенос СSS-файлов в начало страницы

Удаление ненужных плагинов и сокращение кода

При создании сайта с помощью визуальных редакторов часто добавляются лишние строчки кода, которые необходимо удалять. Точно также нужно следить, чтобы не загружались лишние плагины, темы или расширения. Чтобы сократить код, можно использовать онлайн-инструменты, например, компрессор от Mailfit:
Сжатие HTML, CSS, JS кода

Оптимизация подключенных шрифтов

  • Не нужно загружать большое количество шрифтов, а для каждого из них желательно ограничивать число доступных вариантов стиля;

  • рекомендуется разделять шрифты на поднаборы;

  • продуманная загрузка оптимизированного шрифта позволяет увеличить скорость обработки страницы. Чтобы ускорить отрисовку шрифта, можно использовать интерфейс сценариев Font Loading API, который позволяет изменять первоначальные настройки отложенной загрузки:
Отложенная загрузка шрифтов на сайте
Учитывая, что шрифты редко меняются, их нужно кэшировать с максимально продолжительным периодом.

Какие изображения использовать в шапке сайта

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

Для растровых картинок без сильной детализации подойдет формат JPEG2000, который обеспечивает наилучшее качество изображений при компрессии. Если необходимо добавить картинку с большим количеством деталей либо прозрачным фоном, используют PNG. Для векторных изображений подходит формат SVG, который можно сжимать с помощью GZIP. Анимированные изображения сохраняются с расширением GIF.

Уменьшить размер изображения можно с помощью очистки от цифрового мусора — лишних метаданных, а также сжатия файла либо смены его формата. Сделать это можно в различных онлайн-инструментах, например, сервис от Google Squoosh.app:
Сжатие картинок инструментом Google Squoosh.app
Для изменения размера картинок не стоит использовать правила в CSS, так как масштабирование изображений замедляет скорость загрузки страницы. Лучше добавить на сервер изображение в нескольких вариантах размеров, которые позволят адаптировать страницу под устройства с различными разрешениями экранов.
 

Плагины для ускорения загрузки ресурса

Для различных CMS есть свои плагины и расширения, которые позволяют ускорить загрузку страниц в автоматическом режиме.
1
Для сайтов на WordPress предназначен плагин Autoptimize:
Плагин Autoptimize для WordPress
2
Для сайтов на движке OpenCart можно использовать модуль, минимизирующий код и увеличивающий скорость загрузки по результатам теста Google Speed:
Минимизация JS, CSS, HTML для Opencart
3
Для ускорения сайтов на Joomla! подойдет расширение JCH Optimize:
Расширение JCH Optimize для Joomla
4
Ускорить сайт на CMS Drupal можно, включив в настройках встроенную CSS и JavaScript агрегацию, а также уменьшив размер изображений с помощью модуля Image Optimize:
Модуль Image Optimize для Drupal

Как проверить скорость загрузки сайта

Для проверки скорости загрузки мобильной версии сайта в определенной стране можно использовать сервис Google Test My Site:
Проверка скорости загрузки на мобильных Google Test My Site
Сервис позволяет не только узнать скорость, но и получить отчет с рекомендациями, позволяющими ускорить загрузку сайта на мобильных устройствах:
Отчет о скорости загрузки на мобильных Google Test My Site
Для анализа скорости загрузки сайта и на мобильных устройствах, и на компьютерах используют другой популярный онлайн-сервис от Google — PageSpeed Insights. Данный инструмент также дает детальные рекомендации по ускорению работы ресурса:
Анализ скорости загрузки сайта PageSpeed Insights

Заключение

1
Медленная загрузка сайта приводит к уходу пользователей после нескольких секунд отображения пустого экрана. Поэтому загрузка верхней части страницы должна осуществляться как можно быстрее.
2
Для ускорения загрузки необходимо минимизировать код, переместить загрузку CSS-стилей в начало раздела заголовков, а JS-скрипты загружать в последнюю очередь.
3
Для быстрой загрузки первого экрана сайта важно использовать в этой области сжатые изображения подходящего размера и формата, не масштабируя их с помощью правил CSS.
4
Подключение большого количества шрифтов может существенно замедлять загрузку страницы, поэтому их необходимо использовать в ограниченном количестве, следуя рекомендациям специалистов.
5
Для оперативного ускорения страниц удобно устанавливать специальные модули и плагины, разработанные для всех популярных CMS.
6
Чтобы проверить скорость загрузки и получить индивидуальные рекомендации по ее увеличению, используйте онлайн-инструменты Google.
Эта статья — часть модуля «Аудит сайта» в Serpstat
«Аудит сайта» в Serpstat" title = "Как ускорить загрузку верхней части страницы сайта 16261788260640" />
Аудит всего сайта или отдельной страницы в один клик. Полный список ошибок, отсортированный по критичности, пути их устранения и рекомендации. Любая периодичность проверки и автоматическая рассылка отчетов на почту.
Запустить аудит сайта

Сэкономьте время на изучении Serpstat

Хотите получить персональную демонстрацию сервиса, тестовый период или эффективные кейсы использования Serpstat?

Оставьте заявку и мы свяжемся с вами ;)

Оцените статью по 5-бальной шкале

4.2 из 5 на основе 5 оценок
Нашли ошибку? Выделите её и нажмите Ctrl + Enter, чтобы сообщить нам.