Performance Issues – Where to start?

[eliasu]

Hi there,

I´ve built a site for a little festival. So far everything works good, but I think the performance is improvable. Especially the "render" or "paint" process of the page ist slow. I think its due to a lot of media on the page and the design choices like:

• background animation on scroll
• grain effect with blendmode above the whole site
• big svg images in the background

On better computers and smaller browser windows the issues and glitches are less. Its mainly visible if you scroll fast, then the render process takes its time to follow (I added a screencast to present the glitches).

I understand that this is not specially an issue with Statamic but more a general "web dev" issue. But maybe you can give me an idea where to start to improve those issues. Maybe you have tools for render analysis to figure out, which elements causing the heavy load? Maybe I did something wrong, or I did not understand something? I appreciate every help, since I'm running into performance issues from time to time, and I would like to improve my abilities there:

Here is the page:
detectclassic.com/festival/archiv/2023

Heres a little explaination which element is which:

Here is the screencast which shows:
https://github.com/statamic/cms/assets/11287110/be5fa3d9-d471-41b0-870b-f8763bc89a37

Thanks so much!
All the best.

[andjsch]

I am a Firefox user and don't have the issue you are showing in your video.

Great looking site though! ❤️