Оптимизация изображений для пользователей с медленными сетевыми скоростями

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

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

Логика диктует, что сохраняя другие факторы такими же, более легкая веб-страница должна загружаться быстрее, чем более тяжелая веб-страница, и это направление, в котором должны двигаться наши веб-страницы тоже. Однако, вопреки этой логике, наши веб-сайты с годами стали тяжелее. Взгляд на данные из архива HTTP показывает, что средняя веб-страница в 2017 году была почти в три раза тяжелее, чем в 2011 году.

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

Однако, как разработчики, мы упускаем важный момент. Мы обычно разрабатываем и тестируем наши веб-сайты в наших офисах через стабильные WiFi или проводные соединения. Однако, когда реальный пользователь использует наш веб-сайт, скорость и стабильность сети могут быть не так велики. Особенно с большим количеством пользователей, выходящих в интернет через мобильные устройства, проблема изменяющихся условий сети является еще более значительной.

Не верите этому? ImageKit.io проведено исследование для определения скорости сети, сообщенной API Network Info браузера Chrome для пользователей веб-сайта (с посетителями в основном из Индии). Это не очень удивительно, что почти 40% отслеживаемых посетителей сообщили о скорости ниже 4G, т. е. менее 700 Kbps согласно спецификации API Network Info.

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

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

Зачем оптимизировать изображения для медленных сетей?

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

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

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

Как оптимизировать изображения для медленной сети?

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

Решение состоит из двух частей.

Определите скорость сети пользователя

Нам нужно определить скорость сети, которую испытывает пользователь, и разделить их на сегменты. Например, пользователи, испытывающие скорость выше определенного порога, должны быть классифицированы в одной группе и обслуживаться определенным уровнем качества изображения. Эта классификация проста в современных веб-браузерах с API сетевой информации . Этот API автоматически классифицирует пользователей в четыре корзины-4G, 3G, 2G и slow 2G, причем 4G является самым быстрым и медленным 2G, являющимся самым медленным.

// returns '4g', '3g', '2g' or 'slow-2g'
var effectiveType = NetworkInformation.effectiveType;

Сжатие изображений до соответствующего уровня качества

Вторая часть решения заключается в возможности изменять уровень сжатия изображения в режиме реального времени в зависимости от скорости сети пользователя, определенной на шаге 1. Это должно быть так же просто, как передать дополнительный параметр в URL-адрес изображения, когда браузер запускает нагрузку для него.

В то время как мы полагаемся на браузер, чтобы определить скорость сети пользователя, такой инструмент, как ImageKit.io делает бит сжатия в реальном времени простым.

ImageKit.io is a real-time image optimization and transformation product that helps us deliver images in the right format, change compression levels, resize, crop, and transform images directly from the URL and deliver those images via a global image CDN. We can get the image with the desired compression level by just passing the image quality parameter in the URL. Quality is directly proportional to image size, i.e., higher the quality number, larger will be the resulting image.

// ImageKit URL with quality 90
https://ik.imagekit.io/demo/default-image.jpg?tr=q-90

// ImageKit URL with quality 50
https://ik.imagekit.io/demo/default-image.jpg?tr=q-50

Как еще ImageKit помогает с сетевой оптимизацией изображений?

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

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

// Adding the code snippet in a service worker
importScripts("https://runtime.imagekit.io/<your_imagekit_id>/v1/js/network-based-adaption.js?v=" + new Date().getTime());

В самой панели мониторинга нам также необходимо указать желаемый уровень качества для различных сегментов скорости сети. Например, мы использовали качество 90 для изображений для пользователей, классифицированных как пользователи 4G, и качество 50 для наших медленных пользователей 2G. Помните, что более низкое качество приводит к меньшим размерам изображения.

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

Кроме того, в панели мониторинга ImageKit можно указать URL-адреса изображений (или шаблоны в URL-адресах), которые не должны оптимизироваться на основе типа сети. Например, мы хотели бы представить один и тот же четкий логотип нашего бренда для наших пользователей независимо от их скорости сети.

Проверка установки

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

Как кэширование работает с работником службы на месте?

Плагин service worker ImageKit обходит кэш браузера в пользу сетевого кэша изображений в браузере. Обход кэша браузера означает, что работник службы может поддерживать разные кэши для разных типов сетей и выбирать правильный образ из кэша или запрашивать новый на основе текущего состояния сети пользователя.

Плагин service worker автоматически использует метод cache-first для загрузки изображений, а также реализует метод waterfall, чтобы выбрать правильный из кэша. С помощью этого метода водопада изображения с более высоким качеством получают предпочтение перед изображениями с более низким качеством. Это означает, что, если скорость пользователя падает до 2G, и у него есть определенное изображение, кэшированное с момента, когда он испытывал хорошую скорость загрузки в сети 4G, работник службы будет использовать этот кэшированный образ 4G для доставки вместо загрузки изображения по сети 2G. Но обратное недопустимо. Если пользователь испытывает скорость сети 4G, сервисный работник не будет забирать изображение 2G из кэша, потому что можно получить изображение лучшего качества и ресурсы позволяют это сделать.

И это еще не все!

Помимо простого, готового к использованию плагина service worker и настроек панели мониторинга, ImageKit может предложить еще несколько вещей, которые делают его привлекательным инструментом для начала работы с сетевой оптимизацией.

Аналитика

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

Стоимость оптимизации

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

Заключение

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

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

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

Зарегистрируйтесь прямо сейчас для ImageKit и начать работу с ним прямо сейчас!