Почему моя самая большая содержательная краска намного больше, чем время загрузки моей страницы?

Индекс скорости

Индекс скорости здесь довольно сложно объяснить, поэтому я дам ссылку на эту статью и исходный индекс скорости, на котором основан индекс скорости Lighthouse

Но по сути он сравнивает загрузку изображений сайта на временной шкале по мере загрузки. Когда он обнаруживает, что он достиг определенной полноты по сравнению с окончательным дизайном страницы, он использует это время для индекса скорости.

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

Фигуры также искажаются из-за длительной анимации. Вы говорите 200 мс, но трассировка производительности предполагает, что это больше похоже на 400 мс, что соответствует следующему элементу: -

#ambition_body.fade_in_out {
    transition-duration: 400ms;
}

Таким образом, ваш индекс скорости может немного отличаться, но во всяком случае он ниже, чем есть на самом деле, так как ваша белая обложка остается дольше 3,4 секунды, когда я применяю регулирование сети и дросселирование ЦП в соответствии с Lighthouse (движком, лежащим в основе Page Speed ​​Insights).

примечание: Вот почему вы видите 9 секунд по сравнению с наблюдаемыми 2 секундами, Lighthouse учитывает дросселирование в сети и ЦП, как указано в связанной статье в предыдущем абзаце.

Самая большая содержательная краска

Это действительно происходит намного позже, кажется, есть небольшой сдвиг на странице, когда происходит постепенное исчезновение. Как вы можете видеть на этой графике производительности, это происходит прямо перед окончательным изображением на графике (линия LCP - это та, на которую нужно смотреть).

Похоже, это происходит из-за чего-то странного, возможно, с вашим меню.

Я включил мигание краски на вкладке рендеринга в инструментах разработчика, и как только страница исчезает, появляется странная вспышка в верхнем левом углу, а затем вся страница, кажется, перерисовывается.

У меня нет времени искать для вас основную причину, но мое чутье подсказывает, посмотрите, что делает меню при загрузке страницы, и посмотрите, скрываете ли вы это с помощью JS.

Если вы скрываете это с помощью JS и у вас есть 0,2-секундная анимация для каждого элемента на сайте (что не очень хорошая идея) с html * {transition: all 0.2s ease;}, то это может вызвать ненужную перерисовку и задержать LCP.

Актуальная проблема.

Проблема в том, что мы можем немного поспорить о цифрах, но ваш сайт действительно не очень быстрый.

Его вес составляет 1,4 мегабайта, что является высоким показателем, если учесть, что скорость мобильного 3G-соединения может составлять всего около 2 мегабита в секунду (то есть около 250 килобайт в секунду).

Также у вас есть почти мегабайт несжатого кода JavaScript для компиляции и выполнения на сайте (около 250 КБ заархивировано).

Это очень тяжелая работа для мобильного процессора.

Попробуйте избавиться от лишнего JavaScript, однако это сложно при использовании чего-то вроде elementor (как кажется на вашем сайте).

Также ваша скорость значительно улучшится, если вы исправите свой критический путь рендеринга и и отложите свой JavaScript, который не важен для отображения содержимого над сгибом.