Как ускорить загрузку верхней части страницы сайта
АУДИТ САЙТА — СКОРОСТЬ ЗАГРУЗКИ
Чтобы ускорить загрузку страниц, необходимо модифицировать код, оставив в начале только самые важные для функционирования компоненты, добавленные непосредственно в HTML-разметку. Загрузку JS-скриптов и прочих медленных элементов нужно отложить.
Каким должен быть header для сайта
Быстрая загрузка сайта положительно влияет на ранжирование, поведенческие факторы и конверсию. Согласно статистическим данным Google Analytics, большинство пользователей покидают сайт, если скорость его загрузки превышает 3 секунды.
Однако мобильные страницы по состоянию на 2018 год грузятся, в среднем, 15 секунд. По этой причине большинство сайтов теряют клиентов из-за слишком медленной загрузки мобильной версии.
Именно поэтому так важно, чтобы весь контент, расположенный на первом экране, — области, которую видит пользователь без скролла вниз, — быстро загружался. Хедер сайта попадает в эту область, соответственно, его необходимо составлять так, чтобы это не замедляло загрузку страниц.
Для коммерческих проектов в хедер сайта обычно добавляют следующую информацию:
Однако мобильные страницы по состоянию на 2018 год грузятся, в среднем, 15 секунд. По этой причине большинство сайтов теряют клиентов из-за слишком медленной загрузки мобильной версии.
Именно поэтому так важно, чтобы весь контент, расположенный на первом экране, — области, которую видит пользователь без скролла вниз, — быстро загружался. Хедер сайта попадает в эту область, соответственно, его необходимо составлять так, чтобы это не замедляло загрузку страниц.
Для коммерческих проектов в хедер сайта обычно добавляют следующую информацию:
- основное меню;
- логотип и рекламный слоган компании;
- контакты — обязательно телефоны, можно также указать e-mail, мессенджеры, группы в соцсетях;
- режим работы;
- тематическое изображение либо рекламный баннер — необходимо учитывать формат и размер картинки, чтобы она не замедлила скорость загрузки;
- ссылки на разделы с условиями доставки, оплаты, возврата и гарантийного обслуживания;
- ключевые конверсионные кнопки — заказ обратного звонка либо подписка на новости:
Как альтернативу данному варианту, можно использовать минималистичный дизайн, в котором header сайта состоит из небольшого количества элементов:
В следующем примере хедер перегружен множеством фотографий в рамках и большим количеством пунктов меню, еще сильнее ухудшает юзабилити затейливый шрифт:
Загрузка header сайта: способы ускорения
Модификация клиентской части кода позволяет существенно повысить скорость загрузки сайта. При оптимизации кода стоит обратить внимание на несколько моментов.
Загрузка JS-скриптов в последнюю очередь
На большинстве современных веб-страниц размещается много громоздких файлов с JavaScript-кодами, замедляющими загрузку. Пока все скрипты не загрузятся, экран пользователя остается пустым. Чтобы не происходило подобных задержек, используют асинхронную загрузку, при которой JS-скрипты запускаются последними.
Реализовать это можно с помощью специальной библиотеки extsrc.js, разработанной специалистами Google, чтобы обеспечить загрузку всех скриптов только после того, как страница загружена и показана пользователю. Сначала необходимо загрузить данный скрипт на свой сервер и подключить его в HTML-коде страницы. После этого добавить все скрипты в формате:
Реализовать это можно с помощью специальной библиотеки extsrc.js, разработанной специалистами Google, чтобы обеспечить загрузку всех скриптов только после того, как страница загружена и показана пользователю. Сначала необходимо загрузить данный скрипт на свой сервер и подключить его в HTML-коде страницы. После этого добавить все скрипты в формате:
<script extsrc="url/some-js-file.js"></script> То есть стандартный атрибут скрипта src заменяется на extsrc.
Для тех скриптов, в которых однозначно не используется метод document.write, можно использовать asyncsrc="url/some-js-file.js", чтобы еще больше ускорить загрузку.
Для тех скриптов, в которых однозначно не используется метод document.write, можно использовать asyncsrc="url/some-js-file.js", чтобы еще больше ускорить загрузку.
Перенос CSS-файлов
Лишние файлы CSS также лучше перенести в footer, а остальные — объединить в один файл и подключать в самом начале страницы в разделе <head>:
Удаление ненужных плагинов и сокращение кода
При создании сайта с помощью визуальных редакторов часто добавляются лишние строчки кода, которые необходимо удалять. Точно также нужно следить, чтобы не загружались лишние плагины, темы или расширения. Чтобы сократить код, можно использовать онлайн-инструменты, например, компрессор от Mailfit:
Оптимизация подключенных шрифтов
- Не нужно загружать большое количество шрифтов, а для каждого из них желательно ограничивать число доступных вариантов стиля;
- рекомендуется разделять шрифты на поднаборы;
- продуманная загрузка оптимизированного шрифта позволяет увеличить скорость обработки страницы. Чтобы ускорить отрисовку шрифта, можно использовать интерфейс сценариев Font Loading API, который позволяет изменять первоначальные настройки отложенной загрузки:
Учитывая, что шрифты редко меняются, их нужно кэшировать с максимально продолжительным периодом.
Какие изображения использовать в шапке сайта
Шапка сайта должна загружаться как можно быстрее, поэтому на ней нельзя размещать излишне тяжелые графические элементы. Там, где графику нельзя заменить текстом или CSS-эффектами, стоит использовать картинки в формате, который зависит от типа изображений — растровые или векторные.
Для растровых картинок без сильной детализации подойдет формат JPEG2000, который обеспечивает наилучшее качество изображений при компрессии. Если необходимо добавить картинку с большим количеством деталей либо прозрачным фоном, используют PNG. Для векторных изображений подходит формат SVG, который можно сжимать с помощью GZIP. Анимированные изображения сохраняются с расширением GIF.
Уменьшить размер изображения можно с помощью очистки от цифрового мусора — лишних метаданных, а также сжатия файла либо смены его формата. Сделать это можно в различных онлайн-инструментах, например, сервис от Google Squoosh.app:
Для растровых картинок без сильной детализации подойдет формат JPEG2000, который обеспечивает наилучшее качество изображений при компрессии. Если необходимо добавить картинку с большим количеством деталей либо прозрачным фоном, используют PNG. Для векторных изображений подходит формат SVG, который можно сжимать с помощью GZIP. Анимированные изображения сохраняются с расширением GIF.
Уменьшить размер изображения можно с помощью очистки от цифрового мусора — лишних метаданных, а также сжатия файла либо смены его формата. Сделать это можно в различных онлайн-инструментах, например, сервис от Google Squoosh.app:
Для изменения размера картинок не стоит использовать правила в CSS, так как масштабирование изображений замедляет скорость загрузки страницы. Лучше добавить на сервер изображение в нескольких вариантах размеров, которые позволят адаптировать страницу под устройства с различными разрешениями экранов.
Плагины для ускорения загрузки ресурса
Для различных CMS есть свои плагины и расширения, которые позволяют ускорить загрузку страниц в автоматическом режиме.
Как проверить скорость загрузки сайта
Сервис позволяет не только узнать скорость, но и получить отчет с рекомендациями, позволяющими ускорить загрузку сайта на мобильных устройствах:
Для анализа скорости загрузки сайта и на мобильных устройствах, и на компьютерах используют другой популярный онлайн-сервис от Google — PageSpeed Insights. Данный инструмент также дает детальные рекомендации по ускорению работы ресурса:
Заключение
1
Медленная загрузка сайта приводит к уходу пользователей после нескольких секунд отображения пустого экрана. Поэтому загрузка верхней части страницы должна осуществляться как можно быстрее.
2
Для ускорения загрузки необходимо минимизировать код, переместить загрузку CSS-стилей в начало раздела заголовков, а JS-скрипты загружать в последнюю очередь.
3
Для быстрой загрузки первого экрана сайта важно использовать в этой области сжатые изображения подходящего размера и формата, не масштабируя их с помощью правил CSS.
4
Подключение большого количества шрифтов может существенно замедлять загрузку страницы, поэтому их необходимо использовать в ограниченном количестве, следуя рекомендациям специалистов.
5
Для оперативного ускорения страниц удобно устанавливать специальные модули и плагины, разработанные для всех популярных CMS.
6
Чтобы проверить скорость загрузки и получить индивидуальные рекомендации по ее увеличению, используйте онлайн-инструменты Google.
Эта статья — часть модуля «Аудит сайта» в Serpstat
" title = "Как ускорить загрузку верхней части страницы сайта 16261788260640" /> Аудит всего сайта или отдельной страницы в один клик. Полный список ошибок, отсортированный по критичности, пути их устранения и рекомендации. Любая периодичность проверки и автоматическая рассылка отчетов на почту.
| Запустить аудит сайта |
Serpstat — набор инструментов для поискового маркетинга!
Находите ключевые фразы и площадки для обратных ссылок, анализируйте SEO-стратегии конкурентов, ежедневно отслеживайте позиции в выдаче, исправляйте SEO-ошибки и управляйте SEO-командами.
Набор инструментов для экономии времени на выполнение SEO-задач.
Нашли ошибку? Выделите её и нажмите Ctrl + Enter, чтобы сообщить нам.
Используйте лучшие SEO инструменты
Подбор ключевых слов
Поиск ключевых слов – раскройте неиспользованный потенциал вашего сайта
Возможности Serpstat
Возможности Serpstat – комплексное решение для эффективного продвижения вебсайтов
Кластеризация ключевых слов
Кластеризация ключевых слов автоматически обработает до 50 000 запросов в несколько кликов
SEO аудит страницы
Проанализируйте уровень оптимизации документа используя SЕО аудит страницы
Кейсы, лайфхаки, исследования и полезные статьи
Не успеваешь следить за новостями? Не беда! Наш любимый редактор подберет материалы, которые точно помогут в работе. Только полезные статьи, реальные кейсы и новости Serpstat раз в неделю. Присоединяйся к уютному комьюнити :)
Нажимая кнопку, ты соглашаешься с нашей политикой конфиденциальности.