Статус использованных фич в Lighthouse

21.08.2026 • devtools

Обновка

В недавнем апдейте Lighthouse добавился новый раздел – используемые фичи на странице.

Новая возможность позволяет узнать, были ли использованы определённые фичи веб-платформы на странице и какой поддержкой они обладают. В отличии от других инструментов по типу линтеров для JS/CSS, этот функционал работает поверх живой страницы. Более того, можно поймать потенциальные проблемы не в исходном коде, а в сторонних библиотеках и виджетах.

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

Проблемы, которые можно поймать

Список собирается по HTML/JS/CSS, используемым форматам картинок и даже сжатию ответа.

Из любопытного, что для себя отметил:

1) Могут попадаться явные прогрессивные улучшения.

Конечно, вы можете написать использование нового типа событий в PerformanceObserver и не сломать этим приложение. Или, например, использовать атрибут fetchpriority.

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

2) Есть “комбинированные” фичи.

Механизм определяет использование alpha в getContext у канваса. Подобные пересечения условий часто выходят за рамки простых проверок, которые могут сделать линтеры.

3) Ловит использование выравнивания из флексбоксов в блочной раскладке.

Да, использовать тот же самый align-content вне флексбоксов сейчас можно, однако часто это является ошибкой (где-то потерялся флексбокс). Найти такую проблему достаточно сложно. Особенно учитывая, что тот же Playwright тащит с собой фиксированные версии браузеров и не позволяет запускать старые для скриншотного тестирования.

Используем в консоли / CI

Никто не мешает сделать и небольшую автоматизацию процесса:

import { launch } from 'chrome-launcher';
import lighthouse from 'lighthouse';
 
const SITE_URL = 'https://ya.ru/';
 
const chrome = await launch({
    chromeFlags: ['--headless=new', '--no-sandbox'],
});
 
const runnerResult = await lighthouse(SITE_URL, {
    output: 'json',
    port: chrome.port,
});
const items = runnerResult?.lhr.audits.baseline.details?.items;
if (items) {
    for (const item of items) {
        console.log(`${item.featureId.text}: ${item.displayStatus.displayString}`);
    }
}
await chrome.kill();

Код выводит примерно такое:

ua-client-hints: Limited Availability
long-animation-frames: Limited Availability
...

Тем самым можно проверять релизы автоматикой и подсвечивать проблемы.

Итого

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

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

Для меня остаётся только вопрос полноты покрытия разными фичами. Условно, одно CSS свойство попадает в список, а другое – нет. Как быть уверенным, что нужное (и проблемное) вам свойство попало в список? Как будто никак.

Ну и ещё лучше бы было, если бы было апи в window? Как знать.

Почитать ещё посты