Представляем инструмент для анализа изображений Website Speed Test

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

Используйте Website Speed Test, простой инструмент, который позволяет измерять, диагностировать и получать уведомления об эффективности изображений, используемых на сайте.

Что он делает?

Начнем с рассмотрения того, что конкретно делает Website Speed Test. Мы начинаем с ввода URL-адреса. Затем нажимаем “Analyze”.

Проверка занимает минуту или две, после этого инструмент возвращает страницу с результатами.

Измерение общей производительности

В самом верху страницы выводится обобщенная буквенная оценка и результат сравнение объема изображений с общими затратами на них. Сначала я хочу рассказать, как тест вычисляет «затраты».

Чтобы рассчитать затраты, инструмент должен иметь базовый уровень для измерения. Его построение – достаточно серьезная проблема. Изображения - это сложный аспект, а их качество - субъективное понятие.

Website Speed Test использует инструменты, которые до сих пор применялись для создания оптимизированных изображений. Он выворачивает их наизнанку, превращая в нечто, способное измерять производительность изображения. Вот так тест вычисляет затраты. А что относительно буквенной оценки?

Когда впервые начал выполнять тесты, я не мог понять, почему некоторые сайты, на которых изображения были на порядок выше базового уровня, получали оценку B. А другие ресурсы, общий вес которых был «всего» в 1,5 или 2 раза тяжелее базовой линии, могли получить C или D.

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

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

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

Инструмент Speed Test предоставляет две метрики, поскольку эти показатели служат двум разным целям. Сравнение объема считает байты, а оценка считает проблемы. Обратите внимание на оба показателя!

Специфические проблемы

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

«C» означает «Крутое изображение»

В нем отображается, что вы сделали (размер и колировка изображения), и что нужно сделать (формат, размеры и оптимальный объем сжатого файла, который стоило бы предоставить вместо этого). Мы снова видим два общих показателя: буквенная оценка и процент потенциальной экономии. Но чтобы понять, о чем говорят эти показатели, нужно нажать на кнопку «Подробнее».

В расширенном разделе отчета представлено большое количество информации. Он разделен на три панели. Рассмотрим каждую из них.

Подробный отчет о каждом изображении, предоставляемый инструментом после анализа

Панель “Current” подробно описывает изображение, а также то, как оно размещено на странице. Здесь можно увидеть, из чего формируется буквенная оценка. На вкладке “Current” можно увидеть конкретные ошибки, которые выявил Website Speed Test.

Первые три включаются в оценку:

• Format. Является ли формат изображения подходящим для его содержимого? Например, мы использовали GIF для нашего логотипа, когда мы должны использовать PNG? Этот JPEG сжат лучше, чем мог бы быть сжат WebP?
• Fit. Являются ли размеры изображения подходящими для разметки и экрана?
• Compression. Соблюден ли баланс между качеством изображения и размером файла?

Ниже мы расскажем о трех других показателям, которые не влияют на оценку изображения. Они предназначены для освещения проблем, на которые, нужно обратить внимание:

• Color space. Используется ли в изображении подходящая для web цветовая модель, например sRGB?
• Color depth. Используется ли правильное количество бит на пиксель для кодирования значений цвета? Например, изображения sRGB всегда должны иметь 8 бит на пиксель.
• Meta data. Минимизируются ли встроенные метаданные? Я видел изображения в 20 КБ со 100 КБ невидимых метаданных!

После выставления оценок тест объясняет их и рассказывает, что можно было бы сделать лучше. Например, изображение nytimes.photos, о котором мы уже говорили выше, было слишком большим для макета. Формат JPEG был разумным выбором, но лучше использовать WebP.

Решение потенциальных проблем выводится на панели “Optimized Image".

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

Здесь можно увидеть и загрузить оптимизированное изображение, сгенерированное и измеренное инструментом Speed Test. Мы получаем подробное описание настроек, которые были использованы для его кодирования. А также информацию о содержимом изображения, которые подготовил Cloudinary.

Из-за ограничений пространства и относительной важности последняя панель спрятана за экран.

Нажмите на маленькую стрелку и откройте панель “Format Alternatives”.

Тест кодирует изображение во всех возможных форматах, чтобы определить, какой из них в данном случае подходит лучше всего. Если «лучший» формат - это WebP или JPEG-XR, то, понадобится резервный JPEG или PNG для не поддерживающих браузеров. В данной панели можно просмотреть, загрузить и прочитать информацию об этих альтернативных версиях.

От диагноза к лечению

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

Чтобы решить проблемы со сжатием, стоит начать использовать или даже автоматизировать превосходные графические интерфейсы сжатия, такие как ImageOptim, ImageAlpha, Squash, скрипт ImageMagick.

Если инструмент Speed Test показывает, что вы упускаете выгоду от новейших графических форматов, таких как WebP, то стоит начать использовать их.

Website Speed Test построен на WebPagetest

Что делает Website Speed Test в течение минуты или двух после нажатия кнопки “Analyze Images”? По большому счету, ничего! Website Speed Test немедленно передает URL-адрес другому инструменту: незаменимому WebPagetest. Он выполнит всю сложную работу по загрузке и анализу веб-страницы и ее содержимого.

Только после того, как API WebPagetest вернет набор результатов, сайт Speed ​​Test сравнивает эти результаты с изображениями и позволяет выполнять их рекомпрессию, измерение и оценку.

Другими словами, Website Speed Test полагается на WebPagetest и не может работать без него.

В панели навигации WebPagetest появилась новая вкладка: “Analyze Images” . Кликните по ней, и текущий набор результатов WebPagetest будет отправлен в Website Speed Test для дальнейшего анализа изображений.

Благодаря такой интеграции, если вы уже используете WebPagetest, то Website Speed Test будет доступен в один клик мыши. А также сможете отправить любой результат WebPagetest в Website Speed Test.

WebPagetest - мощный, функциональный инструмент. Он предлагает большое количество полезных настроек, которые недоступны, когда вы запускаете тесты непосредственно из webspeedtest.cloudinary.com.

Например, когда вы вводите URL-адрес в большой квадрат на webspeedtest.cloudinary.com, страницы проверяются с использованием единой среды просмотра, используемой по умолчанию: Google Chrome с окном просмотра 1366 на 784 пикселя.

Невозможно получить полное представление о производительности адаптивных изображений, используемых на веб-странице из этой единственной среды. Если тестируемая веб-страница не масштабирует изображения вниз, чтобы соответствовать меньшим экранам с низким разрешением, не масштабирует изображения вверх, чтобы они выглядели четкими на гигантских экранах 5K, тогда мы упускаем огромные возможности, которые выявляет Website Speed Test. Не лучше ли тестировать нашу страницу на разных устройствах?

Начиная работу с webpagetest.org и запуская несколько тестов в разных средах, используя раскрывающееся меню “Browser” или скрипты, мы можем сделать именно это.

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

Надеемся, что в будущих версиях Website Speed Test будет реализовано более интеллектуальное тестирование изображений, чтобы подобные проблемы, связанные с отображением на разных устройствах, можно было выявить сразу.

Для кого предназначен этот инструмент?

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

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