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