## Fonts і CLS Шрифти теж можуть рухати layout. Сценарій: 1. Сторінка показала fallback font. 2. Потім завантажився custom font. 3. Новий font має інші розміри символів. 4. Текст змінив ширину/висоту. 5. Контент зʼїхав. Типова проблема: ```css @font-face { font-family: 'CustomFont'; src: url('/fonts/custom.woff2') format('woff2'); } ``` Краще: ```css @font-face { font-family: 'CustomFont'; src: url('/fonts/custom.woff2') format('woff2'); font-display: swap; } ``` У Next.js краще використовувати `next/font`, бо він оптимізує завантаження шрифтів і допомагає зменшити layout shift: ```tsx import type { ReactNode } from 'react'; import { Inter } from 'next/font/google'; const inter = Inter({ subsets: ['latin'], display: 'swap', }); export default function RootLayout({ children }: { children: ReactNode }) { return ( {children} ); } ``` Але важливий нюанс: `font-display: swap` може допомогти з швидкістю показу тексту, але якщо fallback font дуже відрізняється від основного - shift все одно може бути. Тому треба підбирати схожий fallback або використовувати font metric overrides. --- ## Dynamic content Ще одна часта проблема - контент, який додається після рендеру. Погано: ```tsx 'use client'; import { useEffect, useState } from 'react'; export const PromoPage = () => { const [banner, setBanner] = useState(false); useEffect(() => { const id = window.setTimeout(() => { setBanner(true); }, 1000); return () => { window.clearTimeout(id); }; }, []); return ( <> {banner ?

Sale!

: null}

Content

); }; ``` Через секунду зверху зʼявляється банер і штовхає весь контент вниз. Краще: ```tsx export const PromoPage = () => { return ( <>

Sale!

Content

); }; ``` ```css .banner-placeholder { min-height: 64px; } ``` Або показувати банер поверх контенту: ```css .banner { position: fixed; bottom: 16px; right: 16px; } ``` Тоді він не змінює layout сторінки. --- ## Анімації і CLS Погано анімувати властивості, які впливають на layout: ```css .box { transition: top 0.3s; } .box:hover { top: 20px; } ``` Або: ```css .card { transition: width 0.3s, height 0.3s; } ``` Краще використовувати `transform`: ```css .box { transition: transform 0.3s; } .box:hover { transform: translateY(20px); } ``` `transform` і `opacity` зазвичай не змушують браузер перераховувати layout так само, як `top` / `width`, тому вони краще для продуктивності й стабільності.

CLS — Cumulative Layout Shift

CLS — Cumulative Layout Shift