Вы когда-нибудь закрывали вкладку, не дождавшись загрузки страницы? Скорее всего, да. Так поступают и посетители вашего сайта. Исследования поведения пользователей раз за разом показывают одно и то же: с каждой лишней секундой ожидания всё больше людей уходят, так и не увидев содержимое страницы.
Скорость загрузки влияет на всё: на удобство, на конверсию, на позиции в поиске, на эффективность рекламы. При этом владелец сайта часто не замечает проблемы, потому что заходит на него с быстрого рабочего интернета, а страницы давно сохранены в кэше браузера. Разберёмся, как оценить скорость объективно и что можно сделать.
Почему скорость важна
Посетители уходят
Люди нетерпеливы, особенно на мобильных устройствах. Если страница не показала ничего полезного за пару секунд, многие возвращаются к результатам поиска и выбирают другой сайт.
Падает конверсия
Даже те, кто дождался загрузки, менее охотно совершают целевые действия на медленном сайте. Каждое ожидание при переходе между страницами, при добавлении в корзину или отправке формы — повод передумать.
Страдает поисковое продвижение
Поисковые системы учитывают скорость загрузки и удобство страниц при ранжировании. Медленный сайт при прочих равных проигрывает быстрым конкурентам.
Дорожает реклама
В контекстной рекламе вы платите за клик. Если посетитель кликнул, но ушёл, не дождавшись загрузки, деньги потрачены впустую.
Как измерить скорость
Для объективной оценки используют специальные инструменты, которые загружают страницу в контролируемых условиях и измеряют различные показатели. Популярные сервисы проверки скорости дают оценку по нескольким метрикам и список рекомендаций.
Основные показатели, на которые стоит смотреть:
- Время до отображения основного содержимого. Когда пользователь видит главный элемент страницы — заголовок, изображение, текстовый блок.
- Время до интерактивности. Когда страница начинает реагировать на действия пользователя.
- Стабильность макета. Не прыгают ли элементы во время загрузки. Всем знакома ситуация, когда собираешься нажать на ссылку, а она уезжает вниз из-за подгрузившейся картинки.
- Отклик на действия. Насколько быстро страница реагирует на нажатия.
Обязательно проверяйте мобильную версию — именно она обычно оказывается проблемной. Проверяйте не только главную, но и ключевые внутренние страницы: каталог, карточки товаров, страницы услуг.
Что замедляет сайт
Тяжёлые изображения
Самая частая причина. Фотографии загружаются в исходном размере прямо с камеры — по несколько мегабайт каждая — и браузер вынужден скачивать их целиком, чтобы показать маленькой картинкой. На одной странице таких изображений может быть десятки.
Лишние скрипты
Каждый подключённый сервис — счётчик аналитики, виджет чата, кнопки соцсетей, всплывающие окна, карты — добавляет свой код, который нужно загрузить и выполнить. По отдельности это немного, но вместе они могут заметно замедлить страницу.
Тяжёлые шрифты
Веб-шрифты загружаются отдельными файлами. Если подключено много начертаний и наборов символов, это добавляет сотни килобайт.
Медленный сервер
Дешёвый хостинг, перегруженный сервер, отсутствие кэширования на стороне сервера — всё это увеличивает время ответа ещё до начала загрузки самой страницы.
Неоптимальный код
Тяжёлые темы, перегруженные функциями, множество плагинов, неэффективные запросы к базе данных, отсутствие минификации файлов.
Видео и анимации
Фоновые видео на первом экране, сложные анимации, слайдеры с большим количеством изображений.
Как ускорить сайт
Расскажем о мерах примерно в порядке их эффективности для типичного сайта.
Оптимизация изображений
- Уменьшить изображения до реально необходимого размера.
- Сжать их с разумным качеством — разница на глаз обычно незаметна, а вес уменьшается в несколько раз.
- Использовать современные форматы, которые обеспечивают лучшее сжатие.
- Включить отложенную загрузку — изображения, которые находятся ниже первого экрана, загружаются только когда пользователь до них прокручивает.
- Отдавать разные размеры изображений для разных экранов.
Только эта мера часто ускоряет сайт в разы.
Сокращение скриптов
Проведите ревизию всех подключённых сервисов. Нужны ли они на самом деле? Используются ли? Часто на сайтах остаются виджеты и счётчики, о которых все давно забыли. Оставшиеся скрипты стоит загружать асинхронно, чтобы они не блокировали отображение страницы.
Кэширование
Кэширование позволяет не генерировать страницу заново при каждом запросе, а отдавать готовую копию. Браузерное кэширование позволяет посетителю при повторных визитах не скачивать заново файлы, которые не менялись.
Сжатие и минификация
Файлы стилей и скриптов можно минифицировать — удалить пробелы, комментарии и лишние символы. Сервер может сжимать передаваемые данные. Это уменьшает объём загрузки.
Оптимизация шрифтов
Подключайте только нужные начертания и наборы символов. Используйте настройку, при которой текст сначала показывается системным шрифтом, а затем заменяется веб-шрифтом, — так содержимое видно сразу.
Улучшение хостинга
Если сервер отвечает медленно, никакая оптимизация страницы не поможет. Иногда переход на более качественный хостинг или тариф даёт заметный прирост.
Сеть доставки контента
Для сайтов с посетителями из разных регионов можно использовать сеть доставки контента — статичные файлы будут загружаться с ближайшего к посетителю сервера.
Скорость при разработке
Гораздо проще сделать сайт быстрым изначально, чем ускорять готовый. При разработке мы придерживаемся нескольких принципов:
- не подключаем библиотеки ради одной функции, которую можно реализовать в несколько строк;
- оптимизируем изображения ещё на этапе загрузки в админку;
- используем минимум внешних шрифтов;
- проектируем первый экран так, чтобы он отображался как можно быстрее;
- проверяем скорость на каждом этапе, а не только перед запуском.
Скорость со временем
Даже быстрый при запуске сайт может замедлиться. Контент-менеджеры загружают тяжёлые фотографии, маркетологи подключают новые сервисы, база данных разрастается. Поэтому скорость стоит периодически проверять — например, раз в квартал — и при необходимости проводить оптимизацию.
Хорошей практикой является настройка автоматического сжатия загружаемых изображений и регламент на подключение новых скриптов: прежде чем добавить сервис, оцените его влияние на скорость.
Быстрый сайт — это проявление уважения к времени посетителя.
Скорость и мобильный интернет
Помните, что значительная часть посетителей открывает сайт не на офисном интернете, а на ходу, в транспорте, в местах со слабым сигналом. Проверяйте сайт в режиме имитации медленного соединения — это наглядно показывает, как долго человек смотрит на пустой экран.
Итог
Скорость загрузки напрямую влияет на то, сколько посетителей станут клиентами. Основные причины медленной работы — тяжёлые изображения, лишние скрипты, неоптимальный код и слабый хостинг. Большинство проблем решается относительно простыми мерами, а начинать стоит с оптимизации изображений.
Мы проводим аудит скорости и оптимизацию сайтов на любых платформах. Пришлите ссылку на свой сайт — проверим его и расскажем, что можно улучшить и какой эффект это даст.