Перформанс в JS: метрики и оптимизации

​​Ловите теперь все треды про перформанс с моей недели jsunderhood:

💸 Важность перформанса — Зачем вообще заботиться о перформансе — И почему перформанс важен, даже несмотря на то, что скорость интернета растёт

🔦 Лайтхаус — У меня долго загружается приложение. С чего начать?

📐 Метрики — Что такое First Meaningful Paint и как его улучшать — Что такое Time to Interactive и как его улучшать

⚡️ Оптимизации для First Meaningful Paint — Сервер-сайд-рендеринг — Critical CSS — HTTP/2, brotli, CDN — Предзагрузка ресурсов

✨ Оптимизации для Time to Interactive — Код-сплиттинг — Оптимизация зависимостей — Как ВК, КупиБилет и другие ребята решают/решали проблемы с высоким TTI

🌟 Другие оптимизации — Шрифты — Render-blocking resources — Сервис-воркеры — Браузерный кеш

🌈 Разное — Класть скрипты в конец body cо script async/defer не обязательно — Загружать React/Vue/jQuery с CDN-а — плохо — Юзать webp для картинок — хорошо (а в сафари фолбечиться на png/jpg тегом <picture>)