Живой сервер, анимация и инструменты разработки (анимация начинается до прибытия FP) ⇐ CSS

[Anonymous]

У меня на странице есть предзагрузчик (это анимация), который скрывает важный контент, пока он не будет готов. Прелоадер должен выполнять анимацию 1,5 с, но есть проблема: анимация начинается до того, как браузер выводит на экран любой пиксель. А если что-то будет задерживать ФП (First Paint - термин из dev-tools), то я увижу часть заявленной анимации, например 978мс, а не 1,5с и это не то, чего я хочу ожидать.
Дополнительный вопрос касается живого сервера, расширения для VSCode.
Если я запущу свою страницу с тем же предварительным загрузчиком, я увижу следующее:

Эти короткие фиолетовые строки — это предварительная раскраска и наслоение. Я пытался найти хоть какой-нибудь ответ, что такое Pre-paints, но безуспешно, ничего не нашел.
Если я запущу то же самое без live-сервера, то увижу следующее:


Вы можете заметить, этот живой сервер портит ожидаемую анимацию за 1,5 секунды, в отличие от того, когда он не работает, но когда живой сервер находится в автономном режиме, анимация начинается до FP. И это также проблема: я не могу рассчитывать на время, которое я устанавливаю для какой-либо анимации, потому что оно зависит от вещей, которые задерживают FP.
Здесь более точно показано, когда я запускаю страницу без live-server


Время между началом страйп-анимации и FP составляет ~6 мс (почти сразу), но по сравнению с live-сервером около 500 мс.
Итого:

• Как это решить, я имею в виду, как контролировать FP и устранять задержки между временем первой анимации на странице и FP
• Почему появляются ли Pre-paints и Layerise (в большом количестве), когда я работаю с живым сервером? Что вызывает их появление (можем ли мы их контролировать)?

Подробнее здесь: https://stackoverflow.com/questions/783 ... fp-arrives