Mobile first en la práctica para un negocio de una página
Cuatro decisiones lo cubren. Ancho y alto explícitos en cada imagen, zonas táctiles alcanzables, texto que se amplía y el teléfono como enlace, que juntos mantienen el Cumulative Layout Shift por debajo de 0,1 y el Interaction to Next Paint por debajo de 200 milisegundos en el percentil 75. Nada de eso necesita una web nueva.
Las cuatro decisiones
1. Dimensiones de imagen. Dé a cada imagen ancho y alto explícitos para que el texto deje de moverse cuando llega la foto. Ese hábito es lo que mantiene el Cumulative Layout Shift en 0,1 o menos, el umbral bueno.
2. Zonas táctiles. Todo lo que se pueda tocar debe alcanzarse con el pulgar, y eso es sobre todo cuestión de espaciado más que de tamaño. Un menú que exige precisión produce toques erróneos y vueltas atrás.
3. Texto ampliable. Nada fijado en un tamaño que no pueda crecer. Es además la parte más barata de la cuestión de accesibilidad y cuesta una decisión en la hoja de estilos.
4. El número como enlace. Un teléfono que hay que copiar es un teléfono al que no se llamará, y en oficios urgentes eso es toda la consulta.
Cuáles son de verdad los umbrales
Tres cifras, y están publicadas. El Largest Contentful Paint es bueno con 2,5 segundos o menos. El Interaction to Next Paint con 200 milisegundos o menos. El Cumulative Layout Shift con 0,1 o menos. Los tres se evalúan en el percentil 75 de las cargas, separando móvil y escritorio.
El percentil es lo que cuenta en móvil. Su propio teléfono con el wifi de la oficina no es la medición; tres cuartas partes de las visitas reales deben superar el listón, incluidas las de conexión débil en la calle.
INP sustituyó al First Input Delay como métrica estable de interactividad en 2024. Un informe que aún habla de FID mide algo retirado, lo que es una forma rápida de fechar el consejo que le están dando.
| Decisión | Protege | Esfuerzo |
|---|---|---|
| Ancho y alto en imágenes | CLS en 0,1 o menos | Minutos por página |
| Espaciado de zonas táctiles | Toques erróneos | Un cambio de estilos |
| Texto ampliable | Legibilidad y accesibilidad | Una decisión |
| Teléfono como enlace | La consulta urgente | Una línea |
Qué no hacer
No encargue una web nueva para esto. En una web de 9 páginas, las dimensiones de imagen, el espaciado y un enlace en el número son una tarde para quien mantiene la web.
Y no añada una versión móvil aparte. Una página que se adapta es más fácil de mantener correcta que dos que se separan, y esa separación siempre aparece en los cuatro valores de identidad que debían permanecer idénticos.
Pruébelo una vez en un móvil real en la calle. Cargue la página con datos móviles lejos de la oficina, toque el número y compruebe si arranca la llamada. Esa sola prueba encuentra más que cualquier informe y dura dos minutos.
Preguntas y respuestas
¿Necesito una web móvil aparte?
¿Cuál es la mejora más rápida?
¿Por qué mi propio teléfono no es una buena prueba?
¿Sigue importando FID?
Fuentes
- web.dev, Web Vitals Los tres umbrales y la evaluación en el percentil 75
- Google Search Central, buenas prácticas de SEO para imágenes Tratamiento de imágenes, incluida la dirección de reserva en imágenes adaptables
