Какие медиафайлы могут ухудшить Core Web Vitals?

Избыточные и неоптимизированные изображения, особенно в форматах, не поддерживающих сжатие без потерь, как я читал в технических обзорах, часто становятся бремем для Largest Contentful Paint. Видео, загружаемое синхронно, может блокировать основной поток и увеличивать задержки, что ведет к ухудшению показателей Interaction to Next Paint и Cumulative Layout Shift, особенно если элементы интерфейса смещаются при его загрузке.

Картинки без указанных размеров - это как запустить двигатель без контроля за топливом. Они заставляют браузер перерасчитывать макет страницы, что напрямую бьет по CLS и вызывает "дергание" контента при загрузке.

Видео и тяжёлые GIF, которые грузятся автоматически, создают внезапную нагрузку на сеть и процессор. Это увеличивает TTFB, блокирует основной поток рендеринга и откладывает интерактивность, ухудшая показатели FID и LCP.

Очень бесят авто-воспроизводящиеся видеоролики с рекламой, которые включают звук без спроса. В городе и так шумно, а тут ещё сайт начинает гудеть - это не просто раздражает, а конкретно бьёт по CPU и памяти, затягивая время загрузки. Ещё тяжелые фоновые изображения в формате PNG без сжатия, особенно на главном экране - они как огромный билборд, который перекрывает обзор, пока не загрузится.

Знаю, как это бесит, когда сайт тормозит из-за какой-то мелочи. Очень часто проблема в неоптимизированных шрифтах и иконках в формате SVG с кучей лишних узлов - они раздувают DOM и заставляют браузер тратить время на парсинг, напрямую влияя на задержку первого ввода. А ещё веб-шрифты без предварительной загрузки и с большим весом файла вызывают мерцание текста и сдвиг макета при появлении, что критично для CLS.

Самые коварные вредители это неочевидные на первый взгляд встроенные фреймы с внешними видео или картами. Они создают отдельные запросы и могут тащить за собой десятки скриптов и стилей, резко увеличивая загрузку ЦПУ и время до первого взаимодействия. Даже один такой элемент способен раздуть общее время блокировки и вызвать внезапные сдвиги макета, когда контент внутри наконец появится. Но это не повод отказываться от них - просто подгружай фреймы лениво или заменяй статичной превьюшкой, и сайт задышит свободно.

«Не всё то золото, что блестит» - анимация в формате Lottie, например, красивая и лёгкая на вид, но без контроля может стать пожирателем ресурсов. Она грузит CPU рендерингом сложных кривых, и если на странице их десять, FID и TTFB страдают моментально. Ещё сюда же веб-шрифты с большим набором глифов - кириллица плюс латиница с жирными начертаниями, особенно без подсказок браузеру. Они не только сдвигают макет (CLS), но и блокируют рендеринг текста, заставляя пользователя ждать пустых пятен.