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 gerem e monitorizam a conversão em sites com muito tráfego, provavelmente já viram este cenário a acontecer. Espero que também tenham visto o inverso. Você viu a conversão aumentar quando os tempos de navegação e carregamento de páginas melhoram.
O desempenho e a conversão andam de mãos dadas.
As empresas de CDN usam frequentemente esta ilustração como um exemplo para provar o retorno do investimento nos seus serviços. A solução é simples. Obtenha conteúdo estático o mais próximo possível dos seus utilizadores para acelerar a entrega e o investimento é positivo no retorno do investimento. Os visitantes vão ficar mais tempo, fazer mais compras e voltar com mais frequência. Faz sentido, não é? Se estão a ler isto, provavelmente já sabem que é verdade. Mas o que se segue? Podemos dar um passo mais longe e eliminar completamente os tempos de resposta da rede da experiência 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 um desempenho de aplicações web semelhante a aplicações nativas para os visitantes do nosso site?”
Com Edgio, pode.
Vamos começar por dar uma olhada no que torna as aplicações móveis nativas ótimas. A maioria dos utilizadores de aplicações móveis não sabe o que está a acontecer nos bastidores, mas certamente aprecia as melhorias de desempenho obtidas ao descarregar e instalar aplicações nos seus dispositivos. É simples, carregar a aplicação, navegar através de ecrãs e as transições são instantâneas. Tab de uma coisa para a outra, adicione um item ao seu carrinho e desfrutar de uma experiência sem atrito. Raramente o utilizador vê um indicador de “carregamento” e, quando o faz, faz sentido; como enviar informações de pagamento durante o pagamento. Tudo é possível com um desenvolvimento inteligente e uma plataforma capaz.
Digite Predictive Prefetching por Edgio. Agora, os utilizadores 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 o conteúdo da sua origem para a borda. Um grande primeiro passo, mas não te leva até lá. O utilizador ainda tem de esperar enquanto o conteúdo se move para o seu dispositivo. Então, como vamos dar um passo mais longe? Desde a origem até à borda e até ao navegador antes de clicarem, a pré-busca de 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 magia, como funciona?”
Grande questão e nós compreendemos totalmente o seu ceticismo. Para entender como funciona, precisamos começar com o básico. Vejam este rápido explainer abaixo, então vamos dar uma olhada no que é o pré-busca no seu núcleo.
O que é a busca… realmente?
Vamos olhar para o MDN para uma definição de pré-busca conforme o navegador a entende. 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, a página carrega e começa a processar pedidos assíncronos. Quando a rede e a CPU se libertarem, o navegador vai pegar nos recursos adicionais que você adicionou ao documento. Para pré-busca básica, como o navegador entende, pode parecer um pouco como isto:
<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 transferidos e armazenados em cache pelo navegador enquanto o utilizador interage com a página original. Se clicarem, terão o esqueleto da próxima página e uma imagem adicional já armazenada em cache local 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. Isso é um ótimo começo e, como podem ver no exemplo, funciona muito bem para um pequeno caso de uso. Sites de viagens sequenciais, talvez uma ou duas páginas de destino, mas o que você provavelmente está pensando é isto…
“O meu site tem milhares de imagens e páginas, de forma alguma posso fazer isto.
Não podemos ligar 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 plug-ins Predictive Prefetching e Deep fetching do Edgio, você pode ignorar a engenharia e adivinhação enquanto o navegador do seu usuário trabalha com a nossa rede de ponta para atrair recursos críticos.
OK, então como fazemos isso?
A busca preditiva de Edgio utiliza algo chamado de trabalhador de serviço. Um SW é algo que todos os navegadores modernos entendem, tem sido suportado desde o Chrome 40. O SW é um processo em segundo plano ligado ao seu site que funciona enquanto as solicitações primárias estão ociosas. Você pode ter sido exposto a trabalhadores de serviços se você já trabalhou no desenvolvimento de front-end ou em aplicações web progressivas mais modernas. Se você não estiver usando um service-worker no seu site agora, pode facilmente adicionar um sem qualquer impactos na sua experiência de usuário atual. O Edgio pode ajudá-lo a montar facilmente um com um dos nossos trabalhadores de serviço pré-construídos.
Registar e instalar um trabalhador de serviço pode variar dependendo se está ou não a utilizar uma estrutura de front-end. Não se esqueça de verificar a nossa documentação para encontrar instruções mais detalhadas para vários métodos.
Agora que você adicionou um funcionário de serviço e está se inscrevendo no seu site, ele precisa de algo para fazer. Depois de adicionar o pacote Edgio Prefetch, é hora de adicionar as nossas rotas para colocar o navegador do utilizador a funcionar. Por padrão, o cache do service-worker é armazenado por dois minutos. Para maximizar o desempenho, podemos ajustá-lo no 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 durante vinte e quatro horas e instruímos o navegador a não só fazer uma pré-busca, mas a manter-se firme durante uma hora.
Se você está familiarizado com o Edgio, sabe que pode testar isso localmente. Abra as ferramentas de desenvolvimento do seu navegador e veja a guia de rede enquanto perusa o site. Você verá o trabalhador de serviço agarrando o HTML bruto para os links no arquivo de rotas enquanto navega. Observe o ícone de engrenagem distintivo e o “trabalhador de serviço” anotados como o iniciador.
Também é possível visualizar o cache do service-worker separadamente, verificando a guia do aplicativo e observando o cache.
O script de pré-busca do Edgio funciona para puxar links para a janela de visualização do seu utilizador para que eles cliquem. Se clicarem, serão imediatamente 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 plug-in Deep Fetch único do Edgio.
Ativar o plug-in Deep Fetch é fácil. Basta importar o plug-in para o seu projeto existente e escolher alguns seletores HTML que o plug-in deve procurar. Se você estiver executando um site de e-commerce, as páginas do seu produto provavelmente são modeladas. O seu LCP pode parecer algo assim – onde cada página tem uma imagem diferente, mas você usa o seletor CSS da “imagem principal” para manter o estilo em todo o seu site.
<img src=”/images/product-image.jpg” class=”main-image” />
Tente adicionar o seletor de “imagem principal” ao array Deep Fetch e deixe o service-worker trabalhar.
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, isto 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. No entanto, não há necessidade de parar por aí. Ajuste o maxMatches conforme você entender, dependendo do tipo de ativo que você está pré-buscando.
Agora, o seu assistente 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 o seu utilizador clicar na imagem, a página será apresentada instantaneamente.
“E quanto à nossa origem? Não podemos suportar um aumento no tráfego para cada utilizador.”
Edgio tem tudo o que precisa. O nosso WebCDN da próxima geração não passará pedidos de pré-obtenção para a sua origem se o ativo não estiver em cache. Edgio vai simplesmente responder com um 412. Se o utilizador 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 em vigor. Tenha a certeza de que a sua origem é segura com o Edgio. O tráfego natural em todo o site aquecerá o cache e as respostas 412 diminuirão. Para manter o seu site atualizado, certifique-se de usar o stale-while-revalidate para que possamos entregar um item obsoleto enquanto procuramos um novo.
Quer ver tudo isto em ação sem ter de explorar as ferramentas de desenvolvimento do Chrome? Edgio também pode ajudar. Vimos como é valioso o Prefetching Predictive para os nossos clientes, por isso temos um painel de controlo construído especificamente dentro da consola Edgio. Monitorize facilmente o seu desempenho de pré-busca tanto para o seu pedido de pré-obtenção como para a taxa de acerto.
Espero que agora vejam como a Predição Preditiva do Edgio pode dar aos seus utilizadores uma experiência digital verdadeiramente incrível, aumentar as conversões e diminuir as taxas de rejeição, trazendo o cache de borda até o seu utilizador.
