La web de un estudio que vende rapidez y tenía que demostrarla
Nuestra propia web. Carga inicial por debajo de 99 KB, nada de terceros hasta que el visitante lo consiente, y un analizador que capta clientes diciéndoles la verdad.
Estrategia · Identidad · UX/UI · Textos · Diseño y desarrollo · SEO técnico
El encargo
Montar la web del estudio sabiendo que iba a ser el primer caso del portfolio. Eso obligaba a algo incómodo: todo lo que la web afirmara tenía que poder comprobarlo cualquiera en diez segundos, porque el visitante está dentro del ejemplo mientras lo lee.
De qué se partía
- Un estudio nuevo no tiene trabajos que enseñar, así que la web no podía apoyarse en un portfolio.
- Decir «hacemos webs rápidas» no convence a nadie: lo dicen todas. Había que demostrarlo en la propia página.
- El embudo habitual —un formulario de contacto— pide confianza antes de haber dado nada.
Las decisiones
-
01
La página se traza delante de ti, como un plano.
El nombre viene de la groma, el instrumento con el que se trazaban las ciudades romanas antes de levantar una sola piedra. La web hace lo mismo: un plano técnico que se va dibujando línea a línea mientras bajas, con sus cotas y su cruz de registro, sobre unos ejes que crecen de fondo. Es dibujo vectorial trazado por scroll, así que toda la escenografía pesa alrededor de un kilobyte y no habla de ningún sector: sirve igual para un despacho, una startup o un gimnasio.
-
02
Una pantalla de entrada antes de la home, y un interruptor para quitarla.
El logotipo y la promesa ocupan la pantalla entera un momento, se saltan con un clic o una tecla y no vuelven a aparecer en visitas siguientes. Sin JavaScript no existe, y con el sistema en «reducir movimiento» tampoco. Es una línea de configuración: si deja de convenir, desaparece del sitio sin tocar el diseño.
-
03
La coreografía vive en la hoja de estilos, no en el script.
El JavaScript no anima nada: publica el avance de cada escena en una variable y se aparta. Qué se mueve y cuándo lo decide el CSS. Eso deja el peso de script de toda la página en unos pocos kilobytes, con seis movimientos coreografiados dentro, y hace que el móvil y la tablet reciban exactamente la misma construcción que el escritorio en vez de una versión quieta.
-
04
El presupuesto no mide el peso, mide la espera.
Un tope duro de 99 KB para lo que hace falta antes de pintar la primera pantalla, y una partida aparte para lo que llega al bajar. La construcción falla si la primera se pasa. Cuatro reglas más —imágenes con medidas, carga diferida, vídeo que no se descarga solo— se comprueban en cada publicación.
-
05
Nada de terceros hasta que el visitante dice que sí.
La web mide audiencia, así que hay cookies y hay un tercero. Lo que no hay es ninguno de los dos antes del consentimiento: hasta que alguien acepta, no se instala una sola cookie ni se pide un solo recurso fuera del dominio. Y eso no es una intención: una comprobación automática recorre todas las páginas en cada publicación, sin aceptar nada, y bloquea la construcción si aparece una cookie o un recurso externo. Rechazar cuesta un clic, igual que aceptar.
-
06
El embudo regala información real en vez de pedir el correo.
Un analizador que revisa la web del visitante y le enseña dos problemas enteros, dejando el resto a la vista pero sin el detalle. El análisis es pasivo —se lee lo que el servidor devuelve, no se escanea nada— y no inventa hallazgos: si una web está bien, se le dice. Lo tapado se dibuja con barras, no con texto falso.
Cómo quedó
El resultado, medido
55 KB
Carga inicial
0
Cookies y terceros
39
Comprobaciones en verde
Medido en movil, 390px, sin cache. Tamano transferido con Brotli
Y lo que puedes comprobar tú
- El peso de la carga inicial, en la pestaña de red de cualquier navegador.
- Que no hay ninguna cookie ni nada guardado, en la pestaña de almacenamiento.
- Que ningún recurso sale de este dominio, en la misma pestaña de red.
- Que la página entera se lee con el JavaScript desactivado.