Intento optimizar esta página: https://tikex-dev.com Usando la plantilla codrop: http://themes.framework-y.com/codrop/music/
Aplica un efecto de paralaje especial https://pixelcog.github.io/parallax.js/
Al cargar la página, primero puedo ver una pantalla de inicio negra, pero también cuando mido con Google Page Speed hay una lentitud significativa al cargar la página.
¿Cómo puedo acelerar la carga?
Una cosa que noté es que veo un <div> adicional representado debajo <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 tiene información específica de la pantalla, como el ancho y la altura de la pantalla. ¿La representación de div hace que el negro salpique y, por lo tanto, ralentiza la carga?
No tengo ese div en mi página cuando renderizo con Next.js. No hay nada entre el cuerpo y la barra de navegación representados por el servidor.
const Layout = ({ children, isNavbarTransparent }: Props) => { return ( <> <Navbar transparent={isNavbarTransparent} /> {children}¿Cómo se puede cargar más rápido?