Как проверить скорость загрузки сайта: ТОП-5 сервисов проверки

Доброго времени суток, дорогие читатели блога iklife!

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

Содержание

Почему скорость загрузки сайта так важна?

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

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

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

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

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

Теперь мы переходим к самому сладкому. А именно к сервисам, с помощью которых можно провести анализ скорости загрузки ресурсов.

Онлайн-сервисы для проверки скорости загрузки сайта

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

PageSpeed Insights

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

Скопируйте адрес сайта в поле и нажмите кнопку “Анализировать”. Процесс может занимать от 30 секунд до минуты. После завершения вам будут выведены результаты.

Обычно PageSpeed Insights советует переместить JS-скрипты в нижнюю часть HTML-страницы, потому как они могут в значительной степени замедлять загрузку. Также этот инструмент “любит” давать советы по сжатию изображений, минификации CSS-файлов.

На фрилансе очень часто можно встретить заказы, когда клиент просит выполнить оптимизацию по Google PageSpeed. Вполне оправданное решение, учитывая, что после выполнения всех пунктов, вы можете ускорить свой сайт в 3 – 10 раз.

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

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

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

SeoLik

Еще один сравнительно популярный способ проверки ресурсов – SeoLik. Работает по тому же принципу, что и все остальные онлайн-инструменты. Вы вводите адрес, выбираете устройство проверки (мобильный или компьютер), после чего жмете большую цветную кнопку.

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

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

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

Причем вам даже будут предоставлены ссылки-примеры. С их помощью вы сможете быстро определить источник и далее устранить его. Удобно, не правда ли?

PR-CY

Один из старейших инструментов для проверки оптимизации ресурсов.

PR-CY работает точно так же, как и Google PageSpeed. Там даже даются ссылки на советы по оптимизации из гугловской документации.

Как видите, здесь все работает, как в предыдущем варианте. Вы просто вводите адрес, анализируете, после чего получаете результат с подробными разъяснениями.

Каждую вкладку можно раскрыть. В них содержится подробная информация по представленному пункту.

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

Уменьшить вес изображений на сайте можно как с помощью плагинов (если мы говорим о WordPress), так и вручную – используя графические редакторы или онлайн-сервисы. Последние не особо актуальны, т. к. в большинстве случаев они очень сильно портят качество картинок.

Pingdom Tools

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

Другими словами, это многофункциональный сервис, сродни Google PageSpeed. Однако, в отличие от последнего, вся информация предоставляется в удобном, разбитом на группы виде. Здесь есть подробные данные о каждом килобайте вашего сайта. Страницы, JS или CSS-файлы, их размер и многое другое.

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

Важной особенностью Pingdom является возможность тестирования из разных регионов США. То есть тесты можно произвести с двух устройств, которые находятся в разных точках страны, после чего сравнить их. Хоть разброс и не особо большой – всего 4 возможных местоположения, это позволяет определить скорость загрузки более точно.

Site Speed

Если предыдущие варианты вам не особо понравились, то вы можете попробовать Site Speed – еще один инструмент, который позволяет в подробностях узнать о проблемах оптимизации вашего проекта. Ровно точно таким же образом вы вставляете ссылку, нажимаете кнопочку и получаете результат. Все безумно просто.

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

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

Чтобы узнать подробности, мы должны кликнуть на соответствующие вкладки. Здесь они, к сожалению, не такие полные.

Web Page Analyzer

Старенький сервис, который тем не менее может быть полезен для анализа сайта. С Web Page Analyzer вы точно так же сможете проанализировать свой проект на предмет скорости загрузки и оптимизации для пользователей.

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

Сейчас Web Page не особо часто используется сеошниками и вебмастерами, потому что есть более совершенные и быстрые альтернативы. Тем не менее некоторые, особо консервативные пользователи, все еще могут отдавать предпочтение этому онлайн-инструменту.

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

Заключение

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

Как я и сказал в начале статьи, каждый инструмент предоставляет примерно одну и ту же информацию. Какому из них отдать предпочтение – решайте сами, но я бы остановился на более популярных и подробных. Таких как Google PageSpeed и Pingdom Tools.

Несмотря на то, что последний инструмент является англоязычным, он все еще остается одним из лучших. Данные показываются в удобном виде, любой опытный вебмастер или даже новичок сможет понять, что именно нужно исправлять в своем ресурсе. То же касается и Google PageSpeed.

Если вы хотите стать опытным вебмастером и зарабатывать на своих проектах, то я рекомендую вам курс Василия Блинова “Как создать блог”. Разработка сайта на WordPress, оптимизация его под поисковые системы и монетизация – все эти вещи будут рассмотрены на курсе, который постоянно обновляется и дорабатывается.

