От автора: для каждого веб-сайта время загрузки страницы является критическим фактором. Благодаря более удобному пользовательскому интерфейсу, который является следствием быстрой загрузки веб-страницы, те, кто уделяют этому достаточно внимания, получают преимущества в виде более высокого ранжирования в поисковых системах, более высокого коэффициента конверсии, лучших показателей отказов и времени просмотров страниц.
И этот факт был отмечен в нескольких исследованиях. Например, согласно одному из исследований, 47% потребителей ожидают, что загрузка Web-страницы займет не более 2 секунд. Неудивительно, что разработчики по всему миру много внимания уделяют улучшению времени загрузки веб-страницы.
Логика подсказывает, что при прочих равных условиях более легкая веб-страница должна загружаться быстрее, чем более тяжелая, и в этом направлении мы должны двигаться. Однако, вопреки этой логике, наши сайты стали с годами тяжелее. Анализ данных из HTTP Archive показывает, что средняя веб-страница в 2017 году была почти в три раза тяжелее, чем в 2011 году.
Благодаря более мощным пользовательским устройствам, более быстрым сетям и растущей популярности клиентских платформ и мультимедийных приложений мы начали передавать все больше и больше данных на пользовательское устройство.
Однако, как разработчики, мы упускаем важный момент. Обычно мы разрабатываем и тестируем веб-сайты в наших офисах со стабильным WiFi или проводным соединением. Однако, когда наш сайт использует реальный пользователь, скорость и стабильность сети могут быть не такими уж высокими. Особенно в связи с тем, что все больше и больше пользователей подключаются к сети через мобильные устройства, проблема изменения условий в сети становится еще более серьезной.
Не верите? ImageKit.io провел исследование, чтобы определить скорость сети, сообщаемую API Network Info браузера Chrome для пользователей веб-сайта (с посетителями в основном из Индии). Не удивительно, что почти 40% отслеживаемых посетителей сообщили о скорости ниже 4G, то есть менее 700 Кбит / с в соответствии со спецификацией Network Info API.
Хотя этот процент пользователей с медленным соединением может быть ниже, если мы будем исследовать посетителей из развитых стран, таких как США или страны Европы, мы все же можем с уверенностью предположить, что различные условия сети имеют значение для большой части наших пользователей. И мы все тоже это испытывали. Когда мы входим в лифт или заезжаем на подземную парковку здания или едем в удаленное место, скорость загрузки мобильных данных значительно падает.
Поэтому мы должны помнить, что наши пользователи, особенно пользователи мобильных устройств, всегда могут посещать веб-сайт в медленной сети, и наша цель как разработчика должна заключаться в том, чтобы предоставить им как минимум приличный опыт работы в Интернете.
Зачем оптимизировать изображения для медленных сетей?
Конечная цель оптимизации веб-сайта для медленных сетей состоит в том, чтобы иметь возможность обслуживать его более легкий вариант. Таким образом, все необходимые материалы быстро загружаются и отображаются на устройстве пользователя.
Среди всех ресурсов, которые загружаются на веб-странице, изображения составляют большую часть полезной нагрузки. И даже если мы позаботимся об оптимизации изображений в целом, дальнейшая их оптимизация для медленных сетей может снизить общий вес страницы почти на 30%.
Кроме того, дополнительное сжатие изображений не нарушает критический функционал любого приложения. Да, качество изображения немного падает, чтобы обеспечить лучший пользовательский опыт. Но в отличие от удаления Javascript, в процессе которого нужно все тщательно взвешивать, сжатие изображений является относительно простым.
Как оптимизировать изображения для медленной сети?
Теперь, когда мы установили, что оптимизация веб-страницы на основе скорости сети пользователя имеет важное значение и что изображения являются очевидным направлением для начала, давайте посмотрим, как мы можем добиться оптимизации изображений. Есть две части решения.
Определить скорость сети пользователя
Нам нужно определить скорость сети, в которой работает пользователь, и разделить ее на сегменты. Например, пользователи, работающие в сети со скоростью выше определенного порога, должны быть классифицированы в одну группу и обслуживаться с определенным уровнем качества изображения. Эту классификацию реализовать в современных веб-браузерах довольно просто с помощью API Network Information. Этот API автоматически классифицирует пользователей по четырем сегментам — 4G, 3G, 2G и медленный 2G, причем 4G — самый быстрый, а медленный 2G — самый медленный.
// returns '4g', '3g', '2g' or 'slow-2g' var effectiveType = NetworkInformation.effectiveType;
Сжатие изображений до соответствующего уровня качества
Вторая часть решения состоит в том, чтобы иметь возможность изменять уровень сжатия изображения в режиме реального времени в зависимости от скорости сети пользователя, определенной на шаге 1. Это должно реализоваться простой передачей дополнительного параметра в URL-адресе изображения, когда браузер запускает для него загрузку.
Хотя для определения скорости сети пользователя мы полагаемся на браузер, такой инструмент, как ImageKit.io, упрощает сжатие в реальном времени.
ImageKit.io — это продукт для оптимизации и преобразования изображений в реальном времени, который помогает доставлять изображения в нужном формате, изменять уровни сжатия, изменять размер, обрезать и преобразовывать изображения непосредственно из URL-адреса и доставлять эти изображения через глобальную CDN изображений. Мы можем получить изображение с желаемым уровнем сжатия, просто передав параметр качества изображения в URL. Качество прямо пропорционально размеру изображения, т. е. чем выше числовое значение качества, тем больше будет полученное изображение.
// 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 всегда поддерживал изменение качества изображения в режиме реального времени, в последнее время он начал поддерживать функции оптимизации изображений на основе сети. Благодаря этим новым функциям стало проще реализовать полную оптимизацию на основе сети.
Конечно, во-первых, нам нужно зарегистрироваться в ImageKit и разместить изображения на нашем сайте через него. Когда это будет сделано, в панели инструментов ImageKit нам нужно включить настройку для оптимизации изображений на основе сети. Мы получаем фрагмент кода и добавляем его к существующему service worker на нашем веб-сайте или новому service worker.
// 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. Помните, что более низкое качество дает меньшие размеры изображения.
Этот фрагмент кода похож на плагин, предназначенный для использования service worker. Он перехватывает запросы изображения, поступающие из браузера пользователя, определяет скорость сети пользователя и добавляет необходимые параметры в URL-адрес изображения. Эти параметры могут быть понятны серверу ImageKit для сжатия изображения до желаемого уровня и поддержания эффективного кэширования на стороне клиента. Для сетевой оптимизации изображений все, что нам нужно сделать, это включить его на нашем сайте и все готово!
Кроме того, в панели инструментов ImageKit мы можем указать URL-адреса изображений (или шаблоны URL-адресов), которые не следует оптимизировать в зависимости от типа сети. Например, мы хотели бы предоставлять пользователям один и тот же четкий логотип нашего бренда независимо от скорости их сети.
Проверка настроек
После правильной настройки мы можем быстро проверить, работает ли сетевая оптимизация с помощью Chrome Developer Tools. Мы можем эмулировать медленную сеть в браузере, используя инструменты разработчика. При правильной настройке service worker должен добавить некоторые параметры в исходный запрос изображения, указывающие текущую скорость сети. Эти параметры понимаются серверами ImageKit для сжатия изображения в соответствии с настройками качества, указанными в информационной панели ImageKit, соответствующей этой скорости сети.
Как работает кэширование с помощью service worker?
Плагин service worker ImageKit обходит кэш браузера, используя сетевой кэш изображений в браузере. Пропуск кэша браузера означает, что service worker может поддерживать разные кэши для разных типов сетей и выбирать правильное изображение из кэша или запрашивать новое изображение в зависимости от текущего состояния сети пользователя.
Плагин service worker автоматически использует метод кэширования в первую очередь для загрузки изображений, а также реализует метод водопада для выбора правильного метода из кэша. С помощью этого метода водопада изображения с более высоким качеством получают преимущество перед изображениями с более низким качеством. Это означает, что, если скорость сети пользователя падает до 2G, и у него кешируется определенное изображение с момента, когда он работал с хорошей скоростью загрузки в сети 4G, service worker будет использовать для доставки это кэшированное изображение 4G вместо загрузки изображение по сети 2G. Но обратно это не работает. Если пользователь работает в 4G сети, service worker не будет брать изображение 2G из кэша, потому что можно получить изображение более высокого качества, и ресурсы позволяют это делать. И это еще не все!
Помимо простых, готовых к использованию плагинов для service worker и настроек панели инструментов, ImageKit предлагает еще несколько вещей, которые делают его привлекательным инструментом для начала работы с оптимизацией на основе сети.
Аналитика
ImageKit предоставляет аналитику по наблюдаемому типу сети пользователя. Это дает нам представление о том, сколько раз запускалась сетевая оптимизация и как выглядит распределение пользователей по различным типам сетей. Этот анализ распределения может быть полезен даже для оптимизации других ресурсов на нашем сайте.
Стоимость оптимизации
При сетевой оптимизации изображений размер изображений уменьшается, но в то же время количество запросов на преобразование может увеличиться. В отличие от многих других продуктов для оптимизации изображений в реальном времени, затраты ImageKit основаны только на пропускной способности выходного изображения и ни на чем больше. Таким образом, благодаря такой модели реализация оптимизации изображений на основе сети не только обеспечивает гораздо большую ценность для пользователей, но также помогает нам сократить расходы ресурсов на доставку изображений.
Заключение
Улучшение производительности загрузки страницы имеет важное значение. Однако есть один момент, который мы часто упускаем — оптимизировать ее для медленных сетей.
Изображения являются самым очевидным аспектом для оптимизации всего веб-сайта для различных сетей. Благодаря поддержке функций оптимизации на основе сети с помощью service worker ImageKit достичь этого стало легче.
Это будет очень полезно для наших пользователей и поможет еще больше улучшить взаимодействие, что положительно скажется на конверсиях на сайте. Зарегистрируйтесь на ImageKit и начните с ним работу сейчас!
Источник: https://css-tricks.com
Редакция: Команда webformyself.