Собственный сайт загружается медленно: как выявить проблемы с загрузкой изображений?

Медленная загрузка сайта на отдельном домене — распространённая проблема, и изображения действительно часто становятся объектом проверки. Однако не стоит сжимать все изображения подряд только потому, что на странице их много. Пользователям может казаться, что «изображение никак не загружается», если крупное изображение на первом экране скачивается слишком долго, запрос на изображение обнаруживается с задержкой, соединение с узлами в зарубежных регионах работает плохо или сервер медленно отвечает. Сначала выясните, какие именно изображения замедляют страницу и на каком этапе теряется время, а затем решите, нужно ли изменять файл, код страницы или проверять цепочку доставки.

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

Сначала убедитесь, что изображения — основное узкое место

Откройте панель Network в инструментах разработчика Chrome и установите флажок Disable cache, чтобы записать запросы во время загрузки страницы. После теста при первом посещении повторите проверку с включённым кэшем, чтобы сравнить работу при холодном кэше и при повторном посещении. Отфильтруйте запросы по типу изображения и проверьте размер файла, время начала запроса, длительность и диаграмму водопада. Тестируйте в условиях сети, близких к условиям целевых пользователей, и отдельно проверяйте страницы для компьютеров и мобильных устройств.

Также запустите Lighthouse или PageSpeed Insights и изучите диагностику, связанную с отрисовкой самого крупного элемента (LCP). Если элемент LCP — изображение на первом экране и оно отображается с большой задержкой, это конкретная отправная точка для диагностики. Если элемент LCP — текст или медленно отвечают сам HTML либо скрипты, оптимизация изображений всё ещё может быть полезной, но не обязательно решит проблему медленной загрузки первого экрана.

Не ориентируйтесь только на общее время запроса. Нажмите на подозрительное изображение, откройте вкладку Timing и сопоставьте данные с диаграммой водопада:

• Запрос начинается поздно: изображение может обнаруживаться только после отрисовки с помощью JavaScript или ошибочно загружаться с отложенной загрузкой.
• Долго ожидать ответа: проверьте исходный сервер изображения, состояние кэша CDN и сетевой маршрут до целевого региона.
• Долго скачивается содержимое: оцените фактический объём передаваемых данных, пропускную способность сети и размеры изображения; в первую очередь проверьте крупные файлы.
• Изображение медленно отображается даже после скачивания: проверьте декодирование изображения, задачи в основном потоке, а также не блокируют ли отрисовку стили или скрипты страницы.

Объём передачи, указанный на панели Network, не всегда совпадает с исходным размером файла изображения. Также проверьте перенаправления, повторные попытки после сбоев, наличие попадания в кэш и не запрашивается ли одно и то же изображение повторно по разным адресам. Для зарубежного сайта на отдельном домене лучше проводить повторные тесты в основных регионах, где находятся клиенты, или использовать локальные тестовые узлы. Иначе результаты локального тестирования могут скрыть проблемы доступа из других регионов.

Проверьте размеры, форматы и назначение изображений

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

На адаптивных страницах можно использовать srcset и sizes, чтобы браузер выбирал подходящий ресурс с учётом макета и характеристик устройства. Если композиция на мобильных устройствах и компьютерах существенно различается, можно использовать элемент picture для предоставления разных изображений. При проверке убедитесь, что sizes соответствует фактическому макету; в противном случае браузер всё равно может выбрать слишком большой файл.

Формат следует выбирать с учётом содержимого изображения и требований к совместимости. Для фотографий и снимков товаров можно оценить WebP или AVIF; для материалов с прозрачным фоном также следует проверить поддержку целевого формата и инструментов обработки. Предусмотрите запасной вариант для совместимости и сравните размер файла, качество изображения и скорость декодирования после конвертации. Более новый формат не гарантирует, что каждое изображение станет меньше. Особенно тщательно проверяйте после сжатия края текста, текстуры товаров и логотипы бренда.

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

В первую очередь оптимизируйте первый экран, а изображения ниже загружайте по мере необходимости

Браузер должен как можно раньше обнаружить изображение LCP первого экрана. В первую очередь размещайте адрес изображения непосредственно в исходном HTML и не добавляйте его только после выполнения скрипта; не используйте loading="lazy" для этого изображения. Убедившись, что оно действительно является критически важным ресурсом, можно рассмотреть подсказку fetchpriority="high", чтобы браузер повысил его приоритет. Однако не следует одновременно задавать высокий приоритет нескольким изображениям, иначе они будут конкурировать за пропускную способность с критически важными ресурсами, например шрифтами и стилями.

Если крупное изображение первого экрана загружается как фон CSS, браузеру часто приходится сначала получить и разобрать соответствующие стили, чтобы обнаружить его. Для изображения, которое содержит основной контент, можно рассмотреть использование HTML-элемента img; также можно оценить предварительную загрузку, если адрес ресурса известен и обнаружение действительно происходит с задержкой. Адрес и адаптивные настройки предварительной загрузки должны соответствовать фактически используемому ресурсу, иначе изображение может скачиваться повторно.

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

Если после оптимизации файлов загрузка всё ещё медленная, проверьте цепочку доставки

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

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

Повторите тестирование в тех же условиях и убедитесь, что проблема решена

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

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