Guía de mejora de calidad del sitio Astro ― El camino hasta PageSpeed móvil 99 puntos

Introducción

El sitio oficial de Acecore, renovado en marzo de 2026, se publicó con la configuración Astro 6 + UnoCSS + Cloudflare Pages. Sin embargo, justo después de la renovación, el sitio estaba apenas en un nivel de “funciona”. Había margen de mejora en rendimiento, SEO, accesibilidad y UX.

Este artículo resume la visión general del proceso de más de 150 mejoras hasta alcanzar PageSpeed Insights móvil 99 puntos y escritorio 100 en todos los apartados.

---

La barrera del móvil 99 en PageSpeed

Lo primero que quiero transmitir es que obtener una puntuación alta en el score móvil de PageSpeed Insights es más difícil de lo que se imagina.

Simulación móvil de Lighthouse

Lo que funciona detrás de PageSpeed Insights es una herramienta llamada Lighthouse, que aplica el siguiente throttling a las pruebas móviles:

Elemento	Valor
Velocidad de descarga	~1.6 Mbps (slow 4G)
Velocidad de subida	~0.75 Mbps
Latencia	150 ms (RTT)
CPU	4x slowdown

Es decir, una página que se abre en 1 segundo con fibra óptica, en la simulación de Lighthouse tarda 5-6 segundos. Cargar 200 KiB de CSS en slow 4G genera ~1 segundo de bloqueo.

No linealidad del score

El score de PageSpeed no es lineal.

• 50 → 90: Alcanzable con optimizaciones básicas (compresión de imágenes, eliminación de scripts innecesarios)
• 90 → 95: Requiere estrategias de entrega de CSS, fuentes e imágenes
• 95 → 99: Ajustes al milisegundo. Se debe decidir entre CSS inline vs. archivo externo
• 99 → 100: Depende de la velocidad de respuesta de CDN externo y la variabilidad de medición de Lighthouse. Extremadamente difícil de lograr de forma estable en sitios con AdSense o GA4

Variabilidad del score

Incluso para el mismo sitio, el score puede variar 2-5 puntos entre mediciones. Las causas son:

• Velocidad de respuesta de servicios de transformación de imágenes como Cloudflare Images
• Estado de caché del edge server de Cloudflare Pages
• Error de medición propio de Lighthouse

Por eso, el objetivo no debe ser “obtener 100 en una medición”, sino “obtener puntuaciones altas de forma estable en mediciones repetidas”.

---

Puntuación final

A pesar de las dificultades mencionadas, logramos alcanzar de forma estable las siguientes puntuaciones:

Métrica	Móvil	Escritorio
Performance	99	100
Accessibility	100	100
Best Practices	100	100
SEO	100	100

---

Los 4 pilares de la mejora

Las mejoras se organizaron en 4 grandes categorías. Los detalles de cada una se explican en artículos individuales.

1. Rendimiento

Lo que más contribuyó a alcanzar 99 en móvil fue la optimización de rendimiento. Estrategias de entrega CSS (inline vs. archivo externo), self-hosting de fuentes, optimización de imágenes responsive, carga diferida de AdSense/GA4, eliminando cuellos de botella uno a uno.

Los 3 cambios de mayor impacto fueron:

• CSS como archivo externo: Se pasó de expandir 190 KiB de CSS inline a archivo externo, reduciendo hasta un 91% el tamaño de transferencia HTML
• Corrección de nombre de fuente: Se descubrió y corrigió la discrepancia entre el nombre registrado por @fontsource-variable/noto-sans-jp (Noto Sans JP Variable) y el referenciado en CSS (Noto Sans JP)
• Imágenes responsive: Se configuraron srcset + sizes en todas las imágenes para servir tamaños apropiados en móvil

2. SEO

Para soportar los resultados enriquecidos de Google, se implementaron 7 tipos de datos estructurados JSON-LD. También se optimizaron las meta tags OGP, canonical, sitemap y se amplió el feed RSS, estableciendo una base para comunicar con precisión la estructura del sitio a los motores de búsqueda.

3. Accesibilidad

Se alcanzaron 100 puntos en Accessibility de PageSpeed superando las pruebas automáticas de axe DevTools y Lighthouse. Se realizaron cambios constantes como aria-hidden en iconos decorativos (más de 30 ubicaciones), notificación SR para enlaces externos, corrección de contraste (text-slate-400 → text-slate-500) y aplicación global de estilos focus-visible.

4. UX y calidad de código

Se resolvieron los problemas de scripts detenidos por la introducción de View Transitions (ClientRouter) en todos los componentes, y se implementó búsqueda de texto completo con Pagefind. En cuanto al código, se mejoró la seguridad de tipos con TypeScript, se centralizaron las constantes (URLs sociales, IDs de anuncios, GA4 ID en la constante SITE), mejorando significativamente la mantenibilidad.

---

Stack tecnológico

Tecnología	Uso
Astro 6	Generación de sitio estático (arquitectura zero-JS)
UnoCSS (presetWind3)	CSS utility-first
Cloudflare Pages	Hosting, CDN, control de headers
@fontsource-variable/noto-sans-jp	Self-hosting de fuente japonesa
Cloudflare Images	Transformaciones de imágenes (conversión automática AVIF/WebP)
Pagefind	Búsqueda de texto completo para sitios estáticos

---

Conclusión

Para alcanzar 99 en móvil en PageSpeed Insights, es crucial seguir el principio de “no enviar lo innecesario”. Estrategia de entrega CSS, self-hosting de fuentes tipográficas, optimización de imágenes, carga diferida de scripts externos — cada medida es simple individualmente, pero combinadas producen un gran efecto.

Al mismo tiempo, mejorar en paralelo SEO, accesibilidad y UX permite alcanzar puntuaciones altas en los 4 apartados. En lugar de obsesionarse con 100 puntos, es más realista apuntar a mantener estables 95 puntos o más.

Para los detalles de cada tema, consulte las cards de enlace de arriba. Para conocer el proceso de mejora y su reflejo en el código, consulte también el artículo Flujo de desarrollo con GitHub Copilot.