WP Rocket SaaS: nos bastidores

Publicados: 2024-09-12

Este artigo técnico detalha o desenvolvimento e otimização de um rastreador web capaz de processar mais de 15.000 páginas web por minuto usando NodeJS, Puppeteer e BullMQ. Explicamos como o recurso Remover CSS não utilizado (RUCSS) funciona e melhora o desempenho da web, eliminando CSS desnecessário, melhorando os tempos de carregamento e aumentando as principais métricas de desempenho. Também descrevemos como abordamos os desafios iniciais, incluindo processamento ineficiente e problemas de estabilidade, aproveitando o Puppeteer para coleta de recursos, personalizando bibliotecas JavaScript e implementando um sistema de filas com BullMQ. Por fim, descrevemos como alcançamos a excelência operacional visando manter padrões de alta qualidade, possibilitando inovação rápida e suporte eficiente ao cliente.

O que é RUCSS?

O recurso Remover CSS não utilizado (RUCSS) foi projetado para eliminar todos os CSS e folhas de estilo não usados ​​em uma página da web, retendo apenas o CSS necessário para cada página. Depois que a otimização for aplicada, seu site entregará apenas o CSS necessário para a página específica solicitada pelo usuário, tornando o carregamento da página muito mais rápido!

Em média, esta otimização reduziu o tamanho do CSS entregue em 76%!

Benefícios do RUCSS

  • Tamanho de página reduzido : minimiza o tamanho geral da página da web.
  • Menos solicitações HTTP : reduz o número de folhas de estilo CSS que precisam ser carregadas.
  • Tempos de carregamento mais rápidos : melhora a velocidade de carregamento da página.
  • Core Web Vitals aprimorados : aumenta as principais métricas de desempenho, como Largest Contentful Paint (LCP), First Contentful Paint (FCP) e Cumulative Layout Shift (CLS).
  • Eliminação de CSS de bloqueio de renderização : evita que o CSS atrase a renderização da página.

Identificando CSS não utilizado: um ataque cirúrgico

O processo de remoção de CSS não utilizado é muito complexo: para cada regra de CSS que removemos, devemos garantir que ela nunca será necessária naquela página; caso contrário, o layout poderá quebrar! Você precisa levar em consideração vários fatores para garantir que o CSS não utilizado seja devidamente identificado:

  • Interações JavaScript : JavaScript altera dinamicamente o DOM e CSS. Por exemplo, um pop-up pode aparecer após o clique de um botão, introduzindo novos elementos DOM e regras CSS. Lidar com essas interações é crucial para identificar com precisão o CSS usado, e há muito mais controles deslizantes, menus fora da tela e galerias.
  • Variações CSS e HTML : os temas e plug-ins do WordPress apresentam variações infinitas de regras CSS. Lidar com CSS aninhado, casos extremos e até mesmo erros de sintaxe é essencial. A análise precisa de HTML é necessária para identificar e remover CSS não utilizado de forma eficaz.
  • Tamanhos de viewport : alguns estilos CSS são aplicados sob algumas condições no tamanho da tela. Para garantir que o CSS possa ser veiculado corretamente para usuários de dispositivos móveis e desktop, fornecemos CSS usado para vários tamanhos de tela e entregamos apenas o CSS relevante para cada visita. Além disso, regras específicas de otimização se aplicam a estilos CSS responsivos.

RUCSS como uma solução SaaS

Processar recursos de página e gerar CSS usado consome muitos recursos. A execução dessas tarefas diretamente nos sites dos clientes pode torná-los mais lentos e pode não ser viável em todos os servidores e hospedagens. Portanto, alguns dos recursos mais avançados do WP Rocket, como CSS não utilizado removido, são alimentados por nosso SaaS. Essas otimizações são realizadas em nossos servidores mediante solicitação do plugin WP Rocket, e os resultados são então aplicados aos sites automaticamente. Essa abordagem traz alguns grandes benefícios para os clientes:

  • Execute a otimização que consome muitos recursos e reduza a carga nos servidores dos usuários.
  • Forneça melhorias o mais rápido possível e resolva rapidamente o feedback.
  • Observe e corrija proativamente problemas e erros sem esperar por um ticket de suporte.
  • Garanta que todos os usuários se beneficiem das versões mais recentes sem qualquer atualização do lado do cliente.
  • Itere rapidamente e implante melhorias sem precisar atualizar o plugin WP Rocket.

