На экране смартфона фотография интерьера занимает почти всё место, но загружается с задержкой. Сначала посетитель видит пустой блок. Затем снимок появляется — и текст вместе с кнопкой заявки съезжает вниз, порой прямо под пальцем. На сайте архитектурного бюро, мебельной мастерской или строительной компании такая задержка мешает рассмотреть проект и связаться с исполнителем.
Скорость сайта нельзя свести к одному числу. Важно, когда появляется основной материал, как быстро страница отвечает на действия и не сдвигаются ли её элементы. При этом убирать крупные фотографии ради минимального веса страницы — плохой выход: по ним оценивают фактуру материалов, пропорции и качество деталей. Лучше сократить ожидание и не загружать заранее то, до чего посетитель ещё не дошёл.
Сначала определить, где именно возникает задержка
Проверяйте не только главную. Каталог проектов, карточка дома с галереей, страница услуги и форма обращения устроены по-разному. Возьмите обычный смартфон и мобильное соединение: на рабочем компьютере с быстрым интернетом задержку легко не заметить.
Пройдите короткий маршрут посетителя. Откройте проект, дождитесь первого изображения, пролистайте галерею, раскройте характеристики, нажмите кнопку связи и отправьте тестовую форму. Отметьте, когда возникает пауза: до появления содержимого, при прокрутке, после нажатия или при отправке. Затем проверьте ещё несколько однотипных страниц — один медленный запрос не обязательно говорит о постоянной проблеме.
Измерения помогут уточнить наблюдения. LCP показывает, когда отобразился крупнейший видимый элемент; в карточке проекта это часто главное фото. INP характеризует отзывчивость страницы при взаимодействии, CLS — неожиданные сдвиги макета. Описания показателей и их порогов есть в справке о Core Web Vitals. Сопоставляйте цифры с тем, как страница ведёт себя в руках пользователя: хороший результат одной карточки ничего не говорит обо всём каталоге.
Какие страницы брать для первого аудита
- Главную: здесь часто собраны крупное изображение на первом экране, анимация и несколько блоков с фотографиями.
- Типовую страницу проекта: проверьте галерею, планы, видео и описание материалов.
- Каталог: посмотрите, сколько миниатюр загружается одновременно и как работают фильтры.
- Контактную страницу: проверьте, быстро ли открывается форма и понятно ли сообщение после отправки.
Если сайт регулярно обновляют, сохраняйте результаты до и после изменений. Записывайте адрес страницы, устройство и условия проверки. Иначе улучшение легко приписать новой настройке, хотя во второй раз соединение просто оказалось быстрее.
Изображения: сохранить детали, убрать лишний вес
На сайте, где проекты показывают через фотографии, с изображений обычно и стоит начать. Исходный файл для печати или большого монитора не нужен каждому смартфону. Подготовьте несколько размеров снимка, чтобы браузер мог получить подходящий вариант. Учитывайте и место фотографии в макете: миниатюре каталога не требуется файл размером с развёрнутый вид фасада.
WebP и AVIF могут уменьшить объём файла при сопоставимом визуальном качестве, но результат зависит от исходника и настроек сжатия. Смотрите не только на килобайты. Увеличьте план и проверьте линии чертежа; на фотографиях оцените кирпич, древесные волокна и переходы света на окрашенной стене. При слишком сильном сжатии пропадут детали, ради которых посетитель открыл проект.
Для главного снимка важны три вещи: не выдавать файл с намного большими размерами, чем нужны на экране, не откладывать его загрузку без причины и заранее задать размеры области под него. Тогда страница не подпрыгнет, когда фотография появится. Снимки ниже первого экрана, напротив, часто разумно загружать ближе к моменту прокрутки.
Проверьте, как устроена галерея. Если посетитель видит один кадр, незачем сразу скачивать все полноразмерные фотографии. Для превью подготовьте компактные файлы, а крупную версию загружайте при открытии снимка. Панораме или видео дайте заметную статичную обложку и запускайте тяжёлый материал после действия пользователя. Подробная презентация проекта при этом сохранится.
Стабильный первый экран важнее декоративного ожидания
С первых секунд должно быть понятно, чей это проект, что показано на странице и куда идти дальше. Экран загрузки с логотипом иногда прячет уже готовый материал, пока доигрывает второстепенная анимация. Если у такого экрана нет конкретной задачи, лучше сразу показать заголовок, основное фото и навигацию, а остальное загрузить позже.
Страницу сдвигают не только фотографии. Баннер, встроенная карта, видеоплеер или отзывы могут занять место уже после того, как появился текст. Заранее оставьте под них область нужной высоты. Особенно внимательно проверьте пространство возле кнопки заявки: если она перемещается под пальцем, человек может попасть не туда или решить, что сайт не реагирует.
На первый экран влияют и шрифты. Несколько семейств с множеством начертаний увеличивают объём загрузки. Оставьте те файлы, которые действительно используются, и предусмотрите системный шрифт на время ожидания. Перед публикацией сравните длину заголовков и переносы: при смене начертания карточки проектов могут сдвинуться даже с правильно размещёнными изображениями.
Скрипты и виджеты: проверить пользу каждого
Галерея, карта, чат, аналитика, форма, анимация и сторонние виджеты могут работать на одной странице одновременно. Каждый из этих элементов добавляет запросы или работу браузеру. На телефоне это особенно заметно: страница выглядит готовой, но прокручивается рывками, а меню открывается с паузой.
Составьте список функций для каждого типа страниц и отметьте, какие из них подключаются автоматически везде. Галерея нужна в карточке проекта, но вряд ли на странице контактов; карта полезна на странице офиса, но не в каждой публикации. Удалить неиспользуемый скрипт обычно проще и надёжнее, чем компенсировать его работу дополнительными настройками.
Для того, что осталось, обсудите с разработчиком порядок загрузки. Скрипты, не нужные для первого экрана, можно запускать позже, чтобы они не задерживали текст и фотографию. Чат или карту порой достаточно загрузить после открытия соответствующего блока. Но сначала проверьте важные действия: форма должна принимать данные, меню — открываться, фильтр каталога — работать, даже если второстепенные элементы ещё не загрузились.
Анимацию оценивайте не только по внешнему виду. Плавное появление карточек может поддержать подачу проекта, но не должно прятать содержимое до конца сложного сценария. Если при прокрутке элементы дёргаются, проверьте страницу на менее мощном устройстве. Для пользователей, предпочитающих меньше движения, предусмотрите спокойный вариант.
Сервер, кеш и тяжёлые шаблоны
Если пауза возникает ещё до появления первого содержимого, обработкой фотографий не обойтись. Сервер может отвечать медленно; возможны сложные запросы к базе данных, перегруженный шаблон или отсутствие кеширования. Сравните простой текстовый материал со страницей каталога. Если каталог заметно медленнее ещё до загрузки картинок, разработчику стоит проверить генерацию списка, фильтры и запросы данных.
Кеш помогает не собирать неизменившуюся страницу заново и не скачивать одни и те же файлы при каждом посещении. Но при настройке нужно учитывать обновления портфолио и форм: посетитель не должен долго видеть старую цену услуги, прежний телефон или устаревшее фото. Проверьте, появилась ли новая публикация и видны ли исправления в существующем проекте — в том числе на телефоне, где сайт уже открывали.
Распределённая сеть для изображений и других статических файлов может сократить путь данных до посетителя из другого региона. Но она не исправит слишком тяжёлую галерею или задержку при создании страницы. Сначала найдите, где теряется время. Для небольшого регионального сайта хорошо настроенный сервер и разумные размеры файлов могут оказаться полезнее дополнительных сервисов.
Как менять сайт без потери удобства
После каждого заметного изменения проверяйте результат. Сжатие может стереть важную деталь на плане, замена шрифта — нарушить переносы, а отложенная загрузка — оставить пустым первый экран. Подготовьте несколько контрольных страниц и проходите их по одному сценарию до и после работ.
- Зафиксируйте исходное состояние. Сохраните замеры и короткие записи экрана для главной, каталога и одной карточки проекта на смартфоне.
- Выберите одну группу причин. Например, сначала займитесь размерами и форматами изображений, затем загрузкой скриптов. Так проще понять, что помогло, а что нарушило работу страницы.
- Проверьте визуальное качество. Сравните фотографии материалов, планы и подписи при обычном масштабе и при увеличении.
- Пройдите действия посетителя. Откройте меню, переключите фотографии, примените фильтр и отправьте тестовую заявку.
- Повторите измерения. Сравнивайте одинаковые страницы на одинаковых устройствах и отмечайте не только показатели, но и паузы, заметные человеку.
Если времени мало, оценивайте задержки по двум признакам: насколько они мешают действию и как часто посетители с ними сталкиваются. Медленное главное фото видят многие, а анимацию внизу отдельной страницы — немногие. При этом сбой формы обращения требует внимания, даже если сама страница открывается быстро.
Заранее договоритесь, кто отвечает за новые материалы после технической настройки. Если редактор снова загрузит в каталог исходные фотографии без уменьшенных версий, результат быстро исчезнет. Закрепите простой порядок публикации: отдельно готовить превью, проверять обложку проекта на телефоне и не ставить видео с автозапуском там, где достаточно одного кадра.
В конце откройте карточку проекта на смартфоне через мобильную сеть. Можно ли сразу прочитать название и описание? Появляется ли главное фото без долгого ожидания? Пролистайте три кадра и нажмите кнопку связи. Снимки должны сохранять детали, кнопка — оставаться на месте, форма — открываться без заметной паузы. Такой тест покажет, стало ли удобнее посетителю, а не только лучше цифрам в отчёте.