Origens de pré-conexão

A Silktide verifica se a sua página poderia carregar mais rapidamente ao indicar antecipadamente ao navegador quais os outros servidores de que irá precisar em breve. Abrir essas ligações antecipadamente significa que os ficheiros de terceiros começam a ser transferidos mais cedo.

Antes de um navegador poder transferir qualquer conteúdo de um novo servidor — um serviço de tipos de letra, uma , um fornecedor de Analytics — tem de procurar o endereço do servidor, abrir uma ligação e negociar a encriptação. Essa configuração requer várias viagens de ida e volta na rede e, normalmente, o navegador só a inicia quando deteta pela primeira vez um ficheiro de que precisa desse servidor, o que pode acontecer tarde no carregamento da página.

Porque é importante

A configuração da ligação a um único servidor pode custar centenas de milissegundos numa ligação móvel, e uma página típica comunica com vários servidores de terceiros. Quando essa configuração começa tarde — porque o ficheiro que precisa dela está referenciado no interior de uma folha de estilos ou de um script — o atraso afeta diretamente o conteúdo visível, como tipos de letra e imagens.

Uma indicação de pré-conexão transfere este custo para o início do carregamento, onde se sobrepõe ao trabalho que o navegador já estava a realizar. É uma linha de por servidor, sem qualquer alteração visual na página.

Como corrigir

Adicione uma indicação preconnect no <head> da sua página para cada servidor importante identificado pela verificação:

<!-- Abrir a ligação antes de o navegador detetar que precisa dela -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Inclua o atributo crossorigin nos servidores que precisam dele — os tipos de letra precisam sempre.
Faça a pré-conexão apenas a servidores relevantes para a página visível, como aqueles onde estão alojados os seus tipos de letra, imagens ou scripts essenciais. Cada ligação aberta consome recursos do dispositivo do visitante, por isso algumas indicações ajudam e dezenas prejudicam.
Para servidores menos importantes, rel="dns-prefetch" é uma indicação mais económica que apenas realiza antecipadamente a pesquisa do endereço.

Como a Silktide testa isto

Carrega a página num navegador real, utilizando o tipo de dispositivo, a velocidade da ligação e a localização de teste configurados para os seus testes de velocidade.
Identifica os servidores a partir dos quais a página transfere conteúdos quando a configuração da ligação atrasou a transferência e não existia nenhuma indicação de ligação antecipada.
Comunica cada servidor juntamente com o tempo estimado que uma indicação de pré-conexão pouparia.
Classifica a página com base na poupança total estimada: cerca de 100 milissegundos resulta numa redução da classificação, e 200 milissegundos ou mais é classificado como fraco.

Resolução de problemas

Adicionei a indicação, mas o resultado continua a aparecer

Verifique o endereço exato: a indicação tem de corresponder ao servidor de onde os ficheiros são realmente obtidos, incluindo o protocolo e qualquer subdomínio (https://fonts.gstatic.com não é https://fonts.googleapis.com). Os tipos de letra também precisam de crossorigin na indicação — sem esse atributo, o navegador abre o tipo de ligação errado e depois descarta-o.

Devo fazer a pré-conexão a todos os servidores de terceiros?

Não. Os navegadores limitam o número de ligações antecipadas que aceitam, e cada uma consome recursos do dispositivo do visitante. Reserve a pré-conexão para os poucos servidores cujos ficheiros determinam o que os visitantes veem primeiro.