Почему это важно
На слабом канале или при ограничениях мобильной сети тяжёлая страница не откроется, а внешний скрипт может «повесить» всю страницу. Для сайта с заявками это прямая потеря клиентов. Человек в автобусе или за городом не будет ждать полминуты, он нажмёт «назад» и откроет следующий результат.
Есть и вторая сторона. Скорость влияет на поиск: страницы, которые быстро открываются, лучше ведут себя у пользователей, а значит, и в выдаче. Так что лёгкий сайт выигрывает дважды.
Сколько должна весить страница
Простой ориентир: страница заявки или главная услуги не должна превышать одного-двух мегабайт вместе со всеми картинками. На быстром домашнем интернете такую разницу не заметить, на нестабильном мобильном она решающая. Измерить вес легко: откройте вкладку Network в браузере, обновите страницу и посмотрите итоговую цифру внизу.
Типичная картина на сайтах малого бизнеса: главная весит восемь-двенадцать мегабайт, из них восемь занимают три фотографии в оригинальном размере. Исправляется это за час, и сайт становится вдвое быстрее без изменения внешнего вида.
Что уменьшить
- Картинки. Современные форматы, нужные размеры, ленивая загрузка за пределами первого экрана.
- Шрифты. Одно-два начертания со своего сервера, а не из зарубежных сервисов.
- Скрипты. Убрать виджеты, которые не приносят заявок. Остальные грузить после основного содержимого.
- Анимации. Тяжёлые эффекты оправданы не везде. Подробнее — в статье о скорости и PageSpeed.
Картинки: где обычно теряются мегабайты
Фотография с современного телефона весит несколько мегабайт, а на сайте показывается в блоке шириной 400 пикселей. Браузеру приходится скачать весь файл и сжать его на лету. Поэтому каждое изображение нужно подготовить заранее: уменьшить до реального размера, сохранить в формате WebP или AVIF и добавить второй вариант для крупных экранов.
Для картинок ниже первого экрана включайте ленивую загрузку: браузер не будет качать их, пока человек не прокрутит страницу. Для главного изображения, наоборот, указывайте высокий приоритет, чтобы оно загружалось первым.
Что оставить работающим без внешних сервисов
- Форма заявки отправляется на ваш сервер.
- Телефон дан обычной ссылкой, которая работает без скриптов.
- Адрес и режим работы написаны текстом, а не картинкой или картой.
- Основные стили и шрифты лежат на вашем сервере.
Идея в том, чтобы сайт выполнял главную задачу даже в урезанном виде. Пусть не загрузится карта или чат, зато телефон, адрес и форма останутся. Клиент получит нужное и позвонит.
Как проверить
- Откройте страницу на телефоне в режиме медленной сети.
- Посмотрите, что видно за первые три секунды.
- Проверьте, не зависит ли содержимое от зарубежных адресов.
- Попробуйте оставить заявку при выключенном Wi-Fi и слабом сигнале.
В инструментах разработчика Chrome есть режим имитации медленной сети: вкладка Network, выпадающий список «No throttling», пункт «Slow 4G» или «Fast 3G». Включите его и обновите страницу. Вы увидите ровно то, что видит клиент в метро.
Скорость помогает и в поиске: страницы, которые быстро открываются, лучше ведут себя у пользователей.
Если хотите, чтобы мы проверили вес и зависимости вашего сайта, напишите нам: покажем, что можно убрать без потери внешнего вида.