Como são os bastidores?

WP Rocket SaaS está visitando e otimizando até 20 mil páginas por minuto, processando seu CSS e imagens acima da dobra! Para fazer isso, operamos constantemente milhares de navegadores da web em cerca de 40 servidores diferentes para atender todas as solicitações dos usuários em 2 minutos. Para conseguir isso, nossa equipe está aproveitando tecnologias de ponta, incluindo NodeJS, Django, Redis, CockroachDB e Kubernetes, e operando-as com equipes group.One.

Os principais desafios técnicos

1. Coletando recursos da página

Usamos extensivamente o Puppeteer, uma biblioteca Node que fornece uma API de alto nível para controlar navegadores Headless Chrome ou Chromium. Esta ferramenta é essencial para a nossa estratégia de recolha de recursos graças à sua capacidade de renderizar páginas web tal como um utilizador real faria, garantindo que todos os elementos dinâmicos sejam capturados. Ele oferece muitos recursos poderosos nos quais confiamos para otimizar o processo, como controle de tamanho da janela de visualização, interceptações de solicitações e assim por diante.

2. Processando recursos da página

Como os temas e plug-ins do WordPress utilizam uma ampla variedade de CSS e JavaScript, precisávamos de uma solução robusta para processar esses arquivos.

Depois de testar vários métodos para processar os recursos da página, como Webpack, PostCSS e CleanCSS, finalmente decidimos bifurcar e manter nossa própria biblioteca JavaScript personalizada para melhor atender aos nossos requisitos específicos. Isso inclui lidar com casos extremos, regras CSS aninhadas e problemas de sintaxe encontrados em vários temas e plug-ins do WordPress para garantir que a otimização possa ser realizada de maneira confiável para todos os nossos usuários.

3. Ajustando a experiência de nossa equipe

Processar CSS pode ser muito complicado e é alto o risco de quebrar o layout da página se não for dado cuidado suficiente ao processo. Nossa equipe tem amplo conhecimento de temas e criadores de páginas populares do WordPress, bem como feedback constante de centenas de milhares de usuários sobre a compatibilidade com as últimas tendências do WordPress. Portanto, desenvolvemos um sistema dinâmico de lista segura para que nossos colegas de equipe atualizem diretamente as regras de processamento CSS de nosso SaaS em tempo real para adaptar continuamente nossas otimizações e aumentar a compatibilidade todos os dias.

4. Gerenciando um fluxo de milhares de páginas por minuto

Para lidar com o fluxo de 15.000 páginas web por minuto, implementamos um sistema de filas usando BullMQ. Este sistema oferece:

  • Processamento assíncrono para descarregar o processo de otimização do plugin para um backend assíncrono.
  • Balanceamento de carga e gerenciamento de simultaneidade : distribua tarefas em vários servidores, permitindo que o SaaS lide com um grande número de URLs com eficiência e escalabilidade fácil.
  • Confiabilidade e tolerância a falhas : todas as tarefas enviadas e seus resultados são salvos assim que estiverem disponíveis. Isso fornece resiliência caso um de nossos servidores falhe ou se o site do usuário não conseguir recuperar os resultados imediatamente.
  • Priorização : As filas BullMQ podem ser usadas para priorizar tarefas, garantindo que as tarefas mais importantes sejam processadas primeiro. Por exemplo, a otimização das páginas iniciais é priorizada para permitir que nossos usuários vejam imediatamente as melhorias em sua página inicial e testem-na imediatamente com o Pagespeed!

