Головне зображення з 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 або новішим, нічого встановлювати не потрібно. Вони лише читають ваші файли: без доступу до мережі, і нікуди нічого не надсилається.