Первая загрузка главной страницы сайта для внешней торговли занимает много времени. Как определить, что оптимизировать в первую очередь?

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

При проверке необходимо учитывать условия доступа целевых клиентов. То, что сайт нормально открывается в офисе в Китае, не доказывает, что он так же работает на мобильных устройствах в Европе и США. Эффективность методов ускорения сайта для международной торговли следует оценивать по результатам доступа из основных регионов привлечения клиентов, на реальных целевых страницах и типичных устройствах.

Сначала воспроизведите медленную загрузку, которую видит клиент, а не спешите смотреть на общую оценку

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

Используйте панели Network и Performance в инструментах разработчика браузера, а также такие инструменты, как PageSpeed Insights. Обратите внимание на три показателя:

• Время до первого байта документа (TTFB): сколько времени проходит, прежде чем браузер получает первый байт ответа страницы. Если показатель высокий, отдельно проверьте соединение, сетевые задержки, кэширование и обработку на стороне сервера.
• Время отрисовки самого крупного контента (LCP): когда отображается основной контент первого экрана. Это может быть баннер, заголовок или большое изображение товара — нельзя заранее считать, что это обязательно изображение.
• Активность основного потока: занят ли браузер выполнением скриптов до появления первого экрана, из-за чего уже загруженные ресурсы не отображаются.

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

Проследите цепочку запросов и найдите участок, который важнее всего оптимизировать первым

Медленный ответ документа: отличите сетевое расстояние от времени обработки на сервере

Если сам документ страницы долго не возвращается, сначала проверьте в деталях запроса время DNS-разрешения, подключения, согласования TLS и ожидания ответа. Если TTFB высокий, это ещё не значит, что «серверу не хватает мощности»: время могут увеличивать межрегиональные сетевые задержки, установление соединения и обработка приложения. Без дополнительной проверки легко потратить бюджет не на то.

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

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

Главное изображение появляется поздно: сначала проверьте, когда начинается запрос, затем — размер файла

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

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

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

Ресурсы загружены, но не отображаются: проверьте блокировку рендеринга и выполнение скриптов

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

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

Расставляйте приоритеты по влиянию на бизнес и проверяйте результат в одинаковых условиях

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

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

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