WP Rocket SaaS: detrás de escena

Publicado: 2024-09-12

Este artículo técnico detalla el desarrollo y optimización de un rastreador web capaz de procesar más de 15.000 páginas web por minuto utilizando NodeJS, Puppeteer y BullMQ. Explicamos cómo funciona la función Eliminar CSS no utilizado (RUCSS) y mejora el rendimiento web al eliminar CSS innecesario, mejorar los tiempos de carga y aumentar las métricas clave de rendimiento. También describimos cómo abordamos los desafíos iniciales, incluidos el procesamiento ineficiente y los problemas de estabilidad, aprovechando Puppeteer para la recopilación de recursos, personalizando bibliotecas de JavaScript e implementando un sistema de colas con BullMQ. Por último, describimos cómo logramos la excelencia operativa destinada a mantener estándares de alta calidad, permitir una innovación rápida y una atención al cliente eficiente.

¿Qué es RUCSS?

La función Eliminar CSS no utilizado (RUCSS) está diseñada para eliminar todos los CSS y hojas de estilo que no se utilizan en una página web, conservando solo el CSS necesario para cada página. Una vez que se aplica la optimización, su sitio web solo entregará el CSS necesario para la página específica que solicita el usuario, ¡lo que hace que la página se cargue mucho más rápido!

En promedio, esta optimización redujo el tamaño del CSS entregado en un 76%.

Beneficios de RUCSS

  • Tamaño de página reducido : Minimiza el tamaño total de la página web.
  • Menos solicitudes HTTP : reduce la cantidad de hojas de estilo CSS que deben cargarse.
  • Tiempos de carga más rápidos : mejora la velocidad de carga de la página.
  • Core Web Vitals mejorados : aumenta las métricas clave de rendimiento, como Largest Contentful Paint (LCP), First Contentful Paint (FCP) y Cumulative Layout Shift (CLS).
  • Eliminación de CSS que bloquea la representación : evita que CSS retrase la representación de la página.

Identificar CSS no utilizado: un ataque quirúrgico

El proceso de eliminar CSS no utilizado es muy complejo: por cada regla CSS que eliminamos, debemos asegurarnos de que nunca será necesaria en esa página; De lo contrario, ¡el diseño podría romperse! Debe tener en cuenta muchos factores para garantizar que el CSS no utilizado se identifique correctamente:

  • Interacciones de JavaScript : JavaScript cambia dinámicamente el DOM y CSS. Por ejemplo, puede aparecer una ventana emergente después de hacer clic en un botón, introduciendo nuevos elementos DOM y reglas CSS. Manejar estas interacciones es crucial para identificar con precisión el CSS utilizado, y hay muchos más controles deslizantes, menús fuera del lienzo y galerías.
  • Variaciones de CSS y HTML : los temas y complementos de WordPress introducen infinitas variaciones de reglas CSS. Manejar CSS anidado, casos extremos e incluso errores de sintaxis es esencial. Se requiere un análisis HTML preciso para identificar y eliminar CSS no utilizado de manera efectiva.
  • Tamaños de ventana gráfica : algunos estilos CSS se aplican bajo ciertas condiciones en el tamaño de la pantalla. Para garantizar que CSS se pueda ofrecer correctamente a los usuarios de dispositivos móviles y de escritorio, proporcionamos CSS usado para varios tamaños de pantalla y entregamos solo el relevante para cada visita. Además, se aplican reglas de optimización específicas a los estilos CSS responsivos.

RUCSS como solución SaaS

Procesar recursos de página y generar CSS usado requiere muchos recursos. Realizar estas tareas directamente en los sitios web de los clientes puede ralentizarlos y puede que no sea factible en todos los servidores y alojamientos. Por lo tanto, algunas de las funciones más avanzadas de WP Rocket, como CSS no utilizado eliminado, funcionan con nuestro SaaS. Esas optimizaciones se realizan en nuestros servidores a petición del complemento WP Rocket, y los resultados luego se aplican a los sitios web automáticamente. Este enfoque tiene grandes beneficios para los clientes:

  • Realice una optimización que consuma muchos recursos y reduzca la carga en los servidores de los usuarios.
  • Ofrezca mejoras lo antes posible y aborde rápidamente los comentarios.
  • Observe y solucione proactivamente problemas y errores sin esperar un ticket de soporte.
  • Asegúrese de que todos los usuarios se beneficien de las últimas versiones sin ninguna actualización del lado del cliente.
  • Itere rápidamente e implemente mejoras sin necesidad de actualizar el complemento WP Rocket.

