Состояние современных методов оптимизации изображений в 2019 году

Состояние современных методов оптимизации изображений в 2019 году Сайтостроение

Состояние современных методов оптимизации изображений в 2019 году

От создателя: в прошедшем году я написал пост, в котором рассматриваются методы использования изображений в Вебе. При помощи данных из архива HTTP, я сумел поглядеть, как доставляют изображения 500 000 сайтов и сколько веб-сайтов могут сделать лучше свои механизмы доставки изображений, чтоб уменьшить время загрузки странички.

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

1. Формат WebP из Chrome-only получил поддержку в браузерах Firefox и Edge, увеличивая потенциальную базу юзеров для этого формата изображения, который дает наилучшее сжатие при том же качестве изображения.

2. Chrome включил встроенную в браузере отложенную загрузку.

Архив HTTP тоже поменялся. Набор данных сейчас содержит 5 миллионов сайтов, и испытания Lighthouse в архиве HTTP также эволюционировали с внедрением разных (и наиболее детализированных) методов оценки. Итак, помня о этом, давайте поглядим, как в сети употребляются изображения и как поменялись числа за крайние 18 месяцев.

Четыре стратегии оптимизации изображений

Данные архива HTTP основаны на тестах Lighthouse для 5 миллионов сайтов. В августе 2019 года размер средней мобильной интернет-страницы составлял 1745 КБ (повышение на 12% по сопоставлению с маем 2018 года) и таковая страничка содержала 891 КБ изображений (повышение на 13,2% по сопоставлению с маем 2018 года). Таковым образом, Сеть становится больше, а размер изображений, передаваемых на мобильные устройства, возрастает. Средний веб-сайт содержит 51% изображений. Если б изображения были бы уменьшены, мы могли бы очень воздействовать на размер данных, нужных для загрузки сайта, что ускорило бы время загрузки и улучшило производительность фронт-энд.

READ
Новая стратегия популяризации поискового продвижения от Google

Любопытно, что среднее количество изображений на сайт уменьшилось с 35 до 28 (на 20%) за этот же период времени. Это гласит нам о том, что размер дискретных изображений возрос не на 13%, а на 33% за год!

Чтоб осознать наилучшие практики, применяемые сейчас в Вебе, я остановлюсь на 4 стратегиях в наборе данных Lighthouse (который включен в данные архива HTTP).

Оптимизация изображения

Адаптивные изображения

Формат изображения

Отложенная загрузка

Поглядим, как все поменялось.

Оптимизация изображения

Компания Lighthouse инспектирует все изображения JPEG (и лишь JPEG) на страничке, чтоб найти, имеют ли они свойство 85% (либо ниже). Если изображения доставляются с 85% свойства, тест проходит удачно. Гугл советует установить уровень свойства 85%, чтоб обеспечить не плохое соотношение свойства и размера изображения. В 2018 году 43% сайтов прошли этот тест, а 33% не смогли:

Состояние современных методов оптимизации изображений в 2019 году

В 2019 году в данной для нас статистике не наблюдалось значимого конфигурации: 45% веб-сайтов получили оценку 1, а 35% — наименее 0,57 (в школах США (Соединённые Штаты Америки – государство в Северной Америке) это было бы двойкой!). Это гласит нам о том, что принятие оптимизации изображений в основном остается на постоянном уровне из года в год.

Состояние современных методов оптимизации изображений в 2019 году

Адаптивные изображения

Lighthouse вычисляет размер отображенного изображения и ассоциирует его с загруженным изображением. Если изображение на дисплее наиболее чем на 25 КБ меньше, чем загруженное изображение, проверка заканчивается безуспешно. Цель в том, чтоб предложить устройству, запрашивающему файлы, изображения соответственного размера (на небольшом телефоне не необходимы изображения для retina экранов).

В 2018 году 22% веб-сайтов не прошли тест, а 57% получили лучшую оценку:

Состояние современных методов оптимизации изображений в 2019 году

В 2019 году 65% сайтов проходят тест. Это повышение ~ 10%, что приятно созидать. Как и раньше 20% веб-сайтов получают оценку ниже 0,5, потому, похоже, что веб-сайты с частичным соответствием в 2018 году сделали переход на полное соответствие требованиям, так как количество веб-сайтов, не прошедших тест, фактически не поменялось. Наклон данной для нас кривой весьма крутой, это указывает, что почти все веб-сайты ввели хотя бы некие адаптивные изображения:

READ
Контент – главный инструмент продвижения сайтов медицинской тематики

Состояние современных методов оптимизации изображений в 2019 году

Формат изображения

Lighthouse инспектирует, сбережет ли формат последующего поколения (JPEG2000, WebP) наиболее 8 КБ для хоть какого изображения. Так как все испытания мобильного архива HTTP производятся в эмулированном Chrome, желаемым форматом будет WebP. Как упоминалось во внедрении, поддержка WebP за крайние пару лет возросла в нескольких браузерах, потому веб-сайты, может быть, достигнули процента юзеров, для которых имеет смысл добавить поддержку WebP.

В 2018 году поддержка WebP была весьма низкой — лишь 16% веб-сайтов прошли этот тест:

Состояние современных методов оптимизации изображений в 2019 году

В 2019 году, невзирая на количество клиентов, которые могут употреблять формат WebP, принятие других форматов изображений, к огорчению, остается фактически постоянным: 65% не проходят этот тест, и лишь 15% проходят.

Состояние современных методов оптимизации изображений в 2019 году

Отложенная загрузка

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

В 2018 году лишь 22% сайтов включили отложенную загрузку.

Состояние современных методов оптимизации изображений в 2019 году

Но в 2019 году мы смотрим большенный скачок в принятии отложенной загрузки, лишь 10% не прошли тест и 55% прошли стопроцентно:

Состояние современных методов оптимизации изображений в 2019 году

Возможная экономия

Баллы Lighthouse — это отлично, но что по сути означают эти баллы? Тест также вычисляет, как резвее будет загружаться страничка с внедренными улучшениями, и уменьшение полезной перегрузки изображения, измеряемое в КБ. В таблице ниже я привел среднюю экономию для тестов с оценкой наименее 0,5 и для веб-сайтов с оценкой 0.

Состояние современных методов оптимизации изображений в 2019 году

В таблице несколько ячеек выделены. Так как 66% сайтов не соответствуют советам по формату изображений, медианное значение предполагает, что 33% сайтов могут уменьшить время загрузки собственного мобильного сайта на 6,6 секунды, переключившись на изображения WebP.

READ
Google стал реже выводить блок с похожими запросами

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

Заключение

Изучая результаты тестов Lighthouse по 5 миллионам страничек при помощи архива HTTP, мы обнаруживаем, что из 4 наилучших практик — лишь адаптивные изображения (с ~ 10% веб-сайтов не прошедшими тест) и отложенная загрузка (при 33% сайтов, принявших ее в течение года год) наблюдаются какие-то приметные конфигурации.

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

Создатель: Doug Sillars

Редакция: Команда webformyself.

Оценить статью
Блог о самом интересном.
Добавить комментарий