Seu guia para táticas do Core Web Vitals usando Cloudflare e WebpageTest

Uma das melhores maneiras de realizar edições táticas no código da página da Web e melhorar as pontuações do Core Web Vitals é configurar uma comparação, como testes A/B. Como desenvolvedor, você pode executar o Lighthouse em seu ambiente de desenvolvimento local e testar à medida que faz alterações. Ainda é útil testar o código de produção, o que você precisa fazer de qualquer maneira quando não é o desenvolvedor.

Usamos uma pilha de demonstração bacana em nossa clínica do site Core Web Vitals em dezembro passado no SMX Build: SEO for Developers. Continuaremos a usá-lo no próximo treinamento SMX Master Class e, a partir de agora, com nossa série de posts SEO for Developers.

Veja como testar as pontuações do Core Web Vitals e as alterações de código usando Cloudflare Workers como proxy reverso e WebpageTest. Todos esses serviços são gratuitos e certamente não somos os primeiros a usá-los. Patrick Meenan, desenvolvedor do WebpageTest, pensou em tudo. Vamos descrever como começar sem todo o trabalho pesado.

Teste de Cloudflare e Webpage

O aplicativo Cloudflare Workers nos fornece nosso teste de proxy reverso e transforma o código usando o ambiente de proxy. Embora exista um playground em cloudflareworkers.com, URLs fragmentados nesse endereço nos impedem de testar sem uma conta Cloudflare (a gratuita funciona). Você não precisa de uma conta WebpageTest.

Depois de obter uma conta Cloudflare, navegue até Trabalhadores e clique para criar um novo trabalhador com o botão Criar um serviço. Isso preencherá um trabalho JavaScript de amostra com um editor de interface do usuário que você pode acessar com o botão Edição rápida. Cada trabalhador que você cria recebe um URL exclusivo. Você pode renomeá-lo a qualquer momento. Montamos um em: https://sel.deckart.workers.dev para este fim.

Se você navegar, observe o requisito “x-host header”. O requisito limita as solicitações a testes. Usamos uma extensão do navegador para modificar solicitações, adicionamos o cabeçalho x-host necessário para fornecer o script com o host que queremos testar. Vamos modificar as solicitações em seu navegador para que possamos visualizar a página, visualizar o código-fonte e executar o DevTools.

Navegue pelos testes com o ModHeader

Estaremos usando o ModHeader que suporta os principais navegadores. No nosso caso, instalamos a extensão do Chrome e adicionamos dois cabeçalhos personalizados conforme mostrado abaixo. O cabeçalho x-host fornece o host que queremos fazer proxy para nosso teste, e o cabeçalho x-bypass-transform ativa e desativa a transformação para que possamos testar a diferença.

Com x-bypass-transform definido como um valor “true”, a transformação está desativada. Podemos então visualizar a fonte para procurar táticas para testar. Com o cabeçalho x-host no lugar, conforme descrito acima, você pode navegar até a URL do trabalhador e poderá ver a página inicial do Search Engine Land, visualizar seu código-fonte e abrir o DevTools.

Configurando seu próprio trabalhador

O trabalho para o trabalhador é obter os valores do cabeçalho e processar as solicitações de acordo. Resumiremos o script abaixo, deixando de fora alguns detalhes que não são importantes no momento.

1. URLs de proxy usando o valor do cabeçalho x-host.
2. Solicitações de transformação que tenham um valor de cabeçalho de aceitação com “text/html” na string.
3. Ignorar a transformação quando o valor do cabeçalho x-bypass-transform for true.
4. Transforme o HTML quando o cabeçalho x-bypass-transform estiver ausente ou o valor for false.

Se você já escreveu um bloco de código de fluxo de controle condicional, essas tarefas devem ser bem fáceis de imaginar escrevendo em JavaScript. A questão mais interessante então se torna: Como vamos transformar o HTML? É aí que está a mágica do HTMLRewriter(). Copie o Gist do trabalhador básico e substitua seu trabalhador padrão pela fonte bruta.

Configurando o WebpageTest para comparações

O script de trabalho básico executa apenas uma transformação. Ao pré-carregar a imagem do LCP, aumentamos sua solicitação em alguns lugares na fila. Isso levou o tempo de carregamento do LCP móvel de mais de 5 segundos para menos de 4, cerca de 500 ms de melhoria. Para reproduzir isso, nosso script precisa acompanhar as mudanças. O objetivo é preparar você para testes com SEO for Developers e seu próprio trabalho.

Agora que podemos fazer alterações A/B no navegador, como usamos o WebpageTest para obter a diferença entre as pontuações? Obtemos referências de elementos LCP como parte do gráfico em cascata detalhado, que é nosso mapa mais útil para visualizar os efeitos de nossas mudanças táticas. Analisamos a ordem de solicitação e planejamos alterar a ordem em que os recursos são carregados para melhorar a velocidade.

Nosso ponto de partida será WebpageTest com a URL (e não o proxy reverso). Isso ocorre porque as URLs do Cloudflare Worker têm condições diferentes do provedor de host de origem. Por exemplo, o host pode estar operando usando o protocolo HTTP/1.1 mais antigo, enquanto a Cloudflare atualiza para HTTP/2 como parte de seu serviço. Este primeiro relatório WebpageTest deve ser usado para desenvolver táticas.

Em seguida, executaremos um teste com script no WebpageTest para fornecer os cabeçalhos personalizados necessários para o teste A/B de nossas alterações usando a URL do proxy reverso. Para simular as condições do Core Web Vitals, o WebpageTest possui um botão fácil de encontrar. Não há problema em usar isso para o teste inicial. Você precisará editar as configurações nos testes subsequentes e a página do botão Core Web Vitals não possui a interface do usuário para isso.

Em vez disso, use o teste de página inicial padrão e coloque a URL de origem no campo de entrada de teste. Altere o menu suspenso do navegador para selecionar “Motorola G (gen 4)”. Abra a caixa de diálogo Configurações Avançadas e altere o menu suspenso Conexão para selecionar “4G (9 Mbps, 170ms RTT)”. Clique na guia "Avançado" e procure o campo Cabeçalhos personalizados, onde adicionaremos os seguintes cabeçalhos.

Não vamos ignorar as transformações neste momento, então definimos o valor false. Continuando, temos que fazer o script do teste para que o WebpageTest desconsidere que colocamos https://searchengineland.com no campo de teste e, em vez disso, buscará do nosso proxy reverso que é necessário para que o teste possa trocar corretamente o host em o documento HTML básico. Alterne para a guia Script e adicione o seguinte.

Você vai querer substituir todas as strings de URL para corresponder aos seus próprios testes depois de configurar o Cloudflare. Executando o teste com script, você poderá obter a fila de solicitações passo a passo com horários e detalhes mais do que suficientes para desenvolver táticas para melhorar o Core Web Vitals com a maioria das páginas da web. A maioria das páginas da Web são facilmente proxies, mas sua milhagem pode variar.

Por que nos importamos

Core Web Vitals é um fator de classificação da experiência do usuário do Google. Pode não ser o impulso mais forte para sua classificação ao lado de, digamos, otimizar os títulos das páginas. O Google está registrado dizendo que melhorará seus rankings dependendo de suas pontuações. Eles afirmaram que você não precisa de todos os Vitais para obter uma pontuação Boa para aproveitar o benefício. Sua pontuação ideal é 90+ e, uma vez atingido o limite, uma pontuação maior de 90 anos não é melhor do que 90 em si.

Pontuação do LCP antes de um teste com script

Pontuação LCP com o teste com script…