От автора: изображения – это огромная часть Интернета. На среднестатистической веб-странице изображения составляют 51% загруженных байтов, поэтому любое улучшение их скорости или размера оказывает значительное влияние на производительность.
Сегодня, мы рады сообщить вам об инструменте тестирования оптимизации изображений Cloudflare. Просто введите URL-адрес своего веб-сайта, и мы проведем серию автоматических тестов, чтобы определить, есть ли какие-либо возможные улучшения, которые вы могли бы произвести для оптимизации изображений.
Как скорость влияет на пользователей
Каждый, кто когда-либо просматривал веб-страницы, сталкивался с медленной загрузкой веб-сайта. Часто это является результатом плохо оптимизированных изображений на веб-странице, которые либо слишком велики для целевого назначения, либо были встроены на страницу с недостаточной информацией.
Загрузка изображений на странице может занять утомительно много времени, поскольку пиксели мучительно заполняются сверху вниз; или, что еще хуже, они могут вызвать сдвиги в макете страницы. Эти проблемы серьезно раздражают пользователей, и с августа 2021 года поисковые системы наказывают такие страницы соответствующим образом.
Понятно, что медленная загрузка страницы отрицательно сказывается на «показателе отказов» страницы, который представляет собой процент посетителей, которые быстро уходят со страницы. В частности, на сайтах электронной коммерции показатель отказов обычно имеет прямое денежное влияние, а страницы обычно содержат много изображений. Крайне важно оптимизировать все изображения на ваших веб-страницах, чтобы снизить исходящий трафик, повысить свою эффективность в рейтинге поисковых систем и, в конечном итоге, обеспечить удобство для пользователей.
Измерение скорости
С конца августа 2021 года Google использует Core Web Vitals для количественной оценки производительности страниц при оценке рейтинга результатов поиска . Эти метрики представляют собой три числа: наибольшая отрисовка содержимого (LCP) , задержка первого ввода (FID) и совокупный сдвиг макета (CLS) . Они приблизительно соответствуют впечатлениям от загрузки, интерактивности и визуальной стабильности соответственно.
CLS и LCP — две метрики, которые мы можем улучшить, оптимизируя изображения. Высокое значение CLS указывает на то, что происходит смещение больших объемов макета страницы при загрузке изображений. LCP измеряет время, необходимое для рендеринга самого большого изображения или текстового блока в окне просмотра.
Их можно измерить «в полевых условиях» с помощью аналитики Real User Monitoring (RUM), такой как веб-аналитика Cloudflare, или в «лабораторной среде» с помощью инструмента тестирования оптимизации изображений Cloudflare.
Как оптимизировать скорость
Габаритные размеры
Одно из самых значительных улучшений производительности, которое может сделать автор веб-сайта, — это обеспечить доставку изображений с соответствующими размерами. Изображения, сделанные современной камерой, могут быть действительно огромными, а некоторые современные флагманские телефоны оснащены гигантскими сенсорами. Например, Samsung Galaxy S21 Ultra оснащен сенсором на 108 МП, который захватывает изображение размером 12000 на 9000 пикселей. У того же телефона ширина экрана всего 1440 пикселей. Физически невозможно отобразить каждый пиксель фотографии на этом устройстве: для альбомной фотографии может отображаться только 12% столбцов пикселей.
Вставка этого изображения на веб-страницу представляет собой ту же проблему, но на этот раз это изображение и все его неиспользуемые пиксели отправляются через Интернет. В конечном итоге это создает ненужную нагрузку на сервер, более высокие затраты на исходящие данные и более длительное время загрузки для посетителей. Это еще больше усугубляется для посетителей с мобильных устройств, поскольку они часто используют более медленное соединение и имеют ограничения на использование данных. При быстром подключении 3G эта фотография 108 МП может занять 26 МБ как тарифного плана посетителя, так и исходящей пропускной способности веб-сайта, а загрузка займет более двух минут!
Может возникнуть соблазн всегда доставлять изображения с максимально возможным разрешением, чтобы избежать «блочных» или пиксельных изображений, но если изменение размера выполнено правильно, это не проблема. «Блочные» артефакты обычно возникают, когда изображение обрабатывается несколько раз (например, изображение многократно выгружается и загружается пользователями на платформе, которая сжимает его). Пиксельные изображения возникают, когда изображение было уменьшено до размера, меньшего, чем размер экрана, на котором оно отображается.
Итак, как же авторам веб-сайтов избежать таких ошибок и обеспечить доставку изображения правильного размера на устройства посетителей? Есть два основных подхода.
Использование srcset и sizes
При добавлении изображения на веб-страницу автор обычно указывает атрибут src для тега img:
<img src="hello_world_12000.jpg" alt="Hello, world!" />
С 2017 года все современные браузеры поддерживают более динамичный атрибут srcset. Это позволяет авторам устанавливать несколько источников изображений в зависимости от соответствующих медиа-условий браузера посетителя:
<img srcset="hello_world_1500.jpg 1500w, hello_world_2000.jpg 2000w, hello_world_12000.jpg 12000w" sizes="(max-width: 1500px) 1500px, (max-width: 2000px) 2000px, 12000px" src="hello_world_12000.jpg" alt="Hello, world!" />
Здесь с помощью атрибута srcset мы сообщаем браузеру, что существует три варианта изображения, каждый с разной внутренней шириной: 1500 пикселей, 2000 пикселей и исходные 12000 пикселей. Затем браузер оценивает медиа условия в sатрибуте size ( (max-width: 1500px) и (max-width: 2000px)), чтобы выбрать соответствующий вариант изображения из атрибута srcset. Если ширина области просмотра браузера меньше 1500 пикселей, будет загружен вариант изображения hello_world_1500.jpg; если ширина области просмотра браузера составляет от 1500 до 2000 пикселей, будет загружен вариант изображения hello_world_2000.jpg; и, наконец, если ширина области просмотра браузера больше 2000 пикселей, браузер загрузит изображение hello_world_12000.jpg.
Подобное поведение также возможно с элементом picture, используя дочерний элемент source, который поддерживает множество других селекторов.
Подсказки клиентов
Подсказки клиентов- это стандарт, который некоторые браузеры выбирают для реализации, а некоторые нет. Они представляют собой набор заголовков HTTP-запросов, которые сообщают серверу об устройстве клиента. Например, браузер может прикрепить заголовок Viewport-Width при запросе изображения, которое информирует сервер о ширине окна просмотра этого конкретного браузера (обратите внимание, что указанный заголовок в настоящее время переименован в Sec-CH-Viewport-Width).
Это значительно упрощает разметку в предыдущем примере — по сути, никаких изменений исходного HTML не требуется:
<img src="hello_world_12000.jpg" alt="Hello, world!" />
Если подсказки клиентов поддерживаются, когда браузер может прикрепить следующий заголовок: Viewport-Width: 1440.
После этого сервер может автоматически обслуживать другой вариант изображения (например hello_world_1500.jpg), несмотря на то, что изначально в запросе было указано изображение hello_world_12000.jpg.
Позволяя браузерам запрашивать изображение с соответствующими размерами, мы экономим трафик и время как для сервера, так и для посетителей.
Формат
JPEG, PNG, GIF, WebP, а теперь и AVIF. AVIF — это новейший формат изображений, получивший широкую поддержку, и он часто превосходит предыдущие форматы. AVIF поддерживает прозрачность с альфа-каналом, поддерживает анимацию и обычно на 50% меньше, чем файлы JPEG (по сравнению с уменьшением WebP всего на 30%).
В прошлом году мы добавили формат AVIF в продукт Cloudflare Image Resizing, как только Google Chrome добавил его поддержку. Firefox 93 (выпуск которого запланирован на 5 октября 2021 года) станет первым стабильным выпуском Firefox, и, учитывая, что Microsoft и Apple являются членами AVIF Alliance for Open Media , мы надеемся вскоре увидеть поддержку в Edge и Safari. До появления этих современных форматов мы также видели инновационные подходы к улучшению загрузки изображения на веб-страницах. BlurHash — это метод встраивания очень небольшого представления изображения в разметку HTML, которое может быть немедленно обработано и действует как заполнитель, пока не загрузится окончательное изображение. Это маленькое представление (хэш) дает размытое сочетание цветов, аналогичное финальному изображению, и, таким образом, упрощает загрузку.
Progressive JPEG — похожий по действию, но является встроенной функцией самого формата изображения. Вместо того, чтобы кодировать байты изображения сверху вниз, байты упорядочиваются по возрастанию уровней детализации изображения. Это обеспечивает более тонкую загрузку, когда пользователь сначала видит изображение низкого качества, которое постепенно «улучшается» по мере загрузки большего количества байтов.
Качество
Новые форматы изображений (WebP и AVIF) поддерживают сжатие без потерь, в отличие от своего предшественника, JPEG. Сжатие без потерь может быть подходящим вариантом для некоторых целей, но для большинства веб-сайтов скорость имеет приоритет, и незначительная потеря качества стоит потраченного времени и сэкономленных байтов.
Butteraugli и SSIM — это примеры алгоритмов, которые приблизительно соответствуют нашему восприятию качества изображения, но в настоящее время их сложно автоматизировать, и поэтому их лучше всего настраивать вручную.
Разметка
Все предыдущие методы уменьшают количество байт, используемых изображением. Это отлично подходит для повышения скорости загрузки изображений и оценки LCP. Однако для улучшения показателя совокупного сдвига макета (CLS) мы должны минимизировать изменения макета страницы. Это можно сделать, заранее сообщив браузеру размер изображения.
На плохо оптимизированной веб-странице изображения будут встраиваться без их размеров в разметке. Браузер может узнать о размерах изображения только после получения байт заголовка изображения. Эффект заключается в том, что браузер сначала отображает страницу, на которой изображение занимает ноль пикселей, а затем внезапно перерисовывает его в соответствии с размерами этого изображения перед фактической загрузкой самих пикселей изображения. Это раздражает пользователей и серьезно влияет на удобство использования.
Важно включить размеры изображения в разметку HTML, чтобы браузер мог выделить место для изображения еще до того, как оно начнёт загружаться. Это предотвращает ненужные перерисовки и уменьшает сдвиг макета. Можно даже установить размеры при динамической загрузке адаптивных изображений: сообщая браузеру высоту и ширину исходного изображения, при условии, что соотношение сторон постоянное, браузер автоматически вычислит правильную высоту даже при использовании селектора ширины.
<img height="9000" width="12000" srcset="hello_world_1500.jpg 1500w, hello_world_2000.jpg 2000w, hello_world_12000.jpg 12000w" sizes="(max-width: 1500px) 1500px, (max-width: 2000px) 2000px, 12000px" src="hello_world_12000.jpg" alt="Hello, world!" />
Наконец, отложенная загрузка — это метод, который сокращает объем работы, которую браузер должен выполнять в начале загрузки страницы. Откладывая загрузку изображений только до того момента, когда они понадобятся, браузер может отдавать приоритет более важным ресурсам, таким как шрифты, стили и JavaScript. Устанавливая свойству изображения loading значение lazy, вы указываете браузеру загружать изображение только тогда, когда оно входит в область просмотра. Например, на сайте электронной коммерции, который отображает сетку продуктов, это будет означать, что страница загружается быстрее и плавно извлекает изображения, когда пользователь прокручивает страницу вниз. Функция отложенной загрузки поддерживается всеми основными браузерами, кроме Safari, в котором в настоящее время эта функция скрыта за экспериментальным флагом.
<img loading="lazy" ... />
Хостинг
Наконец, вы можете улучшить загрузку изображений, разместив все изображения страницы вместе в одном и том же домене. Если каждое изображение размещается в разных доменах, браузеру нужно выполнять поиск в DNS, создавать TCP-соединение и подтверждать TLS для каждого отдельного изображения. Когда все они расположены в одном домене (особенно если это тот же домен, что и сама страница), браузер может повторно использовать соединение, что повышает скорость загрузки изображений.
Протестируйте свой сайт
Мы рады объявить о запуске инструмента тестирования оптимизации изображений Cloudflare. Просто введите URL-адрес своего веб-сайта, и мы проведем серию автоматических тестов, чтобы определить возможные улучшения, которые вы могли бы внести для оптимизации изображений.
Мы используем WebPageTest и Lighthouse для вычисления Core Web Vitals для двух версий вашей страницы: одной как исходной, а другой с автоматической оптимизацией Cloudflare. Эта оптимизация выполняется с помощью Cloudflare Worker для изменения размера изображения и преобразования формата и качества изображения.
Мы предоставим ключевые сводные показатели эффективности вашей веб-страницы, включая вышеупомянутый совокупный сдвиг макета (CLS) и наибольшую отрисовку содержимого (LCP), а также подробный анализ каждого изображения на вашей странице и возможные оптимизации.
Автор: Greg Brimble
Источник: blog.cloudflare.com
Редакция: Команда webformyself.
Читайте нас в Telegram, VK, Яндекс.Дзен