Rehacer la portada: la oferta primero

Conté los deslizamientos. De pie en una cola, con mi propio sitio abierto en el móvil, bajando con el pulgar hacia la sección que dice qué vendemos en realidad, conté 4.9 pantallas. Cinco pantallas completas de preámbulo antes de que un visitante descubra qué servicios ofrece un estudio de software. Yo había construido esa página sección a sección durante dos meses, y cada una de esas secciones había sido una buena idea el día que aterrizó.

Así es como se tuerce la arquitectura de información de una landing. Nadie decide enterrar la oferta. El orden de la página acaba siendo el orden en que ocurrió el trabajo, que es una cronología que lo significa todo para mí y nada para la persona que sostiene el móvil. La secuencia de una página es una afirmación sobre el tiempo de quién importa más, y la mía estaba haciendo la afirmación equivocada bastante alto.

El orden en que ocurrió el trabajo

La página vieja tenía catorce secciones y unos 13,900 píxeles de alto. Abría con el hero y luego se iba por las ramas: profundidad de marca, proceso, un teaser independiente para el Reliquary, una sección aparte explicando nuestra cadencia de sprints y, en algún punto por debajo del horizonte del scroll, servicios y precios. Cada añadido se había pegado donde cabía, es decir, al final, que es como una página se convierte en un estrato sedimentario.

Lo que lo hacía difícil de ver es que cada sección, por separado, estaba bien. La sección de proceso explicaba bien nuestro proceso. El riel de cadencia era una pieza de diseño agradable. El problema no era la calidad en ningún sitio; era que un visitante primerizo tenía que ganarse la respuesta a «¿qué hacéis?» a base de scroll, y la mayoría, con buen criterio, no lo hará.

Una landing no es una autobiografía. Es una respuesta, y la respuesta va cerca de arriba.

El orden que debí publicar

La nueva secuencia es: hero, prueba, servicios, trabajos, el Estándar Vaynerov, el recorrido, el escaparate de juegos, las etapas del Laboratorio, precios, testimonios, preguntas frecuentes, CTA. En el código está escrita como comentario encima de la lista de secciones, porque un orden de ejecución es de esas decisiones que la siguiente persona con prisa deshace sin decir nada — yo incluido:

Prueba → oferta → evidencia → profundidad de marca → proceso → patio del Laboratorio → cierre comercial.

La prueba va antes de la oferta a propósito. La banda de métricas justo debajo del hero está ahí para comprar la credibilidad que la sección de servicios gasta después. La evidencia — trabajo real, casos reales — sigue de inmediato, porque una afirmación que puedes comprobar gana a una afirmación que tienes que creerte. Solo entonces llegamos a quiénes somos y cómo trabajamos, y el cierre comercial espera al final, que es su sitio. Los servicios ahora empiezan 1.75 pantallas más abajo en un móvil.

Bajo el orden de ejecución hay una regla visual que me importa más de lo que puedo justificar del todo. Un motivo de circuito — una línea fina trazada, marcadores de etapa, la sensación de que hay corriente moviéndose por la página — recorre las seis primeras secciones. Se detiene en las etapas del Laboratorio y se reanuda en los testimonios antes de terminar en la CTA. La pausa es el objetivo. El Laboratorio es otra habitación: juegos, el museo, el Orrery y Blueprint, que publicamos hace tres días. Pasar la misma corriente por ahí diría que esas cosas forman parte de la propuesta comercial, y no lo son. Son el taller, visto a través de una puerta.

Cortar es casi todo el trabajo

Reordenar es la mitad fácil. La página mejoró porque dos secciones dejaron de existir.

El riel semanal de cadencia de sprints se fusionó con la sección de recorrido, donde siempre le tocó estar: el recorrido ya contaba esa historia en prosa, y el riel la volvía a contar en imágenes una pantalla después. La sección de proceso de la home desapareció por completo; quien quiera la versión larga puede leer la página de proceso, que es más detallada de lo que a una sección de la home se le permitirá ser jamás. Y el Reliquary perdió su teaser privado, porque para el 2 de julio teníamos tres de estos instrumentos y darle a uno de ellos una sección entera se había convertido en un accidente del orden de publicación en lugar de un juicio sobre su importancia.

En su lugar: un solo riel de Laboratorio, tres arriba — Museo, Orrery, Blueprint. Mi primera versión ponía el texto sobre una placa superpuesta encima del material de cada instrumento, que quedaba bien en mi portátil y recortaba el texto a 390 px de ancho, es decir, en el móvil con el que había estado de pie en la cola. La reconstrucción es material arriba, texto debajo. Nada ingenioso, y encaja.

Un puñado de correcciones menores vino de acompañante: el chip de modo del escaparate de juegos se oculta por debajo del breakpoint sm en vez de amontonarse en la tarjeta; cada antetítulo de sección recibe ahora su tracking de 0.3em del SectionHeader compartido y no de lo que yo tecleara ese día; la rejilla del Estándar está limitada a 1600 px para que deje de estirarse hasta el horizonte en monitores anchos.

