Dicas de recursos
Introdução
As dicas de recursos fornecem “dicas” ao navegador sobre quais recursos serão necessários em breve. A ação que o navegador executa ao receber essa dica irá variar dependendo do tipo de dica de recurso; diferentes dicas de recursos dão início a diferentes ações. Quando usados corretamente, eles podem melhorar o desempenho da página, dando uma vantagem inicial para importantes ações antecipadas.
Exemplos de melhorias de desempenho como resultado de dicas de recursos incluem:
- O Jabong diminuiu o tempo de interação em 1,5 segundos ao pré-carregar scripts críticos.
- O Barefoot Wine diminuiu o tempo de interação das páginas futuras em 2,7 segundos, obtendo previamente links visíveis.
- O Chrome.com diminuiu a latência em 0,7 segundo ao conectar-se previamente às origens críticas.
Há quatro sugestões de recursos separados suportados pela maioria dos navegadores de hoje: dns-prefetch, preconnect, preload, e prefetch.
dns-prefetch
A função de dns-prefetch é iniciar uma pesquisa DNS antecipada. É útil para completar a busca DNS de terceiros. Por exemplo, a pesquisa DNS de um CDN, provedor de fontes ou API de terceiros.
preconnect
preconnect inicia uma conexão antecipada, incluindo pesquisa DNS, handshake TCP e negociação TLS. Esta dica é útil para estabelecer uma conexão com terceiros. Os usos de preconnect são muito semelhantes aos de dns-prefetch, mas preconnect tem menos suporte entre os navegadores. No entanto, se você não precisa do suporte do IE 11, a pré-conexão provavelmente é uma escolha melhor.
preload
A dica preload inicia uma solicitação antecipada. Isso é útil para carregar recursos importantes que, de outra forma, seriam descobertos tardiamente pelo analisador. Por exemplo, se uma imagem importante só puder ser descoberta depois que o navegador receber e analisar a folha de estilo, pode fazer sentido pré-carregar a imagem.
prefetch
prefetch inicia uma solicitação de baixa prioridade. É útil para carregar recursos que serão usados no carregamento de página subsequente (em vez de atual). Um uso comum de pré-busca é carregar recursos que o aplicativo “prevê” que serão usados no próximo carregamento de página. Essas previsões podem ser baseadas em sinais como o movimento do mouse do usuário ou fluxos/jornadas comuns do usuário.
Sintaxe
97% do uso da dica de recurso dependia do uso da tag <link> para especificar uma dica de recurso. Por exemplo:
<link rel="prefetch" href="shopping-cart.js">Apenas 3% do uso de dicas de recursos usaram HTTP headers para especificar dicas de recursos. Por exemplo:
Link: <https://example.com/shopping-cart.js>; rel=prefetchComo o uso de dicas de recursos em cabeçalhos HTTP é muito baixo, o restante deste capítulo se concentrará exclusivamente na análise do uso de dicas de recursos em conjunto com a tag <link>. No entanto, é importante notar que, nos próximos anos, o uso de dicas de recursos em cabeçalhos HTTP pode aumentar à medida que o HTTP/2 Push for adotado. Isso se deve ao fato de que o HTTP/2 Push redirecionou o Link cabeçalho de pré-carregamento HTTP como um sinal para enviar recursos.
Dicas de recursos
Observação: não houve diferença perceptível entre os padrões de uso de dicas de recursos em dispositivos móveis e computadores. Assim, para fins de concisão, este capítulo inclui apenas as estatísticas para dispositivos móveis.
| Dica de recurso | Uso (porcentagem de sites) |
|---|---|
dns-prefetch |
29% |
preload |
16% |
preconnect |
4% |
prefetch |
3% |
prerender (descontinuada) |
0.13% |
A popularidade relativa de dns-prefetch não é surpreendente; é uma API bem estabelecida (apareceu pela primeira vez em 2009), é suportada por todos os principais navegadores e é a mais “barata” de todas as dicas de recursos. Como dns-prefetch executa apenas pesquisas de DNS, ele consome muito poucos dados e, portanto, há muito poucas desvantagens em usá-lo. dns-prefetch é mais útil em situações de alta latência.
Dito isso, se um site não precisa ser compatível com o IE11 e versões anteriores, alternar dns-prefetch para preconnect é provavelmente uma boa ideia. Em uma era em que o HTTPS é onipresente, preconnect produz maiores melhorias de performance e ainda é barato. Observe que dns-prefetch, ao contrário de preconnect não apenas inicia a pesquisa DNS, mas também o handshake TCP e a negociação TLS. A certificate chain é baixada durante a negociação TLS e isso normalmente custa alguns kilobytes.
prefetch é usado por 3% dos sites, tornando-se a dica de recurso menos amplamente usada. Esse baixo uso pode ser explicado pelo fato de que prefetch é útil para melhorar os carregamentos de página subsequentes-em vez de atuais. Assim, será esquecido se um site está focado apenas na melhoria de sua landing page, ou no desempenho da primeira página visualizada.
| Dica de recurso | Dicas de recursos por página: mediana |
Dicas de recursos por página: 90th percentil |
|---|---|---|
dns-prefetch |
2 | 8 |
preload |
2 | 4 |
preconnect |
2 | 8 |
prefetch |
1 | 3 |
prerender (descontinuada) |
1 | 1 |
As dicas de recursos são mais eficazes quando usadas seletivamente (“quando tudo é importante, nada é”). A Figura 19.2 acima mostra o número de dicas de recursos por página para páginas que usam pelo menos uma dica de recursos. Embora não haja uma regra clara para definir o que é um número apropriado de dicas de recursos, parece que a maioria dos sites está usando dicas de recursos de forma adequada.
O atributo crossorigin
A maioria dos recursos “tradicionais” obtidos na web (images, stylesheets, e scripts) são obtidos sem a opção de Compartilhamento de recursos entre origens (CORS). Isso significa que se esses recursos forem obtidos de um servidor de cross-origin, por padrão, seu conteúdo não pode ser lido de volta pela página, devido à política de mesma origem.
Em alguns casos, a página pode optar por buscar o recurso usando CORS se precisar ler seu conteúdo. O CORS permite que o navegador “peça permissão” e obtenha acesso a esses recursos de origem cruzada.
Para tipos de recursos mais novos (por exemplo, fontes, solicitações fetch(), módulos ES), o padrão do navegador é solicitar esses recursos usando CORS, falhando totalmente nas solicitações se o servidor não conceder permissão para acessá-los.
crossorigin valor |
Uso | Explicação |
|---|---|---|
| Não configurado | 92% | Se o atributo crossorigin estiver ausente, a solicitação seguirá a política de origem única. |
| anônimo (ou equivalente) | 7% | Executa uma solicitação de cross-origin que não inclui credenciais. |
| use-credentials | 0.47% | Executa uma solicitação de cross-origin que inclui credenciais. |
crossorigin como um percentual das instâncias de dica de recursos.
No contexto de dicas de recursos, o uso do atributo crossorigin permite que eles correspondam ao modo CORS dos recursos aos quais devem corresponder e indica as credenciais a serem incluídas na solicitação. Por exemplo, anonymous ativa o CORS e indica que nenhuma credencial deve ser incluída para essas solicitações de origem cruzada:
<link rel="prefetch" href="https://other-server.com/shopping-cart.css" crossorigin="anonymous">Embora outros elementos HTML suportem o atributo crossorigin, esta análise apenas considera o uso com dicas de recursos.
O atributo as
as é um atributo que deve ser usado com a dica do recurso preload para informar ao navegador o tipo (por exemplo, imagem, script, estilo, etc.) de recurso solicitado. Isso ajuda o navegador a priorizar corretamente a solicitação e a aplicar a Política de Segurança de Conteúdo (CSP). CSP é um mecanismo de segurança, expresso via cabeçalho HTTP, que ajuda a mitigar o impacto de XSS e outros ataques maliciosos, declarando uma lista segura de fontes confiáveis; apenas o conteúdo dessas fontes pode ser processado ou executado.
as.
88% das instâncias de dicas de recursos usam o atributo as. Quando as é especificado, é predominantemente usado para scripts: 92% do uso é para scripts, 3% para fontes e 3% para estilos. Isso não é surpreendente, dado o papel proeminente que os scripts desempenham na arquitetura da maioria dos sites, bem como a alta frequência com que os scripts são usados como vetores de ataque (tornando, portanto, particularmente importante que os scripts obtenham o CSP correto aplicado a eles).
O futuro
No momento, não há propostas para expandir o conjunto atual de dicas de recursos. No entanto, dicas de prioridade e carregamento lento nativo são duas tecnologias propostas que são semelhantes em espírito às dicas de recursos, pois fornecem APIs para otimizar o processo de carregamento.
Dicas de prioridade
Sugestões prioritárias são uma API para expressar a prioridade de busca de um recurso: high, low, ou auto. Eles podem ser usados com uma ampla variedade de tags HTML: especificamente <image>, <link>, <script>, e <iframe>.
<carousel>
<img src="cat1.jpg" importance="high">
<img src="cat2.jpg" importance="low">
<img src="cat3.jpg" importance="low">
</carousel>Por exemplo, se você tivesse um carrossel de imagens, as dicas de prioridade poderiam ser usadas para priorizar a imagem que os usuários veem imediatamente e diminuir a prioridade das imagens posteriores.
Dicas de prioridade são implementadas e podem ser testadas por meio de um sinalizador de recurso nas versões 70 e superiores dos navegadores Chromium. Dado que ainda é uma tecnologia experimental, não é surpreendente que seja usada apenas por 0,04% dos sites.
85% do uso de dica de prioridade é com tags <img>. As dicas de prioridade são usadas principalmente para diminuir a prioridade de recursos: 72% do uso é importance="low"; 28% do uso é importance="high".
Native lazy loading
O carregamento lento nativo é uma API nativa para adiar o carregamento de imagens e iframes fora da tela. Isso libera recursos durante o carregamento inicial da página e evita o carregamento de ativos que nunca são usados. Anteriormente, essa técnica só podia ser alcançada por meio de bibliotecas JavaScript de terceiros.
A API para carregamento lento nativa parece com isso: <img src="cat.jpg" loading="lazy">.
O carregamento lento nativo está disponível em navegadores baseados no Chromium 76 e superior. A API foi anunciada tarde demais para ser incluída no conjunto de dados do Web Almanac deste ano, mas é algo para ficar de olho no próximo ano.
Conclusão
No geral, esses dados parecem sugerir que ainda há espaço para adoção adicional de dicas de recursos. A maioria dos sites se beneficiaria com a adoção e/ou troca preconnect de dns-prefetch. Um subconjunto muito menor de sites se beneficiaria com a adoção prefetch e/ou preload. Há uma nuance maior no uso bem-sucedido de prefetch e preload, o que restringe sua adoção até certo ponto, mas a recompensa potencial também é maior. O push HTTP / 2 e o amadurecimento das tecnologias de aprendizado de máquina também podem aumentar a adoção de preload e prefetch.
