Чек-лист оптимизации загрузки web-страницы

Техническая оптимизация

Общее

Метрики производительности и ее улучшения:

Сеть

Тип сети
География

Ответ сервера

Общее

Минификация
Сжатие (gzip, brotli)
Кеширование

HTTP1

Упаковка статики в спрайты (на запросы с картинкам будет тратиться больше времени чем на загрузку)
CDN

HTTP2

Отдельные файлы

Работа браузера

Время до отрисовки

Блокировка статическими ресурсами

Количество
Размер
Порядок

async

Не гарантирует порядок выполнения

defer

Дождется domContentLoaded и выполнит все файлы в указанном порядке

preload, prefetch, preconnect, dns-prefetch, prerender

Critical-код

CSS для первого экрана
Inline CSS для вместо небольших CSS файлов

HTML
JS

Время до интерактивности

Количество запросов на JS
Размер JS
Работа с DOM

Время отклика (first input delay)
Отзывчивость

FPS (18.6 секунды)
Плавность анимации

Использовать JS-анимацию только по надобности
Использовать requestAnimationFrame
Использовать will-change:transfrom для выноса слоя в котором будет произведена отрисовка
Все что анимируется должно быть вынесено в отдельный слой

Плавность скролла

Память

Остальное

Релизы браузеров
Оборудование операторов
Софт на клиенте (антивирус, блокировщик рекламы)
Устройство пользователя
Расширения браузера

Условия среды можно регулировать во вкладке performance

React-приложение

Способы оптимизации:

Общее

Использование готовых библиотек и фреймворков

Используют паттерны
Рассказывают про анти-паттерны

Скорость загрузки

Использование Webpack

Three Shaking
Code Spliting
Минимизация
node_env=production

Увеличивает время отрисовки
Разделение на десктоп/мобильную версию
Использование сжатия
SEO

Асинхронная загрузка

Микрофронтенд
Компоненты
Изображения
Шрифты

Не использовать кастомные шрифты

Не использовать полный формат глифов
Использовать woff2 формат

Библиотеки
Редюсеры

Скорость работы

Избегать in-line объявлений

() => {}
[1,2,3]

Скрывать тяжелые ноды с display-none
Использование подходов

debounce
throttling

Мемоизация

useСallback useMemo
React.Memo

Уборка

Отписка событий eventListeners

Service Workers

Вынести сложные вычисления так как воркер запускается в отдельном треде

Уменьшение количества DOM-элементов
Уменьшение сложности CSS-селектором

Redux

Иммутабельность

Излишнее пересоздание объектов при изменении пропсов редюсера

Инструменты:

Высокоуровневые

Pagespeed Insights
Devtooks
Lighthouse

Низкоуровневые

Network
Performance
Memory
JS progiler
Covarage
Rendering

Психологическая оптимизация

Восприятие времени

Скорость работы относительная величина и зависит от того чем занимается человек в обозначенный момент времени.

Приемы

Лоудеры
Скелетоны

Советы

Важно использовать для тестирования реальные устройства.