Как избежать проблем с некомбинированной анимацией

Вы когда-нибудь нажимали на веб-сайт и обнаруживали, что он зависает и тормозит при прокрутке?

Разочаровывает, не так ли?

А что, если мы скажем вам, что секрет этих проблем кроется в так называемой некомпозитной анимации?

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

Но не волнуйтесь, есть способ это исправить.

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

Давай начнем.

Что такое некомпозитная анимация?

Некомпозитная анимация — это тип веб-анимации, обрабатываемый в основном центральным процессором, а не графическим процессором (графическим процессором).

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

Уменьшение совокупного смещения макета (CLS) обещает повысить ваш показатель производительности Lighthouse.

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

Избегание некомпозитной анимации важно для производительности веб-страниц по нескольким причинам. Во-первых, некомпозитная анимация, обрабатываемая процессором, может быть менее эффективной и более медленной, чем анимация, обрабатываемая графическим процессором.

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

Во-вторых, анимация, нагружающая процессор, может перегружать ресурсы системы, особенно на менее мощных устройствах, таких как смартфоны или старые компьютеры. Это напряжение может замедлить не только саму анимацию, но и другие процессы, выполняемые на веб-странице.

В результате общая производительность веб-сайта может быть нарушена. Мало того, снижение производительности веб-сайта также может негативно повлиять на успех цифрового маркетинга. Чтобы узнать, как это сделать, посетите этот блог « Влияние скорости веб-сайта на успех цифрового маркетинга ».

Примечание. Вот несколько простых советов, как ускорить работу вашего сайта WordPress и повысить его производительность .

Как некомпозитная анимация влияет на производительность страницы и рендеринг в браузере?

Некомпозитная анимация может сильно повлиять как на производительность страницы, так и на рендеринг браузера. Что касается производительности, они имеют тенденцию замедлять работу веб-сайта. Это происходит потому, что главный процессор компьютера (ЦП) перегружен, пытаясь обрабатывать сложную анимацию помимо других задач.

В результате веб-сайт становится менее отзывчивым на действия пользователя, такие как нажатие или прокрутка. Это особенно заметно на устройствах с меньшей вычислительной мощностью, например на мобильных телефонах.

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

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

Как обнаружить некомпозитную анимацию?

Обнаружение некомпозитной анимации можно выполнить с помощью инструментов анализа производительности, таких как Google PageSpeed ​​Insights и GTmetrix. Вот 10 лучших инструментов проверки скорости WordPress , которые вы можете использовать для обнаружения некомпозитной анимации.

Эти инструменты анализируют различные аспекты производительности вашего веб-сайта, в том числе способ визуализации анимации.

Вот как вы можете их использовать:

Статистика Google PageSpeed

• Посетите веб-сайт PageSpeed ​​Insights , введите URL-адрес своей веб-страницы и нажмите «Анализ». Инструмент оценивает производительность вашей страницы как на мобильных устройствах, так и на настольных компьютерах.

• После анализа PageSpeed ​​Insights предоставляет оценку и подробный отчет. Посмотрите раздел «Диагностика» отчета.
• Найдите предупреждение, в котором говорится что-то вроде «Избегайте некомпозитной анимации». Это означает, что на вашей странице есть анимация, которую можно оптимизировать для повышения производительности.

GT Метрикс

• Перейдите на веб-сайт GTmetrix , введите URL-адрес своего сайта и запустите тест. GTmetrix предлагает комплексный анализ производительности загрузки вашего сайта.

• После завершения анализа вы получите подробный отчет. GTmetrix больше фокусируется на общих показателях производительности, поэтому он не может напрямую указывать на некомпозитные анимации, такие как PageSpeed ​​Insights.
• Обратите внимание на время рендеринга и показатели загрузки ЦП, например «Общее время блокировки» или «Время взаимодействия».
• Хотя GTmetrix может не упоминать явно некомпозитную анимацию, высокие значения в этих областях могут указывать на неэффективные процессы рендеринга, что может быть связано с некомпозитной анимацией.

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

Как браузеры обрабатывают анимацию?

Когда дело доходит до обработки анимации, браузеры используют две основные части компьютера: ЦП (центральный процессор) и графический процессор (графический процессор). Простые анимации, такие как изменение цвета или текста, обычно управляются процессором.

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

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

Причины некомпозитной анимации

Чтобы перейти к решению проблемы некомпозитных анимаций, важно сначала понять, что их вызывает. Вот некоторые распространенные причины:

Анимация некомпозитных свойств

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

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

Использование JavaScript для анимации

Использование JavaScript для анимации также может вызвать проблемы. Анимации на основе JavaScript, особенно если они не оптимизированы, могут требовать много ресурсов процессора. Хотя JavaScript предлагает больше контроля над анимацией, это может привести к проблемам с производительностью, если анимация сложна или неэффективно закодирована.

Сложные окрашенные участки

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

Неэффективная графика или медиа

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

Чрезмерное использование теней и фильтров

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

Примечание. Узнайте о других причинах медленной работы веб-сайтов .

Как избежать некомпозитной анимации

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

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

• Переходя к диагностике, мы обнаружили ошибку «избегать некомпозитной анимации».

Вот шаги, которые необходимо выполнить, чтобы решить эту проблему.

• Перейдите на панель управления WordPress
• Выберите «Внешний вид» > «Настроить».
• Вы можете найти код CSS в разделе «Дополнительный CSS». Существует высокая вероятность того, что этот код не использует оптимизированную CSS-анимацию, что и приводит к возникновению этой ошибки.

• Если вы разработчик, вы уже знаете, что этот код не оптимизирован. И вот изменения, которые сотворят чудеса с вашим сайтом.

