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

Нажав кнопку "Принять и продолжить", вы соглашаетесь с Политики конфиденциальности

Принять и продолжить

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

Отменить
2686 1
How-to Читать 7 минут 18 апреля 2019

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

Как ускорить загрузку 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
Аудит всего сайта или отдельной страницы в один клик. Полный список ошибок, отсортированный по критичности, пути их устранения и рекомендации. Любая периодичность проверки и автоматическая рассылка отчетов на почту.
Запустить аудит сайта

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

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

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

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

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

Поделитесь статьей с вашими друзьями

Войти Регистрация

Вы исчерпали лимит запросов.

Или email
Забыли пароль?
Или email
Back To Login

Не волнуйтесь! Напишите свой электронный адрес и мы пришлем вам новый пароль.

Вы уверены?

Awesome!

To complete your registration you need to enter your phone number

Назад

Мы отправили код подтверждения на ваш номер телефона

Your phone Resend code Осталось запросов

Что-то пошло не так.

Свяжитесь с нашей службой поддержки
Или подтвердите регистрацию с помощью Телеграм бота Перейдите по этой ссылке
Выберите один из проектов

Знакомство с сервисом

Ознакомьтесь с основными возможностями Serpstat удобным способом!

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

Имя

Email

Телефон

Будем рады вашему комментарию
Увеличить лимиты

Улучшить тариф

Экспорт недоступен для вашего тарифного плана. Вам необходимо улучшить свой тариф до Lite или выше, чтобы получить доступ к инструменту Подробнее

Зарегистрироваться

Спасибо, мы с вами свяжемся в ближайшее время

Пригласить
Просмотр Редактирование

E-mail
Сообщение
необязательно
E-mail
Сообщение
необязательно

У вас закончились лимиты

Вы достигли лимита на количество созданных проектов и больше не можете создавать новые проекты. Увеличьте лимиты или удалите существующие проекты.

Я хочу больше лимитов