Uma introdução a tecnologias prontamente disponíveis.
Por que a velocidade de carregamento da página é importante?
A maioria dos usuários identifica rotineiramente o carregamento de página lento como uma grande causa de frustração (54% em um estudo de usuários realizado pelo Google). Por isso, não é surpresa que carregamentos de página mais rápidos resultem em melhores resultados para uma empresa. De fato, se os visitantes ficarem frustrados antes mesmo de interagir com um site, é muito improvável que fiquem tempo suficiente para apreciar seu valor. Outro estudo do Google com 254 sites de e-commerce, finanças e viagens mostrou que os sites com carregamento em até dois segundos têm taxas de conversão 15% maiores.
Como acelerar a Maior exibição de conteúdo (LCP)
Como diz o ditado, não é possível melhorar o que não se mede. Para as experiências do usuário na Web, acreditamos que as Core Web Vitals constituem um conjunto sólido de métricas centradas no usuário projetadas para capturar aspectos fundamentais da experiência. Especificamente, a Maior exibição de conteúdo (LCP) mede o desempenho de carregamento das páginas informando o tempo necessário para exibir o maior bloco de texto ou imagem que o usuário vê. Para oferecer uma boa experiência do usuário, a LCP precisa ocorrer em até 2,5 segundos após o início do carregamento da página (ou seja, o limite de LCP válido).
Vejamos o que contribui para a LCP de uma página típica.
Quando um usuário visita uma página, o navegador solicita o HTML ao servidor. O servidor responde com o HTML, que dá ao navegador mais dicas sobre o que buscar em seguida, incluindo CSS, JavaScript, fontes e imagens. À medida que essas respostas são retornadas, o navegador também precisa se esforçar para avaliá-las e, por fim, posicionar e pintar os componentes na página. No entanto, a maior parte do tempo é gasta esperando que esses pacotes passem do dispositivo para o servidor e depois voltem para o dispositivo. Na verdade, nossos dados (Chrome para Android, mediana) mostram que cerca de 40% da latência visível ao usuário geralmente é gasta pelo navegador à espera do primeiro byte voltar do servidor.
O poder da pré-busca
Se fosse possível fazer a pré-busca de todos esses arquivos, ou seja, buscá-los antes de o usuário visitar a página, isso aumentaria muito a velocidade, deixando apenas algumas tarefas antes de exibir a página: avaliar, calcular o layout e pintar.
Considerando os dados compartilhados anteriormente, também seria possível fazer a pré-busca do recurso principal e ainda conseguir um carregamento de página significativamente mais rápido. No mesmo caso, esse tipo de técnica está prontamente disponível com primitivos, como rel=prefetch. No entanto, com cenários entre sites, isso não é tão simples.
Navegações entre sites
Embora a pré-busca já exista há algum tempo, é preciso considerar também ao pré-buscar páginas de um site enquanto o usuário está em outro.
Suponha que um site referenciador instrua o navegador a pré-buscar uma página de outro site. Obviamente, quando o usuário clica no link para essa página pré-buscada, ele aprecia uma melhor experiência do usuário com um carregamento de página muito mais rápido. No entanto, e se o usuário nunca clicar nesse link? Eles não esperam que um site vinculado saiba que pode ter interesse em um tema enquanto navega por ele no site do referenciador. Ainda assim, esse é um risco substancial porque as solicitações de pré-busca podem transportar o endereço IP do usuário e cookies (se houver), assim como qualquer outra solicitação normal.
Soluções
Para permitir a pré-busca entre sites com proteção da privacidade, desenvolvemos duas soluções nos últimos três anos: Proxy de pré-busca particular e Trocas assinadas (SXG). Também realizamos um experimento em grande escala para confirmar que a pré-busca de origem cruzada oferece benefícios significativos de velocidade. Concretamente, quando analisamos os casos em que o Google conseguiu pré-buscar com segurança o HTML principal para a próxima navegação do usuário, vimos que a fração de carregamentos de página com LCP "boa" aumentou em 14 pontos percentuais.
Principais considerações
Embora o proxy de pré-busca particular e a troca assinada resolvam o mesmo caso de uso, cada tecnologia apresenta um conjunto diferente de vantagens e desvantagens. Portanto, a melhor escolha realmente depende das necessidades específicas do seu site. Para ajudar você a ter uma noção das compensações envolvidas, as seções a seguir abrangem duas considerações importantes para permitir a pré-busca entre sites e escolher entre as duas tecnologias disponíveis. Você também vai encontrar mais detalhes nos artigos detalhados sobre cada tecnologia.
Visitantes recorrentes
A pré-busca entre sites é fácil de ativar para usuários que acessam seu site pela primeira vez. Para visitantes recorrentes, depende da quantidade de personalização incluída no seu site. Isso se resume ao fato de que as solicitações de pré-busca entre sites não podem incluir cookies por motivos de privacidade.
- Para novos visitantes, essa restrição não apresenta nenhum desafio porque eles não têm cookies. Consequentemente, você pode ativar a pré-busca entre sites para esses usuários sem nenhuma alteração no seu site.
- Se você quiser ativar a pré-busca entre sites para visitantes recorrentes e seu site for personalizado com base em cookies, faça o carregamento lento desses elementos personalizados depois que o usuário navegar. Isso funciona porque, ao navegar, a restrição aos cookies não é mais necessária, já que o usuário optou explicitamente por visitar seu site. Portanto, no momento da navegação, seu site tem acesso aos cookies normalmente. Para orientações concretas, consulte estas práticas recomendadas para carregamento lento.
- Se você codifica a personalização diretamente no HTML, ainda pode continuar fazendo isso quando os cookies estiverem presentes e usar o carregamento lento como uma estratégia substituta para as páginas pré-buscadas.
- Caso seu site não seja personalizado com base em cookies ou a personalização não seja essencial, você pode oferecer aos visitantes recorrentes o mesmo conteúdo que mostraria aos visitantes novos.
No momento, o proxy de pré-busca particular está ativado apenas para visitantes novos (links sem cookies) com trabalho contínuo para expandir a cobertura para visitantes recorrentes (links com cookies). Por outro lado, a troca assinada já oferece suporte à pré-busca entre sites para visitantes novos e recorrentes (com as abordagens descritas acima).
Disponibilização de dados extras pela pré-busca
Ativar a pré-busca entre sites pode resultar na disponibilização de dados extra. De fato, se um referenciador fizer a pré-busca da sua página, mas o usuário não clicar no link, isso representaria um tráfego adicional para você.
- Para atenuar isso, é possível solicitar que o referenciador seja menos agressivo com as solicitações de pré-busca. Da mesma forma, o referenciador ou o navegador pode atenuar isso focando em recursos relativamente leves, mas essenciais, (por exemplo, recurso principal, CSS crítico ou sub-recursos de JavaScript). Isso é essencialmente uma troca entre benefícios de velocidade e tráfego extra.
- Como alternativa, é possível compensar esse tráfego ativando o armazenamento em cache adicional. Consulte esta seção sobre troca assinada para mais detalhes. A desvantagem é que armazenar o conteúdo em cache por muito tempo pode resultar na exibição de informações mais antigas aos seus usuários. Isso é essencialmente uma troca entre a veiculação de dados extras e a atualização do conteúdo.
Para tomar a melhor decisão, pergunte-se onde seu site está na escala móvel entre atualização máxima e mínimas solicitações adicionais. A resposta a essa pergunta depende essencialmente das necessidades específicas da sua empresa e dos seus usuários.
Como começar
Essas tecnologias foram integradas à Pesquisa Google para que os sites comecem a melhorar a LCP imediatamente. Esperamos que isso também estimule outras indicações populares a seguir o mesmo procedimento e ajude a tornar a Web muito mais rápida em todos os casos.
Embora essas tecnologias resolvam o mesmo caso de uso, elas oferecem vantagens e desvantagens diferentes em relação às principais considerações explicadas anteriormente. Você pode até decidir começar com uma tecnologia e mudar para a outra conforme suas necessidades ou a apreciação dos benefícios evoluem. Confira estas análises detalhadas para descobrir qual tecnologia é a melhor opção para sua situação específica: