Как улучшить скорость загрузки страниц и увеличить конверсию сайта? Советы маркетологам
Правда ли, что скорость загрузки сайта важна?
Уверены, что большинство слышали страшные истории о том, что если сайт загружается более 5 (или 3, или 2,5) секунд, то пользователь не будет ждать и убежит к конкуренту. Часто такие случаи основаны на "слухах" и "кажется, где-то читал". Мы решили разобраться в этом вопросе и заодно рассказать, как улучшить скорость загрузки страниц и тем самым увеличить конверсию сайта.
Итак, на эту тему проводилось множество исследований, и вот некоторые из них:
1. Google Research: исследование, проведенное Google, показало, что с каждой дополнительной секундой задержки уровень отказов возрастает. Если сайт загружается дольше трех секунд, 53% пользователей покинут его.
2. Amazon: в рамках своих исследований Amazon обнаружил, что каждая десятая доли секунды задержки при загрузке их страницы приводила к 1% снижению продаж.
3. В Walmart было проведено исследование, которое показало, что улучшение времени загрузки сайта на 1 секунду приводило к увеличению конверсии на 2%.
4. Компания Akamai Technologies провела исследование, которое показало, что 47% пользователей ожидают, что веб-страницы загрузятся менее чем за 2 секунды. Если загрузка занимает более 3 секунд, вероятность, что пользователь уйдет, увеличивается на 40%.
5. Компания Kissmetrics провела исследование и обнаружила, что 79% пользователей, которые столкнулись с проблемами загрузки сайта, больше не будут покупать на этом сайте, а 44% из них расскажут о своем негативном опыте своим друзьям.
Влияние скорости загрузки сайта на конверсию
Исследование Unbounce показало, что маркетологи совершают 2 главные ошибки:
- Не уделяют этому вопросу должного внимания, потому что скорость сайта находится в “серой зоне” между техническим SEO и контентом. Разработчики, дизайнеры, контент-менеджеры и администраторы, часто перекладывают ответственность друг на друга, что затягивает процесс решения проблемы.
- Маркетологи рассматривают увеличение скорости загрузки как одноразовую процедуру. Они не учитывают постоянное развитие и улучшение механизма сайта, например, загрузку все более крупных несжатых изображений, добавление функций с медленным JavaScript или интеграцию видеороликов и анимации в контент.
Если скорость загрузки ваших страниц низкая, это может привести к потере значительной части вашей потенциальной аудитории и уменьшению количества конверсий.
Скорость загрузки является критически важным показателем для пользователей платных рекламных систем (например, Яндекс.Директ), особенно когда бюджет рекламы расходуется на клики и переходы на сайт. Если страница загружается слишком медленно, пользователи могут моментально покинуть сайт. В результате, оплата за клик будет снята, но в статистике это будет отображаться как "отказ". Увеличение числа отказов может привести к снижению рейтинга сайта в поисковой выдаче, а также уменьшению количества показов рекламы на площадках.
Что делать, если скорость низкая?
Каждая загрузка веб-страницы представляет собой процесс обмена данных между сервером и браузером. Сервер получает запрос и отправляет соответствующие фрагменты данных с хостинга, а браузер отображает полученные данные на экране пользователя. Эффективность этого процесса зависит от размера файлов, количества запросов, уровня нагрузки и других факторов.
Поэтому, оптимизацию можно разделить на три основных аспекта:
Оптимизация изображений
Стоит упомянуть, что существует большое количество сервисов для сжатия изображений онлайн. Одно из главных преимуществ заключается в том, что это можно легко сделать без необходимости устанавливать дополнительное программное обеспечение на свой компьютер. Вот некоторые из них:
1. Kraken.io
2. Tinypng.com
7. Imagify.io
Для достижения оптимальной производительности важно использовать изображения с тем разрешением, которое требуется на конкретной странице.
Встречаются ситуации, когда используются изображения с высоким разрешением (например, 1600x1200px), хотя на странице отображается только уменьшенная версия (например, 350x250px). Чтобы избежать таких проблем, рекомендуется использовать только те разрешения изображений, которые необходимы для конкретной ситуации.
Рекомендуем объединить все иконки в одно изображение, также известное как спрайт.
Спрайт - это изображение, содержащее несколько маленьких графических элементов, таких как иконки, кнопки или другие малые изображения. Вместо того, чтобы загружать каждый элемент отдельно, спрайт позволяет объединить их все в одно изображение.
Обычно спрайты используются для уменьшения количества запросов к серверу при загрузке веб-страницы. Вместо того, чтобы загружать каждое изображение отдельно, браузер загружает только одно спрайт-изображение, и затем использует CSS-свойства, такие как background-position, чтобы отобразить нужную часть спрайта для каждого элемента.
Если иконки представлены в формате SVG, то их можно объединить в SVG-спрайт. Существуют онлайн-инструменты, такие как css.spritegen.com и iconizr, которые позволяют создавать спрайты. Кроме того, существуют специальные решения для сборщиков, такие как gulp-svg-sprites для Gulp, grunt-svg-sprite для Grunt и Webpack SVG sprite loader для Webpack.
Ленивая загрузка (lazy loading) позволяет отложить загрузку изображений, видео, скриптов или других ресурсов, до тех пор, пока они не понадобятся пользователю или не станут видимы на экране.
Основная идея ленивой загрузки заключается в том, чтобы загружать только те ресурсы, которые действительно нужны пользователю в данный момент, а остальные загружать по мере необходимости. Это позволяет сократить время загрузки страницы и улучшить ее производительность, особенно при наличии большого количества контента или медиа-элементов.
Для реализации ленивой загрузки можно использовать различные подходы и библиотеки. Например, можно использовать атрибуты HTML, такие как "lazy" или "loading", чтобы указать, что ресурс должен быть загружен лениво. Также существуют специальные скрипты и плагины, которые автоматически обнаруживают элементы на странице и загружают их при необходимости.
Уменьшите количество запросов
- Когда веб-сервер отправляет файлы браузеру, он может использовать GZIP для сжатия этих файлов перед отправкой. Браузер получает сжатые файлы и затем распаковывает их, чтобы отобразить содержимое пользователю. Поскольку сжатие уменьшает размер файлов, передача данных становится быстрее, что приводит к улучшению производительности сайта.
Чтобы включить GZIP-сжатие на вашем веб-сервере, вам понадобится доступ к его конфигурационным файлам. Процедура настройки может немного отличаться в зависимости от используемого серверного программного обеспечения, но общие шаги включения GZIP-сжатия примерно следующие:
1. Войдите на сервер и найдите конфигурационный файл сервера. Для сервера Apache это файл .htaccess или конфигурационный файл httpd.conf. Для сервера Nginx - файл nginx.conf или sites-enabled/default.
2. Откройте найденный файл в текстовом редакторе и найдите секцию, связанную с настройками сжатия или модулем GZIP.
3. Если такой секции нет, добавьте следующие строки кода:
Для Apache (в файл .htaccess или httpd.conf):
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript application/javascript
</IfModule>
Для Nginx (в файл nginx.conf или sites-enabled/default):
gzip on;
gzip_types text/html text/plain text/xml text/css text/javascript application/javascript;
4. Сохраните изменения и перезапустите веб-сервер, чтобы применить новые настройки.
После этого сервер будет автоматически сжимать поддерживаемые типы файлов перед отправкой клиенту. Браузер получит сжатые файлы и автоматически распакует их для отображения пользователю.
Важно отметить, что для использования GZIP-сжатия ваш веб-сервер должен поддерживать соответствующий модуль или настройку. Если вы не имеете доступа к конфигурационным файлам сервера, вам может потребоваться обратиться к администратору хостинга или провайдеру услуг для выполнения этих настроек.
- Создайте единый файл CSS, объединив все отдельные файлы. Вы можете использовать специальные плагины, которые предназначены для этой задачи в разных инструментах сборки. Например, для Gulp есть плагин gulp-concat-css, для Grunt - grunt-concat-css, для Webpack - css-concat-loader.
- Советуем объединить все JavaScript файлы в один, если это возможно. Для этого вы можете использовать специальные плагины или инструменты в зависимости от выбранного сборщика. Например, для Gulp можно использовать плагин gulp-concat-js, для Grunt - grunt-contrib-concat, а для Webpack - webpack-uglify-js-plugin.
Оптимизация CSS и JS
1. Сжимайте все CSS файлы. Для этого есть онлайн решения: CSS Compressor, CSS Minifier. Можно использовать плагины для сборщиков: Gulp — gulp-clean-css; Grunt — grunt-contrib-cssmin; Webpack — clean-css-loader.
2. Сжимайте все JS файлы. Используйте сервисы онлайн: JavaScript Compression Tool, JS Minifier. Плагины для сборщиков: Gulp — gulp-uglify; Grunt — grunt-contrib-compress; Webpack.
3. Удалите из адресов файлов JS и CSS строки, которые содержат информацию о версиях скриптов и других параметрах. Обычно эти параметры добавляются к адресу после знака вопроса (?v=1.0.1). Удаление этих параметров позволит упростить адреса файлов, сделать их более читаемыми и легкими для обработки.
Выводы:
Главным способом улучшения скорости загрузки остается сжатие файлов. В большинстве случаев, хостинги и серверы выполняют эту задачу автоматически, поэтому рекомендуется сначала проверить настройки. Более того, лучше всего оптимизировать контент на ранних этапах, а не в момент, когда пользователь посещает сайт.
Исследуйте и выберите надежного хостинг-провайдера с хорошей производительностью сервера и быстрой скоростью ответа. Плохой хостинг может замедлить загрузку вашего сайта.
Регулярно проводите тестирование скорости загрузки вашего сайта с помощью инструментов, таких как Google PageSpeed Insights или GTmetrix. Это поможет выявить слабые места и принять меры по их устранению.
Простой и минималистичный дизайн сайта может ускорить его загрузку. Избегайте избыточного использования сложных анимаций, изображений или видео, которые могут замедлить загрузку.
Необходимо также помнить о важности обновления PHP, если движок сайта его поддерживает. PHP является связующим элементом между сервером и системой управления контентом (CMS). Обновленные версии PHP на хостинге обычно значительно улучшают скорость загрузки. Более того, каждый новый релиз включает новые функции и возможности, а также исправляет уязвимости.
Обеспечьте свой сайт адаптивным дизайном, который будет хорошо загружаться и отображаться на мобильных устройствах. Оптимизируйте скорость загрузки для мобильных устройств, чтобы удовлетворить потребности мобильных пользователей.
Основное требование к оптимизации состоит в том, чтобы она не наносила вреда полноценной функциональности сайта. Нельзя исключать полезные сервисы, такие как веб-аналитика или онлайн-чат. Важно помнить, что конечная цель любых изменений, направленных на оптимизацию кода, заключается в улучшении пользовательского опыта.
Реализация этих советов поможет ускорить загрузку страниц вашего сайта, улучшить пользовательский опыт и повысить конверсию.
***
Заметили проблемы со скоростью загрузки страниц? Обращайтесь к нам! Мы устраним причины падения трафика, ухода посетителей и низких позиций в выдаче.
Подписывайтесь на наш Телеграм: t.me/alteraagency — в нем мы оперативно делимся новыми кейсами и полезным контентом по маркетингу и поисковой оптимизации.
```3. Удалите из адресов файлов JS и CSS строки, которые содержат информацию о версиях скриптов и других параметрах. Обычно эти параметры добавляются к адресу после знака вопроса (?v=1.0.1). Удаление этих параметров позволит упростить адреса файлов, сделать их более читаемыми и легкими для обработки.```
Тут я больше не согласен, так как удаление версии на проекте который в постоянной доработке (не говорим о каком-то динамическом обновлении названий) приведёт к тому, что большая часть клиентов, которые до этого заходили на сайт, просто получат старую версию стилей или скриптов которая закэширована у них в браузере. То есть, новых правок они не увидят, без обновления с кэшем...
Согласны с замечанием. В такой ситуации (если сайт дорабатывается) нужно сразу выполнять шаг "Создайте единый файл CSS, объединив все отдельные файлы ". Процесс создания единого файла можно автоматизировать для CMS с помощью какого-либо плагина. Тогда при каждом открытии сайта будет формироваться уникальное название для единого CSS-файла и посетитель будет получать актуальные обновления стилей.
Разве обычный контент-менеджер сможет такой код сам прописать? А что, если он сайт потом положит?
Как правило, на виртуальных хостингах такая настройка уже по умолчанию выставлена у большинства хостинг-провайдеров, а если у вас VDS, то для настройки можно обратиться к саппорту хостинг-провайдера, обычно они выполняют такие настройки.
Как часто надо проводить работы по оптимизации скорости? Раз в месяц достаточно?
Такие работы у нас входят и в техническую поддержку, и в SEO-продвижение, мы занимаемся проблемой скорости сайта на ежемесячной основе, выделяя на это порядка несколько часов. Рекомендуем всем придерживаться такого графика.
Тему оптимизации изображений задели, но почему нет ничего про современные форматы графики WebP и AVIF которые гугл активно рекомендует использовать на сайтах?