Blog

ROI SÁNCHEZ
18 Abr 2022

Lanzamos una nueva Web de Hello, World! mejorada

Tiempo de lectura 3 minutos
  • angular
  • angular universal
  • hello world
  • lighthouse
  • ssr
  • web
  • WordPress

Sumario Desplegamos la nueva web de Hello, World! con una importante refactorización

Pues eso, lo que dice el título del artículo 😊, lanzamos la nueva web de Hello, World!

Realmente, lo que hemos hecho es una refactorización y cambios tecnológicos sobre la primera web lanzada (un poco rápido) para poder tener disponible la primera versión.

Una vez teníamos el diseño, los mensajes, la navegación clara y una primera versión funcionando y lista para que la gente que quiera adentrarse en este mundo de la programación nos pudiera contactar; era el momento de darle la vuelta a la web como un calcetín con 2 retos principales:

  • Mejorar las métricas generales de la web y en especial las de rendimiento
  • Permitir mantener y manejar el contenido desde un CMS, no queremos que los de Marketing nos molesten con sus movidas 😉

En principio parece que ambos objetivos son contrapuestos, pero creo que hemos conseguido bastante bien nuestro objetivo. Para analizar las métricas de la web decidimos usar Lighthouse de Google, que viene integrado en Chrome y es un muy buen (y sencillo) sistema para analizar como va la web.

Este es el resultado general, más que notable:

Teníamos como requisito interno utilizar Angular en el Front End, ya que, nos interesa para futuras ampliaciones e integraciones planificadas. Y como comentamos antes, necesitábamos un CMS que permitiera a la gente de Marketing y Operaciones mantener el portal sin depender de los desarrolladores.

La primera opción en la que pensamos fue en usar nodeJS, sin embargo no encontramos ningún CMS que nos encajara y que viéramos suficientemente maduro (probablemente existe y no lo encontramos), por lo que finalmente nos decantamos por WordPress, pero usándolo en un modo Headless CMS, es decir, usamos WordPress solo para mantener el contenido, siguiendo con Angular como Front End. Desde Angular recuperamos todo el contenido vía API de WordPress. 

Obviamente, con un desarrollo normal de Angular contra el api de WordPress obtendríamos un rendimiento bastante pobre, por lo que nos tuvimos que remangar y cuidar mucho los detalles para acercarnos a ese 100%.

Lo que hemos hecho, además de otros detalles menores (pero que todos suman) ha sido: 

  • Utilizar Angular Universal (Server Side Rendering) 
  • Cachear muy bien el API de WordPress con WP Rest Cache 
  • Usar Cloudflare para cachear, securizar y mejorar la respuesta de la web 
  • Convertir las imágenes a WebP y ajustar mucho los tamaños y compresiones de las mismas. Además, hemos forzado el tamaño máximo de las imágenes con el api de WordPress
  • Deferir ciertas cargas asíncronas para no perjudicar el rendimiento 

Y así es como hemos hecho la nueva web de Hello, World! Esperamos que haya servido de ayuda o haya motivado a alguien a hacerlo también, viendo que el resultado puede ser espectacular.

En futuros posts explicaremos como montar una web con WordPress y Angular y no morir en el intento

Autor

ROI SÁNCHEZ
ROI SÁNCHEZ

Desarrollador en dev&del

Capitán en Hello, World!

Capaz de gestionar un proyecto informático E2E (de principio a fin).

Los discos de vinilo y los tatuajes son dos de sus mayores pasiones.