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

Ссылочный блог

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

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

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

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

Посмотрите, что именно делает тест скорости веб-сайта. Начните с ввода URL-адреса. Затем нажмите кнопку Analyse (Анализ).

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

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

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

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

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

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

Когда я начал выполнять тест, я не мог понять, почему некоторые его места находятся в классе размеров выше базовой линии. Или г.

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

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

ЧИТАТЬ ЕЩЁ:  17 способов продвижения бизнеса в интернете с минимальными затратами

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

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

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

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

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

'C' означает "крутой образ".

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

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

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

В нем содержатся подробные ссылки на каждое изображение после анализа.

В таблице 'Current' содержится подробное описание изображения и его размещения на странице. Здесь вы можете увидеть, каков объем письма. На вкладке "Текущие" отображаются конкретные ошибки, обнаруженные в ходе тестирования скорости веб-сайта.

Первые три включены в оценку.

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

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

  • Цветовое пространство. Используется ли в изображении удобная для интернета цветовая модель, например SRGB?
  • Глубина цвета. Были ли использованы правильные биты на пиксель для значений цвета? Например, изображения SRGB всегда требуют 8 бит на пиксель.
  • Метаданные. Минимизируйте созданные метаданные. Мы видели фотографии размером 20 кб с 100 кб невидимых метаданных!
ЧИТАТЬ ЕЩЁ:  12 лучших плагинов онлайн-чата для WordPress

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

Решения возможных проблем показаны в таблице "Оптимизированные изображения".

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

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

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

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

Нажмите на маленькую стрелку, чтобы открыть таблицу "Альтернативные формы".

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

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

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

Стоит даже использовать или автоматизировать очень сжатые графические интерфейсы, такие как ImageOptim, Imagealpha, Schash и сценарии ImageMagick для решения проблем сжатия.

Если инструменты тестирования скорости показывают, что вы теряете преимущества современной графики, такой как WebP, стоит начать их использовать.

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

Что делает тест скорости веб-сайта за минуту или две после нажатия кнопки "Анализировать изображение"? Практически ничего! Website Speed Test немедленно передает URL-адрес другому инструменту — необходимому WebPageTest. Он выполняет всю тяжелую работу по чтению и анализу веб-сайта и его содержимого.

ЧИТАТЬ ЕЩЁ:  Браузер сообщает, что сайт ненадёжный – о чем это говорит

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

Другими словами, тест скорости веб-сайта основан на WebPageTest и не может функционировать без него.

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

На панели навигации Webgetest появилась новая вкладка: "Изображения анализа". Нажав на эту кнопку, вы отправите текущий набор результатов WebPagetest в Website Speed Test, который в дальнейшем определит разрешение изображения.

Благодаря этой интеграции тест скорости веб-сайта находится всего в одном клике от вас, если вы уже используете WebPageTest. Вы также можете отправить эффект Webgetest на тест скорости сайта.

WebPageTest — это мощный инструмент с богатым характером. Он предлагает множество полезных настроек, которые недоступны при запуске теста непосредственно с сайта webspeedtest.cloudinary.com.

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

Эта уникальная среда не дает полного представления об эффективности адаптированных изображений, используемых на сайте. Если тестируемый сайт увеличивает изображения, делая их неподходящими для небольших экранов с низким разрешением, или увеличивает изображения, чтобы они выглядели четкими на огромном экране 5K, он упускает огромную возможность, открытую тестом скорости сайта. Вы бы хотели попробовать страницу на разных устройствах?

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

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

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

Оцените статью