· Equipo de The AI Web Factory
Lo que cuesta una web lenta, en números
Qué mide Google exactamente, de dónde salen los segundos que pierde tu web y los arreglos por orden de rendimiento. Con el caso de la nuestra: de 88 a 97.
La velocidad de una web se discute poco porque suena a asunto de técnicos. Y es de lo poco en todo este oficio que se puede medir sin discusión, con una herramienta gratuita, en un minuto.
Abre PageSpeed Insights, pega tu dirección y mira el número de móvil. No el de escritorio, que siempre sale mejor y no representa a casi nadie.
Las tres cosas que mide Google
Desde 2021 Google usa tres medidas para ordenar resultados. Tienen nombres feos y conviene entenderlas, porque cada una se arregla de una manera distinta.
La primera es el LCP, el tiempo que tarda en aparecer el elemento más grande de la pantalla. Suele ser la foto de cabecera o el titular. Google considera aceptable por debajo de 2,5 segundos.
La segunda es el CLS, cuánto se mueve el contenido mientras carga. Todos hemos ido a pulsar un enlace y en el último instante ha saltado hacia abajo porque arriba acababa de cargar una imagen. Eso es el CLS y se mide de 0 a 1. Lo aceptable es menos de 0,1.
La tercera es el INP, lo que tarda la página en responder cuando pulsas algo. Por debajo de 200 milisegundos.
De las tres, la que más se descuida es la segunda, porque no se percibe como un problema de velocidad. Es un problema de nervios.
De dónde salen los segundos
En las webs que auditamos, el peso se reparte casi siempre igual.
Las imágenes son lo primero. Una foto de cabecera sacada de la cámara pesa entre 2 y 5 MB. La misma imagen en WebP, al tamaño en que se va a ver, pesa 150 o 200 KB. Es una reducción de más del 90 % y nadie nota la diferencia mirando.
Las tipografías son lo segundo y es el que más gente pasa por alto. Cargar una fuente de Google Fonts desde sus servidores añade una conexión a otro dominio, con su resolución de DNS y su negociación de TLS, antes de que se pinte una sola letra. Alojarla tú mismo quita ese viaje. Y de paso evita el problema de privacidad de que la IP de tus visitantes acabe en un servidor ajeno sin su consentimiento.
El tercero son los scripts. El chat de atención al cliente, el píxel de Facebook, el mapa incrustado, la herramienta de reseñas. Cada uno trae el suyo y entre todos pueden sumar medio megabyte de JavaScript que el móvil tiene que descargar, interpretar y ejecutar. Un teléfono de gama media de hace cuatro años tarda en eso bastante más de lo que imagina quien lo prueba desde un portátil nuevo con fibra.
El caso de esta web
Lo contamos con números porque es más útil que una teoría.
Nuestra portada tenía un CLS de 0,188, casi el doble del límite. Casi todo venía del subtítulo del encabezado: el texto se pintaba con la fuente del sistema y, cuando terminaba de cargar Montserrat, cambiaba de tamaño y empujaba todo lo de abajo.
El arreglo no fue quitar la tipografía. Fue definir una fuente de reserva con las métricas ajustadas a las de Montserrat, de modo que el texto provisional ocupa exactamente el mismo espacio que el definitivo. El salto desapareció: CLS 0. La puntuación general pasó de 88 a 97.
Es un cambio de unas pocas líneas de CSS que casi nadie hace y resuelve de un golpe la medida que más cuesta arreglar por otros caminos.
El orden por el que conviene atacar
Primero las imágenes, porque es donde está el peso y donde el arreglo es
mecánico. Conviértelas a WebP, sírvelas al tamaño en que se ven y ponles
width y height en la etiqueta para que el navegador reserve el hueco.
Segundo, aloja las tipografías en tu propio dominio y carga solo los pesos que uses de verdad. Si tienes seis variantes cargadas y usas dos, estás pagando cuatro de más.
Tercero, revisa los scripts de terceros uno por uno y pregúntate si cada uno aporta más de lo que cuesta. El chat que recibe dos consultas al mes sale caro.
Cuarto, si tu web se genera cada vez que alguien entra, plantéate generarla antes. Una web estática, que es un montón de ficheros HTML ya hechos, no tiene que consultar ninguna base de datos para responder. Nosotros trabajamos así casi siempre y por eso nuestras webs cargan rápido sin tener que pelear.
Lo que no hace falta
Un plugin de caché que promete arreglarlo todo. Suele tapar el síntoma y dejar el problema. Si tus imágenes pesan 4 MB, la caché acelera la segunda visita de la misma persona y nada más.
Tampoco hace falta perseguir el 100. La diferencia entre 92 y 98 no la nota nadie y cada punto por encima de 90 cuesta el doble que el anterior. Lo que sí importa es no estar en 40.
Una cosa más, que no es de velocidad
Todo lo anterior mejora también el consumo de datos de quien te visita y la duración de su batería. Y hace tu web usable con cobertura mala, que es la situación de cualquiera que entre desde un polígono, un aparcamiento o un pueblo pequeño. Para muchos negocios, esa es justamente su clientela.
Si quieres saber en qué números está tu web, escríbenos y te mandamos el informe con lo que sale y lo que cuesta arreglarlo.
Comentarios
Para comentar necesitas entrar con una cuenta. No publicamos tu correo.
Al entrar se guardan tu nombre y tu imagen de perfil junto al comentario. Puedes borrarlo cuando quieras. Lo explicamos en lapolítica de privacidad.
