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

А, ну это ж про TTI, время до интерактивности! Слушай, тут вообще-то целая наука, но если по-простому, то твой сайт должен перестать быть куском дерьма, который тормозит, как вобла в асфальте, и начать откликаться на действия пользователя. Вот как это сделать, без всей этой заумной хуйни:

Во-первых, твой JavaScript. Он, блядь, часто раздут, как жопа после новогодних праздников. Что делать?

• Дроби его на куски (code splitting). Зачем грузить всё сразу, если пользователь, возможно, никогда не долистает до той ебучей галереи в подвале? Грузи по частям.
• Выкидывай мусор (tree shaking). Если ты импортировал какую-то библиотеку только ради одной функции, а загрузил её всю — ты мудак. Современные сборщики умеют отрезать лишнее.
• Ленивая загрузка (lazy loading) — твой друг. Особенно для картинок, скриптов и компонентов, которые не видны сразу.

Вот, смотри, как в Реакте это выглядит для тяжёлого компонента:

const LazyComponent = React.lazy(() => import('./HeavyComponent'));

function App() {
  return (
    <Suspense fallback={<Loader />}>
      <LazyComponent />
    </Suspense>
  );
}

Видишь? Компонент HeavyComponent полетит в браузер только тогда, когда он реально понадобится. А пока — крутится лоадер, и пользователь не чувствует себя идиотом, который кликает по неработающей странице.

Во-вторых, не засирай основной поток. Представь, что это единственная касса в «Пятёрочке» в час пик.

• Отправляй тяжёлые вычисления в Web Workers. Пусть там себе считают, а основной поток занимается отрисовкой интерфейса.
• Следи за Long Tasks — эти долгие задачи, которые блокируют всё. Если задача выполняется дольше 50 мс — это уже повод задуматься, не обосрался ли ты с архитектурой.

В-третьих, ресурсы. Ты же не везешь весь свой хлам в одной тележке из магазина?

• Предзагружай (<link rel="preload">) то, что критично. Шрифты, скрипты, стили — что должно быть готово к моменту первого рендера.
• Используй HTTP/2 и сжимай всё, что можно (Brotli лучше Gzip). Это как сложить вещи в чемодан вакуумным мешком — места меньше, летит быстрее.

В-четвёртых, кэширование. Зачем каждый раз таскать одни и те же кирпичи, если их можно сложить рядом со стройкой?

• Service Workers — это магия. Они могут кэшировать статику так, что сайт будет работать оффлайн. Ну, почти.
• Настрой правильные Cache-Control заголовки на сервере. Скажи браузеру, что вот этот файл можно не перекачивать месяц, а вот этот — проверять каждый раз.

И наконец, рендеринг. Не делай резких движений.

• Избегай синхронных макрозадач, которые останавливают весь конвейер.
• Для всякой неважной фигни, вроде отправки аналитики, используй requestIdleCallback. Пусть браузер сам решит, когда у него есть свободная миллисекунда, чтобы этим заняться.

Вот и всё. Если коротко: не грузи лишнего, дели на части, кэшируй что можно и не еби основной поток. Тогда твой TTI будет не через пиздец как долго, а вполне себе бодрым.