Как улучшить показатели метрики FMP

А, вот ты про FMP, про этот "первый осмысленный пых", да? Ну, это когда пользователь уже не на пустую белую хуйню смотрит, а что-то реальное увидел. Чтобы его не бесило, надо эту херню ускорить. Слушай, как это делается, блядь.

Во-первых, критический путь рендеринга надо подрезать, как сука, под самый корешок. Что это значит? А значит, что весь твой CSS и JS, который нужен для первой отрисовки, должен быть минимальным и впихнутым прямо в HTML, как последняя надежда. Остальные скрипты — вешай на них async или defer, пусть грузятся, когда основное уже отрисовалось. Не мешай браузеру работать, ёпта!

Во-вторых, предзагрузка ресурсов. Это как сказать браузеру: "Э, дружище, не тупи, вот тебе шпаргалка, что тебе скоро понадобится". Кидаешь в голову такие строчки:

<link rel="preload" href="main.css" as="style">
<link rel="preconnect" href="https://fonts.gstatic.com">

Вот, смотри, не трогай код, он святой. Но суть в том, что шрифты и стили начнут качаться раньше, и браузер не будет стоять, как пень, в ожидании.

В-третьих, серверный рендеринг. Если у тебя там React или что-то подобное, не заставляй пользователя ждать, пока весь этот цирк скачается и запустится. Отдавай с сервера уже готовый HTML, ёбана! И кэшируй это добро, чтобы не гонять одни и те же вычисления для каждого нового распиздяя.

Картинки, сука, картинки! Оптимизация изображений — это святое. Весь этот старый хлам в JPEG и PNG — нахуй. Качай WebP или AVIF, они меньше весят. А всё, что ниже первого экрана (то, что надо скроллить), — ленивая загрузка, loading="lazy". Пусть грузится, когда пользователь доскроллит, а не сразу, занимая канал.

И последнее, но не по важности — TTFB (Time To First Byte). Это время, за которое сервер тебе первый байт ответа шлёт. Если он тупит, как Герасим из того рассказа, то никакой оптимизацией фронтенда не поможешь. Оптимизируй бэкенд-запросы, блядь, используй CDN для статики, чтобы она летела с ближайшего к пользователю сервера.

Вот, смотри простой пример, как CSS оптимизировать, чтобы не блокировал рендеринг:

<style>
  /* Критический CSS прямо тут, встроенный, чтобы сразу применить */
  body { font-family: sans-serif; margin: 0; }
  .header { background: #333; color: white; }
</style>
<!-- А всё остальное подгрузится потом, не мешая FMP -->
<link rel="stylesheet" href="non-critical.css" media="print" onload="this.media='all'">

Видишь фокус? Сначала браузер видит встроенные стили и сразу рисует по ним. А потом, когда всё основное готово, он переключает медиатип у ссылки на all и применяет остальные стили. Хитрая жопа, да? Вот так и работай, а не тупи.