Home Blogs Reduza as taxas de rejeição e melhore a experiência do site com a busca preditiva por Edgio
Download
Applications

Reduza as taxas de rejeição e melhore a experiência do site com a busca preditiva por Edgio

About The Author

Outline

Transições instantâneas: Como estender o cache do Edge para o navegador com Predictive Prefetching

É do conhecimento comum que os atrasos na navegação diminuem a conversão e aumentam as taxas de rejeição. Para aqueles de vocês que gerenciam e rastreiam a conversão em sites com muito tráfego, você provavelmente viu esse cenário acontecer. Espero que você também tenha visto o inverso. Você viu a conversão aumentar quando os tempos de navegação e carregamento da página melhoram.

Desempenho e conversão andam de mãos dadas.

As empresas de CDN costumam usar essa ilustração como um exemplo para provar o ROI de seus serviços. A solução é simples. Obtenha conteúdo estático o mais próximo possível de seus usuários para acelerar a entrega e o investimento é ROI positivo. Os visitantes vão ficar mais tempo, fazer mais compras e retornar com mais frequência. Faz sentido, não é? Se você está lendo isso, provavelmente já sabe que é verdade. Mas o que vem a seguir? Podemos dar um passo adiante e eliminar completamente os tempos de resposta da rede da experiência da web e torná-la semelhante a um aplicativo nativo? Se pudermos reduzir o atraso para zero, não maximizaríamos a conversão? Se pudermos armazenar em cache o conteúdo de borda no navegador antes que o usuário clique, as transições podem ser instantâneas, semelhantes a um aplicativo nativo.

“Podemos realmente ter desempenho de aplicativos da web semelhante aos aplicativos nativos para os visitantes do nosso site?”

Com Edgio, você pode.

Vamos começar por dar uma olhada no que torna os aplicativos móveis nativos ótimos. A maioria dos usuários de aplicativos móveis não sabe o que está acontecendo nos bastidores, mas eles certamente apreciam as melhorias de desempenho obtidas pelo download e instalação de aplicativos em seus dispositivos. É simples, carregar o aplicativo, navegar pelas telas e as transições são instantâneas. De uma coisa para a outra, adicione um item ao seu carrinho e desfrute de uma experiência sem atrito. Raramente o usuário vê um indicador de “carregamento” e, quando o faz, faz sentido; como enviar informações de pagamento durante o checkout. Tudo é possível com um desenvolvimento inteligente e uma plataforma capaz.

Digite Predictive Prefetching por Edgio. Agora seus usuários da web podem desfrutar do mesmo tipo de experiência.

Muitas empresas de CDN oferecem opções de aquecimento de cache que chamam de “pré-busca” para ajudar a trazer conteúdo de sua origem para a borda. Um ótimo primeiro passo, mas não te leva até lá. O usuário ainda tem que esperar enquanto o conteúdo se move para o dispositivo. Então, como vamos dar um passo adiante? Desde a origem até a borda e até o navegador antes de clicar, o pré-busca do Edgio é uma integração de navegador que traz a borda diretamente para o dispositivo. Algo de CDN tradicional não é capaz.

“Bem, isso soa como mágica, como funciona?”

Grande pergunta e nós entendemos totalmente o seu ceticismo. Para entender como funciona, precisamos começar com o básico. Assista a este rápido explainer abaixo, então vamos dar uma olhada no que é o pré-busca em seu núcleo.

O que é pré-busca… realmente?

Vamos olhar para MDN para uma definição de pré-busca como seu navegador entende isso. A pré-busca de links é uma dica para o agente do usuário de que ele deve baixar um ativo que pode ser necessário mais tarde quando os recursos se liberam. Primeiro, sua página carrega e começa a processar solicitações assíncronas. Quando a rede e a CPU se liberam, o navegador irá pegar os recursos adicionais que você adicionou ao documento. Para pré-busca básica, como o navegador entende isso, pode parecer um pouco como isso:

				
					<head>
…
<link rel="prefetch" href="/next-page.html" />
<link rel="prefetch" href="/next-image.jpg" />
…
</head>
				
			

O resultado líquido é que next-page.html e next-image.jpg serão baixados e armazenados em cache pelo navegador enquanto o usuário estiver interagindo com a página original. Se eles clicarem, eles terão o esqueleto da próxima página e uma imagem adicional já armazenada em cache localmente que aparecerá instantaneamente. Claro, CSS, JS e outros ativos adicionais podem precisar ser baixados, mas nós trouxemos as partes mais críticas da jornada para o navegador antes que seja necessário. Esse é um ótimo começo e, como você pode dizer a partir do exemplo, funciona muito bem para um pequeno caso de uso. Sites de viagem sequenciais, talvez uma landing page ou duas, mas o que você provavelmente está pensando é isso…

“Meu site tem milhares de imagens e páginas, de nenhuma maneira eu posso fazer isso.

Não podemos possivelmente vincular todas as imagens e páginas na cabeça de todas as nossas páginas, certo?”

Não, e você não precisa. Usando os plugins de pré-busca preditiva e busca profunda do Edgio , você pode ignorar a engenharia e adivinhação enquanto o navegador do seu usuário trabalha com nossa rede de borda para extrair recursos críticos.

OK, então como fazemos isso?

