Веб-разработка

Учебник Производительность веба для начинающих

15 уроков · 5 разделов · бесплатно, без регистрации

Начать с первого урока

Как сделать сайт быстрым и доказать это цифрами: метрики Core Web Vitals, критический путь, бандл, картинки и кеш.

Курс «Производительность веба: Core Web Vitals» состоит из 5 разделов и 15 уроков: Метрики, Критический путь рендеринга, Ресурсы, JavaScript и бандл и Сеть и доставка. Уроки идут по порядку — от основ к более сложным темам, в каждом есть объяснение с примерами, а в конце — вопросы для самопроверки. К урокам привязаны задачи с автоматической проверкой: прочитали тему — сразу закрепили её кодом.

Программа курса

  1. 1 Метрики

    1. Core Web Vitals: LCP, INP, CLS

      Что означают LCP, INP и CLS, какие у них целевые значения, из каких фаз они складываются и как снять их прямо в браузере через PerformanceObserver.

    2. Лабораторные и полевые данные

      Lighthouse против реальных пользователей: почему 100 баллов ничего не гарантируют, что такое CrUX и RUM и зачем метрики считают по 75-му перцентилю.

    3. Инструменты измерения

      Lighthouse, DevTools Performance и Network, WebPageTest: как настроить троттлинг сети и CPU и как читать водопад загрузки, чтобы найти причину медленного LCP.

  2. 2 Критический путь рендеринга

    1. Что происходит от запроса до первого пикселя

      Критический путь рендеринга по шагам: DOM, CSSOM, дерево рендеринга, layout и paint. Почему CSS блокирует отрисовку, а синхронный script — парсинг. Разбор defer, async и type=module.

    2. Блокирующие ресурсы и как их убрать

      Критический CSS инлайном, асинхронная загрузка остальных стилей, шрифты без FOIT: font-display swap и preload, и что делать со сторонними скриптами — главным тормозом страницы.

    3. CLS: почему страница «прыгает»

      Cumulative Layout Shift: как считается метрика, откуда берутся прыжки вёрстки — картинки без размеров, шрифты, баннеры и реклама — и как резервировать место через width/height и aspect-ratio.

  3. 3 Ресурсы

    1. Изображения: главный вес страницы

      Форматы WebP и AVIF, адаптивные srcset и sizes, loading=lazy и почему его нельзя вешать на LCP-картинку, сжатие и резерв места под изображение.

    2. Шрифты

      woff2, подмножества и unicode-range, preload с crossorigin, font-display и борьба с FOIT/FOUT, метрики фолбэка и системный стек как рабочий вариант.

    3. Сторонние скрипты и виджеты

      Как аналитика, чаты и реклама убивают INP: long tasks, async и defer, загрузка по взаимодействию, facade вместо ютуб-плеера, бюджет на чужой код.

  4. 4 JavaScript и бандл

    1. Размер бандла и анализ

      Почему 2 МБ JavaScript — приговор на мобильном. Анализ бандла через bundle analyzer, поиск тяжёлых зависимостей, замена moment на dayjs, tree shaking и бюджеты размера.

    2. Code splitting и ленивая загрузка

      Code splitting на практике: разделение бандла по маршрутам и компонентам, динамический import(), prefetch и правила «что грузить сразу, а что по требованию».

    3. INP: отзывчивость интерфейса

      INP и долгие задачи: почему интерфейс не отвечает на клики, как разбивать работу, отдавать управление главному потоку, использовать Web Worker и виртуализировать длинные списки.

  5. 5 Сеть и доставка

    1. Кеширование в браузере

      Cache-Control, ETag, immutable и хеш в имени файла: как настроить кеш так, чтобы повторный визит грузился мгновенно, а деплой не залипал у пользователей.

    2. CDN и сжатие

      CDN, gzip против brotli, что реально меняют HTTP/2 и HTTP/3, и как правильно использовать preconnect и dns-prefetch, не навредив.

    3. Бюджет производительности и регрессии

      Performance budget, Lighthouse CI в пайплайне и алерты на деградацию поля: как зафиксировать достигнутую скорость и не дать ей откатиться через два спринта.