Джейк Арчибальд опубликовал седьмую часть из серии статей про производительность сайтов команд Формулы-1 — "Who has the fastest F1 website in 2021? Part 7".

В этой статье исследуется сайт команды Haas. Первый рендер происходит через девять секунд после начала загрузки страницы. Тем не менее сайт остаётся неюзабельным, так как на протяжении следующих десяти секунд происходит сдвиг контента из-за инициализации слайдера и загрузки изображений.

На сайте вместо одного большого CSS-файла загружается тридцать небольших. Это приводит к небольшой задержке рендеринга (где-то полсекунды). Также небольшие файлы проигрывают в степени сжатия большим файлам. Во время загрузки прыгает контент, это связано с инициализацией слайдера, который начинает загружать изображения только после полной загрузки и инициализации скриптов. Сдвига контента можно было бы избежать, если бы слайдер был реализован с помощью обычного HTML и CSS scroll snap.

После всех исправлений время первого рендеринга удалось снизить с 9 до 3 секунд.

#performance

https://jakearchibald.com/2021/f1-perf-part-7/