Главное изображение с loading="lazy" рядом с preload того же файла, preload шрифта без crossorigin, из-за которого шрифт скачивается дважды, link rel="preload" без значения as, который браузер игнорирует: каждая такая ошибка незаметно ухудшает Largest Contentful Paint вашей страницы. То же самое делают изображения без width и height, из-за которых прыгает текст, чат-виджет, синхронно загружаемый в head, и иллюстрация на 600 КБ, которую никто не уменьшил. Этот навык находит такие ошибки и другие ошибки загрузки, перечисленные ниже, до выхода страницы и подсказывает, как исправить каждую.

Ваш агент запускает сканер для ваших HTML-страниц и шаблонов (Liquid, Nunjucks, Handlebars, EJS, ERB, Twig), компонентов Vue, Svelte и Astro, JSX/TSX, JavaScript, который генерирует разметку, и CSS. Он читает теги так, как их пишут фреймворки (выражения и spread в JSX, привязанные атрибуты Vue, блоки шаблонов), знает, что next/image, Image из Astro и NgOptimizedImage из Angular загружаются лениво, если не помечены priority, пропускает комментарии, запасной вариант в noscript и значения, которые шаблоны подставляют во время выполнения, и не трогает стандартные сниппеты Google Tag Manager, gtag, Google Fonts (с display=swap) и Cookiebot. Для файлов изображений, которые используют ваши страницы, он читает только размер файла. Он никогда не запускает, не собирает и не загружает ваш сайт. Результат: BLOCK, REVIEW или NOT FLAGGED с указанием файла, строки, причины и более безопасного подхода, а каждое правило ссылается на документацию web.dev, стандарт HTML или документацию Chrome, на которых оно основано. Секреты никогда не выводятся.

Что проверяется

BLOCK (исправить до выпуска)

• P01: изображение, для которого задан preload (link rel="preload" или priority/preload в next/image, Astro или Angular) и одновременно loading="lazy", при этом на странице нет его копии с немедленной загрузкой
• P02: link rel="preload" без допустимого значения as (браузер ничего не загружает)
• P03: preload шрифтов или fetch без crossorigin (загружаются дважды)
• P04: document.write прямо на странице для скрипта с другого хоста без async или defer

REVIEW (проверить до релиза)

• P11: ленивые изображения, похожие на элементы первого экрана (fetchpriority="high", первое изображение в body или имя вроде hero, banner и подобных)
• P12: элементы img без width и height (размеры, заданные в собственном или подключённом CSS страницы, учитываются)
• P13: скрипты в head без async, defer или type="module"
• P14: @font-face без font-display и URL Google Fonts без display=
• P15: цепочки @import в CSS, которые браузеру приходится проходить по одному
• P16: data: URI длиннее 10 000 символов, встроенные в HTML, CSS или JavaScript
• P17: iframe (видео, карты, виджеты) без атрибута loading
• P18: файлы изображений больше 500 КБ, используемые страницей, компонентом или таблицей стилей
• P19: srcset с дескрипторами ширины и без sizes

Что входит в комплект

• Сканер (Python 3.9+, только стандартная библиотека)
• Руководство по правилам с причиной, более безопасным подходом и ссылкой на официальный источник для каждого правила
• Рискованный и безопасный примеры проектов (статический сайт и страница Next.js), а также настоящий отчёт сканера по рискованному

Ограничения

Сканер читает каждый файл отдельно и не знает размеров экрана, поэтому не может определить, какое изображение на самом деле является элементом LCP: правило первого экрана лишь подсказка, которую нужно подтвердить. CSS, который страница сама не подключает и не импортирует (глобальная таблица стилей макета, CSS-модули, CSS-in-JS), preload в файле макета или в HTTP-заголовках и разметка, создаваемая во время выполнения, не видны. Он не измеряет INP, время ответа сервера и стоимость сторонних скриптов; подтвердите результат с помощью Lighthouse или PageSpeed Insights. NOT FLAGGED не является гарантией.

Содержимое

Один ZIP-файл с 25 файлами: SKILL.md, сканер в scripts/ (5 файлов Python), references/rules.md (все правила с причиной и более безопасным подходом) и examples/ (17 файлов примеров плюс report.md, настоящий вывод сканера по рискованному примеру).

Как использовать: это навык для агента: папка с файлом SKILL.md и скриптами Python, которые может запускать ИИ-агент для программирования, например Claude Code, Cursor или Codex CLI. Распакуйте архив в папку навыков вашего агента (для Claude Code: ~/.claude/skills/), затем попросите агента проверить ваш проект. Скрипты также работают самостоятельно с Python 3.9 или новее, ничего устанавливать не нужно. Они только читают ваши файлы: без доступа к сети, и никуда ничего не отправляется.