A Melhor Configuração para o Cloudflare para Obter Altas Pontuações em LCP, TBT e Web Vitals para Sua Loja

A performance da web é um fator crítico na criação de uma experiência de compra fluida para seus clientes. Neste artigo, vou mostrar como alcançar altas pontuações em Web Vitals, como o Largest Contentful Paint [LCP] e o Total Blocking Time [TBT] com o Cloudflare. Essas configurações vão desde ajustes simples até otimizações avançadas.
Antes de começar, reserve um momento para avaliar o desempenho atual do seu site usando uma ferramenta como Google PageSpeed Insights. Isso ajudará você a acompanhar as melhorias após a aplicação dessas configurações.
Por que Web Vitals Importam
Os Web Vitals medem os principais aspectos da experiência do usuário. Aqui está uma visão rápida das métricas mais críticas em que iremos nos concentrar:

Métrica	O que Mede	Por que Importa
LCP	Tempo necessário para carregar o maior elemento visível	Afeta a percepção dos usuários sobre a velocidade do site
TBT	Tempo bloqueado por tarefas longas de JavaScript	Impacta a interatividade e a capacidade de resposta
CLS	Mudança de layout durante o carregamento da página	Garante estabilidade visual e usabilidade

Ao otimizar suas configurações do Cloudflare, você pode aumentar significativamente essas pontuações, levando a uma experiência mais rápida e envolvente para seus visitantes.

Passo 1: Configure Seu Domínio no Cloudflare e Ative o CDN

Para começar a otimizar a performance do seu site com o Cloudflare, você precisa primeiro garantir que seu domínio esteja corretamente configurado na plataforma e que o recurso de CDN (Rede de Distribuição de Conteúdo) esteja ativado.

Como Ativar o CDN do Cloudflare

1. Faça login na sua conta do Cloudflare e selecione seu domínio.
2. Navegue até a seção DNS.
3. Nos Registros DNS, localize o registro A ou CNAME do seu domínio.
4. Clique no ícone de nuvem laranja ao lado do registro para ativar o recurso Proxy Cloud. Quando ativado, o ícone ficará laranja brilhante, sinalizando que seu domínio agora está roteado através do CDN do Cloudflare.

Observação Especial para Usuários do Selldone

Se você está usando Selldone, precisará configurar seu domínio corretamente para integrar-se ao CDN do Cloudflare. Isso garante que o CDN externo do Selldone funcione perfeitamente com seu site, entregando conteúdo em cache de forma eficiente enquanto mantém a compatibilidade com a plataforma Selldone.
Passos para Configurar para Selldone:

1. Configure seu domínio personalizado no painel do Selldone.
2. Assegure-se de que o CDN externo esteja apontado para o Cloudflare configurando corretamente seus registros DNS.
3. Confirme que as configurações do Cloudflare estão totalmente ativadas, incluindo o status do Proxy Cloud. Esses passos garantem que seu site alimentado por Selldone aproveite ao máximo os recursos de aumento de performance do Cloudflare.

Passo 2: Recurso de Teste de Velocidade do Cloudflare

O Cloudflare oferece uma ferramenta de Teste de Velocidade integrada que fornece insights valiosos sobre o desempenho do seu site. Este recurso mede métricas chave como tempo de carregamento, responsividade e melhorias gerais de velocidade após a implementação dos serviços do Cloudflare.

Passo 3: Ative os Insights de Usuário em Tempo Real no Cloudflare

Compreender o comportamento de seus usuários em tempo real é crucial para otimizar sua experiência no seu site. O recurso Insights de Usuário em Tempo Real (RUN) do Cloudflare permite que você acompanhe dados ao vivo sobre como os visitantes interagem com seu site, fornecendo métricas acionáveis para melhorar o desempenho e a usabilidade.

Passo 4: Ative Todos os Recursos de Otimização no Cloudflare

Para maximizar o desempenho do seu site, ative os recursos de otimização disponíveis no Cloudflare na aba Speed. Esses recursos são projetados para melhorar os tempos de carregamento, reduzir o uso de largura de banda e aprimorar a experiência do usuário geral de forma eficiente.
  Alguns dos recursos mais importantes para acelerar o site exigem licença PRO.
Certifique-se de ativar “Cloudflare Fonts” e “Rocket Loader”

Passo 5: Resultados Imediatos com o Plano Gratuito do Cloudflare

Mesmo no Plano Gratuito do Cloudflare, você pode ver melhorias significativas de desempenho ao ativar os recursos certos. Apliquei essas otimizações em marketplace.hanscristy.com, e os resultados foram imediatos. As mudanças não apenas melhoraram as métricas de Web Vitals, como LCP e TBT, mas também aprimoraram a experiência geral do usuário.
 

Passo 6: Como as Otimizações do Cloudflare e do Selldone Afetam o Desempenho no Mundo Real

