El campo detrás de esta página
Antes de pedir referencias a un estudio que vende sitios web, el comprador juzga el sitio del propio estudio: qué tan rápido carga, si el oficio es real o instalado. Este caso es esa superficie — el sistema gráfico detrás de cada página de creativemk.net, reconstruido para que el oficio visible creciera mientras la página se hacía más liviana. Las cifras de peso son verificables en este repositorio, y el comportamiento de carga se puede medir en cualquier navegador.
−152 KB gzip, y el 3D creció
El problema
La primera versión cometió el error que juega en contra de un estudio en vez de a su favor: una escena three.js detrás del hero que se despedía arriba, dejando el noventa por ciento de la página como un documento plano. Costaba 184 KB de código ajeno comprimido dar una primera impresión que terminaba donde empezaba la lectura — y para un visitante decidiendo si este estudio debería construir su sitio, se leía como "instalamos una librería 3D", no como dirección de arte.
Qué construimos
La escena se reescribió como un solo fragment shader sobre un triángulo a pantalla completa, renderizado por OGL con imports quirúrgicos en vez de un motor entero. Dejó de ser la decoración del hero y se volvió el suelo de la página: un canvas fijo cuyo estado gira con los tres actos del sitio — contornos dorados densos sobre tinta, un susurro de topografía navy sobre papel, densificando otra vez para el cierre oscuro — impulsado por posición y velocidad de scroll. El puntero eleva el terreno hacia el cursor. Donde no hay GPU disponible corre una versión en canvas 2D de la misma matemática de ondas, así que un teléfono recibe un tier diseñado y no el escritorio sin su corazón.
En qué quedó
El oficio ahora acompaña todo el scroll en lugar de la primera pantalla, y el puerto quitó más bytes de los que puso: 31 KB de módulos OGL contra 184 KB de three.js, ambos comprimidos archivo por archivo como los sirve el edge, más cero scripts bloqueantes en todo el sitio. El visitante nunca espera por la decoración, y el comprador que abre el panel de red encuentra los números donde esta página dijo que estarían. Dos fallos se publicaron y se cazaron en el camino — un shader que compilaba solo en la ruta de respaldo, una caché de borde que sirvió una versión rota detrás de una ya arreglada — ambos registrados en el historial de commits.
Cifras comprobables
- 31 KB
- de renderer comprimido, reemplazando 184 KB de three.js
- 2
- dialectos de shader desde una fuente: ESSL 1.00 y 3.00
- 0
- scripts bloqueantes en todo el sitio
Entregables
Stack: OGL · GLSL · GSAP ScrollTrigger · Lenis · Cloudflare Pages
Este es el trabajo propio del estudio.
Los proyectos de cliente se publican con nombre y una cifra acordada, o no se publican. Dos están firmados y en producción.
Empezar un proyecto