Сравнение «Быстрый апгрейд сайта» и Google PageSpeed insights (проект LightHouse)

Сервисы Google PageSpeed insights и Lighthouse являются одинаковыми продуктами с немного различающимися интерфейсами. Сам код, проверяющий страницу, бесплатен и доступен по адресу https://github.com/GoogleChrome/lighthouse.

Далее мы сравним функционал «Быстрый апгрейд сайта» и Google PageSpeed insights. Методика сравнения:

  • Для простоты сравнения мы перечислили пункты отчёта в той формулировке, которая представлена в Google PageSpeed insights.
  • Все наши уникальные функции, которые отсутствуют у Google PageSpeed insights мы перечислили в начале таблиц.
  • Иногда Google PageSpeed insights делает бесполезные, избыточные или очень специфические проверки. Мы даём комментарии по таким проверкам.

Эта страница будет постоянно обновляться по мере выхода обновлений сервиса Быстрый апгрейд сайта.

Общее

Быстрый апгрейд сайтаPageSpeed insights
Устройства
Компьютер FullHD монитор
Компьютер Ultra HD 4k монитор
Планшет вертикально
Планшет горизонтально
Смартфон вертикально
Смартфон горизонтально

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

Быстрый апгрейд сайтаPageSpeed insights
Наш отчёт
Задержка сервера при загрузке какого-либо файла
Наличие заголовка Keep Alive
Оптимизация data:URL изображений
Оптимизация SVG изображений, включая спрайты
Много файлов шрифтов
Большое количество загружаемых иконок
Наличие сквозных CSS и JavaScript файлов
Использование монохромных шрифтов
Оптимизация монохромных шрифтов
Разбивка крупных файлов шрифтов на части

+ Мы предоставляем инструмент для оптимизации шрифтов
Отчёт PSI
Включите сжатие текста
Время до получения первого байта от сервера допустимое
Для изображений не заданы явным образом атрибуты width и height.

+ Проверяем на 6 экранах

- Указывать аттрибуты width и height - ошибка, так как размеры картинок различаются на разных экранах.
Задайте правила эффективного использования кеша для статических объектов
Избегайте большого количества переадресаций
Используйте видеоформаты для анимированного контента
Используйте предварительное подключение к необходимым доменам
Используйте современные форматы изображений
Настройте подходящий размер изображений

+ Проверяем на 6 экранах
+ Проверяем фоновые изображения
+ Проверяем data:URL изображения
Настройте показ всего текста во время загрузки веб-шрифтов
Настройте предварительную загрузку ключевых запросов
Настройте эффективную кодировку изображений
Не отправляйте устаревший код JavaScript в современные браузеры

+ Мы показываем весь неиспользуемый код, а не только определяем отдельные библиотеки.
Отложите загрузку скрытых изображений
Перейдите на протокол HTTP/2
Постарайтесь уменьшить количество запросов и размеры передаваемых данных
Предотвращение чрезмерной нагрузки на сеть
Присутствует метатег <meta name="viewport"> со свойством width или initial-scale
Удалите неиспользуемый код CSS

+ Показываем, какие строки кода удалить в инструменте Чистильщик CSS кода

Бесполезная проверка, так как отсутствует конкретика, какие именно строки нужно удалить.
Удалите неиспользуемый код JavaScript

+ Показываем какие строки кода удалить в инструменте Чистильщик JS кода

Бесполезная проверка, так как отсутствует конкретика, какие именно строки нужно удалить
Удалите повторяющиеся модули из пакетов JavaScript
Уменьшите размер кода CSS
Уменьшите размер кода JavaScript
Устраните ресурсы, блокирующие отображение

+ мы сообщаем список заблокированных ресурсов
Фасадные объекты сторонних ресурсов для отложенной загрузки
Избегайте некомбинированных анимаций

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

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

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

Ненужная проверка. Использование User Timing API актуально только во время разработки и тестирования и только на компьютере программиста.
Метод document.write() не используется

document.write() - древний и преданный забвенью метод. Эта проверка только зря раздувает размер отчёта.
Минимизируйте работу в основном потоке

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

