От создателя: в прошедшем году я написал пост, в котором рассматриваются методы использования изображений в Вебе. При помощи данных из архива 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% изображений. Если б изображения были бы уменьшены, мы могли бы очень воздействовать на размер данных, нужных для загрузки сайта, что ускорило бы время загрузки и улучшило производительность фронт-энд.
Новая стратегия популяризации поискового продвижения от Google
Любопытно, что среднее количество изображений на сайт уменьшилось с 35 до 28 (на 20%) за этот же период времени. Это гласит нам о том, что размер дискретных изображений возрос не на 13%, а на 33% за год!
Чтоб осознать наилучшие практики, применяемые сейчас в Вебе, я остановлюсь на 4 стратегиях в наборе данных Lighthouse (который включен в данные архива HTTP).
Оптимизация изображения
Адаптивные изображения
Формат изображения
Отложенная загрузка
Поглядим, как все поменялось.
Оптимизация изображения
Компания Lighthouse инспектирует все изображения JPEG (и лишь JPEG) на страничке, чтоб найти, имеют ли они свойство 85% (либо ниже). Если изображения доставляются с 85% свойства, тест проходит удачно. Гугл советует установить уровень свойства 85%, чтоб обеспечить не плохое соотношение свойства и размера изображения. В 2018 году 43% сайтов прошли этот тест, а 33% не смогли:
В 2019 году в данной для нас статистике не наблюдалось значимого конфигурации: 45% веб-сайтов получили оценку 1, а 35% — наименее 0,57 (в школах США (Соединённые Штаты Америки – государство в Северной Америке) это было бы двойкой!). Это гласит нам о том, что принятие оптимизации изображений в основном остается на постоянном уровне из года в год.
Адаптивные изображения
Lighthouse вычисляет размер отображенного изображения и ассоциирует его с загруженным изображением. Если изображение на дисплее наиболее чем на 25 КБ меньше, чем загруженное изображение, проверка заканчивается безуспешно. Цель в том, чтоб предложить устройству, запрашивающему файлы, изображения соответственного размера (на небольшом телефоне не необходимы изображения для retina экранов).
В 2018 году 22% веб-сайтов не прошли тест, а 57% получили лучшую оценку:
В 2019 году 65% сайтов проходят тест. Это повышение ~ 10%, что приятно созидать. Как и раньше 20% веб-сайтов получают оценку ниже 0,5, потому, похоже, что веб-сайты с частичным соответствием в 2018 году сделали переход на полное соответствие требованиям, так как количество веб-сайтов, не прошедших тест, фактически не поменялось. Наклон данной для нас кривой весьма крутой, это указывает, что почти все веб-сайты ввели хотя бы некие адаптивные изображения:
Контент – главный инструмент продвижения сайтов медицинской тематики
Формат изображения
Lighthouse инспектирует, сбережет ли формат последующего поколения (JPEG2000, WebP) наиболее 8 КБ для хоть какого изображения. Так как все испытания мобильного архива HTTP производятся в эмулированном Chrome, желаемым форматом будет WebP. Как упоминалось во внедрении, поддержка WebP за крайние пару лет возросла в нескольких браузерах, потому веб-сайты, может быть, достигнули процента юзеров, для которых имеет смысл добавить поддержку WebP.
В 2018 году поддержка WebP была весьма низкой — лишь 16% веб-сайтов прошли этот тест:
В 2019 году, невзирая на количество клиентов, которые могут употреблять формат WebP, принятие других форматов изображений, к огорчению, остается фактически постоянным: 65% не проходят этот тест, и лишь 15% проходят.
Отложенная загрузка
Lighthouse идентифицирует изображения, которые находятся ниже первого сгиба. Если эти изображения загружаются до начала интерактивного взаимодействия, тест не проходит. Тест проходит, если изображения за пределами экрана запрашиваются до того, как страничка станет интерактивной. Откладывая загрузку изображений, которые не показываются сходу, мы можем обеспечить наименьшее время до первой интерактивности.
В 2018 году лишь 22% сайтов включили отложенную загрузку.
Но в 2019 году мы смотрим большенный скачок в принятии отложенной загрузки, лишь 10% не прошли тест и 55% прошли стопроцентно:
Возможная экономия
Баллы Lighthouse — это отлично, но что по сути означают эти баллы? Тест также вычисляет, как резвее будет загружаться страничка с внедренными улучшениями, и уменьшение полезной перегрузки изображения, измеряемое в КБ. В таблице ниже я привел среднюю экономию для тестов с оценкой наименее 0,5 и для веб-сайтов с оценкой 0.
В таблице несколько ячеек выделены. Так как 66% сайтов не соответствуют советам по формату изображений, медианное значение предполагает, что 33% сайтов могут уменьшить время загрузки собственного мобильного сайта на 6,6 секунды, переключившись на изображения WebP.
Google стал реже выводить блок с похожими запросами
Возможность стремительно уменьшить время загрузки сайта на несколько секунд делает оптимизацию изображений хорошим первым шагом для увеличения скорости вашего сайта.
Заключение
Изучая результаты тестов Lighthouse по 5 миллионам страничек при помощи архива HTTP, мы обнаруживаем, что из 4 наилучших практик — лишь адаптивные изображения (с ~ 10% веб-сайтов не прошедшими тест) и отложенная загрузка (при 33% сайтов, принявших ее в течение года год) наблюдаются какие-то приметные конфигурации.
Веб-сайты, которые не проходят эти испытания оптимизации, игнорируют способности резвого улучшения производительности. Следуя советам из набора тестов Lighthouse, вы сможете найти, что время загрузки ваших мобильных веб-сайтов сократилось на несколько секунд.
Создатель: Doug Sillars
Редакция: Команда webformyself.