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

Воспользуйтесь тестом скорости веб-сайта, бесплатным и невероятно простым инструментом, который использует наши (Cloudinary) возможности изображения, чтобы вы могли измерять, диагностировать и (что особенно важно) сообщать о производительности изображения любого веб-сайта. Более того, он построен на основе WebPagetest Пэта Минана и интегрирован в него.

Заинтересованы? Читать дальше!

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

Давайте начнем с того, что конкретно делает Website Speed ​​Test. Мы начнем с того, что дадим ему URL-адрес, скажем, nytimes.photos, и нажмем «Анализ».

Тесты выполняются за минуту или две и возвращают страницу, полную результатов.

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

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

Чтобы рассчитать стоимость, инструмент должен иметь своего рода оптимальную базовую линию для измерения. Он должен быть в состоянии сказать: «Вот что вы могли бы сделать со своими изображениями, но — упс! — вот что ты сделал, и вот что ты мог спасти. Построение этой базовой линии является сложной проблемой, потому что изображения сложны, а качество субъективно. Как назло, Cloudinary потратила годы на создание набора инструментов, предназначенных для оптимального и автоматического кодирования изображений для доставки в Интернет. Тест скорости веб-сайта берет те инструменты, которые до сих пор использовались для создания эффективных изображений , и превращает их наизнанку в то, что может измерять производительность изображений . Прохладный!

Итак, вот как тест рассчитывает затраты. А буквенная оценка?

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

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

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

Инструмент предоставляет две метрики, потому что метрики выполняют две разные задачи. При сравнении веса учитываются байты, а при оценке учитываются проблемы. Обратите внимание на оба!

Диагностика конкретных проблем

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

Каждое изображение на тестируемой странице получает свой небольшой мини-отчет.

Это показывает вам как то, что вы сделали (какой размер и кодировка вашего изображения), так и то, что вы должны были сделать (формат, размеры и оптимально сжатый размер файла, который вы могли бы предоставить вместо этого). Нам снова представлены две большие сводные метрики: буквенная оценка и процент потенциальной экономии. Но чтобы действительно понять эти показатели, мы должны нажать «Увидеть больше».

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

Во-первых, есть панель «Текущее», в которой подробно рассказывается об изображении в том виде, в каком оно существует на странице. Именно здесь мы подходим к корням всех буквенных оценок, которые присваиваются на более высоких уровнях отчета. Я писал вообще об «ошибках» ранее; на вкладке «Текущие» мы можем увидеть конкретные ошибки, которые на самом деле проверяет Website Speed ​​Test. Первые три засчитываются в вашу оценку:

• Формат . Соответствует ли формат изображения его содержанию? Например, использовали ли мы GIF для нашего логотипа, когда мы должны были использовать PNG? Будет ли этот JPEG сжиматься лучше, чем WebP?
• Подходит . Соответствуют ли внутренние размеры изображения макету и экрану? Например, если изображение отображается размером 100 пикселей на экране 2×, мы должны отправлять что-то близкое к изображению шириной 200 пикселей. Мы?
• Сжатие . Обеспечивают ли настройки качества изображения хороший баланс между визуальным качеством и размером файла?

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

• Цветовое пространство . Закодировано ли изображение в приемлемом цветовом пространстве для Интернета, например sRGB?
• Глубина цвета . Используем ли мы правильное количество битов на пиксель для кодирования значений цвета? Например, изображения sRGB всегда должны кодироваться 8 битами на пиксель.
• Метаданные . Сводим ли мы встроенные метаданные к минимуму? Читатель, я видел 20-килобайтные изображения со 100-килобайтными невидимыми метаданными. Пролей свет!

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

Что может быть лучше, чем рассказать о проблеме? Дают рецепт, как это исправить. И что еще лучше, чем это? Вручают готовое решение на метафорическом блюдечке! Итак, переходим к нашей следующей панели «Оптимизированное изображение».

Здесь мы можем увидеть (и скачать!) хорошо оптимизированное изображение, сгенерированное инструментом и сравниваемое с ним. Мы получаем подробное описание настроек, которые использовались для его кодирования, и несколько интересных фактов о фактическом содержании изображения, которые Cloudinary выяснила по ходу дела.

Из-за ограниченного пространства и относительной важности последняя панель скрыта за пределами экрана. Итак, нажмите на маленький шеврон и увидите «Альтернативы формата».

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

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

