koshisoftware.pe

El reto

Una aplicación Angular suele descargar y ejecutar todo su JavaScript antes de responder. Para una web de empresa eso cuesta visitas: Google mide la velocidad en el celular y la usa para ordenar sus resultados. La meta era la experiencia de una página estática, en español e inglés, sin renunciar a partes interactivas como el editor del inicio.

El enfoque

• Cada página se genera como HTML al compilar, una vez por idioma, y Cloudflare Pages la sirve tal cual.
• Hidratación incremental: cada sección carga su JavaScript recién cuando aparece en pantalla, y los clics que hiciste antes se atienden apenas carga.
• Cada idioma tiene su propia URL, con canonical y hreflang, para que Google muestre la versión correcta.
• Mido con Lighthouse en producción después de cada versión, no solo en mi computadora.

El resultado

100 en rendimiento, accesibilidad, prácticas recomendadas y SEO, en celular y computadora, en las cuatro páginas públicas. La página de inicio descarga solo el JavaScript de lo que se ve; el resto llega a medida que bajas.

Dos tropiezos en el camino

• Una fuente de respaldo mejor ajustada hizo que el navegador midiera el titular dos veces: el rendimiento en celular cayó de 100 a 86. Regresé a la forma anterior de cargar la fuente y fijé el ancho del titular.
• El ejemplo de la página para empresas cambiaba de idioma con una transición suave. En los cuadros intermedios el texto quedaba semitransparente y Lighthouse marcó contraste insuficiente. Ahora cambia de golpe.