Excelência Operacional

Construir um sistema escalável e confiável para SaaS é essencial para a facilidade e eficiência dos clientes e para lidar com o número crescente de usuários e o volume crescente de solicitações de processamento de páginas. Aqui está uma análise aprofundada das etapas que nos permitiram alcançar tal excelência.

1. Arquitetura Escalável

WP Rocket é usado em milhões de sites em todo o mundo a qualquer momento. Portanto, nosso SaaS deve permanecer sempre disponível e funcionar conforme o esperado. O serviço está hospedado em mais de 40 servidores físicos localizados em diferentes regiões. Eles são orquestrados com Kubernetes para facilitar a implantação, o dimensionamento e o gerenciamento dos ciclos de vida do contêiner. Contamos com recursos poderosos, como sondagens de atividade, atualizações contínuas e escalonamento automático para trazer resiliência ao serviço e manter o tempo de atividade em todas as circunstâncias. Além disso, um serviço de gateway personalizado realiza o gerenciamento de tarefas e reforça a segurança da API (limitação de taxa, autenticação, etc.).

2. Monitoramento e alertas

Todos esses serviços e servidores são constantemente monitorados e observados com métricas técnicas através do Prometheus e Grafana, bem como métricas funcionais, para garantir que o serviço seja estável e ofereça o melhor desempenho aos nossos usuários. O monitoramento aprofundado nos permite garantir que a taxa de sucesso permaneça alta, ao mesmo tempo em que mantemos a duração do trabalho baixa e a melhor eficiência de otimização da categoria. Alertas de ferramentas como Prometheus e Metabase nos permitem reagir em tempo real caso algo não esteja se comportando conforme o esperado.

3. Observabilidade para ajudar nossos clientes

Embora trabalhemos duro para tornar nosso SaaS fácil de usar para nossos clientes, algumas dificuldades podem ocorrer em configurações muito complexas com firewalls, regras de segurança ou sites WordPress com muitos plugins ou temas conflitantes, por exemplo. Graças à abordagem SaaS, a nossa equipa de suporte está equipada com ferramentas internas através da Metabase para aceder aos dados relativos a um determinado utilizador e observar os seus trabalhos e resultados de otimização, permitindo-nos identificar rapidamente os possíveis problemas. Eles são então capazes de repetir, ajustar e ajustar e obter feedback em tempo real com PostMan e Metabase. Como resultado, eles podem ajudar clientes com dificuldades de forma eficiente e até mesmo ajustar as regras de otimização de SaaS diretamente para desbloquear os usuários.

4. Testes automatizados e integração contínua

Manter padrões de alta qualidade e ao mesmo tempo manter uma taxa de entrega significativa pode ser um desafio para os engenheiros. Resolvemos esse problema com uma automação confiável pela qual passa cada alteração de código. Desde testes automatizados até implantação com um botão na produção, também aproveitamos o espelhamento, mecanismos de liberação de sombra e lançamentos de lançamento progressivos. Todas essas abordagens poderosas permitem que nossa equipe de engenharia prospere e continue inovando sem colocar em risco a qualidade do serviço. A maior parte disso é automatizada para que nem precisemos pensar nisso e nos concentremos no que importa: construir os melhores recursos para nossos usuários!

Concluindo

Resumindo, desenvolver e otimizar o rastreador da web usando NodeJS, Puppeteer e BullMQ resultou em uma solução altamente eficiente e escalonável para processar mais de 15.000 páginas da web por minuto. Ao enfrentar os desafios iniciais e aproveitar ferramentas e metodologias avançadas, criamos um sistema robusto que melhora significativamente o desempenho da web por meio do recurso Remover CSS não utilizado (RUCSS). A integração contínua, os testes automatizados e o foco na escalabilidade e na confiabilidade garantem que nosso serviço permaneça de primeira linha, proporcionando aos usuários tempos de carregamento mais rápidos e melhores experiências gerais na web.