Eu tenho tentado usar algo assim para obter um aumento de desempenho ao clicar em uma página de destino simples para um aplicativo de página única e pesado:
<link rel="prefetch" href="https://example.com" as="document" />
<link rel="prefetch" href="https://example.com/app.js" as="script" />
<link rel="prefetch" href="https://example.com/app.css" as="style" />
Parece não ter um aumento perceptível no desempenho quando minha página de destino está em um subdomínio. Diga https://subdomain.example.com,.
Quando eu clicar em um link para visitar https://example.com, ainda vejo um longo atraso na guia rede Chrome como app.jse app.csssão carregados:
Aqui está o mesmo recurso com a pré-busca desativada:
Leva aproximadamente a mesma quantidade de tempo no total.
Solicite cabeçalhos para um dos ativos carregados com o cache de pré-busca:
Geral:
Request URL: https://example.com/css/app.bffe365a.css
Request Method: GET
Status Code: 200 (from prefetch cache)
Remote Address: 13.226.219.19:443
Referrer Policy: no-referrer-when-downgrade
Resposta:
accept-ranges: bytes
cache-control: max-age=31536000
content-encoding: gzip
content-length: 39682
content-type: text/css
date: Mon, 06 Jan 2020 21:42:53 GMT
etag: "d6f5135674904979a2dfa9dab1d2c440"
last-modified: Mon, 06 Jan 2020 20:46:46 GMT
server: AmazonS3
status: 200
via: 1.1 example.cloudfront.net (CloudFront)
x-amz-cf-id: dO3yiCoPErExrE2BLYbUJaVye32FIJXXxMdI4neDGzGX9a6gcCDumg==
x-amz-cf-pop: LAX50-C1
x-amz-id-2: 1O0LmihxpHIywEaMQWX7G3FDAzxtH9tZq1T/jeVLMzifFSJSIIJSS6+175H61kKdAq6iEbwfs2I=
x-amz-request-id: AF35C178092B65D4
x-cache: Hit from cloudfront
Solicitação:
DNT: 1
Referer: https://example.com/auth/join
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.117 Safari/537.36
Minha pergunta é: se o Chrome indica que o cache de pré-busca é usado, por que o tempo de download de conteúdo é significativo?
Parece que o Chrome possui diferentes tipos de caches: cache de pré-busca, cache de disco e cache de memória. O cache do disco e o cache da memória são muito rápidos (tempos de carregamento de 5 ms e 0 ms). No entanto, o cache de pré-busca é bastante inútil, com tempos de download de 300ms às vezes. Posso obter uma explicação técnica de por que isso acontece? É um bug no Chrome? Estou no Chrome 79.0.3945.117.
fonte
Respostas:
A adição
<link rel=prefetch>a uma página da web informa ao navegador para baixar páginas inteiras ou alguns dos recursos (como scripts ou arquivos CSS) que o usuário pode precisar no futuro. Isso pode melhorar métricas, como Primeira pintura com conteúdo e Tempo para interativo, e pode fazer com que as navegações subsequentes pareçam carregar instantaneamente.A dica de pré-busca consome bytes extras para recursos que não são imediatamente necessários; portanto, essa técnica precisa ser aplicada cuidadosamente; somente busque recursos quando tiver certeza de que os usuários precisarão deles. Considere não buscar previamente quando os usuários estiverem em conexões lentas. Você pode detectar isso com a API de informações de rede.
Existem diferentes maneiras de determinar quais links pré-buscar. O mais simples é pré-buscar o primeiro link ou os primeiros links na página atual. Existem também bibliotecas que usam abordagens mais sofisticadas, explicadas mais adiante neste post - https://web.dev/link-prefetch/ .
fonte
Eu posso apenas adivinhar. A resposta confiável provavelmente só pode ser encontrada por você, através do experimento. Existem muitas variáveis a serem consideradas. Mas aqui estão algumas idéias:
prefetché uma dica para um navegador. O navegador pode ignorá-lo por alguns motivos arbitrários. Mais do que isso, tem a menor prioridade.Menu/Settings/Advanced/Privacy and security/Preload pages for faster browsing and searching(ou algo parecido).
https://www.technipages.com/google-chrome-prefetch
example.com?prefetchsolicitações.Verifique se o servidor define alguns cabeçalhos estranhos em resposta a
prefetchsolicitações. Por exemploCache-Control: no-cache. Sim, eu vejo que você temcache-control: max-age=31536000, então seria realmente estranho, se o servidor enviar cabeçalho diferente para a mesma solicitação (bem ... quase o mesmo , pelo menos você não disse que é, e pelo menos pode alguns cabeçalhos indicando que é umaprefetchsolicitação), mas coisas estranhas acontecem.Você provavelmente deve tentar adicionar
crossoriginatributo. Por exemplo<link rel="prefetch" href="https://example.com/app.css" as="style" crossorigin />Aqui https://www.w3.org/TR/resource-hints/, você pode encontrar este exemplo
bastante relevante para o seu caso, mas infelizmente sem explicação.
Na versão original da sua pergunta, você mencionou trabalhadores de serviço ... Se eles fazem o download de algo, ou mesmo você faz o download manual de algo, também pode ser o problema. Devido à menor prioridade de
prefetchhttps://developer.mozilla.org/en-US/docs/Web/HTTP/Link_prefetching_FAQ#What_if_I.27m_downloading_something_in_the_background.3F_Will_link_prefetching_compete_for_bandwidth.3F
Eu acho que o mesmo vale para o Chrome.
Você tentou mover sua página de destino para o domínio raiz? Se sim e
prefetchfuncionar como esperado, sim - subdomínio é a causa do problema. E a mensagem da GUIStatus Code: 200 (from prefetch cache)provavelmente é apenas uma falha. Porque, recentemente, algumas coisas começaram a mudar noprefetchcomportamento do Chrome. E ainda não sei se as coisas se resolveram. Basicamente, sim, há certa probabilidade de que você possaprefetchapenas da mesma origem.https://docs.google.com/document/d/1bKGDIePAuF6YXmmrwM33LeLvtuCsla3vTspsxsNp-f8/edit
fonte
você deve adicionar o código abaixo, caso seja um subdomínio e deseje recursos do domínio
fonte