Отчёт Lighthouse — zippo.ru (мобильный)

URL: https://www.zippo.ru/ · Прогон: 2025‑10‑23 · Lighthouse 12.8.2 · User-Agent: Chrome (моб.)
Производительность
51
FCP
2.3 s 0.75
LCP
6.8 s 0.07
Speed Index
3.9 s 0.82
TBT
94 ms 0.93
TTI
12.9 s 0.13
CLS
0.517 высокий
Диагностика
95 запросов · 25 JS · 12 CSS · 5 шрифтов
Объём: ~10.3 MB · Main thread: 562.5 ms
Резюме. Главные проблемы — медленный LCP (геро‑картинка), высокий CLS (сдвиги вёрстки), блокирующий рендер CSS, тяжёлые изображения и сторонние скрипты (reCAPTCHA, Яндекс Метрика, Sendsay). Потенциал: −2–3 s к LCP, −2–4 s к TTI, CLS < 0.1, −3–5 MB суммарного веса.

Ключевые находки

Изображения: оптимизация

РесурсПроблемаОценка экономииДействия
advantages.jpgФормат/размервысокая (LCP −2.7 s)WebP/AVIF, srcset/sizes, fetchpriority="high"
360.jpgКрупный фонвысокаяWebP/AVIF, preload как as="image"
Zazhigalki-20_1.jpgКрупный фонвысокаяWebP/AVIF
Z_sayt-_1_.jpgКрупный фонвысокаяWebP/AVIF
MAKET_zazhigalki-360.jpgКрупный фонвысокаяWebP/AVIF
Giftcard.pngНет srcset/sizes~25.7 KBДобавить srcset/sizes, WebP

Рендер-блокирующие ресурсы

РесурсТипЭффектРекомендация
libs.cssCSSблок ~880 mspreload + onload, критический CSS inline
main.cssCSSблок ~880 mspreload + onload, критический CSS inline
inputmask.min.jsJS (unmin)~4 KBМинифицировать, грузить по необходимости

Сторонние скрипты

ПровайдерРесурсTransferБлокировкаРекомендация
Google reCAPTCHArecaptcha__ru.js~357.8 KB84.9 msФасад/по клику, только на формах
Яндекс Метрикаtag.js, _tag_ec.js~98.4 KB27.08 msasync, отложенная загрузка (idle/таймер)
Sendsaytracking_v2.min.js~49.2 KB0 msСжатие, условное подключение, по необходимости

Кэширование и компрессия

РесурсПроблемаTTLРекомендация
tracking_v2.min.jsнет кэша0 msВключить кэш у провайдера/через прокси
tag.jsмалый TTL~3600000 msУвеличить TTL/версионирование
_tag_ec.jsмалый TTL~7190000 msУвеличить TTL/версионирование
advantages.jpgвысокий вес~30 днейWebP/AVIF + длинный TTL с хешем
360.jpgвысокий вес~30 днейWebP/AVIF + длинный TTL с хешем
и другие крупные фонывысокий вес~30 днейWebP/AVIF + длинный TTL с хешем

Рекомендации (приоритет)

  1. LCP и изображения: перевести геро‑картинку в WebP/AVIF; srcset/sizes; fetchpriority="high"; decoding="async"; preload для фонового LCP.
  2. CSS не блокирует: вынести критический CSS inline; подключать остальные через preload + onload.
  3. CLS ↓: явные размеры width/height, aspect-ratio, резервировать место для динамики (метрика/recaptcha/баннеры).
  4. Третьи стороны: reCAPTCHA — фасад/по клику; Метрика — async, requestIdleCallback/таймер; отключить ненужные трекеры.
  5. Кэш/сжатие (IIS): включить gzip/динамическое сжатие; долгое max-age для версионированных css/js/webp/avif; MIME для WebP/AVIF.
  6. Дополнительно: preconnect/dns-prefetch к внешним доменам; loading="lazy" для всего ниже фолда.

Примеры внедрения

Критический CSS и не блокирующие стили:

<style>/* critical: шапка/герой */</style>
<link rel="preload" as="style" href="/css/libs.css" onload="this.rel='stylesheet'">
<link rel="preload" as="style" href="/css/main.css" onload="this.rel='stylesheet'">

LCP изображение:

<img src="/images/advantages_960.webp"
     srcset="/images/advantages_480.webp 480w, /images/advantages_960.webp 960w, /images/advantages_1440.webp 1440w"
     sizes="(max-width:600px) 480px, (max-width:1024px) 960px, 1440px"
     fetchpriority="high" decoding="async" alt="Zippo advantages"
     width="1440" height="600">

Фасад для reCAPTCHA и отложенная Метрика:

document.getElementById('unlock-form').addEventListener('click', () => {
  const s = document.createElement('script');
  s.src = 'https://www.google.com/recaptcha/api.js?hl=ru';
  s.async = true; s.defer = true;
  document.head.appendChild(s);
});
const loadAnalytics = () => {
  const ym = document.createElement('script');
  ym.src = 'https://mc.yandex.ru/metrika/tag.js';
  ym.async = true; document.head.appendChild(ym);
};
window.requestIdleCallback ? requestIdleCallback(loadAnalytics) : setTimeout(loadAnalytics, 3000);