npm · v2.0.2 · 35 tests · LIVE
CSS OverdrawCSS Оверклок
AuditorАудитор
35 automated tests · Score 0-100 · A-F grades · Lighthouse plugin.
Find expensive paint operations before they kill your performance.
35 автоматических тестов · Оценка 0-100 · Оценки A-F · Плагин Lighthouse.
Находи дорогие операции отрисовки до того, как они убьют производительность.
/ install
Works from the command line
Запускается из командной строки
Zero config. One command. Detailed HTML heatmap or JSON report ready in seconds.
Без настройки. Одна команда. Подробная HTML-тепловая карта или JSON отчёт за секунды.
CLI usage
CLI использование
$ npx overdraw-audit https://example.com
$ npx overdraw-audit https://site.com --report heatmap.html
$ npx overdraw-audit https://site.com --format json
$ npx overdraw-audit https://site.com --fail-under 70 --verbose
$ npx overdraw-audit https://site.com --width 1440 --height 900
📦
Install
Установка
$ npm install @aporialab/overdraw-audit
Programmatic API
Программный API
import { OverdrawAuditor } from
'@aporialab/overdraw-audit';
const auditor = new OverdrawAuditor();
const report = await
auditor.audit('https://example.com');
console.log(report.score);
console.log(report.grade);
All CLI flags
Все CLI флаги
--report
Output path for HTML heatmapПуть для HTML тепловой карты
--format
Output format: json | htmlФормат вывода: json | html
--fail-under
Exit code 1 if score below N (CI gate)Код выхода 1 если оценка ниже N (CI)
--verbose
Print detailed per-element outputПодробный вывод по каждому элементу
--width
Viewport width in pixels (default 1280)Ширина viewport в пикселях (по умолч. 1280)
--height
Viewport height in pixels (default 720)Высота viewport в пикселях (по умолч. 720)
/ scoring
Performance scoring system
Система оценок производительности
Every audit produces a composite score from 0 to 100 and a letter grade, so you know exactly where your CSS paint budget stands.
Каждый аудит выдаёт составную оценку от 0 до 100 и буквенную оценку — ты точно знаешь, где стоит CSS бюджет отрисовки.
A
90 – 100
Production ready
Готово к проду
Minimal overdraw. Excellent paint performance.
Минимальный оверклок. Отличная производительность отрисовки.
B
75 – 89
Minor issues
Мелкие проблемы
A few expensive operations. Low user impact.
Несколько дорогих операций. Низкое влияние на пользователя.
C
60 – 74
Moderate issues
Умеренные проблемы
Noticeable paint overhead. Optimisation recommended.
Заметные накладные расходы. Рекомендуется оптимизация.
D
40 – 59
Performance impact
Влияние на прод.
Significant overdraw. Users may notice jank.
Значительный оверклок. Пользователи могут замечать торможение.
F
0 – 39
Critical issues
Критические проблемы
Severe overdraw. Page performance critically affected.
Критический оверклок. Производительность страницы сильно пострадала.
/ tests
35 tests across 5 categories
35 тестов в 5 категориях
The auditor inspects every element for the most expensive CSS paint and compositing operations the browser has to deal with.
Аудитор проверяет каждый элемент на самые дорогостоящие операции отрисовки и компоновки, с которыми приходится работать браузеру.
~7 tests
🔭
backdrop-filter
Blur effects that force browser compositing layer creation. Extremely expensive on mobile.
Эффекты размытия, вынуждающие браузер создавать слои компоновки. Очень дорого на мобильных устройствах.
~7 tests
🌑
box-shadow
Expensive paint, multiple shadows and large blur radii that repaint on every scroll.
Дорогостоящая отрисовка, множество теней и большие радиусы размытия, требующие перерисовки при каждом скролле.
~7 tests
🪟
opacity stacking
Nested opacity creates stacking contexts multiplying compositing cost with every layer.
Вложенные opacity создают стекинг-контексты, умножая стоимость компоновки с каждым слоем.
~7 tests
🎨
mix-blend-mode
Blend modes require GPU overlay planes. Full-screen blends can tank frame rate.
Режимы наложения требуют GPU оверлей-плоскостей. Полноэкранные смеси могут обвалить FPS.
~7 tests
✨
filter
CSS filters including drop-shadow trigger GPU acceleration and compositing overhead on every frame.
CSS фильтры, включая drop-shadow, задействуют GPU-ускорение и накладные расходы компоновки на каждый кадр.
/ api
Programmatic API
Программный API
Integrate overdraw auditing directly into your build pipeline, CI, or custom tooling using the TypeScript API.
Интегрируй аудит оверклока прямо в сборку, CI или собственный инструментарий через TypeScript API.
OverdrawAuditor
Main class for running audits programmatically.
Основной класс для запуска аудитов программно.
import {
OverdrawAuditor,
OffenderReport,
generateHeatmapReport
} from '@aporialab/overdraw-audit';
const auditor = new OverdrawAuditor({
width: 1440,
height: 900,
verbose: true
});
const result = await
auditor.audit('https://example.com');
OffenderReport interface
Typed result for each detected offending element.
Типизированный результат для каждого найденного элемента-нарушителя.
interface OffenderReport {
selector: string;
category: OverdrawCategory;
severity: 'low' | 'medium' | 'high';
cssProperty: string;
cssValue: string;
boundingBox: DOMRect;
penalty: number;
suggestion: string;
}
const html = await generateHeatmapReport(
result.offenders
);
fs.writeFileSync('heatmap.html', html);
/ lighthouse
Lighthouse plugin
Плагин для Lighthouse
Drop the plugin into your Lighthouse config and get an overdraw score alongside Performance, Accessibility and Best Practices.
Добавь плагин в конфиг Lighthouse и получай оценку оверклока рядом с Performance, Accessibility и Best Practices.
lighthouse-plugin-overdraw
A first-class Lighthouse plugin that adds an Overdraw category to your reports. Works in CI, Chrome DevTools, PageSpeed Insights API.
Плагин Lighthouse первого класса, добавляющий категорию Overdraw в твои отчёты. Работает в CI, Chrome DevTools, PageSpeed Insights API.
CI-ready
DevTools
PageSpeed API
Install plugin →
Установить плагин →
lighthouserc.js
lighthouserc.js
module.exports = {
plugins: [
'lighthouse-plugin-overdraw'
],
settings: {
onlyCategories: [
'performance',
'overdraw'
]
}
};
Start auditing performance today
Начни аудит производительности сегодня
Zero dependencies to worry about. Just run and get results.
Никаких зависимостей для беспокойства. Просто запусти и получи результаты.
$
npm install @aporialab/overdraw-audit