Сначала измерьте причину, а не итоговый балл
PageSpeed Insights полезен как диагностический инструмент, но одна цифра не объясняет, что исправлять. Откройте Network и Performance в инструментах разработчика, посмотрите вес ресурсов, время загрузки первого изображения, шрифтов и выполнение JavaScript.
Tilda в собственной инструкции также рекомендует не воспринимать один балл PSI как абсолютную оценку и отдельно проверять реальную загрузку. Руководство Tilda по скорости выделяет Lazy Load, изображения, шрифты и сторонний код как основные точки оптимизации.
Начните с первого экрана
Все, что находится выше первого прокручивания, конкурирует за сеть и процессор в первые секунды. Большая фотография, видео, пять декоративных PNG и два шрифта могут загрузиться одновременно. На мобильной сети это заметнее всего.
- оставьте одно главное изображение вместо нескольких фоновых;
- не используйте видео как фон без реальной необходимости;
- уменьшите фактический размер изображения под контейнер;
- не отключайте Lazy Load для элементов ниже первого экрана;
- не запускайте тяжелые виджеты до показа основного контента.
Оптимизируйте изображения до загрузки
Tilda умеет адаптивно отдавать изображения и конвертировать их, но исходник все равно имеет значение. Не загружайте фотографию 6000 пикселей в карточку шириной 600. Сначала обрежьте композицию и уменьшите размеры, затем сожмите файл.
Для первого экрана готовьте отдельный мобильный вариант, если кадрирование и плотность изображения сильно отличаются.
Шрифты
Каждый начертание - отдельный файл. Если дизайн использует 300, 400, 500, 600, 700 и курсив, браузеру приходится загружать много ресурсов. На практике часто хватает двух-трех весов.
Tilda поддерживает настройку мгновенного отображения системным запасным шрифтом до загрузки фирменного. Это ускоряет появление текста, но может дать небольшой визуальный сдвиг, поэтому решение нужно проверять на реальном макете.
Сторонние скрипты
Чаты, коллтрекинг, формы, карты, отзывы, аналитика и рекламные пиксели могут суммарно оказаться тяжелее самой Tilda. Отключайте их по одному и повторяйте измерение. Так быстро видно, кто создает задержку.
Некритичные сервисы можно инициализировать после загрузки основного содержимого или после первого взаимодействия, если это не ломает аналитику и бизнес-сценарий.
Zero Block
Zero Block сам по себе не является проблемой. Проблему создают десятки элементов, сложные эффекты, большие растровые фоны и анимации на каждом объекте. Сокращайте количество декоративных слоев и объединяйте элементы там, где это возможно без потери адаптива.
Анимации
Оставляйте анимацию там, где она объясняет иерархию или взаимодействие. Массовое появление всех элементов с задержкой делает страницу субъективно медленнее, даже если ресурсы уже загружены. На мобильных сложные параллаксы и большие трансформации часто не дают ценности.
Видео
Автовоспроизведение видео на первом экране - один из самых дорогих визуальных приемов. Если оно необходимо, используйте постер, разумный вес файла, отложенную загрузку и проверяйте поведение на мобильном интернете. Иногда лучше показать статичный кадр и запустить ролик по клику.
Порядок работ
- Зафиксировать метрики и водопад загрузки.
- Оптимизировать первый экран.
- Уменьшить изображения.
- Сократить начертания шрифтов.
- Проверить сторонние скрипты.
- Проверить тяжелые Zero Block и видео.
- Повторить измерение на мобильном профиле.
Чего не стоит делать
Не удаляйте важные изображения и функциональность только ради зеленого балла. Скорость - часть пользовательского опыта, а не самостоятельная цель. Если интерактивный калькулятор увеличивает загрузку, но дает качественные заявки, его нужно оптимизировать, а не автоматически выкидывать.
Что считать хорошим результатом
Пользователь быстро видит первый экран, текст не прыгает, кнопка реагирует без задержки, дальнейшие изображения подгружаются по мере прокрутки. Именно такой результат важнее попытки одинаково поднять все лабораторные показатели до максимума.