Deixe-me mostrar como as otimizações do Cloudflare e as tecnologias dedicadas do Selldone se combinam para criar um desempenho incomparável, mesmo em cenários de teste desafiadores.

Compreendendo os Desafios com Testes de Desempenho

Ferramentas como Lighthouse, GTmetrix e plataformas semelhantes são projetadas principalmente para páginas estáticas ou sites que renderizam conteúdo no lado do servidor. No entanto, Selldone opera de forma diferente:

• 100% PWA: Cada aspecto da plataforma Selldone—seu site principal, painel, loja e mais—é construído como um Aplicativo Web Progressivo (PWA). Isso significa que toda a renderização acontece no lado do cliente, oferecendo aos usuários imensa flexibilidade para projetar painéis e lojas personalizados.
• Carregamento Dinâmico de Domínio: Os usuários podem carregar o Selldone em qualquer domínio sem se preocupar em implementar um complexo backend. O sistema lida com tudo dinamicamente, sendo entregue em um único arquivo JavaScript.

Essa abordagem única oferece flexibilidade e velocidade, mas cria desafios exclusivos ao testar com ferramentas projetadas para páginas renderizadas no servidor.

Por que o Selldone é 10 a 100 vezes mais Rápido na Vida Real

Enquanto as páginas estáticas dependem do servidor para renderizar HTML para cada solicitação do usuário, a abordagem PWA do Selldone é fundamentalmente diferente:
Busca de Dados Eficiente:

• Em vez de renderizar páginas inteiras no servidor, o Selldone envia uma leve estrutura JSON contendo os dados necessários.
• Por exemplo, quando um usuário clica em um produto, a plataforma busca apenas os dados necessários (como detalhes do produto) em vez de recarregar ou renderizar toda a página.

Sem Atrasos de Renderização no Lado do Servidor:

• Diferente de plataformas como WooCommerce, onde cada clique pode acionar a renderização no lado do servidor, o Selldone elimina completamente esse gargalo. Tudo é tratado no lado do cliente, reduzindo drasticamente a latência.

Vantagem de Velocidade em Tempo Real:

• Os usuários experimentam transições de página quase instantâneas. Essa velocidade na vida real faz com que a plataforma pareça significativamente mais rápida em comparação com sites renderizados no servidor, mesmo que as pontuações de teste tradicionais não reflitam totalmente a vantagem.

Superando o Gargalo Tecnológico

Alcançar altas pontuações em testes para PWAs renderizadas no lado do cliente tem sido historicamente um desafio devido a:

• Atrasos na Execução do JS: A renderização no lado do cliente depende fortemente do JavaScript, que as ferramentas de teste frequentemente penalizam.
• Conteúdo Dinâmico: Diferente de HTML estático, o carregamento de conteúdo dinâmico pode parecer mais lento em testes sintéticos.

Mas o Selldone superou essas limitações pela primeira vez na internet ao combinar:

• Otimizações do Cloudflare (como Rocket Loader™ e Compressão Brotli) para otimizar a entrega de ativos.
• Arquitetura PWA Avançada para busca e renderização de dados em tempo real.

Desempenho do Mundo Real vs. Pontuações Sintéticas

Enquanto os testes sintéticos podem mostrar pontuações mais baixas para plataformas renderizadas no cliente, o desempenho do mundo real conta uma história diferente. O painel e a loja do Selldone oferecem uma experiência 10 a 100 vezes mais rápida em comparação com plataformas renderizadas no servidor, tornando-o a solução ideal para as necessidades do ecommerce moderno.
  Se você gostaria de espelhar as configurações do Cloudflare que usamos para um desempenho ideal, aqui está uma lista dos recursos ativados:

Termos de Performance da Web

Aqui está uma explicação amigável e fácil de entender dos termos de performance da web em Web Vitals:

LCP (Largest Contentful Paint)

O LCP mede quanto tempo leva para o maior parte visível de uma página da web (como uma grande imagem ou título) carregar e ser vista pelos usuários. Pense nisso como o tempo que leva para sua página parecer “pronta” para começar a ler ou interagir.

CLS (Cumulative Layout Shift)

O CLS rastreia quanto as coisas se movem inesperadamente em uma página da web enquanto ela está carregando. Por exemplo, se um botão muda de posição justo quando você está prestes a clicar nele—isso é uma mudança de layout. Uma pontuação CLS baixa significa que seu site parece estável e suave.

INP (Interaction to Next Paint)

O INP mede quão rapidamente sua página da web reage às interações do usuário, como clicar em um botão ou digitar em uma barra de pesquisa. Um INP mais rápido significa que seu site parece responsivo e os usuários não se sentirão frustrados esperando que as ações aconteçam.

TBT (Total Blocking Time)

O TBT calcula o tempo em que sua página está não responsiva enquanto carrega, como quando um usuário tenta rolar ou clicar, mas nada acontece. Um TBT mais baixo significa que sua página é melhor em multitarefa, permitindo que os usuários interajam suavemente enquanto ela carrega.