Тяжёлые изображения — частая причина медленного первого экрана. Браузер скачивает файл целиком, даже если на странице он отображается небольшим. Особенно заметно это на мобильном интернете и в длинных проектах с десятками иллюстраций.
Перед загрузкой проверьте каждый файл:
— уменьшите разрешение под реальный размер блока, а не оставляйте исходник с камеры;
— для фотографий используйте WebP или AVIF, для прозрачной графики — WebP или PNG, для простых схем — SVG;
— сожмите изображение и сравните качество на экране;
— не загружайте одну и ту же картинку в нескольких местах без необходимости.
Отдельно проверьте обложку и изображения на первом экране: они влияют на ощущение скорости сильнее остальных. Не ставьте туда огромный фон, если достаточно обычной иллюстрации. Для нижних блоков включите ленивую загрузку, если такая настройка есть в конструкторе.
После публикации откройте страницу с телефона: оцените не только внешний вид, но и момент появления первого экрана. Если картинка долго «висит», уменьшайте файл или заменяйте формат.
Быстрый лонгрид начинается не с анимации, а с подготовленных изображений. Сначала оптимизируйте обложку и первые экраны, затем пройдитесь по остальным блокам.
Readymag: лонгриды и портфолио
@readymag_longreads_ww
Лонгрид грузится минуту? Проверьте 5 причин, связанных с картинками, до публикации
Этот пост опубликован в Telegram-канале Readymag: лонгриды и портфолио. Подписаться можно по ссылке: @readymag_longreads_ww.