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