- Главный экран на телефоне стал появляться за 2,7 секунды вместо 4,3.
- Страница стала весить 516 КБ вместо 752.
- Самая большая задержка была не в тяжёлых картинках, а в анимации появления заголовка.
Мы перезапустили этот сайт и сразу проверили его в Lighthouse — инструменте Google, который оценивает скорость загрузки. На компьютере всё было хорошо, а на телефоне оценка получилась 82 из 100, и главный заголовок появлялся только через 4,3 секунды. Google рекомендует укладываться в 2,5 секунды.
Как мы мерили
Lighthouse 13.5, режим телефона: эмуляция среднего смартфона и мобильного интернета. Каждый результат — один замер, при повторных запусках значения немного плавают. Смотрели на три показателя:
- LCP — через сколько появляется самый крупный элемент первого экрана. Для посетителя это момент, когда страница «загрузилась».
- Вес страницы — сколько данных скачивает телефон.
- CLS — насколько сдвигается вёрстка во время загрузки. Сдвиг раздражает: вы тянетесь к кнопке, а она уезжает.
Что нашли и исправили
1. Заголовок ждал анимацию
Главный заголовок плавно проявлялся при прокрутке. Для этого он был скрыт до загрузки и запуска скрипта, а потом ещё 0,7 секунды проявлялся. Lighthouse считал «загрузкой» момент, когда заголовок станет виден, и на медленном телефоне это растягивалось до 4 секунд. Решение: убрали анимацию у первого экрана. Ниже по странице она осталась — там она никому не мешает.
2. Стили не сжимались
Сервер отдавал файл стилей как есть — 44 КБ. Браузер не может отрисовать страницу, пока не скачает стили, поэтому каждый килобайт здесь задерживает первый экран. Включили сжатие на сервере, и файл стал весить 10 КБ.
3. Старый протокол
Сервер работал по HTTP/1.1, где браузер качает файлы через ограниченное число соединений. Включили HTTP/2: все файлы идут по одному соединению параллельно. Это одна строка в настройках сервера.
4. Скриншоты в пять раз больше, чем нужно
На главной есть карточки проектов со скриншотами интерфейсов. Скриншоты были шириной 2000 пикселей, а на телефоне показывались шириной около 270. Сделали уменьшенные версии и указали браузеру, какую выбирать в зависимости от экрана.
| Файл | Было | Стало |
|---|---|---|
| Скриншот заявки «Строчки» | 101 КБ | 28 КБ |
| Скриншот входящих «Строчки» | 92 КБ | 26 КБ |
| Скриншот тренажёра | 39 КБ | 11 КБ |
| Аватары персонажей, 3 шт. | 36 КБ | 6 КБ |
5. Первый экран прыгал на компьютере
Пока грузится фирменный шрифт, браузер показывает текст запасным. Наш шрифт шире запасного, поэтому после подмены заголовок занимал больше строк и сдвигал вниз всё, что под ним. Задали первому экрану фиксированную минимальную высоту, в которую заголовок помещается с любым шрифтом. Сдвиг пропал полностью: 0,099 → 0.
Что это значит для бизнеса
Оценка в Lighthouse — не самоцель. Важно другое: посетитель с телефона видит, куда попал, на полторы секунды раньше. Чем дольше пустой экран, тем больше людей закрывают вкладку, особенно если пришли из рекламы, за которую вы уже заплатили.
Проверьте свой сайт за 5 минут
- Откройте PageSpeed Insights и введите адрес сайта.
- Смотрите вкладку «Мобильные»: большинство посетителей приходят с телефонов.
- Если LCP больше 2,5 секунды, откройте раздел диагностики: там будет написано, что именно тормозит.
- Частые причины: огромные изображения, отсутствие сжатия на сервере, лишние скрипты счётчиков и виджетов, анимации первого экрана.
Если разобраться не получается, пришлите нам ссылку: посмотрим бесплатно и скажем, что стоит исправить.