¿Cómo se ve detrás de escena?

¡WP Rocket SaaS visita y optimiza hasta 20.000 páginas por minuto, procesando su CSS e imágenes en la mitad superior de la página! Para hacerlo, operamos constantemente miles de navegadores web en aproximadamente 40 servidores diferentes para atender todas las solicitudes de nuestros usuarios en 2 minutos. Para lograr esto, nuestro equipo aprovecha tecnologías de última generación, incluidas NodeJS, Django, Redis, CockroachDB y Kubernetes, y las opera con equipos de group.One.

Los desafíos técnicos clave

1. Recopilación de recursos de la página

Utilizamos ampliamente Puppeteer, una biblioteca de Node que proporciona una API de alto nivel para controlar los navegadores Chrome o Chromium sin cabeza. Esta herramienta es esencial para nuestra estrategia de recopilación de recursos gracias a su capacidad de representar páginas web tal como lo haría un usuario real, asegurando que se capturen todos los elementos dinámicos. Ofrece muchas funciones potentes en las que confiamos para optimizar el proceso, como control del tamaño de la ventana gráfica, intercepciones de solicitudes, etc.

2. Procesamiento de recursos de la página

Dado que los temas y complementos de WordPress utilizan una amplia variedad de CSS y JavaScript, necesitábamos una solución sólida para procesar estos archivos.

Después de probar muchos métodos para procesar los recursos de la página, como Webpack, PostCSS y CleanCSS, finalmente decidimos bifurcar y mantener nuestra propia biblioteca JavaScript personalizada para satisfacer mejor nuestros requisitos específicos. Esto incluye el manejo de casos extremos, reglas CSS anidadas y problemas de sintaxis que se encuentran en numerosos temas y complementos de WordPress para garantizar que la optimización se pueda realizar de manera confiable para todos nuestros usuarios.

3. Ajuste con la experiencia de nuestro equipo

Procesar CSS puede ser muy complicado y el riesgo de romper el diseño de la página es alto si no se pone suficiente cuidado en el proceso. Nuestro equipo tiene un amplio conocimiento de los creadores de páginas y temas populares de WordPress, así como comentarios constantes de cientos de miles de usuarios sobre la compatibilidad con las últimas tendencias de WordPress. Por lo tanto, desarrollamos un sistema dinámico de listas seguras para que nuestros compañeros de equipo actualicen directamente las reglas de procesamiento CSS de nuestro SaaS en tiempo real para adaptar continuamente nuestras optimizaciones y aumentar la compatibilidad todos los días.

4. Gestionar un flujo de miles de páginas por minuto

Para manejar el flujo de 15.000 páginas web por minuto, implementamos un sistema de colas utilizando BullMQ. Este sistema ofrece:

  • Procesamiento asincrónico para descargar el proceso de optimización del complemento a un backend asincrónico.
  • Equilibrio de carga y administración de concurrencia : distribuya tareas entre múltiples servidores, lo que permite que SaaS maneje una gran cantidad de URL de manera eficiente y escale fácilmente.
  • Fiabilidad y tolerancia a fallos : todas las tareas enviadas y sus resultados se guardan una vez que están disponibles. Esto proporciona resiliencia en caso de que uno de nuestros servidores falle o si el sitio web del usuario no puede recuperar los resultados inmediatamente.
  • Priorización : las colas de BullMQ se pueden utilizar para priorizar tareas, asegurando que las tareas más importantes se procesen primero. Por ejemplo, se prioriza la optimización de las páginas de inicio para permitir a nuestros usuarios ver inmediatamente las mejoras en su página de inicio y probarlas de inmediato con Pagespeed.

