Использование нескольких SVG на веб-странице приводит к выпадению кадров и влияет на общее качество прокрутки страницы. ⇐ CSS

[Гость]

Я разрабатываю статический сайт с использованием NextJS, домашняя страница которого содержит несколько фонов SVG. К SVG применено несколько путей и фильтров, что приводит к пропаданию кадров и дёрганной прокрутке. Я тестировал без SVG, кажется, работает нормально.
Я пробовал применить эти свойства CSS к элементам. Transform: TranslateZ(0);will-change: Transform< /code>, чтобы включить ускорение графического процессора, но это не дает эффекта.
Я также добавил Service Worker для кэширования изображений, чтобы сократить время загрузки, но падение кадров по-прежнему происходит.
Есть ли идеи, как решить эту проблему и улучшить производительность страницы?
Заранее спасибо

Подробнее здесь: https://stackoverflow.com/questions/782 ... pages-over