Como acelerar o site com a tag

"Previsão"navegadores são o futuro da Internet de alta velocidade surfando, nos trazendo recursos que queremos mesmo antes de sabermos que os queremos. Os navegadores de hoje já faço alguns previsões de vez em quando para acelerar a busca e a renderização de documentos. Para levar isso para a próxima etapa, não buscamos outros desenvolvedores.

Os desenvolvedores têm um muito boa ideia do como seus sites são navegados, e qual os recursos são solicitados com mais frequência e assim, eles podem prever algumas operações futuras que os navegadores devem fazer por sites. Tudo o que é necessário agora é que os desenvolvedores encontrem uma maneira de retransmitir estes previsões para navegadores e colocá-los em bom uso. É aqui que entram alguns "links HTML" especiais.

Um Refresher em solicitações HTTP

Antes de dar uma olhada nestes links, é hora de atualizar nossa memória sobre como acontece uma típica operação de busca de arquivos solicitada por HTTP. Digamos que alguém chamado Joe queira visitar um site.

Aqui está o que acontece a seguir:

1. Joe digita o endereço humano do site na barra de endereços do navegador e pressiona "Enter".
2. Depois de receber esse endereço, o navegador solicita a um servidor DNS (cortesia do ISP) o endereço IP do endereço fornecido por Joe.
3. O servidor DNS obriga.
4. Agora que o navegador conhece o endereço IP, ele envia uma mensagem (no dialeto TCP) para o servidor do site, solicitando uma conexão.
5. Se o servidor estiver ativo e bem, ele envia uma resposta reconhecendo a solicitação do navegador e o navegador responde e confirma a mensagem do servidor. (Nota: Sim, esta é uma versão extremamente aguada de um handshake TCP entre um cliente e um servidor.
6. Quando os apertos de mão terminam, estabelece-se uma conexão entre os dois.
7. Agora, o navegador muda seu estilo de dialeto para HTTP e pergunta ao servidor pelo site.
8. O servidor, sabendo que a home page do site retorna apenas isso, que é recebido pelo navegador e mostrado para Joe, que está esperando muito pacientemente na frente do computador.

Uma solicitação HTTP típica passa por todos isso (e mais) para buscar um documento pela Internet. Então, se algum desses processos pode ser jumpstarted quando possível, podemos reduzir o tempo que temos para esperar a entrega dos recursos que queremos.

Relacionamentos de link HTML

O W3C especifica 4 relações de link HTML (rel para relacionamento) chamado dns-prefetch, pré-conectar, prefetch, e prerender. Juntos eles são chamados (pelo W3C) o "Dicas de Recursos". Agora, vamos ver o que eles podem fazer e onde eles podem ser usados.

1. Pré-busca de DNS

Na pré-busca de DNS, o resolução de nomes de domínio (também conhecido como obter o endereço IP correspondente do servidor DNS) é feito antes do tempo.

Digamos que há uma página de referência em um site com muitos links de referência para seu site irmão. Quando um usuário visita a página de referência, há um alta probabilidade que o usuário navegará até o site da irmã. Então, um pesquisa de DNS antecipada para o site irmão pode reduzir o tempo necessário para abrir o site (melhorando assim a experiência do usuário).

este redução de latência via pré-busca de DNS pode ser feito adicionando este código à página de referência.

Quando um navegador processa esse código na página de referência, ele adicionará a pesquisa de DNS do site-irmão às filas de tarefas e, quando estiver livre de outras tarefas de alta prioridade na fila, iniciará a resolução de DNS das filas de tarefas. site da irmã.

Portanto, quando um usuário finalmente clica em um dos links que o leva ao site-irmão, a resolução de DNS desse site já pode ter sido concluída, e o navegador pode começar imediatamente a estabelecer a conexão TCP cliente-servidor com o site-irmão. servidor, fazendo com que a página carregue mais rápido.

Esse recurso está disponível em quase todos os navegadores modernos, exceto o Safari em março de 2016.

2. Pré-conectar

O pré-conectar é um passo à frente da pré-busca do DNS, estabelece uma conexão com o servidor para o qual pode haver um pedido enviado mais tarde no futuro.

O W3C lista um caso de uso ideal para pré-conexão: redireciona. Os desenvolvedores usam redirecionamentos por vários motivos.

Nesse caso, a próxima solicitação do navegador (site redirecionado) é 100% previsível, e pode ser pré-conectado a, para reduzir a latência de navegação.

Imagine que há uma página intermediária do site que redireciona para "xyzsite", o link HTML a seguir fará com que o navegador se reconecte ao servidor xyzsite, quando chegar a essa página intermediária.

A partir de março de 2016, isso está disponível no Chrome, Opera e Firefox.

3. Pré-busca

Com prefetch, para um recurso, o navegador inicia a implementação da resolução de DNS do nome de domínio do recurso, então executa uma conexão TCP com o servidor do recurso, faz o pedido HTTP e, finalmente, busca e armazena o recurso pré-buscado no cache do navegador.

Se você tiver certeza de quais recursos serão necessários mais tarde, esse é o recurso a ser pesquisado antecipadamente; aí está a pegada. Pré-busca leva adivinhação, e se você errar, você pode realmente desacelerar em vez de acelerar seu site.

Para livros on-line, galerias ou portfólios, se o usuário estiver mais propenso a navegar para a próxima página, prefetching os recursos, como imagens, pode acelerar as coisas significativamente. Aqui está o código para fazer isso.

Pré-busca é suportada no Chrome, Firefox e Opera.

4. Prerender

Somente para páginas HTML, o pré-processamento pode ser feito. Uma página HTML pré-renderizada é renderizado off-line, e é pintado na tela quando é realmente necessário pelo usuário. Renderização custa um maior trabalho computacional e recurso de memória; Além disso, para renderizar uma página, o navegador pode precisar de recursos extras (como imagens adicionadas à página) que levarão a mais pedidos consequentes pelo navegador.

assim, prerender tem que ser usado com cautela, e não usado em demasia. Adicionar o código a seguir pré-renderizará a página "Sobre" de antemão.

O Prerender já está disponível no Chrome, IE e Opera em março de 2016.

Algumas coisas para anotar

(1) Nenhuma das dicas de recurso acima mencionadas garante a execução e a conclusão dos diferentes estágios de solicitação para os quais foi feito, porque quando o navegador já está ocupado processando as solicitações necessárias para as operações da página atual em que o usuário está, executando estas otimizações pode dificultar as tarefas atuais do usuário.

Então, tudo é enfileirado e executado quando o navegador se sente livre o suficiente para fazê-lo.

Essas dicas de recursos não precisam necessariamente estar presentes na página antes mesmo do carregamento da página. Eles podem ser adicionado mais tarde por JavaScript, e as dicas de recursos farão o seu trabalho como de costume.

(2) O W3C especifica um Atributo de link HTML chamado probabilidade de dica, pr (com valor 0 a 1) para essas dicas de recursos, que podem ser usadas para fornecer a probabilidade de solicitações que serão feitas no futuro. Ainda não vi esse atributo sendo implementado por qualquer navegador. Por exemplo, o código a seguir indica que há 80% de chance de que o xyzsite seja solicitado no futuro e 30% para a página sobre.

Também podemos adicionar o atributo crossorigin opcional às dicas de recursos para informar ao navegador a credencial CORS da solicitação vinculada.