Изменение 1: Добавление свойства Will-Change

Это изменение предназначено для информирования браузера о предстоящих изменениях анимации, что может помочь оптимизировать производительность рендеринга.

 .my-анимация {

    ширина: 100 пикселей;

    высота: 100 пикселей;

    цвет фона: красный;

    позиция: абсолютная;

    будет-изменение: трансформация, непрозрачность; /* Добавлена ​​строка */

    анимация: complexMove 5s, линейная, бесконечная;

}

/* Остальные ключевые кадры остаются неизменными */

Изменение 2: Уменьшение сложности анимации

Здесь преобразование масштаба на уровне 50 % было изменено с масштаба (2) на масштаб (1,5). Это снижает сложность и интенсивность анимации.

 .my-анимация {

    /* ... другие свойства ... */

    будет-изменение: трансформация, непрозрачность; /* Предполагаем, что изменение 1 сохранено */

    анимация: complexMove 5s, линейная, бесконечная;

}

@keyframes complexMove {

    /* ... ключевые кадры 0% и 100% ... */

    50% {

        преобразование: TranslateX (300%), поворот (180 градусов), масштаб (1,5); /* Измененная строка */

        непрозрачность: 0,5;

    }

    /* ... 100% ключевой кадр ... */

}

Вот как будет выглядеть ваш окончательный код:

 .my-анимация {

    ширина: 100 пикселей;

    высота: 100 пикселей;

    цвет фона: красный;

    позиция: абсолютная;

    воля-изменение: трансформация, непрозрачность; /* Информируем браузер о предстоящих изменениях */

    анимация: complexMove 5s, линейная, бесконечная;

}

@keyframes complexMove {

    0%, 100% {

        преобразование: транслироватьX(0) вращать(0) масштабировать(1);

        непрозрачность: 1;

    }

    50% {

        преобразование: TranslateX (300%), поворот (180 градусов), масштаб (1,5); /* Упрощенное масштабирование для снижения сложности */

        непрозрачность: 0,5;

    }

}

• Просто удалите предыдущий код, скопируйте и вставьте этот новый код в дополнительный CSS. Это не изменит анимацию, но наверняка устранит эту ошибку.

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

Таким образом, для устранения этой ошибки следует учитывать некоторые общие советы:

Совет 1. Оптимизируйте CSS-анимацию

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

Вот пример кода до и после оптимизации:

До оптимизации:

 .animate-left {

    положение: относительное;

    анимация: moveLeft 2s линейная бесконечность;

}

@keyframes moveLeft {

    от {слева: 0; }

    до { влево: 100 пикселей; }

}

После оптимизации:

 .animate-left {

    положение: относительное;

    анимация: moveLeft 2s линейная бесконечность;

}

@keyframes moveLeft {

    из {преобразование: TranslateX (0); }

    в {transform: TranslateX(100px); }

}

Совет 2. Использование возможностей свойства CSS «Will-Change»

Используйте свойство will-change , чтобы сообщить браузеру об элементах, которые изменятся в ближайшем будущем. Это позволяет браузеру подготовиться и оптимизировать изменения.

Вот как можно использовать свойство will-change;

• Вставьте следующую строку в свой код;

 будет-изменение: трансформация, непрозрачность; /* Добавлена ​​строка */

Совет 3. Выгрузка анимации на графический процессор

Разгрузка анимации на графический процессор (графический процессор) — это метод оптимизации веб-анимации, делающий ее более плавной и менее нагружающей центральный процессор (ЦП).

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

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

Вы можете использовать свойства трансформации и непрозрачности вместо левого и правого. Вот пример:

Неоптимизированный код:

 @keyframes moveLeft {

    от {слева: 0; }

    до { влево: 100 пикселей; }

}

Оптимизированный код:

 @keyframes moveLeft {

    из {преобразование: TranslateX (0); }

    в {transform: TranslateX(100px); }

}

Совет 4. Использование эффективных библиотек и инструментов

Включение эффективных библиотек, таких как GreenSock Animation Platform (GSAP) или Velocity.js, может оказаться очень эффективным при устранении ошибок некомпозитной анимации.

Эти библиотеки оптимизированы по производительности и предлагают более плавную и эффективную анимацию, чем стандартные CSS или JavaScript.

Чтобы включить библиотеку GSAP, выполните следующие действия;

• Найдите ссылку CDN для GSAP.
• Откройте HTML-файл, в котором вы хотите использовать GSAP.
• Вам необходимо поместить ссылку CDN внутри тега <script>. В идеале этот тег должен быть размещен в конце раздела <body>.

 <!DOCTYPE html>

<html>

<голова>

    <title>Ваша веб-страница</title>

    <!-- Другие элементы заголовка -->

</голова>

<тело>

    <!-- Здесь будет находиться ваш HTML-контент -->

    <!-- Сценарий GSAP CDN в конце тела -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>

</тело>

</html>

Как хостинг Cloudways может дополнить вашу оптимизированную анимацию

Хостинг Cloudways улучшает веб-сайты с помощью оптимизированной анимации, предлагая высокую скорость и длительное время безотказной работы от ведущих облачных провайдеров, таких как DigitalOcean, AWS и Google Cloud. Передовые решения кэширования, включая Memcached, Varnish и Redis, обеспечивают быструю загрузку анимации. Оптимизированный стек платформы вместе с Enterprise CDN Cloudflare еще больше повышает производительность анимации, особенно во время пикового трафика. В сочетании с надежными функциями безопасности Cloudways обеспечивает идеальную и экономичную среду хостинга для веб-сайтов с насыщенной анимацией.

Краткое содержание

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

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

Если у вас есть какие-либо вопросы по этой теме, смело обращайтесь.