Отнимает время своими ложноположительными срабатываниями на виджеты соцсетей и различные iframe. Проблема отсутствует для большинства CMS систем, а на нестандартных проектах требует серъёздного творческого осмысления, которое недоступно машине.
Пассивные прослушиватели событий используются для улучшения производительности при прокрутке
Избыточная проверка. Даёт мизерный прирост скорости работы JavaScript. Проблемы с быстродействием по этому поводу могут возникнуть у игр и объёмных бизнес-приложений. И они пользуются специализированными программами для таких задач.
Предзагрузите изображение для элемента "Отрисовка самого крупного контента"
Лишняя проверка. Изображение, стоящее в начале страницы (например, банер) и так загрузится первым потому, что находится в самом начале кода, сразу после подключения CSS файлов. К тому же технология предзагрузки не умеет загружать нужную картинку для используемого экрана. Таким образом, и на мониторе и на мобильном устройстве будет один и тот же файл.
Сократите время выполнения кода JavaScript

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

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

Бесполезна, так как результат состоит из файлов систем веб-аналитики и CDN сервисов. То есть, все срабатывания ложноположительные.
Устраните большие смещения макета

Бесполезная проверка. Проблемы с быстродействием по этому поводу могут возникнуть у игр и объёмных бизнес-приложений. И они пользуются специализированными программами для таких задач.
Элемент "Отрисовка самого крупного контента"

Избыточное дробление этапов загрузки страницы. Малополезная метрика.

Специальные возможности

Быстрый апгрейд сайтаPageSpeed insights
Атрибут [user-scalable="no"] не используется в элементе <meta name="viewport">, и значение атрибута [maximum-scale] больше или равно 5
Атрибуты [id] у активных элементов уникальны
В документе не используется метатег <meta http-equiv="refresh">
Для элемента <html> указано действительное значение атрибута [lang]
Документ содержит элемент <title>
У элементов изображений есть атрибут [alt]
Цвета фона и переднего плана недостаточно контрастны
Элемент <html> содержит атрибут [lang]
Элементы <input type="image"> содержат атрибут [alt]
[accesskey]: значения уникальны

Лишняя проверка. Функция использовалась очень давно и крайне редко.

Рекомендации

Быстрый апгрейд сайтаPageSpeed insights
Наш отчёт
Отзывчивый интерфейс
Мерцание фона при наведении
Ошибки в CSS коде
Наличие битых ссылок

+ Включая ссылки на внешние ресурсы.
Красивая 404 страница
Атрибуты [id] корректные
Проверка парности тегов HTML
Настройка DNS для почты
Настройка обратной DNS записи
Проверка browserconfig.xml
Наличие крупных фавиконов
Наличие фавиконов для Apple
Работа IPv6 адресов
Кликабельные телефоны и email
Наличие заголовков Strict Https
Автоматическое перенаправление HTTP на HTTPS
Доступ к системным файлам из публичной части сайта
Отчёт PSI
Изображения показываются в низком разрешении

+ Проверка на 6 экранах
Используется протокол HTTPS

+ Дополнительно проверяется IPv6 адрес
На странице используются устаревшие API
Отсутствуют изображения с некорректным соотношением сторон

+ Проверка на 6 экранах
Ошибки браузера занесены в журнал консоли
Ошибки были записаны на панели Issues в Инструментах разработчика Chrome
Разрешение на определение местоположения не запрашивается при загрузке страницы
Разрешение на отправку уведомлений не запрашивается при загрузке страницы
Тип страницы (DOCTYPE): HTML
Убедитесь, что политика CSP эффективна против атак XSS
JavaScript библиотеки и известными уязвимостями

+ Находим 450 уязвимостей, а не 130.
Элементы <input> верно используют атрибут autocomplete
У страницы правильные карты исходного кода

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

Малополезная справочная информация.
Правильно заданный набор символов

Эти данные должны передаваться в HTTP заголовке.
Регистрируется прослушиватель для события unload

Тестировали, возвратный кеш работает даже если это событие назначено.
Шрифты со свойством font-display: optional предварительно загружены

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

Поисковая оптимизация

Быстрый апгрейд сайтаPageSpeed insights
Наш отчёт
ЧПУ ссылок и файлов
Циклические ссылки
Ссылка на главную страницу
Корректный адрес URL
Наличие форматирования у больших блоков текста
Использование спам слов в заголовке
Метатеги для соцсетей
Проверка корректности изображений, указанных в метатегах для соцсетей
Грамматические ошибки в метатегах и title
Проверка микроразметки

