I try to optimize this page: https://tikex-dev.com Using codrop template: http://themes.framework-y.com/codrop/music/
It applies a special parallax effect https://pixelcog.github.io/parallax.js/
When loading the page I can see a black splash screen first, but also when I measure with Google Page Speed there is a significant slowness loading a the page.
How can I speed up loading?
One thing I noticed I see a rendered extra <div> under <body>:
<div class="parallax-mirror ken-burn-center" style="visibility: visible; z-index: -100; position: fixed; top: -13px; left: 0px; overflow: hidden; transform: translate3d(0px, 0px, 0px); height: 831px; width: 1440px;"><img class="parallax-slider" src="/young-people-dancing-tango-studio.jpg" style="transform: translate3d(0px, 0px, 0px); position: absolute; top: -230.6px; left: 0px; height: 961px; width: 1440px; max-width: none;"></div>
Div has screen specific infos like width and height of the screen. Is the rendering of div makes the black splash, and so slows down loading?
I do not have that div in my page when rendering with Next.js. There is nothing between body and navbar rendered by server.
const Layout = ({ children, isNavbarTransparent }: Props) => {
return (
<>
<Navbar transparent={isNavbarTransparent} />
{children}
How can be faster loading?