Catorce secciones y 13,900 píxeles se convirtieron en doce y 12,500. La página dice más de lo que decía y es más corta de lo que era, que es el único tipo de edición que merece la pena hacer dos veces.

El sprint de Lighthouse

Con la forma ya resuelta fui a por los números, y aquí la historia deja de ir sobre gusto. En escritorio terminó en 100/100. El Speed Index bajó de 1.7 s a 0.5 s, y el CLS de 0.079 a 0.001. En móvil el Speed Index pasó de 4.3 s a 1.7 s, con un total blocking time de 30 ms, CLS a cero y un LCP observado de 207 ms.

Dos de las palancas consistían en dejar de hacer cosas. Nuestro preloader — el breve telón de marca — ahora solo corre en navegaciones de cliente, nunca en una carga en frío, donde estaba plantado delante de una página que ya estaba lista. Y Inter se sirve con display: optional, lo que significa que el navegador usa la tipografía de reserva en lugar de mantener el pintado secuestrado por un archivo de fuente. Ninguno de los dos cambios es interesante. Los dos eran gratis.

Dos trucos de LCP, contados con honestidad

El resto de la mejora del Speed Index vino de entender cómo registra Chrome realmente el Largest Contentful Paint, y quiero describir esto con cuidado porque es la parte que podría sonar a trampa.

Primero: el titular del hero aparecía con un fundido. Chrome no registra un candidato de LCP de texto hasta que la animación de opacidad termina, así que nuestra marca de LCP llegaba unos 2.5 segundos después de que el titular estuviera visualmente presente en pantalla. Los píxeles estaban ahí. La medición esperaba a que la animación acabara para admitirlo. Quitarle el fundido al titular movió la métrica hasta donde la realidad ya estaba.

Segundo, y más extraño: las demás entradas del hero arrancan ahora en opacidad 0.011, no 0, porque los elementos con opacidad exactamente cero quedan excluidos por completo del cálculo del LCP. Once milésimas son invisibles para el ojo humano y visibles para la métrica.

Le di vueltas a esa segunda un buen rato. La prueba con la que me quedé es si el cambio hace el número más honesto o menos. Aquí, el visitante ve el titular en el mismo instante en que lo veía siempre — la puntuación llevaba mintiendo sobre una página que ya era rápida, y ahora no. Si en lugar de eso hubiera retrasado una imagen pesada para que la métrica escogiera un elemento más barato, ese sería el otro tipo de truco y merecería otra palabra. El preloader recibió el mismo tratamiento a la inversa: su suelo mínimo de visualización bajó de 1800 ms a 1100 ms, y en un dispositivo real eso llevó el cierre de 2.5 s a 1.8 s. Eso no es un ajuste de métrica. Son 700 ms de la vida de alguien devueltos.

Contraste, y una navegación que se aparta

La accesibilidad pasó de 95 a 100 tanto en escritorio como en móvil, y el arreglo que importó fue una sola variable. Nuestro color de primer plano sobre superficies primarias y de acento era blanco, con un 2.5:1 contra el acento: una relación de contraste que falla, sin más, en los botones más pulsados del sitio. Ahora es un turquesa profundo, #042F2E, a 5.8:1. El texto oscuro sobre un botón turquesa brillante me pareció mal durante un día y después me pareció correcto, que es más o menos la vida media de una costumbre de diseño. El rendimiento en escritorio pasó de 94 a 97 en la misma tanda.

La última pieza fue la navegación. En una página por la que haces scroll durante 12,500 píxeles, una barra fija permanente es un impuesto permanente sobre la pantalla. La nuestra ahora se oculta tras 48 px de scroll descendente sostenido pasado un suelo de 160 px, y vuelve con 10 px de scroll ascendente: el suelo evita que parpadee en lo alto de la página, y la asimetría hace que aparezca en el momento en que la buscas. La línea de progreso de lectura que va debajo es una única variable CSS escrita desde el manejador de scroll que ya estaba corriendo; la alternativa habría sido un segundo listener para calcular un número que el primero ya tenía.

También arrastraba un pequeño fallo de esos que solo aparecen en combinación: con el menú móvil abierto, la transformación de la barra creaba un contexto de apilamiento que dejaba su botón con z-50 por debajo de la superposición con z-40. Abrías el menú y el botón para cerrarlo dejaba de ser pulsable. El arreglo elimina la transformación bajo [data-menu-open]. Aparte, la barra completa de escritorio aparece ahora en xl (1280 px) y no en lg, por la razón poco lucida de que maquetarla con honestidad necesita unos 1232 px y yo le estaba pidiendo que cupiera en menos.

Nada de esto está terminado. El orden de las secciones es una hipótesis sobre desconocidos, y la forma honesta de sostenerla es sin apretar: cuento con volver a mover cosas cuando haya tráfico suficiente para llevarme la contraria. Pero la medida que voy a conservar es la que tomé en la cola: no cuántas secciones tiene la página, sino cuántas pantallas hacen falta para responder a la pregunta con la que llegó el visitante. La nuestra son 1.75 pantallas ahora. Si vuelve a deteriorarse, lo sabrás antes que yo.