Правильное измерение скорости загрузки сайта

Официальный сертифицированный
хостинг для продуктов 1С Битрикс

Тематика страницы

СайтСправка

google pagespeed gt-metrix битрикс скорость сайта

15.10.2019

Результаты измерения скорости сайта различными сервисами типа GT-Metrix, Google PageSpeed и др. является суммарными по всему спектру технологий, начиная от хостинга и заканчивая версткой и изображениями.

Также отмечаем, что сервисы измерения скорости имеют различную специфику и рассчитаны на разные уровень подготовленности пользователей. GT-Metrix является более профессиональным инструментом предоставляющим конкретные данные в отчетах. Google PageSpeed отличается более простыми отчетами с условными сведениями, которые лишь в общих чертах отражают реальную картину.

Стоит различать скорость работы back-end (программного кода) и front-end (скорость отображения страниц сайта браузером).

• При оценке программной производительности (back-end) следует рассматривать показатели «Производительность» в администраторской части 1С Битрикс (провести тестирование длительностью в 1 или 5 минут).
• Для оценки скорости обработки страниц сайта браузером (front-end) следует проводить тестирование с помощью сервиса waterfall (GT-Metrix см. ниже), а также встроенной утилиты в браузере см. статью.

 

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

1. Список адресов (URL) страниц на которых замечена низкая скорость работы.
2. Результаты проверки интернет-соединения нужно выполнить команду: ping адрес_сайта в консоли на компьютере с которого замечена снижение скорости работы (запуск консоли в Windows: «Пуск» > «Выполнить» > ввести cmd). Приложить полученный результат выполнения команды (достаточно первые 20-30 строк).
3. Выполнить команду: tracert адрес_сайта в консоли на компьютере с которого замечена снижение скорости работы (запуск консоли в Windows: «Пуск» > «Выполнить» > ввести cmd). Приложить полученный результат выполнения команды (все строки).
4. Проверить скорость загрузки с разных браузеров (с 1 устройства). Приложить информацию по примеру: Chrome > медленно, Safari > средне, Opera > медленно.

 

1. Визуальная оценка скорости загрузки сайта должна проводиться НЕ под учетной записью администратора сайта.
   Под администраторской учетной записью страницы сайта генерируются по каждому запросу, без использования кэша. Это сделано для того, чтобы любые изменения моментально отображались для администратора по всему сайту и без дополнительных мер (принудительный сброс кэша). Именно поэтому сайт просматриваемый из администраторской учетной записи будет работать медленнее. Обычные пользователи получают кэшированную версию сайта, страницы которой загружаются существенно быстрее т.к. не генерируются на сервере под каждый запрос.
2. Просмотр сайта через сервис Вебвизор (Яндекс Метрика).

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

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

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

GT Metrix (рекомендуем)

Google PageSpeed

Расшифровка параметров из отчетов GT-Metrix:

