Assim como os olímpicos, você está procurando por tudo vantagem que você pode encontrar para superar a concorrência. Todo mundo sabe que o Google usa o tempo de carregamento da página para diferenciar os resultados da pesquisa.
Embora existam centenas de dicas e truques que você pode implementar para melhorar o tempo de carregamento da página, as dicas do navegador costumam ser esquecidas, mas podem ter um impacto imediato.
As dicas do navegador são metatags ou cabeçalhos que informam ao navegador com antecedência quais recursos são necessários para processar a página. Isso faz com que o navegador aja antes de iniciar as solicitações de rede ou informar ao navegador qual recurso o usuário provavelmente solicitará em seguida.
Na verdade, você está fornecendo ao navegador um mapa simples de sua página, sem todos os detalhes. Este mapa ou série de dicas é suficiente para iniciar o que normalmente seriam atividades dispendiosas relacionadas à rede em segundo plano. Isso significa que ele pode aproveitar os ciclos ociosos da CPU para otimizar a experiência de carregamento.
Dicas do navegador, pré-busca, pré-carregamento, pré-conexão e pré-processamento melhoram o desempenho ao fazer as coisas com antecedência e carregar recursos de segundo plano de forma eficaz.
preconnect
Se o seu documento depende de recursos provenientes de origens ou domínios externos, a dica de pré-conexão inicia a conexão TCP.
A vantagem aqui é que você pode iniciar as etapas de conexão antes da primeira referência no documento. As etapas imitadas são:
- busca DNS
- handshake TCP
- negociação TLS
Assim como você adiciona uma referência de link ao cabeçalho do documento, você adiciona um cabeçalho de link aos cabeçalhos da resposta. Este é um link ligeiramente diferente da forma como é definido como uma referência de link de cabeçalho:
O nome do cabeçalho é Link e você inclui o endereço do servidor de que precisa para iniciar uma conexão dentro de um par de colchetes angulares. Assim como a metatag do link, você inclui um rel=preconnect para informar ao navegador para iniciar uma conexão. Finalmente, como este é um domínio externo, adicione o valor de origem cruzada.
O mecanismo de cabeçalho do Link permite que cada resposta indique ao navegador a quais outras origens ele deve se conectar com antecedência. Por exemplo, os widgets e dependências incluídos podem ajudar a otimizar o desempenho, indicando quais outras origens serão necessárias e assim por diante.
Você pode ver como a dica de pré-conexão melhora o desempenho em Comparações de Ilya Grigorik .
O Microsoft Edge oferece suporte à dica de pré-conexão, mas apenas por meio de um cabeçalho HTTP. Isso coloca a responsabilidade de declarar uma dica de pré-conexão nas mãos dos devops ops, e não nos desenvolvedores. Isso também torna a marcação um pouco mais sustentável, além de analisar os cabeçalhos é sempre um pouco mais rápido do que analisar a marcação para identificar ações.
prefetch
Quando você pode identificar com segurança um recurso para o qual o usuário provavelmente navegará, você pode usar a dica de pré-busca do navegador para carregar a página antecipadamente. Essa técnica depende da busca do recurso em segundo plano e do cache do navegador ou até mesmo do cache do service worker para persistir a solicitação, de forma que a solicitação de rede seja ignorada quando a navegação ocorrer.
Existem dois tipos de pré-busca, DNS e recursos. A pré-busca de DNS é interessante porque as solicitações reais têm largura de banda baixa, mas as etapas necessárias para concluir uma pesquisa de DNS são bastante altas. Ao pré-buscar ou resolver o endereço de um domínio, você está eliminando esta etapa cara.
A pré-busca de link é um pouco diferente. É aqui que você informa ao navegador uma URL que antecipa que o usuário desejará, para que ele possa usar um ciclo de baixa prioridade, quando o navegador estiver ocioso, para recuperar o recurso com antecedência.
Você pode definir um link pré-busca como um elemento LINK ou usando um cabeçalho HTTP:
HTML:
Cabeçalho HTTP:
Link: rel=prefetch
A pré-busca possui um suporte de navegador bastante amplo. No momento, o Safari é o único navegador que não suporta o recurso.
prerender
O Prerender permite que você especifique uma página da web a ser carregada enquanto o usuário lê a página atual. Mesmo que a página não seja renderizada, a resposta tem a garantia de estar pronta quando o usuário navegar da página atual.
Como a resposta já foi recuperada, qualquer cache local deve ser acionado, o que chamamos de priming. Apenas solicitações GET são incluídas no ciclo de pré-processamento e nenhum JavaScript é executado até que a página seja carregada.
Você deve usar com cuidado porque pode ser pesado e desperdiçar largura de banda. Esteja certo de que o recurso que você designou tem grande probabilidade de ser navegado.
O suporte do navegador para pré-renderização é muito pobre. Atualmente, apenas o Chrome e o Samsung Internet oferecem suporte. O Internet Explorer sim, mas não o Edge.
preLoad
A dica de pré-carregamento é uma busca declarativa, informando ao navegador para solicitar um recurso antecipadamente. A vantagem é que a resposta é recuperada nos bastidores, sem bloquear o evento onload do documento. Agora, em vez de esperar que um recurso seja buscado depois de referenciado por meio de um elemento como uma tag IMG ou XMLhttpRequest, o navegador pode solicitar o recurso e adiar o processamento até que seja realmente referenciado.
Usando esta técnica Housing.com observou uma melhoria de 10% em seu tempo médio de carregamento de página.
Você pode designar uma dica de pré-carregamento como HEAD LINK ou usando um cabeçalho HTTP. No entanto, o Edge atualmente suporta apenas o elemento LINK. O suporte do navegador é bastante onipresente hoje. No entanto, os navegadores legados solicitarão esses recursos como se fossem normalmente referenciados, portanto, você não obtém os benefícios sem bloqueio.
Link:
Cabeçalho:
Link:; rel=preload as=image
O pré-carregamento difere da pré-busca porque é um sinal de busca de alta prioridade para um componente crítico do documento atual, onde o pré-carregamento é mais para antecipar uma navegação que um usuário pode fazer. O principal benefício que o pré-carregamento oferece é disponibilizar recursos antes que sejam necessários, para que você possa otimizar como o UI thread renderiza o conteúdo. Os recursos pré-carregados podem minimizar o tempo em que o thread de interface do usuário fica bloqueado esperando o carregamento desses recursos, uma vez que você os busca preventivamente.
O atributo’as’é necessário para ajudar o navegador a entender como deve processar um recurso. Se você negligenciar este atributo, irá buscar o recurso duas vezes, pois o navegador não saberá como processar o recurso. A tabela a seguir demonstra como você deve declarar o valor as para diferentes tipos de recursos:
Usando esta técnica, você pode tornar o recurso disponível assim que for carregado. Um exemplo simples pode ser o pré-carregamento de uma imagem, mas ter um espaço reservado renderizado até que o arquivo seja recuperado.
Não enlouqueça tentando pré-carregar tudo em sua página. Isso causará o congestionamento da rede necessário. Limite o pré-carregamento a ativos atrasados que podem realmente se beneficiar de uma solicitação de rede anterior.
Resumo
As dicas do navegador são uma ótima maneira de otimizar os ciclos de carregamento de sua página. É necessário um pouco de cuidado para entender a personalidade da sua página e do site para que essas configurações estejam corretas. Mas mesmo resolver o DNS antecipadamente pode gerar grandes ganhos. Muitos sites estão obtendo ganhos de desempenho imediatos com a implementação de dicas do navegador em suas páginas da web. Sei que comecei a pré-busca de DNS anos atrás e vi o impacto.
