Правило трех секунд в веб-производительности
У вас есть три секунды.
После этого ваши пользователи уходят.
Исследования Google показывают, что 53% мобильных пользователей покидают сайт, если его загрузка занимает более 3 секунд.
Медленные сайты стоят вам денег. Улучшение времени загрузки на мобильных устройствах всего на 0,1 секунды увеличивает конверсию в ритейле на 8,4%.
Производительность — это не просто технический показатель. Это бизнес-метрика.
Чтобы победить, вы должны понимать Core Web Vitals:
• LCP (Largest Contentful Paint): как быстро пользователи видят основной контент. Стремитесь к показателю менее 2,5 с. • INP (Interaction to Next Paint): как быстро страница реагирует на клики. Стремитесь к показателю менее 200 мс. • CLS (Cumulative Layout Shift): насколько стабильна страница. Стремитесь к показателю менее 0,1.
Хватит гадать, пора оптимизировать. Вот как успеть вовремя:
Оптимизация JavaScript
• Отправляйте меньше кода. Используйте динамические импорты, чтобы загружать код только тогда, когда он необходим.
• Используйте tree-shaking. Переходите с CommonJS на ES-модули, чтобы удалить лишний вес.
• Переносите тяжелые задачи в Web Workers. Держите основной поток свободным для ввода пользователя.
• Используйте defer или async. Перестаньте позволять скриптам блокировать парсинг HTML.
CSS и рендеринг
• Инлайните критический CSS. Сначала загружайте только то, что видно на первом экране (above the fold).
• Избегайте layout thrashing. Группируйте операции чтения и записи, чтобы предотвратить постоянные пересчеты.
• Используйте transform и opacity для анимации. Они задействуют GPU и позволяют избежать сдвигов макета.
• Используйте content-visibility: auto. Пропускайте рендеринг контента, который находится за пределами экрана.
Стратегия работы с изображениями
• Используйте современные форматы. WebP и AVIF гораздо меньше, чем JPEG.
• Указывайте атрибуты width и height. Это предотвращает сдвиги макета (CLS).
• Используйте lazy-loading для изображений ниже первого экрана. Не применяйте lazy-loading к главному изображению (LCP hero image).
• Используйте srcset. Отдавайте мобильным пользователям изображения меньшего размера.
Сеть и кэширование
• Используйте CDN. Размещайте контент ближе к пользователям, чтобы снизить задержку (latency).
• Включите сжатие. Используйте Brotli или Zstandard для уменьшения размеров файлов.
• Кэшируйте агрессивно. Используйте неизменяемые (immutable) заголовки кэша для хешированных ассетов.
• Поддерживайте работу bfcache. Избегайте использования события unload, чтобы обеспечить мгновенную навигацию «назад/вперед».
Цель проста: избегать лишней работы.
Самый быстрый код — это тот, который пользователи никогда не скачивают. Самый быстрый запрос — это тот, который браузеру никогда не приходится делать.
Источник: https://dev.to/utkarshbansal01/the-3-second-rule-of-web-performance-and-how-to-beat-it-1he1