Webs con 3D que cargan rápido en el móvil: lo que de verdad importa

Una web con 3D llama la atención. Una web con 3D que tarda diez segundos en abrirse en un móvil de gama media, no. La mayoría de las visitas a una empresa local llegan desde el teléfono, y quien espera de más se va antes de ver nada. La buena noticia: el 3D en la web puede ser ligero si se decide bien desde el principio.

Qué hace lenta a una web 3D

Casi siempre es una de estas cuatro cosas:

Modelos demasiado pesados. Un modelo exportado desde un programa de diseño puede tener millones de polígonos y texturas de varios megas. El visitante no los necesita.
Texturas sin comprimir. Suelen pesar más que la propia geometría.
Todo se carga de golpe. La página no se muestra hasta que el último archivo ha llegado.
El dispositivo no da más de sí. Un móvil antiguo dibuja menos fotogramas por segundo que un ordenador, y una escena pensada para el ordenador se vuelve a tirones.

Cómo se evita

Modelos en glTF. Es el formato estándar del 3D en la web, y admite compresión de geometría y de texturas. Un modelo bien preparado pierde peso sin perder la forma que se ve en pantalla.

Menos polígonos donde nadie mira. Se detalla lo que el visitante ve de cerca y se simplifica lo que está lejos o detrás.

Carga progresiva. Primero aparece el texto, el diseño y un primer cuadro de la escena; el 3D completo llega después. El visitante puede leer y pulsar mientras tanto.

Calidad que se adapta. La escena elige su nivel de detalle según el dispositivo. En nuestra propia web hay tres niveles de calidad (alto, medio y ligero) y una versión sin 3D.

Una versión sin 3D. Hay visitantes con equipos antiguos, con el ahorro de batería activado o que simplemente no quieren animaciones. Una buena web 3D sigue funcionando para ellos: mismo contenido, mismos botones, sin escena.

Three.js y WebGPU

Three.js es la biblioteca de 3D para la web más extendida y es la que usamos. Las versiones recientes dibujan con WebGPU, la tecnología nueva de los navegadores para aprovechar la tarjeta gráfica, y recurren a WebGL cuando WebGPU no está disponible. Para el visitante no cambia nada, salvo que en los equipos compatibles la escena va más fluida.

Un ejemplo con números

La web de estudio MY es una escena 3D completa con sonido y animación. Su biblioteca de 3D pesa unos 258 KB comprimida y el código propio de la página, unos 64 KB. Hemos diseñado la página para que el texto y la navegación estén disponibles sin esperar a la escena, y la comprobamos en tamaños de pantalla de ordenador y de móvil. Son nuestras cifras, de nuestra web: cada proyecto se mide por separado.

Cómo saber si su web es rápida

Google mide la experiencia de carga con tres indicadores (Core Web Vitals). El más fácil de entender es el LCP: el tiempo hasta que aparece el contenido principal. Google considera bueno un valor de 2,5 segundos o menos. Puede comprobar su web gratis en PageSpeed Insights, indicando la versión móvil.

Cuándo no hace falta 3D

Si su web solo informa (horarios, carta, contacto), el 3D no aporta nada y una web sencilla y rápida vende más. El 3D compensa cuando el producto o el espacio se entienden mejor girándolos: un configurador de producto, un proyecto de jardín o una escena que haga recordar su marca.

¿Quiere 3D en su web sin perder visitas en el móvil? Cuéntenos qué quiere mostrar y le decimos qué nivel de 3D tiene sentido. → Diseño web