+ Проверка микроразметки Яндекс
Проверка карты сайта
Заголовки H1-H6. Их расположение и содержимое.
Отчёт PSI
В документе есть метаописание
В документе используются шрифты оптимального размера, 100 % текста можно легко прочитать
В документе нет плагинов
Для документа указан действительный атрибут hreflang
Для документа указан действительный атрибут rel=canonical
Документ содержит элемент <title>
Код статуса HTTP действителен
Присутствует метатег <meta name="viewport"> со свойством width или initial-scale
Размер интерактивных элементов оптимален
У ссылок есть описания
У элементов изображений есть атрибут [alt]
Файл robots.txt действителен
Ссылки можно просканировать

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

Если человек закрыл страницу от индексации, значит проверять тут нечего.

PWA

Быстрый апгрейд сайтаPageSpeed insights
Манифест веб-приложения или файл service worker соответствует условиям, необходимым для установки
Манифест не содержит маскируемый значок
Не изменяет цвет адресной строки в соответствии с темой Failures: No manifest was fetched, No `<meta name="theme-color">` tag found.
Присутствует метатег <meta name="viewport"> со свойством width или initial-scale
Размер контента соответствует области просмотра

Проверяем на 6 экранах
Собственная заставка не настроена

+ Проверяем размер фавиконов
+ Проверяем их минификацию
Не регистрируется Service Worker, управляющий страницей и start_url

PWA — опциональная технология. Её использование оправдано при разработке PWA приложений для смартфонов или каких-то специфичных продуктов, где нужен офлайн функционал. Во всех остальных случаях вам может понадобится только функция отправки push уведомлений. Google PSI проверяет только сам факт использования некоторых функций PWA технологии без каких-либо полезных рекомендаций.

Оптимизация для людей с физиологическими ограничениями

Быстрый апгрейд сайтаPageSpeed insights
Атрибуты [aria-*] действительны и написаны без ошибок
Атрибуты [aria-*] соответствуют своим ролям
В списках содержатся только элементы <li> и элементы поддержки скрипта (<script> и <template>)
В форме нет полей с несколькими ярлыками
В элементах <th> и элементах с атрибутом [role="columnheader"/"rowheader"] есть описываемые ими ячейки с данными
В элементах с ролью ARIA [role] присутствуют все обязательные дочерние элементы, которые должны содержать определённый элемент [role].
Для элементов <frame> или <iframe> не указан атрибут title
Идентификаторы ARIA уникальны
Названия кнопок недоступны программам чтения с экрана
Недействительные значения атрибутов [aria-*] отсутствуют
Недействительные значения атрибутов [lang] отсутствуют
Недействительные значения атрибутов [role] отсутствуют
Нет элементов со значением атрибута [tabindex] выше 0
Проверьте, насколько элементы управления в вашем приложении различимы для программ чтения с экрана.
Страница содержит заголовок, ссылку для пропуска контента или указание региона
Текст ссылок неразличим для программ чтения с экрана
У переключателей ARIA есть доступные названия
У полей ввода ARIA есть доступные названия
У элементов [role] есть все необходимые атрибуты [aria-*]
У элементов <object> есть альтернативный текст
У элементов button, link и menuitem есть названия, доступные программам чтения с экрана
У элементов meter ARIA есть названия, доступные программам чтения с экрана
У элементов progressbar ARIA есть названия, доступные программам чтения с экрана
У элементов tooltip ARIA есть названия, доступные программам чтения с экрана
У элементов treeitem ARIA есть названия, доступные программам чтения с экрана
Элемент <body> в документе не содержит атрибут [aria-hidden="true"]
Элементам формы присвоены соответствующие ярлыки
Элементы <dl> содержат только правильно размещённые группы <dt> и <dd> и элементы <script>, <template> или <div>.
Элементы <video> содержат элемент <track> с атрибутом [kind="captions"]
Элементы заголовков расположены последовательно в порядке убывания
Элементы с атрибутом [role] содержатся в своих родительских элементах
Элементы списка (<li>) расположены внутри родительских элементов <ul>, <ol> или <menu>
Элементы списков определений расположены внутри элементов <dl>
Элементы, к которым примёнен атрибут [aria-hidden="true"], не содержат активных дочерних элементов
Ячейки внутри элемента <table>, в которых используется атрибут [headers], ссылаются на ячейки той же таблицы.
Мы используем cookie. Продолжая пользоваться сайтом, вы соглашаетесь на обработку персональных данных в соответствии с политикой конфиденциальности. Ладушки