Una web lenta pierde clientes antes de que lean la primera línea. Lo digo a menudo, así que esta vez lo he medido en casa: he optimizado esta misma web, pepe.pro, y estos son los cambios y los números reales, medidos con Google Lighthouse en móvil, antes y después.
El punto de partida
La portada tardaba 6,7 segundos en mostrar su contenido principal (LCP, la métrica que Google usa para medir la carga). Lighthouse le daba un 72 sobre 100 en rendimiento y la página pesaba 852 KB. No era un desastre a simple vista, pero en un móvil con cobertura normal la primera impresión era una pantalla en blanco.
Los resultados
- Rendimiento: de 72 a 100.
- LCP (contenido principal visible): de 6,7 s a 1,2 s.
- Speed Index: de 5,3 s a 1,1 s.
- Peso de la portada: de 852 KB a 70 KB.
- Peticiones al servidor: de 29 a 16.
- SEO en Lighthouse: de 61 a 92.
Qué he cambiado
1. Las fuentes: de 384 KB a 39 KB
Era el mayor problema. La tipografía se cargaba en formato WOFF antiguo, con todos los caracteres de todos los idiomas y con font-display: block, que obliga al navegador a esconder el texto hasta que la fuente llega. La he convertido a WOFF2, he dejado solo los caracteres que usa el español y otros idiomas de Europa occidental, la precargo y uso font-display: swap para que el texto aparezca al instante.
2. Menos JavaScript, y nada que bloquee
La web cargaba jQuery, el JavaScript completo de un framework de maquetación del que solo usaba la rejilla (que es CSS) y una librería de animaciones desde un servidor externo. Lo he sustituido por un único archivo propio de unas pocas decenas de líneas, cargado en diferido, que hace las animaciones con IntersectionObserver y respeta a quien tiene activada la reducción de movimiento.
3. Analítica solo con consentimiento
Había dos etiquetas de Google Analytics, una de ellas de la versión antigua que ya no recoge datos. Ahora solo hay Google Analytics 4 y únicamente se carga si el visitante lo acepta en el aviso de cookies. Mejora la velocidad y, sobre todo, cumple la normativa.
4. Plugins: menos es más
Había una treintena de plugins instalados, la mayoría desactivados y algunos con años sin actualizar (un riesgo de seguridad, aunque estén apagados). He dejado los imprescindibles: SEO, caché, formulario y edición. Cada plugin que no está es código que no se carga, no se rompe y no hay que mantener.
5. Caché bien configurada
LiteSpeed Cache sirve las páginas ya generadas, con una versión distinta para móvil y para ordenador (la web adapta algunas imágenes según el dispositivo) y con versionado de los archivos CSS y JS, para que un cambio llegue al visitante en el momento y no se quede atascado en su navegador durante meses.
6. Imágenes y vídeo con cabeza
Las imágenes se sirven en el tamaño que necesita cada pantalla y se cargan en diferido salvo la primera. Los vídeos de los trabajos no se descargan hasta que llegas a ellos y se pausan cuando dejan de verse.
Lo que no se ve, pero cuenta
De paso arreglé lo que no mide un test de velocidad: la web estaba marcada como «no indexar», faltaban las meta descripciones, había enlaces antiguos que daban error (ahora redirigen) y los textos legales estaban desactualizados. La velocidad ayuda al posicionamiento, pero solo si Google puede ver la web.
¿Merece la pena en tu web?
Casi siempre. Una web que carga en un segundo transmite confianza, retiene a más visitas y convierte mejor, sobre todo desde el móvil, que es por donde llega la mayoría del tráfico. Lo bueno es que muchas mejoras no exigen rehacer la web: basta con revisar fuentes, scripts, plugins y caché.
¿Quieres saber cuánto puede mejorar la tuya? Escríbeme y te paso un diagnóstico.