7 atualizações técnicas para aumentar o desempenho do site

A maioria dos visitantes de um site abandonará um site se ele demorar mais de três segundos para carregar. Tempos de carregamento lentos significam perda de clientes, perda de receita, classificações de SEO impactadas negativamente e uma experiência do usuário ruim. Não importa o quão bom seja o seu produto, um site lento beneficia a concorrência e prejudica o seu negócio.

Recentemente, passamos por um grande processo de melhoria de desempenho do site para garantir que nossos clientes tenham uma experiência positiva desde o primeiro clique. Neste e em um artigo subsequente, explicarei por que e como melhoramos a velocidade do site do Gcore e os resultados que alcançamos. Os métodos que compartilharei aqui são amplamente aplicáveis ​​e podem ajudar sua empresa a alcançar resultados semelhantes.

Por que decidimos melhorar nosso desempenho na web

Como muitas empresas, enfrentamos desafios significativos de desempenho do site em 2022. Nossos maiores problemas foram:

• Taxas de conversão relativamente baixas.
• Localização e divisão das responsabilidades de gerenciamento do site.

Para solucionar esses desafios, nossa equipe Edge Network assumiu a responsabilidade adicional de gerenciar o site. Apesar de estar fora de sua área de foco principal, eles fizeram um excelente trabalho. No entanto, como a atenção deles estava voltada principalmente para o nosso grupo de produtos Edge Network, em rápido crescimento, surgiram naturalmente algumas ineficiências e oportunidades perdidas.

Em seguida, contratamos uma agência terceirizada para realizar uma reformulação do site, que não foi totalmente bem-sucedida. Enfrentamos uma série de desafios comuns à terceirização de agências, como prazos perdidos, desenvolvimento lento, desacoplamento de design e desenvolvimento e correções lentas de bugs. À medida que começaram a chegar reclamações de gerentes de marketing de produto, da alta administração e – o mais importante – de nossos clientes, percebemos que era hora de uma nova abordagem.

Mudança de cultura: site como produto

Os resultados finais que buscávamos – ótima experiência do usuário, velocidade do site, SEO, análises e funcionalidade geral – exigiam uma mudança total de cultura na forma como abordamos o site. Decidimos tratá-lo como um produto-chave em vez de um meio para atingir um fim.

Previmos que a adoção de uma abordagem estruturada de gerenciamento de produtos de website facilitaria o planejamento de longo prazo e estabeleceria gerenciamento e propriedade claros, todos essenciais para os resultados práticos que buscávamos.

Aqui estão as principais mudanças de mentalidade que adotamos dentro da equipe para tratar nosso site como um produto:

• Adotando uma mentalidade de gerenciamento de produto: Impulsionados por um esforço conjunto para adotar uma abordagem de gerenciamento de produtos, enfatizamos a tomada de decisões baseada em dados e a colaboração entre departamentos para o site.
• Melhorando a velocidade e o desempenho: Ao tratar o site como um produto, obtivemos melhorias significativas em velocidade e desempenho, guiados por métricas, estratégias, objetivos e metas claros.
• Implementando estratégias baseadas em dados: Adotamos uma abordagem baseada em dados com foco nas principais métricas técnicas e de velocidade para informar nossos esforços de otimização. Investigamos minuciosamente as quedas de desempenho para identificar e resolver as causas principais.
• Executando otimizações técnicas: Nossos desenvolvedores implementaram mudanças importantes, incluindo otimização de código, minificação de ativos, melhorias de servidor e estratégias de cache para melhorar a velocidade do site. Cada membro da equipe contribuiu com ideias que ganharam vida.
• Priorizando SEO e UX: Melhorar a velocidade do site é crucial para SEO, experiência do usuário (UX) e crescimento orgânico do tráfego. Sites mais rápidos têm melhor classificação nos mecanismos de pesquisa e proporcionam uma melhor experiência ao usuário.
• Promover a colaboração em equipe: Nossa abordagem baseada em equipe faz com que todos os departamentos trabalhem em prol de objetivos comuns, promovendo a colaboração e a responsabilidade compartilhada pelo sucesso do site.

Como melhoramos o desempenho do site

