Сравнение «Здоровья сайта» и 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]: значения уникальны | Лишняя проверка. Функция использовалась очень давно и крайне редко. | |||
Оптимизация для людей с физическими ограничениями | ||||
| Атрибуты [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], ссылаются на ячейки той же таблицы. | ||||
Рекомендации
| Здоровье сайта | 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 | ||||
| Проверка микроразметки | ||||
| Проверка карты сайта | ||||
Отчёт 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 технологии без каких-либо полезных рекомендаций. |