Для всех, кроме самых маленьких и статичных веб-сайтов, использование теста скорости веб-сайта в качестве своего рода сложного «Сохранить для Интернета», подобного этому, не будет очень практичным. Вам нужно выяснить, как более систематически устранять проблемы, которые обнаруживает инструмент. То, как вы это сделаете, будет сильно различаться в зависимости от вашего рабочего процесса и проблемы, которую вы решаете. Чтобы решить проблемы со сжатием, возможно, вы могли бы начать использовать или даже полуавтоматизировать отличные графические интерфейсы для сжатия, такие как ImageOptim, ImageAlpha и Squash, или взломать свой терминал и начать создавать сценарии ImageMagick. При проблемах с подгонкой вам, вероятно, потребуется что-то сделать с адаптивными изображениями на вашем сайте. И если инструмент показывает вам, что вы упускаете большие потенциальные выгоды от новых форматов, таких как WebP, лучше всего начать их внедрять, обязательно используя переключение типов на стороне сервера или внутри разметки, поэтому что вы не отправляете новые форматы в неподдерживающие браузеры.

Если автоматизация всего этого самостоятельно звучит как огромный объем работы, что ж, так оно и есть! И есть ряд сервисов размещения изображений, которые с радостью автоматизируют эту работу для вас.

Хорошо, теперь, когда мы рассмотрели метрики, которые предоставляет инструмент, проблемы, которые он находит, и решения, которые он предлагает, я хотел бы уделить минуту, чтобы обсудить важный (и удобный) аспект того, как это действительно работает.

Тест скорости веб-сайта построен на основе WebPagetest

Что на самом деле делает Website Speed ​​Test в течение минуты или двух после того, как вы нажмете «Анализ изображений»? В основном ничего ! Тест скорости веб-сайта немедленно передает рассматриваемый URL-адрес другому инструменту: незаменимому WebPagetest Патрика Минана. Затем тест скорости веб-сайта бездельничает и ждет, пока WebPagetest выполнит всю тяжелую работу по загрузке и измерению страницы и ее содержимого.

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

Другими словами, Website Speed ​​Test стоит на плечах WebPagetest и не может работать без него. Так что, по меньшей мере, было волнительно, когда Патрик согласился интегрировать Website Speed ​​Test прямо в WebPagetest!

WebPagetest имеет новую вкладку на панели навигации: «Анализ изображений». Щелкните ее, и текущий набор результатов WebPagetest будет отправлен в Website Speed ​​Test для дальнейшего анализа изображения. Это потрясающе по двум причинам.

Во-первых, это означает, что если вы уже используете WebPagetest, то тест скорости веб-сайта находится всего в одном клике. (И когда вы работаете с существующим результатом WebPagetest, тест скорости веб-сайта работает намного быстрее.)

Во-вторых, вы можете отправить любой результат WebPagetest в Website Speed ​​Test. WebPagetest — это зрелый, многофункциональный инструмент. Он предлагает целый ряд полезных настроек, недоступных при запуске тестов непосредственно с webspeedtest.cloudinary.com. Например, когда вы вводите URL-адрес в большое поле на веб-сайте webspeedtest.cloudinary.com, страницы тестируются с использованием единой среды просмотра по умолчанию: Google Chrome с окном просмотра 1366 × 784 и соотношением device-pixel-ratio 1x . Невозможно получить полное представление о производительности адаптивного изображения страницы в этой единственной среде. Если тестируемая страница не масштабирует изображения, чтобы они подходили для небольших экранов с низким разрешением, или не масштабирует их, чтобы они выглядели четкими на гигантских экранах с разрешением 5K, то мы упускаем огромную производительность и возможности UX — возможности, которые предлагает Website Speed ​​Test и его единственная среда просмотра по умолчанию не может раскрыть. Не лучше ли протестировать нашу страницу на самых разных устройствах?

Начав с webpagetest.org и запустив несколько тестов в разных средах, используя либо (удобное) раскрывающееся меню «Браузер», либо (мощные) сценарии, мы можем сделать именно это.

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

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

Для кого это?

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

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

Я думаю, что тест также окажется полезным как инструмент для общения и убеждения заинтересованных сторон. Опять же, оптимизация изображений — одна из лучших вещей, которые каждый может сделать для повышения производительности страницы; это тоже довольно сложно. Тест скорости веб-сайта отлично справляется с сокращением множества мелких деталей до легко усваиваемых показателей, а затем постепенно раскрывает технические детали по мере необходимости. Это позволяет понять отчеты о тестировании скорости веб-сайта широкому кругу читателей с самым разным уровнем технических знаний. Итак, используете ли вы его, чтобы показать клиенту, что его страница может загружаться в два или три раза быстрее, или вы используете его сами, чтобы понять потенциальное влияние цветовой подвыборки 4: 2: 0, тест скорости веб-сайта. есть, чтобы помочь.

Возможности для совершенствования

Website Speed ​​Test находится в активной разработке, и это только первый релиз. У нас есть несколько идей о том, где взять его отсюда. Я уже упоминал о лучшем тестировании адаптивных изображений. Кнопка «Скачать все» тоже находится в разработке. Если у вас есть собственные идеи (или если вы обнаружите какие-либо ошибки), мы хотим услышать о них.

Наконец, если вы каким-то образом дочитали до этого места, не попробовав самостоятельно тест скорости веб-сайта, проверьте это!