RK
English

1 хв читання Оновлено

Як цей сайт тримає Lighthouse 100 на мобільному

Статична збірка Astro, жодного клієнтського фреймворку та сувора CSP — три рішення, що тримають усі чотири категорії Lighthouse на позначці 100.

Критерій релізу для цього сайту простий: Lighthouse 100 / 100 / 100 / 100 на мобільному, заміряний на продакшні. Ось що насправді це забезпечує.

Майже не надсилати JavaScript

Найшвидший скрипт — той, якого ви не надсилаєте. Увесь сайт відвантажує два крихітні інлайн-скрипти ініціалізації та два невеликі модулі з того самого походження — перемикач теми й перемикач мови. Усе інше — це статичний HTML і один написаний вручну стиль. Немає фреймворку, який треба гідратувати, тож Total Blocking Time лишається нульовим.

Зробити сувору CSP інваріантом збірки

Best Practices падає тієї ж миті, коли в консоль потрапляє порушення Content-Security-Policy. Замість сподівань збірка падає, якщо хоч один інлайн-скрипт не покрито хешем:

// astro.config.mjs
security: {
  csp: {
    algorithm: "SHA-256",
    scriptDirective: { hashes: SCRIPT_HASHES },
  },
}

Крок postbuild перехешовує кожен інлайн-скрипт у dist/ і перевіряє, що хеш присутній у CSP <meta> тієї сторінки. Розходження стає червоною збіркою, а не тихою регресією в проді.

Резервувати місце під усе

Cumulative Layout Shift — це здебільшого про шрифти та зображення. Шрифти вантажаться з font-display: optional і підмножинами, обмеженими unicode-range, тож підміна гліфа ніколи не зсуває сторінку. Зображення мають явні розміри. Hero — елемент LCP — ніколи не анімується.

Нічого екзотичного. Це та сама жменя рішень, застосованих послідовно й перевірених на кожній збірці, а не взятих на віру.

← Усі дописи