O próximo passo foi avaliar o desempenho, segurança, estabilidade, SEO e acessibilidade do site e determinar as tecnologias que poderíamos usar para melhorar cada fator.

O desempenho do site foi o ponto de partida óbvio porque foi fácil ver onde estávamos faltando e fazer mudanças efetivas. Usamos sete ferramentas e tecnologias para medir a velocidade do nosso site e identificar áreas de melhoria.

1. Carregamento lento

Essa técnica atrasa o carregamento das imagens até que elas sejam necessárias, normalmente quando elas chegam à janela de visualização do usuário enquanto ele rola a página para baixo. Ao carregar imagens apenas quando elas se tornam visíveis para o usuário, reduzimos o tempo de carregamento inicial da página web, conservamos largura de banda e melhoramos o tempo de carregamento da página.

Quando implementamos o carregamento lento pela primeira vez em novembro e dezembro de 2023, conseguimos alcançar métricas de maior ponto de conteúdo (LCP) e primeiro ponto de conteúdo (FCP) mais rápidas. Entre abril e maio de 2024, o LCP melhorou 24%, enquanto o FCP melhorou 31%. Essas melhorias levaram a uma pontuação de desempenho geral quase 6% maior no mesmo mês.

As tendências da pontuação de desempenho de novembro de 2023 a maio de 2024 mostram melhorias significativas no LCP e no FCP entre abril e maio de 2024.

2. Redução do tamanho do DOM

Minimizar o número de elementos HTML no modelo de objeto de documento (DOM) de uma página da web levou a tempos de renderização mais rápidos e reduziu o uso de memória. Conseguimos isso combinando as versões mobile e desktop do menu do nosso site em uma estrutura coesa, eliminando redundância e reduzindo o número de elementos DOM. Também realizamos uma auditoria completa para remover elementos desnecessários, como códigos desatualizados e componentes ocultos, agilizando ainda mais a estrutura HTML. Ao otimizar o código HTML e reduzir sua complexidade, tornamos o DOM menor e mais eficiente.

Em outubro de 2023, nosso site tinha cerca de 2.500 elementos DOM, que reduzimos para 1.300 em dezembro de 2023 e para 1.000 em maio de 2024. Atualmente, o tamanho do DOM é 1.040, uma redução de 58% nos últimos sete meses.

As tendências de tamanho dos elementos DOM de novembro de 2023 a maio de 2024 mostram uma redução de elementos de 1,9 mil para 1,0 mil e melhores taxas de crescimento.

3. Cache Redis

Implementamos o cache usando Redis, um armazenamento de estrutura de dados na memória. Ao armazenar em cache dados acessados ​​com frequência e que mudam com pouca frequência, como conteúdo de blog, o Redis permite tempos de recuperação mais rápidos em comparação com sistemas tradicionais baseados em disco. Ferramentas de monitoramento como Grafana e Site24x7 nos ajudam a acompanhar os tempos de resposta e verificar a eficácia da estratégia.

Painel de monitoramento Site24x7 para Gcore.com/blog, mostrando tempo de resposta, taxa de transferência e status de janeiro de 2023 a maio de 2024.

O tempo de resposta médio consistentemente baixo de 154 ms e a taxa de transferência eficiente de 6.916 KB/s retornados pelos dados do Site24x7 confirmam que nossa estratégia de cache Redis melhorou significativamente o desempenho, reduziu a carga do servidor e melhorou a escalabilidade, permitindo que nosso site lide com maiores volumes de tráfego com eficiência.

4. Cache HTTP

A ativação do cache HTTP reduz a carga no servidor de origem, melhora os tempos de resposta e protege contra ataques DDoS. Para conseguir isso, configuramos o servidor e a rede de entrega de conteúdo (CDN) para armazenar temporariamente cópias de páginas da web, imagens e outros ativos. O cache HTTP melhorou significativamente os tempos de resposta, com um tempo médio de resposta de 187 ms e uma taxa de transferência de 6,306 KB/s.

Painel Site24x7 para Gcore.com exibindo tempo de resposta, taxa de transferência e métricas de status para a semana encerrada em 25 de setembro de 2023.

