Производительность сайта: загрузка и отклик
Новые курсы · Все опубликованные курсы
В 24 уроках научимся связывать скорость страницы с конкретным этапом загрузки и работы браузера. Первая часть разбирает speed-lab, основные показатели и бюджет. Продолжение ведёт к наблюдениям на посещениях, истории навигации, доставке ресурсов и причинному разбору регрессии.
Учебные программы и измерения пока не запускались; описанные состояния являются ожидаемыми.
Перед началом
Базовые HTML, CSS и JavaScript. Для самостоятельных наблюдений нужны инструменты разработчика; требования к отдельным учебным страницам описаны в исходниках.
В продолжении есть отдельные небольшие лаборатории и синтетический набор записей для разбора арифметики. Наблюдатели не отправляют данные наружу и не заявлены полным сборщиком Core Web Vitals. Выборы оптимизации связываются с условиями измерения.
Основа: уроки 1–12
- Модель измерения производительности сайта
- Лабораторные и полевые данные производительности
- Производительность сайта: чтение сетевого водопада запросов
- Производительность сайта: от полученного документа к показанному кадру
- LCP — Largest Contentful Paint: причины поздней отрисовки
- Производительность сайта: изображения под ширину экрана и плотность пикселей
- Веб-шрифты: диагностика загрузки и фактического начертания
- CLS — Cumulative Layout Shift: неожиданные сдвиги страницы
- INP — Interaction to Next Paint: отклик интерфейса
- Производительность сайта: стоимость JavaScript и порционная обработка
- Производительность сайта: HTTP-кеш в измерении повторной загрузки
- Бюджет производительности и решение об изменении
Продолжение: уроки 13–24
- Производительность сайта: план сбора полевых метрик
- Производительность сайта: процентили и сегменты скорости
- Производительность сайта: холодная загрузка и возврат на страницу
- Производительность сайта: возврат страницы из back-forward cache
- Производительность сайта: подсказки браузеру о ресурсах
- Производительность сайта: отложенная загрузка ресурсов
- Производительность сайта: стоимость сторонних скриптов
- Производительность сайта: размер DOM и стоимость стилей
- Производительность сайта: длинные списки и виртуализация
- Производительность сайта: профиль мобильной сети
- Производительность сайта: сжатие ресурсов
- Производительность сайта: разбор регрессии скорости
Учебные исходники
Исходники первой части · Исходники продолжения. В архивах есть инструкции, целые файлы и отдельные состояния примеров.