El campo de contornos 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.
−147 KB gzip, y el 3D creció
El problema
El campo de contornos es el sistema gráfico detrás de cada página de creativemk.net. Su 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 y dejaba el noventa por ciento de la página como un documento plano. Costaba 183 KB de código ajeno comprimido con gzip comprar una primera impresión que terminaba donde empezaba la lectura. Para un visitante que decide si este estudio debería construir su sitio, eso se lee como "instalamos una biblioteca 3D". No se lee 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. Más importante: el campo de contornos dejó de ser la decoración del hero y se volvió el suelo de la página. Ahora un canvas fijo persiste a lo largo de todo el documento, y su 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. La posición de scroll impulsa la transición y la velocidad la dobla, así que el campo reacciona a qué tan rápido lees y no solo a dónde estás. El puntero eleva el terreno hacia el cursor.
Dos restricciones dieron forma al resto. El shader compila desde una sola fuente hacia los dos dialectos GLSL que la web todavía sirve, ESSL 1.00 y 3.00, porque un contexto WebGL1 y uno WebGL2 no se ponen de acuerdo en la sintaxis que este código necesita. Y donde no hay GPU disponible corre un tier en canvas 2D con la misma matemática de ondas, así que un teléfono recibe un respaldo diseñado y no el escritorio sin su corazón. Un buffer de tiempo de cuadro baja la resolución antes de que el visitante alcance a ver un tirón, y el tier más bajo detiene el bucle y deja el campo asentado. La degradación termina en quietud, nunca en diapositivas.
En qué quedó
El oficio ahora acompaña todo el scroll en lugar de la primera pantalla, y la migración quitó más bytes de los que puso. El renderer son 36 KB de módulos OGL contra 183 KB de three.js — gzip -9, archivo por archivo, como los sirve el edge a un cliente que no acepta brotli. Por la ruta brotli ambos números bajan y la distancia se acorta: 31 KB contra 151 KB. Cualquiera de las dos bases es un ahorro real; mezclarlas, que es lo que hacía una versión anterior de esta página, no es una medición. Ningún archivo de script bloquea el primer render en todo el sitio — el único script clásico en un <head> es el bootstrap inline de revelado, que pesa menos de un kilobyte y es justamente lo que deja la página legible cuando el JavaScript falla. Así que 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 durante el trabajo y vale la pena contarlos, porque un caso que solo enumera aciertos es un folleto. Un shader compilaba limpio en la ruta de respaldo y no en la principal, así que el campo se iba a negro justo en el hardware para el que fue escrito — la compilación de doble dialecto de arriba es el arreglo. Y una caché de borde sirvió una versión rota por delante de una ya corregida durante cuatro horas, que es el TTL de caché de navegador que tiene configurado esta zona. Los dos están en el historial de commits con su propio mensaje.
Cifras comprobables
- 36 KB
- de renderer con gzip -9, reemplazando 183 KB de three.js
- 2
- dialectos de shader desde una fuente: ESSL 1.00 y 3.00
- 0
- archivos de script 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