¿La captación previa de enlaces funciona en subdominios?

He estado tratando de usar algo como esto para aumentar el rendimiento al hacer clic desde una página de destino simple a una aplicación de una sola página de peso 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 que no hay un aumento notable del rendimiento cuando mi página de destino está en un subdominio. Por ejemplo, https://subdomain.example.com.

Cuando hago clic en un enlace a la visita https://example.com, todavía veo un largo retraso en la ficha Red Chrome como app.jsy app.cssse cargan:

Aquí está el mismo recurso con la captación previa deshabilitada:

Se tarda aproximadamente la misma cantidad de tiempo en total.

Solicite encabezados para uno de los activos que se cargaron con caché de captación previa:

General:

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

Respuesta:

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

Solicitud:

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

Mi pregunta es: si Chrome indica que se utiliza el caché de captación previa, ¿por qué hay un tiempo de descarga de contenido significativo?

Parece que Chrome tiene diferentes tipos de cachés: caché de captación previa, caché de disco y caché de memoria. La memoria caché de disco y la memoria caché son muy rápidas (tiempos de carga de 5 ms y 0 ms). Sin embargo, la captura previa de caché es bastante inútil con tiempos de descarga de 300 ms a veces. ¿Puedo obtener una explicación técnica de por qué sucede esto? ¿Es un error con Chrome? Estoy en Chrome 79.0.3945.117.

Agregar <link rel=prefetch>a una página web le dice al navegador que descargue páginas enteras o algunos de los recursos (como scripts o archivos CSS) que el usuario pueda necesitar en el futuro. Esto puede mejorar métricas como First Contentful Paint y Time to Interactive y, a menudo, puede hacer que las navegaciones posteriores parezcan cargarse instantáneamente.

La sugerencia de captación previa consume bytes adicionales para recursos que no se necesitan de inmediato, por lo que esta técnica debe aplicarse cuidadosamente; solo obtenga recursos previamente cuando esté seguro de que los usuarios los necesitarán. Considere no buscar previamente cuando los usuarios están en conexiones lentas. Puede detectar eso con la API de información de red.

Hay diferentes formas de determinar qué enlaces pretratar. El más simple es buscar previamente el primer enlace o los primeros enlaces en la página actual. También hay bibliotecas que utilizan enfoques más sofisticados, explicados más adelante en esta publicación: https://web.dev/link-prefetch/ .

Solo puedo adivinar. Probablemente solo usted pueda encontrar una respuesta segura, a través del experimento. Hay demasiadas variables para tener en cuenta. Pero aquí algunas ideas:

1. prefetches una pista para un navegador. El navegador puede ignorarlo por algunas razones arbitrarias. Más que eso tiene la prioridad más baja.
2. Por ejemplo, por si acaso, verifique la configuración de su navegador:
   Menu/Settings/Advanced/Privacy and security/Preload pages for faster browsing and searching
   (o algo así).
3. Si por casualidad está utilizando Internet móvil, también puede ser un problema.
   https://www.technipages.com/google-chrome-prefetch
4. ¿Qué tan rápido navega desde su página de destino a la example.com?
5. Verifique los registros de su servidor para ver si alguna vez recibe prefetch solicitudes.

6. Compruebe si su servidor establece algunos encabezados extraños en respuesta a las prefetchsolicitudes. Por ej Cache-Control: no-cache. Sí, veo que sí cache-control: max-age=31536000, por lo que sería realmente extraño que el servidor envíe un encabezado diferente para la misma solicitud (bueno ... casi lo mismo , al menos no dijiste que sí, y al menos puede ser algunos encabezados que indican que es unprefetch solicitud), pero suceden cosas extrañas.

7. Probablemente deberías intentar agregar un crossoriginatributo. P.ej

   <link rel="prefetch" href="https://example.com/app.css" as="style" crossorigin />

   Aquí https://www.w3.org/TR/resource-hints/ puedes encontrar este ejemplo

   <link rel="preconnect" href="//example.com">
   <link rel="preconnect" href="//cdn.example.com" crossorigin>

   bastante relevante para su caso, pero desafortunadamente sin explicación.

8. En la versión original de su pregunta, mencionó a los trabajadores de servicio ... Si descargan algo, o incluso si usted descarga algo manualmente, también puede ser el problema. Debido a la prioridad más baja deprefetch

   https://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

   Si está descargando algo usando Mozilla, la búsqueda previa de enlaces se retrasará hasta que se complete cualquier descarga en segundo plano.

   Creo que lo mismo ocurre con el Chrome.

9. ¿Has intentado mover tu página de destino al dominio raíz? Si, sí, y prefetchfunciona como se esperaba, entonces sí, el subdominio es la causa del problema. Y el mensaje GUI Status Code: 200 (from prefetch cache)es probablemente solo un problema técnico. Porque recientemente, algunas cosas comenzaron a cambiar en el prefetchcomportamiento en Chrome. Y aún no sé si las cosas se resolvieron. Básicamente, sí, existe una cierta probabilidad de que prefetchsolo pueda tener el mismo origen.

   https://docs.google.com/document/d/1bKGDIePAuF6YXmmrwM33LeLvtuCsla3vTspsxsNp-f8/edit

debe agregar el siguiente código en caso de que esté en un subdominio y desee recursos del dominio

<link rel="preconnect" href="https://example.com">