На рабочем компьютере с быстрым интернетом сайт открывается мгновенно, и кажется, что со скоростью всё в порядке. Клиент в это время смотрит его с телефона в метро, на слабой сети, и видит белый экран, потом прыгающий текст, потом картинку, которая грузится сверху вниз.
Медленный сайт редко тормозит из-за одной большой ошибки. Обычно это набор мелочей, каждая из которых добавляет немного. Ниже о том, что чаще всего замедляет сайт на телефоне, как это проверить самому и о чём спросить разработчика.
Как проверить
Откройте сайт со своего телефона через мобильный интернет, а не через офисный Wi-Fi. Посмотрите, через сколько появляется первый осмысленный экран, прыгает ли текст, когда догружаются картинки и шрифты, и можно ли сразу нажать кнопку.
Для более точной картины есть бесплатный PageSpeed Insights от Google. Он показывает оценку и, что важнее, список конкретных причин. Оценку не стоит превращать в самоцель: важно, что видит человек, а не число в отчёте.
Картинки
Самая частая причина. Фотография прямо с камеры весит в разы больше, чем нужно для экрана телефона. Картинки стоит сжимать, сохранять в современных форматах вроде WebP или AVIF и отдавать телефону уменьшенную версию, а не ту же, что большому монитору.
- У каждой картинки указаны ширина и высота, чтобы страница не прыгала
- Картинки ниже первого экрана грузятся, только когда до них долистали
- Фон первого экрана не тяжелее, чем нужно, или заменён на цвет
Шрифты
Каждое начертание шрифта это отдельный файл. Обычный, жирный, курсив, ещё один жирнее, и всё это в двух гарнитурах. Хватает одной гарнитуры и двух-трёх начертаний. Шрифт лучше хранить на своём сервере и показывать текст системным шрифтом, пока основной не загрузился, а не прятать текст до загрузки.
Скрипты и виджеты
Онлайн-чат, карта, видео с YouTube, счётчики, пиксели рекламы, виджет отзывов. Каждый такой блок тянет свой код со стороннего сервера, и телефон должен всё это скачать и выполнить. Стоит пройтись по списку и спросить, что из этого реально используется.
То, что нужно, можно грузить позже: карту и видео показывать заглушкой и подгружать по нажатию, чат включать через несколько секунд после загрузки страницы.
Сервер и способ сборки
Если сервер долго думает перед тем, как отдать страницу, никакое сжатие картинок не поможет. Дешёвый перегруженный хостинг, тяжёлая CMS с десятками плагинов, отсутствие кэша дают задержку ещё до того, как браузер получил первый байт.
Для сайтов, которые меняются нечасто, хорошо работают готовые HTML-страницы, собранные заранее. Сервер просто отдаёт файл, и ему не нужно собирать страницу для каждого посетителя.
Что спросить у разработчика
- Как сжимаются картинки и есть ли у них размеры
- Сколько шрифтов и начертаний подключено
- Какие сторонние скрипты стоят на сайте и зачем каждый
- Есть ли кэш на сервере и как собираются страницы
- Проверялся ли сайт с телефона на мобильной сети
Скорость проще заложить при сборке, чем чинить потом. Если сайт уже работает, начните с картинок и лишних виджетов: обычно именно там самый заметный результат при наименьших усилиях.
Почему картинкам нужны размеры и что ещё проверить перед запуском, разобрано в заметке про структуру лендинга. Если сайт уже работает, посмотрите, что входит в поддержку после запуска. Проверить скорость вашего сайта можно попросить через контакты.