La visita se acaba en silencio

Nadie escribe para decir que la página pesaba. Vuelven a los resultados y llaman a otro. Ese es el fallo entero. No aparece como una queja. Aparece como una tarde quieta.

web.dev nombra tres medidas de esa espera: Largest Contentful Paint, Interaction to Next Paint y Cumulative Layout Shift. Un buen LCP ocurre dentro de 2.5 segundos desde que la página empieza a cargar. Un buen INP es de 200 milisegundos o menos. Un buen CLS es de 0.1 o menos. Son las metas que publica Google, medidas en el percentil 75 de las cargas. No son un puntaje que Moonbow haya inventado para tu sitio, y esta página no midió el tuyo.

Paso 1: abre la página de inicio en un teléfono

Carga la portada en un teléfono, con una conexión normal, no solo en el Wi-Fi de la oficina junto al router.

  • ¿El oficio aparece antes de que termine una foto a pantalla completa?
  • ¿El teléfono aparece en la misma vista?
  • Cuando intentas tocarlo, ¿la página salta?
  • ¿Puedes tocarlo sin abrir el menú?

Un salto bajo el pulgar es un cambio de diseño. Un número que llega tarde, debajo de una foto hero, es una pintura lenta. Anota lo que viste antes de instalar un plugin que promete arreglar “la velocidad”.

Paso 2: reduce las imágenes que la página sí carga

El culpable habitual en un sitio de servicios es una foto: una camioneta, una cocina, el equipo, guardada como salió de la cámara y puesta en el hero.

  • Exporta una copia al tamaño de la pantalla, no el original. Un hero no necesita un archivo de 4000 píxeles.
  • Prefiere un formato moderno como WebP, y deja un respaldo que el navegador pueda mostrar.
  • Define el ancho y el alto para que el texto no salte cuando llega la imagen. Ese salto es el CLS.
  • Si la foto es decoración y la frase del oficio es lo que importa, la frase no debería esperar a la foto.

Hazlo primero en la portada. Después en las páginas de servicio. Un plugin que comprime imágenes que nadie ve no cambia la primera pantalla.

Paso 3: pon el teléfono y el formulario donde llega el pulgar

En un teléfono, los toques cómodos están en la franja que el pulgar ya alcanza. Un número del tamaño de una letra chica, pegado a una esquina o solo en el pie, se pierde.

  • Pon el número en la primera pantalla, como texto, con espacio alrededor.
  • Pon el botón del formulario al lado, o a un desplazamiento corto, no después de seis secciones.
  • Usa el mismo número del Perfil de Empresa de Google.
  • Evita que la cabecera tape el número al desplazarse. Si una barra fija esconde el enlace, el enlace no está.

La guía de visitas sin leads es la mitad de redacción. La velocidad es la mitad que el cliente siente antes de leer. Cuando el tema mismo es el peso, el rediseño es el servicio que corresponde.

Lista

  • Abrí la portada en un teléfono, fuera del Wi-Fi de la oficina.
  • El oficio y el número aparecen antes de que termine el hero.
  • La imagen del hero es una copia al tamaño, no el original de la cámara.
  • El diseño no salta cuando llega la imagen.
  • El número es texto, se puede tocar y coincide con el Perfil de Empresa.
  • Una barra fija no tapa el número.