Пол Кальвано выступил с докладом на конференции performance.now(), в котором рассказал о 16-ти распространённых ошибках производительности. На основе базы данных HTTP Archive (~16 миллионов сайтов) он показал, как часто встречаются эти ошибки. Хороший доклад, рекомендую посмотреть. А я поделюсь списком ошибок с кратким описанием. Пост будет разбит на 3 части, чтобы не делать его слишком большим.
1. Ленивая загрузка LCP-изображения
<img src="hero.jpg" loading="lazy" alt="">
loading="lazy" скрывает изображение от сканера предварительной загрузки. Браузеру нужно знать, находится ли изображение в области просмотра, для чего нужно дождаться загрузки всех стилей. LCP-изображение должно загрузиться как можно быстрее. Ленивая загрузка препятствует этому.Как исправить: удалить атрибут
loading у LCP-изображения или установить значение loading="eager".2. Ленивая загрузка приоритетных изображений
<img src="hero.jpg" loading="lazy" fetchpriority="high" alt="">
Атрибут
fetchpriority="high" увеличивает приоритет загрузки, что нужно для важных изображений. loading="lazy", напротив, откладывает загрузку изображений. В итоге изображения будут загружаться с высоким приоритетом, но только после загрузки всех стилей и при попадании в область просмотра.Как исправить: удалить атрибут
loading у изображений с атрибутом fetchpriority="high" или установить значение eager или удалить атрибут fetchpriority, если изображение должно загружаться лениво.Асинхронное декодирование приоритетных изображений
Изначально изображения с атрибутами
fetchpriority="high" и decoding="async" в докладе Пола были отмечены как ошибка. Позже слайды были исправлены, в целом это не ошибка.3. Предварительное соединение без crossorigin
<link rel="preconnect" href="https://example.com">
<link rel="preconnect"> заранее устанавливает соединение с указанным доменом. Без атрибута crossorigin запросы к сторонним доменам блокируются CORS-политикой браузера. Время на инициализацию соединения будет потрачено зря, а соединение в итоге будет прервано.Как исправить: добавить к
<link rel="preconnect"> атрибут crossorigin.4. Предварительная загрузка нескольких изображений
<link rel="preload" href="image@x1.jpg" as="image">
<link rel="preload" href="image@x2.jpg" as="image">
<link rel="preload"> предварительно загружает указанный ресурс с высоким приоритетом. Если указать несколько изображений разных размеров, браузер скачает их, но не все из них будут использованы.Как исправить: использовать
<link rel="preload"> с атрибутами imagesrcset и imagesizes, убедиться, что значения соответствуют атрибутам srcset и sizes у изображений.5. Предварительная загрузка большого объёма данных
<link rel="preload" href="heavy_script.js" as="script">
Загрузка тяжёлых ресурсов требует времени.
<link rel="preload"> перемещает ресурсы в начало очереди загрузки, из-за чего другие важные ресурсы опускаются ниже. Тяжёлый ресурс займёт соединение на какое-то время, а важные ресурсы от этого загрузятся позже.Как исправить: удалить
<link rel="preload"> с тяжёлыми ресурсами и отложить их загрузку, если они не критичны для страницы.#html #performance