O Prefetching Predictive de Edgio utiliza algo chamado service-worker. Um SW é algo que todos os navegadores modernos entendem, ele tem sido realmente suportado desde o Chrome 40. O SW é um processo em segundo plano vinculado ao seu site que funciona enquanto as solicitações primárias estão ociosas. Você pode ter sido exposto a service-workers se você já trabalhou no desenvolvimento front-end ou em aplicações web progressivas mais modernas. Se você não estiver usando um service-worker em seu site agora, você pode facilmente adicionar um sem qualquer impactos na sua experiência de usuário atual. O Edgio pode ajudá-lo a configurar facilmente um com um dos nossos service-workers pré-construídos.

Registrar e instalar um service-worker pode variar dependendo se você está ou não usando uma estrutura front-end. Certifique-se de verificar a nossa documentação para encontrar instruções mais detalhadas para vários métodos.

Agora que você adicionou um service-worker e está se registrando no seu site, ele precisa de algo para fazer. Depois de adicionar o pacote Edgio Prefetch, é hora de adicionar nossas rotas para colocar o navegador do usuário em funcionamento. Por padrão, o cache do service-worker é armazenado por dois minutos. Para maximizar o desempenho, podemos ajustar isso em nosso arquivo de rotas:

				
					import {Router} from '@edgio/core';

export default new Router()
  .get('/api/products/:id.json', ({cache, proxy}) => {
    cache({
      edge: {
        maxAgeSeconds: 60 * 60,
        staleWhileRevalidateSeconds: 60 * 60 * 24,
      },
      browser: {
        serviceWorkerSeconds: 60 * 60,
      },
    });
  });
				
			

Com uma regra simples, configuramos o Edge para manter a frescura da resposta da nossa API validando-a por vinte e quatro horas e instruímos o navegador a não só fazer a pré-busca, mas a pendurar por uma hora.

Se você está familiarizado com o Edgio, você sabe que pode testar isso localmente. Abra as ferramentas de desenvolvimento do seu navegador e observe a guia de rede enquanto você peruse o site. Você verá o service-worker pegando o HTML bruto para os links em seu arquivo de rotas enquanto navega. Observe o ícone de engrenagem distinto e o “service-worker” anotados como o iniciador.

Você também pode visualizar o cache do service-worker separadamente, verificando a guia Application e observando o cache.

O script de pré-busca do Edgio funciona para puxar links para a janela de visualização do usuário para que eles cliquem. Se eles clicarem, eles serão instantaneamente trazidos para a página seguinte.

Um ótimo começo, mas e se você tiver um site com conteúdo pesado com imagens de produtos ou artigos que precisam ser buscados também? Então é hora do plugin Deep Fetch único do Edgio.

Ativar o plugin Deep Fetch é fácil. Basta importar o plugin para o seu projeto existente e escolher alguns seletores HTML que o plugin deve procurar. Se você estiver executando um site de e-commerce, suas páginas de produtos provavelmente serão modeladas. Seu LCP pode parecer algo assim – onde cada página tem uma imagem diferente, mas você usa o seletor CSS “main-image” para manter o estilo em todo o seu site.

				
					<img src=”/images/product-image.jpg” class=”main-image” />
				
			

Tente adicionar o seletor “main-image” à matriz Deep Fetch e deixe o service-worker ir para o trabalho.

				
					import {Prefetcher} from '@edgio/prefetch/sw';
import DeepFetchPlugin from '@edgio/prefetch/sw/DeepFetchPlugin';

new Prefetcher({
  plugins: [
    new DeepFetchPlugin([
      {
        selector: 'img.main-image',
        maxMatches: 1,
        attribute: 'src',
        as: 'image',
      },
    ]),
  ],
});
				
			

Em suma, isso diz ao plugin Deep Fetch para procurar o seletor de mage principal e pré-buscar o src como uma imagem. No exemplo, definimos maxMatches como 1. O que significa que só vamos pré-buscar a primeira partida. Não há necessidade de parar por aí. Ajuste o maxMatches conforme você entender melhor, dependendo do tipo de ativo que você está pré-buscando.

Agora, seu service-worker irá pré-buscar links na janela de visualização, digitalizar através do HTML para esse seletor e adicionar um link de pré-busca para a imagem em questão. Quando seu usuário clica na imagem, a página será apresentada instantaneamente.

“E a nossa origem? Não podemos suportar um aumento no tráfego para todos os usuários.”

Edgio tem você coberto. Nosso WebCDN de próxima geração não passará solicitações de pré-busca para sua origem se o ativo não estiver em cache. Edgio irá simplesmente responder com um 412. Se o usuário clicar no link não armazenado em cache, passaremos isso para a origem como faria para qualquer outra solicitação e honraremos as regras de proxy que você tem no local. Tenha certeza de que sua origem é segura com Edgio. O tráfego natural em todo o site aquecerá o cache e as respostas 412 diminuirão. Para manter seu site atualizado, certifique-se e use stale-while-revalidate para que possamos entregar um item obsoleto enquanto procuramos um novo.

Quer ver tudo isso em ação sem ter que explorar as ferramentas de desenvolvimento do Chrome? Edgio pode ajudar lá também. Vimos como é valioso o Prefetching Predictive para nossos clientes, então temos um painel específico dentro do console do Edgio. Monitore facilmente seu desempenho de pré-busca tanto para sua solicitação de pré-busca quanto para a taxa de acerto.

Espero que agora você veja como o Prefetching Predictive do Edgio pode oferecer aos seus usuários uma experiência digital verdadeiramente incrível, aumentar as conversões e diminuir as taxas de rejeição, trazendo o cache de borda todo o caminho para o seu usuário.