Проблема

На PageSpeed ефективність 60, або навіть менше, особливо на мобільному. LCP (Largest Contentful Paint) більше ніж 2.5 секунд.

Рішення

Витягуємо стилі першого екрана (critical CSS), інлайнимо їх у <head>, а основний CSS вантажимо асинхронно.

1. Генеруємо critical CSS. Найшвидший спосіб — пакет critical:

bash

npm i -g critical

critical https://example.com --width 1300 --height 900 > critical.css

Для мобайлу генеруємо окремо з --width 390 --height 844 і об'єднуємо, або одразу передаємо кілька розмірів через конфіг.

2. Інлайнимо в <head>:

html

<style>
  /* вміст critical.css */
</style>

3. Основний CSS — асинхронне завантаження:

html

<link rel="preload" href="/css/app.css" as="style"
      onload="this.onload=null;this.rel='stylesheet'">
<noscript>
  <link rel="stylesheet" href="/css/app.css">
</noscript>

Трюк із rel="preload" + onload змушує браузер завантажити файл, не блокуючи рендер, і підключити його як стилі після завантаження.

Чому це працює

LCP залежить від того, як швидко браузер зможе намалювати найбільший елемент першого екрана. Інлайновий critical CSS прибирає мережевий запит із критичного шляху рендерингу: браузер отримує HTML і одразу має все для першого фрейма. Основні стилі доїжджають у фоні — до моменту, коли користувач доскролить, вони вже підключені.

Нюанси

  • Не інлайнити все підряд. Critical CSS понад ~14 КБ з'їдає перевагу: перший TCP-пакет не безмежний.

  • FOUC на нижніх секціях — нормально, користувач його не бачить. Якщо помітно — додайте до critical стилі секції, що «блимає».

  • Кешування. Інлайновий CSS не кешується окремо від HTML — тому туди тільки мінімум, а решта в файл із довгим Cache-Control.

Ю ар велкам)