Задать вопрос
@onex_dev

Google PageSpeed Insights считает за время рендера время css анимации, как исправить?

Тестировал сайт в Google SpeedPage Insight, получил на десктопной версии слабый результат, стал копаться в чём может быть проблема, оказалось, что гугл считает за время рендера страницы время анимации. Вот css анимации.
.header {
    background: url(../img/main/_0020_p-min.jpg) center bottom no-repeat;
    background-size: auto 100%;
    animation: animatedHeader 45s linear infinite;
    -webkit-animation: animatedHeader 45s linear infinite
}
@-webkit-keyframes animatedHeader {
    0%,
    100% {
        background-position: 0 0, 0 0, 100% 0
    }
    50% {
        background-position: -946px 0, 0 0, 100% 0
    }
}
@keyframes animatedHeader  {
    0%,
    100% {
        background-position: 0 0, 0 0, 100% 0
    }
    50% {
        background-position: -946px 0, 0 0, 100% 0
    }
}


Как можно исправить? Скидывает со вкусных 99 баллов до 52 из-за одной анимашки(
  • Вопрос задан
  • 246 просмотров
Подписаться 3 Простой 4 комментария
Помогут разобраться в теме Все курсы
  • Нетология
    Веб-разработчик с нуля: профессия с выбором специализации
    14 месяцев
    Далее
  • Академия Эдюсон
    Frontend-разработчик: тариф PRO
    10 месяцев
    Далее
  • ProductStar × РБК
    Профессия: Инженер по тестированию + ИИ
    6 месяцев
    Далее
Пригласить эксперта
Ответы на вопрос 1
IwanQ
@IwanQ
Плохие времена часто дают прекрасные возможности
Я конечно не эксперт, но можно сделать через js, чтобы анимация начиналась загружаться только при скролле до определённой высоты.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы