Максимально оптимизированная веб-загрузка изображений в 2021 году

Рейтинг: 4.9 из 35 оценок

В этой статье я расскажу про 8 методик оптимизации загрузки изображений, которые уменьшают необходимую пропускную способность сети и нагрузку на процессор при выводе на экран.

Приведу примеры аннотированного HTML, чтобы вам было легче воспроизвести. Какие-то методики уже давно известны, а какие-то появились относительно недавно. В идеале, ваш любимый механизм публикации веб-документов (например, CMS, генератор статичных сайтов или фреймворк для веб-приложений) должен всё это реализовывать из коробки.

В совокупности методики оптимизируют все элементы Google Core Web Vitals с помощью:

  • минимизации основных проблем содержимого (Largest Contentful Paint (LCP)) за счёт уменьшения размеров, кеширования и ленивой загрузки;
  • сохранения нулевого накопительного сдвига макета (Cumulative Layout Shift (CLS));
  • уменьшения задержки первого ввода (First Input Delay (FID)) за счёт снижения потребления процессора (для основного потока исполнения).

Читайте далее

Добавить комментарий