Красивый сайт должен быть ещё и быстрым.

На ноутбуке дизайнера главная выглядит безупречно. На телефоне посетителя заголовок появляется с опозданием, картинка сдвигает кнопку вниз, а меню открывается с задержкой. Сайт один и тот же, но впечатления от него у этих двоих совсем разные.

Скорость нужно обсуждать вместе с дизайном. У изображений, видео, шрифтов и интерактива есть своя цена. Задача — потратить её на то, что помогает человеку понять предложение и пользоваться страницей.

Задайте бюджет первому экрану

Решите, что посетителю нужно сразу. Обычно это главное сообщение, одно изображение, которое действительно работает, и навигация или следующий шаг. Этим элементам — приоритет. Видео в самом низу страницы не должно отнимать у первого изображения ни внимание, ни пропускную способность канала.

Проверку начинайте с самой страницы. Найдите самый крупный видимый элемент, выпишите скрипты, которые запускаются сразу, и спросите себя, какие запросы могут подождать. Правильный компромисс зависит от назначения страницы: конфигуратору товара нужно одно, короткой странице услуги — другое.

На нашем сайте статьи и страницы услуг отделены от 3D-помощника. Так персонаж появляется там, где он действительно полезен, а не грузится у каждого посетителя на каждой странице.

Подгоняйте изображения под их место

Изображение должно быть достаточно крупным, чтобы хорошо смотреться в том размере, в каком его показывают. Если отдавать самый большой оригинал на любой экран, страница без всякой нужды становится тяжелее. Мы готовим уменьшенные версии, и браузер сам выбирает подходящую.

Вес файла — лишь часть задачи. После сжатия проверьте кадрирование, мелкие детали и цвет. Нет смысла экономить несколько килобайт, если экспорт испортил картинку.

Резервируйте место под изображение ещё до загрузки, чтобы контент ниже не прыгал. Важное первое изображение загружайте сразу, а менее срочные картинки ниже по странице — позже. В руководстве по загрузке изображений в браузере объясняется, почему картинке вверху страницы нужен иной подход, чем тем, что пока за пределами экрана.

Анимация должна оправдывать себя

Переход может пояснить изменение или помочь рассмотреть работу. Но никто не должен высиживать заставку, чтобы прочитать страницу. Спросите себя, что движение добавляет к информации и понятен ли контент, если посетитель включил в настройках уменьшение движения.

В галереях наших проектов есть запасные статичные кадры, а анимация останавливается, когда галерея уходит из видимой области. Так мы решаем, на что тратить внимание посетителя и ресурсы устройства.

Так же проверяйте сторонние инструменты. Прежде чем добавить ещё один виджет или тег, сформулируйте, зачем он нужен, кто пользуется его данными и как вы проверите его влияние. Инструмент, которым никто не пользуется, — первый кандидат на удаление.

Измеряйте впечатление посетителя, а не один балл

Core Web Vitals отвечают на три вопроса: как быстро появляется основной контент, как быстро страница откликается на действия и насколько сдвигается вёрстка. Хорошими Google считает LCP не больше 2.5 секунды, INP не больше 200 миллисекунд и CLS не больше 0.1 — по 75-му процентилю, отдельно для мобильных устройств и десктопа.

Лабораторный тест помогает разобраться с проблемой, которую можно воспроизвести. Полевые данные, если они есть, показывают, что на самом деле видят посетители. У новой страницы или страницы с небольшим трафиком полевых данных может не хватать, и их отсутствие не означает ни успеха, ни провала.

Проверяйте не только первую загрузку, но и реальные действия: откройте меню, воспользуйтесь фильтром, заполните форму, исправьте ошибку. Быстрый скриншот ещё не доказывает, что кнопки и поля откликаются без задержки.

Сохраните скорость после запуска

Скорость может постепенно снижаться, когда кто-то меняет картинку, добавляет тег рекламной кампании или встраивает новый инструмент. Дайте редакторам правила экспорта изображений и перепроверяйте важные страницы после заметных изменений.

Сайт может выглядеть необычно и при этом быстро загружаться — если кто-то решает, на что стоит тратить время посетителя. Поэтому в нашей работе над сайтами эти решения принимаются с самого начала.