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

10

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:

Recursos captados previamente Tiempo de descarga de recursos con captación previa

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

Tiempo de descarga de recursos sin captación previa

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.

html link-prefetch Maros
fuente
Prefetch se usa para acelerar futuras navegaciones, vea una breve explicación de ( web.dev/link-prefetch )
Mohammad Yaseer
Sí, la captación previa debería acelerar las futuras navegaciones. Entonces, ¿por qué no lo aceleró en mi caso? Ver los gráficos de tiempo.
Maros
¿Puede intentar colocar el contenido del subdominio en otro dominio y verificar si eso también tarda el mismo tiempo en cargarse? Parece haber dibujado que el subdominio podría ser un problema sin mostrarlo al mostrar cómo funciona el caso de no subdominio (es decir, otro dominio). Si el subdominio es un problema, entonces el siguiente paso sería explorar si hay una configuración de configuración de Chrome para ajustar que hará esto, o
Martin
¿O aparecen los mismos tiempos de carga tanto para el subdominio como para el dominio independiente en otros navegadores con conjuntos de herramientas similares como Firefox Inspector u Opera? Si el mismo problema de tiempo está ocurriendo en otros navegadores que usan diferentes motores (no estoy seguro de qué hacer y qué no hacer) como se hace referencia, puede ser un error, puedo creer completamente que podría ser un error de Chrome si estos valores de tiempo señalados son notablemente diferentes en otros navegadores.
Martin

Respuestas:

0

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.

ingrese la descripción de la imagen aquí

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/ .

Mohammad Yaseer
fuente
Estaba buscando obtener una explicación de por qué la captación previa de enlaces no está acelerando las cosas en mi caso particular. ¿Es por subdominios, trabajadores de servicios u otra cosa? Si miras mis capturas de pantalla, puedes ver que el navegador vuelve a descargar el contenido a pesar de la captación previa.
Maros
0

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

x00
fuente
Algunas notas aleatorias después de leer su respuesta: navego muy lentamente desde la página de destino a example.com, lo que permite suficiente tiempo para que se carguen todos los recursos. Hice las pruebas anteriores con los trabajadores del servicio deshabilitados en Chrome. Creo que el atributo crossorigin es para otra cosa. Intenté usarlo y no tuve suerte. En el peor de los casos, haré las pruebas que sugiera moviendo la página de destino al dominio raíz. Esperaba que una respuesta aquí me ahorrara el trabajo.
Maros
1
¿Has probado FF? Desde el enlace de MDN anterior: "¿Mozilla buscará previamente documentos de un host diferente? Sí. No hay restricción del mismo origen para la búsqueda previa de enlaces. Limitar la búsqueda previa a solo URL del mismo servidor no ofrecería una mayor seguridad del navegador". Este pasaje puede estar desactualizado, pero aún así. Será bueno saber si difieren en su comportamiento con Chrome.
x00
Lo intenté pero no pude deshabilitar a los trabajadores de servicio que parecían tener prioridad sobre la captación previa de caché. Sin embargo, puedo intentarlo de nuevo.
Maros
@Maros, ¿de alguna manera no eres dueño del código o hubo algún problema técnico?
x00
-1

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">
divyang4481
fuente