I am struggling to improve animation performance on safari for this page.
Not just the front page (which contains a rather large lottie element – but also pages with only text above the fold).
It’s particularly the load in that has been tricky as hell. I have tried multiple things. Native GSAP and custom code. Initialliy I was aiming for text-split loading in, but that was performing even worse.
It seems the problem is a bottleneck at the page load, as there seems to be many native JS scripts that need to load. The CPU strain is through the roof.
Perhaps a plugin like barba.js could handle the load in animation better…
Hello @Gabdzi , As per the description of the problem you specified, you need to apply some practices to solve the issue.
Lazy load heavy modules with dynamic imports- Try to apply lazy loading with dynamic imports. Below is the coded solution for that -
// Only load the heavy module when needed
button.addEventListener('click', async () => {
const { heavyFunction } = await import('./heavyModule.js');
heavyFunction();
});
Throttle expensive functions like scroll, resize-
function throttle(fn, delay) {
let last = 0;
return (...args) => {
const now = Date.now();
if (now - last >= delay) {
last = now;
fn(...args);
}
};
}
window.addEventListener('scroll', throttle(() => {
console.log('Throttled scroll event');
}, 200));
Alternatively, if you are too frustrated with this, I recommend trying Website Speedy- a webflow app which is best optimizes the site and enhances the performance by handling JS, CSS, and other core web vitals.
(Disclaimer: We are part of the developing team and are always there to help you. If you have any query, ask without any hesitation.)