Excelencia operativa

Crear un sistema escalable y confiable para SaaS es esencial para la facilidad y eficiencia de los clientes y para manejar el creciente número de usuarios y el creciente volumen de solicitudes de procesamiento de páginas. A continuación presentamos una mirada en profundidad a los pasos que nos permitieron alcanzar tal excelencia.

1. Arquitectura escalable

WP Rocket se utiliza en millones de sitios web en todo el mundo en cualquier momento. Por lo tanto, nuestro SaaS debe permanecer disponible y funcionar como se espera en todo momento. El servicio está alojado en más de 40 servidores físicos ubicados en diferentes regiones. Están orquestados con Kubernetes para facilitar la implementación, el escalado y la gestión de los ciclos de vida del contenedor. Confiamos en funciones poderosas como sondas de actividad, actualizaciones continuas y escalado automático para brindar resiliencia al servicio y mantener el tiempo de actividad en todas las circunstancias. Además, un servicio de puerta de enlace personalizado realiza la gestión del trabajo y aplica la seguridad de la API (limitación de velocidad, autenticación, etc.).

2. Monitoreo y alertas

Todos esos servicios y servidores son monitoreados y observados constantemente con métricas técnicas a través de Prometheus y Grafana, así como métricas funcionales, para garantizar que el servicio sea estable y brinde el mejor rendimiento a nuestros usuarios. El monitoreo en profundidad nos permite garantizar que la tasa de éxito se mantenga alta mientras se mantiene la duración del trabajo baja y la eficiencia de optimización es la mejor de su clase. Las alertas de herramientas como Prometheus y Metabase nos permiten reaccionar en tiempo real en caso de que algo no se comporte como se esperaba.

3. Observabilidad para ayudar a nuestros clientes

Si bien trabajamos arduamente para que nuestro SaaS sea fácil de usar para nuestros clientes, pueden surgir algunas dificultades en configuraciones muy complejas con firewalls, reglas de seguridad o sitios web de WordPress con muchos complementos o temas conflictivos, por ejemplo. Gracias al enfoque SaaS, nuestro equipo de soporte está equipado con herramientas internas a través de Metabase para acceder a datos relacionados con un usuario determinado y observar sus trabajos de optimización y resultados, lo que nos permite identificar rápidamente los posibles problemas. Luego pueden repetir, modificar y ajustar y obtener comentarios en tiempo real con PostMan y Metabase. Como resultado, pueden ayudar a los clientes con dificultades de manera eficiente e incluso ajustar las reglas de optimización de SaaS directamente para desbloquear a los usuarios.

4. Pruebas automatizadas e integración continua

Mantener estándares de alta calidad y al mismo tiempo mantener una tasa de entrega significativa puede ser un desafío para los ingenieros. Resolvemos este problema con la automatización confiable por la que pasa cada cambio de código. Desde pruebas automatizadas hasta implementación con un solo botón en producción, también aprovechamos la duplicación, los mecanismos de liberación de sombras y las implementaciones de liberación progresiva. Todos esos poderosos enfoques permiten que nuestro equipo de ingeniería prospere y siga innovando sin poner en riesgo la calidad del servicio. La mayor parte de esto está automatizado, por lo que ni siquiera necesitamos pensar en ello y concentrarnos en lo que importa: ¡crear las mejores funciones para nuestros usuarios!

Concluyendo

En resumen, desarrollar y optimizar el rastreador web utilizando NodeJS, Puppeteer y BullMQ ha dado lugar a una solución altamente eficiente y escalable para procesar más de 15.000 páginas web por minuto. Al abordar los desafíos iniciales y aprovechar herramientas y metodologías avanzadas, hemos creado un sistema sólido que mejora significativamente el rendimiento web a través de la función Eliminar CSS no utilizado (RUCSS). La integración continua, las pruebas automatizadas y el enfoque en la escalabilidad y la confiabilidad garantizan que nuestro servicio siga siendo de primera categoría, brindando a los usuarios tiempos de carga más rápidos y experiencias web generales mejoradas.