Contamos com cache HTTP no lado CDN, que ajuda a distribuir a carga e proteger o servidor de origem. Verificamos a exatidão dos cabeçalhos de controle de cache no backend e verificamos se o CDN respeita esses cabeçalhos. Embora o armazenamento em cache por longos períodos não seja aconselhável, definir durações de cache de 1 a 5 minutos é um bom equilíbrio para nós. Para conteúdo estático, que constitui a maior parte do nosso site, tempos de cache mais longos são viáveis ​​e benéficos. Essa abordagem é demonstrada em nossas métricas de tempo de resposta, que mostram melhorias significativas devido ao uso eficaz do cache HTTP.

5. Otimização de carregamento de fontes

O carregamento eficiente de fontes evita interrupções visuais, como efeitos de piscar, que podem prejudicar a experiência do usuário. Ao otimizar o tempo de carregamento das fontes e evitar o limite de 2,5 segundos para Core Web Vitals (CWV) e SEO, melhoramos significativamente o desempenho. Técnicas como o pré-carregamento de ativos instruem o navegador a carregar as fontes antecipadamente. A regra font-display: swap faz com que o navegador exiba texto com uma fonte substituta imediatamente, mudando para a fonte da web assim que for carregada. Essas abordagens minimizam as mudanças de layout e criam uma experiência visual tranquila para os usuários.

A mudança cumulativa de layout (CLS) mede a estabilidade visual de uma página da web rastreando mudanças inesperadas de layout. Uma pontuação CLS mais baixa indica um site estável e fácil de usar. Mudanças frequentes de layout podem frustrar os usuários, levando a uma percepção ruim do site e ao aumento das taxas de rejeição.

Nossa pontuação CLS diminuiu de 0,062 em novembro de 2023 para 0,038 em fevereiro de 2024, o que indica que melhoramos a estabilidade e reduzimos as interrupções visuais em Gcore.com.

Gráfico mostrando a diminuição na pontuação Cumulative Layout Shift (CLS) do Gcore de 0,062 em novembro de 2023 para 0,038 em fevereiro de 2024.

6. Gerenciamento de tamanho de imagem

Nossos tamanhos de imagem não eram consistentes no início do projeto, o que significa que algumas páginas carregavam lentamente devido a uma ou mais imagens grandes. Usando a diretiva NgOptimizedImage, redimensionamos e otimizamos imagens para resolver problemas de PageSpeed ​​​​causados ​​​​por arquivos de imagem grandes. Também usamos otimização SVG (SVGO) para limpar e otimizar imagens SVG antes de enviá-las para o Bitbucket, reduzindo o tamanho dos arquivos entre 5% e 60%.

Em seguida, integramos uma pilha de imagens e compactação Gzip em nosso fluxo de trabalho. Essas ferramentas compactam imagens em 30% a 70%, melhorando significativamente as métricas LCP e FCP. O resultado é uma experiência de usuário mais rápida.

7. Arquitetura de blog reestruturada

Reestruturamos completamente a arquitetura do blog do nosso site para resolver gargalos de desempenho e melhorar a velocidade geral do site. Isso significou refatorar a base de código, otimizar as consultas ao banco de dados e melhorar os mecanismos de entrega de conteúdo em todo o site. Ao simplificar a arquitetura, reduzimos os tempos de resposta do servidor e melhoramos o throughput, conforme evidenciado pelo gráfico do item 4 acima, que mostra um tempo médio de resposta de 154 ms e um throughput de 6.720 KB/s. Esses números mostram uma melhoria significativa no desempenho do servidor. Um tempo de resposta menor significa reações mais rápidas do servidor e maior velocidade de processamento, o que proporciona capacidade eficiente de manipulação de dados.

Próximos passos

Além do desempenho, também decidimos fortalecer nosso site contra vulnerabilidades de segurança, tomar medidas para manter um tempo de atividade consistente, aumentar a otimização de mecanismos de pesquisa (SEO) e melhorar a acessibilidade. Discutirei como implementamos essas melhorias na parte 2 desta série.

A postagem 7 atualizações técnicas para aumentar o desempenho do site apareceu pela primeira vez no The New Stack.