В прошлом посте я обещал рассказать, почему не стоит использовать заглушки до события onload. Все просто, первая отрисовка будет быстрее, а вот LCP-элемент появится гораздо медленнее.
Допустим, LCP-элементом является картинка на первом экране, и кроме нее грузятся еще и javascript файлы, и другие изображения и шрифты. LCP-элемент по факту грузится под такой заглушкой, и даже если он загрузится быстро, то пользователь его не увидит до момента, пока заглушка не исчезнет. Хуже может быть только если скрытие этой заглушки происходит с анимацией, допустим 500 миллисекунд. Таким образом, вы отложите появление LCP-элемента еще и на время анимации.
Чаще всего за такой заглушкой скрывают подгрузку стилей или SPA-приложения, но нужно не скрывать, а работать над визуальной стабильностью, лучше выделить critical-css, чтобы картинка не прыгала во время подгрузки, и необходимость в заглушке отпадет.
Но как же быть в SPA-приложении? Там вместо стандартной заглушки с крутилкой и надписью "подождите", лучше использовать skeleton loader, когда заглушка имитирует контент, который появится на странице уже после окончательной подгрузки. Проблему #LCP это не решит, но решит проблему смещения.
Правила:1. Никогда не используйте заглушку контента.
2. Не используйте анимацию, если решили, что первое правило не для вас.
3. Никогда не нарушайте первое правило.
А вы используете заглушки при загрузке?