Параметр	Расшифровка	Поясненения
PageSpeed Score	Общая оценка категории скорости сайта.	Данный параметр является итоговым на основе измерения всех технологических узлов сайта с внешней части.
YSlow Score	Оценка влияния факторов увеличивающих скорость загрузки сайта.	Суммарная оценка всех влияющих факторов на скорость загрузки сайта.
Fully Loaded Time	Общее время загрузки страницы сайта.	Время уходящее на полную загрузку страницы для пользователей (в т.ч. до возможности взаимодействия с элементами и интерфейсом).
Total Page Size	Общий размер страницы сайта указан в килобайтах или мегабайтах.	Включает в себя оценку объема данных загружаемых на сайт со сторонних источников (например, скрипты Яндекс Метрики, Google Analytics, различных виджетов в т.ч. социальных сетей и других влияют на объем данных на странице и оценку.
Requests	Количество запросов на странице сайта к внутренним и внешним источникам при каждой загрузке.	Параметр измеряет количество всевозможных обращений со страницы к скриптам, стилям, изображениям и др. при каждой загрузке страницы сайта. Чем их меньше — тем лучше.

Нижеследующие параметры GT-Metrix и нужны для разработчиков сайтов.

Наиболее наглядным отчетом является Waterfall, который визуализирует тип, объем, время и влияние данных на загрузку страницы сайта. Данный вид отчета рекомендуется для анализа разработчикам сайтов.

Рекомендуем сервис GT-Metrix в качестве наиболее точной оценки скорости работы сайта и анализа технологических аспектов влияющих на нее.

Расшифровка параметров из отчетов Google PageSpeed:

Параметр	Расшифровка	Поясненения
Время загрузки первого контента	Фактическая скорость генерации от дачи страницы хостингом (сервером).	Данный параметр является целевым при оценке скорости работы хостинга т.к. напрямую зависит от аппаратных ресурсов хостинга. Однако, в случае, если на back-end (программной части) допущены ошибки, например циклические функции, медленные запросы к базе данных и др., то параметр будет увеличен. В этом случае требуется обращаться к разработчику сайта для исправления кода.
Время загрузки достаточной части контента	Условное измерение скорости до отображения первых данных в браузере пользователя	Параметр является усредненным по части измерения скорости работы хостинга и первой «отрисовки» данных на странице сайта.
Индекс скорости загрузки	Суммарное значение факторов: от хостинга до front-end сайта.	Показатель суммирует информацию о скорости загрузки на основе большой выборки данных, начиная от скорости генерации страниц сервером и заканчивая размером изображений, объемом HTML-кода сайта и др.
Время окончания работы ЦП Время загрузки для взаимодействия	Время до возможности совершения каких-либо действий пользователей на сайте.	Параметры являются неточными т.к. скорость обработки страницы зависит от мощности устройства (ПК, ноутбук, смартфон, планшет) и типа используемого браузера. Не стоит буквально оценивать показатель времени до возможности начала взаимодействия со страницей по данным параметрам.
Макс. потенц. задержка после первого ввода	Измерение времени между запросом и откликом сайта.	Попытка сервиса измерить время между действиями. Корректно измерить данный параметр можно только внутренними средствами для веб-разработчиков, поэтому внешняя проверка параметра в Google PageSpeed является крайне условной.

Другие параметры Google PageSpeed являются дочерними и нужны для разработчиков сайтов.

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

Мы не рекомендуем строго полагаться на общие (суммарные) данные получаемые в Google PageSpeed для оценки скорости работы сайта и тем более хостинга. Данный сервис будет полезен для оценки скорости сайта с точки зрения поисковой системы Google, однако учитывайте, что параметры оценки одного и того же сайта меняются, а степень влияния показателей Google PageSpeed на фактическую оценку качества сайта не установлена и не описана в официальных источниках.

Концепция и все материалы с сайта btrxboost.com включающие в себя текстовую, графическую, видео, аудио и маркетинговую информацию, защищены российским и международным законодательством. В соответствии с соглашением об охране авторских прав и интеллектуальной собственности (ст. №1259, №1260, гл. 70 “Авторское право” ГК РФ от 18.12.2006 № 230-ФЗ) и согласно сертификату собственности авторских прав на информационные материалы RID 07N-4M-48 от 12.08.2012, а также сертификата DMCA id: f25cb914-aba8-4988-a116-13afb399bba2 от 21.06.2019.

В случае нарушений данных правил, применяются следующие меры: подача официального заявления в судебные органы в т.ч. с эскалацией запроса хостинг-провайдеру на котором расположен сайт-нарушитель, а также подача запроса на исключение сайта-нарушителя из поисковых систем согласно “Online Copyright Infringement Liability Limitation Act” по ч. II, раздел 512 к закону об авторском праве по DMCA.

Массовый тест скорости страницы — проверьте скорость вашего веб-сайта

Тест скорости страницы

MobileDesktop

Наши инструменты представлены на

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

Как использовать

Вы можете использовать наш тест скорости страницы тремя различными способами:

• Просканировать ваш веб-сайт
  Вы устанавливаете начальный URL-адрес, и мы сканируем веб-страницу, чтобы найти дополнительные URL-адреса. Сканирование ограничено 60 секундами и 500 URL-адресами.

• Список URL-адресов
  Вы отправляете список URL-адресов, для которых мы затем определяем скорость страницы.

• Ключевое слово
  Вы определяете ключевое слово, а мы определяем 50 лучших результатов в Google. Используя это, мы оцениваем скорость страницы для каждого URL.

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

Показатели

Используемые показатели соответствуют показателям Google PageSpeed ​​Insights ⇱ или Lighthouse ⇱ Performance-Tool. Ниже мы представим различные используемые критерии:

1.

Score

Это оценивает скорость веб-сайта от 0 до 100. Значения выше 90 считаются быстрыми, между 50 и 90 — средними, тогда как скорость ниже 50 считается медленной. Нажмите здесь для получения дополнительной информации ⇱.

2.

Время до первого байта (TTFB)

Указывает, как долго браузер должен ждать, чтобы получить первый байт страницы. TTFB в основном показывает, сколько времени серверу нужно для доставки ответа. Это значение должно быть меньше 600 мс. Для получения дополнительной информации нажмите здесь. ⇱

3.

First Contentful Paint (FCP)

FCP указывает время, когда браузер впервые отображает часть веб-сайта. Это важная веха, поскольку она показывает пользователю, что веб-сайт действительно загружается. Нажмите здесь для получения дополнительной информации ⇱.

4.

Отрисовка самого большого содержимого (LCP)

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

5.

Совокупное смещение макета (CLS)

CLS измеряет сумму всех сдвигов макета, произошедших за время существования страницы. Сдвиг макета происходит всякий раз, когда видимый элемент меняет положение от одного кадра к другому. Нажмите здесь для получения дополнительной информации ⇱.

6.

Общее время блокировки (TBT) / Задержка первого ввода

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

7.

Размер

Указывает общий размер всех ресурсов сайта (HTML, JS, изображения и т. д.). Чем он меньше, тем меньше данных нужно передать. Размер оказывает существенное влияние на общее время загрузки. Нажмите здесь для получения дополнительной информации ⇱.

Насколько надежны данные?

⊖

Тест скорости страницы EXPERTE.com использует те же данные, что и Google PageSpeed ​​Insights. Поэтому его результаты сопоставимы на 100%.

Какие ограничения есть у инструмента?

⊕

Во избежание злоупотреблений мы в настоящее время ограничиваем время сканирования до 60 секунд или 500 URL-адресов, а количество URL-адресов на ключевое слово ограничено до 50. Мы оставляем за собой право изменять эти ограничения в любое время.

Я обнаружил ошибку или у меня есть предложение по улучшению.

⊕

Мы очень признательны за отзывы и предложения по новым функциям. Чтобы связаться с нами, просто отправьте электронное письмо на адрес info@experte.com.

Продолжить чтение

Инструменты веб -сайта

Скорость и доступность

Security & Tech

Создайте веб -сайт

Руководства

CMS & Tools

Другие языки

Experte. com

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

Expertte.com

• О Expertte.com
• Связаться с
• Политика конфиденциальности

. Показано на

Представление инструмента «Скорочный тест на веб -сайт» — Smashing Magazine

• 11 мин.
• . Оптимизация, Производительность
• Поделиться в Твиттере, LinkedIn

Об авторе

Эрик работает евангелистом в Cloudinary и живет на прекрасном острове Оркас. Он любит визуальную коммуникацию, обучение через преподавание и строительство, а также… Больше о Эрик ↬

Веб-разработчики целыми днями пишут гипертекст, но, байт за байтом, большая часть Интернета состоит из изображений. Влияние изображений на производительность средней веб-страницы трудно переоценить. более быстрые веб-сайты имеют более широкий охват и большее влияние. Первое и самое важное, что вы можете сделать, чтобы улучшить производительность изображений на вашем веб-сайте , — это выяснить, как их измерять. Введите Website Speed ​​Test , бесплатный и невероятно простой инструмент, который использует наши (Cloudinary) интеллектуальные возможности изображения, чтобы вы могли измерять, диагностировать и (что особенно важно) сообщать о производительности изображения любого веб-сайта. Более того, он построен на основе WebPagetest Пэта Минана и интегрирован в него. Заинтересованы? Читай дальше!

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

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

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

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

Еще после прыжка! Продолжить чтение ниже ↓

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

Оценка общей эффективности

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

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

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

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

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

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

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

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

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

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

«C» означает «Классный образ, бро.»

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

Подробности, подробности.

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

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

Во-первых, это панель «Текущее», в которой содержится подробная информация об изображении в том виде, в каком оно существует на странице. Именно здесь мы подходим к корням всех буквенных оценок, которые присваиваются на более высоких уровнях отчета. Я писал вообще об «ошибках» ранее; на вкладке «Текущие» мы можем увидеть конкретные ошибки, которые на самом деле проверяет 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

Что на самом деле делает тест скорости веб-сайта в течение минуты или двух после того, как вы нажмете «Анализ изображений»? В основном ничего ! Тест скорости веб-сайта немедленно передает рассматриваемый 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 и соотношением устройств к пикселям из 1x. . Невозможно получить полное представление о странице производительность адаптивного изображения из этой единственной среды. Если тестируемая страница не масштабирует изображения, чтобы они подходили для небольших экранов с низким разрешением, или не масштабирует их, чтобы они выглядели четкими на гигантских экранах с разрешением 5K, то мы упускаем огромные возможности производительности и UX — возможности, которые предлагает Website Speed ​​Test и его единственная среда просмотра по умолчанию не может раскрыть. Не лучше ли протестировать нашу страницу на самых разных устройствах?

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

Вы можете выбрать конкретный браузер на конкретном устройстве и запустить на нем проверку изображений с помощью WebPageTest.

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

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

Для кого это?

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

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