La prélecture des liens fonctionne-t-elle entre les sous-domaines?

10

J'ai essayé d'utiliser quelque chose comme ça pour améliorer les performances en cliquant sur une simple page de destination vers une application d'une seule page:

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

Il ne semble pas y avoir d'augmentation notable des performances lorsque ma page de destination est sur un sous-domaine. Dis, https://subdomain.example.com.

Lorsque je clique sur un lien pour visiter https://example.com, je vois toujours un long délai dans l'onglet réseau Chrome au fur app.jset à mesure qu'ils app.csssont chargés:

Ressources prérécupérées Temps de téléchargement des ressources avec prélecture

Voici la même ressource avec la prélecture désactivée:

Temps de téléchargement des ressources sans prélecture

Cela prend à peu près le même temps au total.

Demander des en-têtes pour l'un des actifs chargés avec le cache de prélecture:

Général:

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

Réponse:

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

Demande:

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

Ma question est: si Chrome indique que le cache de prélecture est utilisé, alors pourquoi y a-t-il un temps de téléchargement de contenu important?

Il semble que Chrome possède différents types de caches: cache de prélecture, cache disque et cache mémoire. Le cache disque et le cache mémoire sont très rapides (temps de chargement 5 ms et 0 ms). Cependant, le cache de prélecture est assez inutile avec des temps de téléchargement de 300 ms parfois. Puis-je obtenir une explication technique de la raison pour laquelle cela se produit? Est-ce un bug avec Chrome? Je suis sur Chrome 79.0.3945.117.

html link-prefetch Maros
la source
La prélecture est utilisée pour accélérer les futures navigations, voir une brève explication de ( web.dev/link-prefetch )
Mohammad Yaseer
Oui, la prélecture devrait accélérer les futures navigations. Alors pourquoi ne l'a-t-il pas accéléré dans mon cas? Voir les graphiques de synchronisation.
Maros
Pouvez-vous essayer de placer le contenu du sous-domaine sur un autre domaine et vérifier si cela prend également le même temps à charger? Vous semblez avoir dessiné que le sous-domaine pourrait être un problème sans le montrer en montrant comment fonctionne le cas non-sous-domaine (c'est-à-dire un autre domaine). Si le sous-domaine est un problème, la prochaine étape serait d'explorer s'il existe un paramètre de configuration Chrome à modifier qui le fera, ou
Martin
Ou les mêmes temps de chargement pour le sous-domaine et / ou le domaine indépendant apparaissent-ils sur d'autres navigateurs avec des outils similaires tels que Firefox Inspector ou Opera? Si le même problème de synchronisation se produit sur d'autres navigateurs qui utilisent des moteurs différents (je ne sais pas qui le font et ne le font plus) comme vous le mentionnez, il peut bien s'agir d'un bug - je peux croire que ce pourrait être un bug Chrome si ces valeurs de temps notées sont sensiblement différentes sur d'autres navigateurs.
Martin

Réponses:

0

L'ajout <link rel=prefetch>à une page Web indique au navigateur de télécharger des pages entières ou certaines des ressources (comme des scripts ou des fichiers CSS), dont l'utilisateur pourrait avoir besoin à l'avenir. Cela peut améliorer des mesures telles que First Contentful Paint et Time to Interactive et peut souvent donner l'impression que les navigations suivantes se chargent instantanément.

entrez la description de l'image ici

Le conseil de prélecture consomme des octets supplémentaires pour les ressources qui ne sont pas immédiatement nécessaires, donc cette technique doit être appliquée de manière réfléchie; ne récupérez les ressources que lorsque vous êtes certain que les utilisateurs en auront besoin. Envisagez de ne pas extraire lorsque les utilisateurs sont sur des connexions lentes. Vous pouvez le détecter avec l'API d'informations réseau.

Il existe différentes façons de déterminer les liens à pré-extraire. Le plus simple est de pré-extraire le premier lien ou les premiers liens de la page en cours. Il existe également des bibliothèques qui utilisent des approches plus sophistiquées, expliquées plus loin dans ce post- https://web.dev/link-prefetch/ .

Mohammad Yaseer
la source
Je cherchais à obtenir une explication de la raison pour laquelle la prélecture des liens n'accélère pas les choses dans mon cas particulier. Est-ce à cause de sous-domaines, de travailleurs de service ou d'autre chose? Si vous regardez mes captures d'écran, vous pouvez voir que le navigateur retélécharge le contenu malgré la prélecture.
Maros
0

Je ne peux que deviner. Une réponse sûre ne peut probablement être trouvée que par vous, à travers l'expérience. Il y a trop de variables à prendre en compte. Mais voici quelques idées:

  1. prefetchest un indice pour un navigateur. Le navigateur peut l'ignorer pour des raisons arbitraires. Plus que cela, il a la priorité la plus faible.
  2. Par exemple, juste au cas où, s'il vous plaît, vérifiez les paramètres de votre navigateur:
    Menu/Settings/Advanced/Privacy and security/Preload pages for faster browsing and searching
    (ou quelque chose comme ça).
  3. Si, par hasard, vous utilisez Internet mobile, cela peut également être un problème.
    https://www.technipages.com/google-chrome-prefetch
  4. À quelle vitesse naviguez-vous de votre page de destination vers le example.com?
  5. Vérifiez les journaux de votre serveur pour voir s'il reçoit des prefetchdemandes.

  6. Vérifiez si votre serveur définit des en-têtes étranges en réponse aux prefetchdemandes. Par exemple Cache-Control: no-cache. Oui, je vois que vous avez cache-control: max-age=31536000, donc ce serait vraiment étrange, si le serveur enverra un en-tête différent pour la même demande (enfin ... presque le même , au moins vous n'avez pas dit qu'ils le sont, et là au moins peut être des en-têtes indiquant qu'il s'agit d'une prefetchdemande), mais des choses étranges se produisent.

  7. Vous devriez probablement essayer d'ajouter un crossoriginattribut. Par exemple

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

    Ici https://www.w3.org/TR/resource-hints/ vous pouvez trouver cet exemple

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

    tout à fait pertinent pour votre cas, mais malheureusement sans explication.

  8. Dans la version originale de votre question, vous avez mentionné les travailleurs des services ... S'ils téléchargent quelque chose, ou même vous-même en téléchargeant manuellement quelque chose, cela peut aussi être le problème. En raison de la priorité la plus faible 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 vous téléchargez quelque chose à l'aide de Mozilla, la prélecture des liens sera retardée jusqu'à ce que tous les téléchargements en arrière-plan soient terminés.

    Je pense qu'il en va de même pour le Chrome.

  9. Avez-vous essayé de déplacer votre page de destination vers le domaine racine? Si, oui, et prefetchfonctionne comme prévu, alors oui - le sous-domaine est la cause du problème. Et le message de l'interface graphique Status Code: 200 (from prefetch cache)n'est probablement qu'un problème. Parce que tout récemment, certaines choses ont commencé à changer dans le prefetchcomportement de Chrome. Et je ne sais pas encore si les choses se sont arrangées. Fondamentalement, oui, il y a une certaine probabilité que vous ne puissiez prefetchpartir que de la même origine.

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

x00
la source
Quelques notes aléatoires après avoir lu votre réponse: je navigue très lentement de la page de destination à example.com, ce qui laisse suffisamment de temps pour que toutes les ressources soient chargées. J'ai effectué les tests ci-dessus avec des travailleurs de service désactivés dans Chrome. Je pense que l'attribut crossorigin est pour autre chose. J'ai essayé de l'utiliser et pas de chance. Dans le pire des cas, je ferai les tests que vous proposez en déplaçant la page de destination vers le domaine racine. J'espérais qu'une réponse ici me ferait économiser du travail.
Maros
1
Avez-vous essayé FF? À partir du lien MDN ci-dessus: «Mozilla prélèvera-t-il des documents à partir d'un autre hôte? Oui. Il n'y a pas de restriction de même origine pour la prélecture de lien. Ce passage peut être dépassé, mais quand même. Il sera bon de savoir s'ils diffèrent dans leur comportement avec Chrome.
x00
J'ai essayé mais je n'ai pas pu désactiver les travailleurs de service qui semblaient avoir la priorité sur le cache de prélecture. Je peux essayer encore.
Maros
@Maros, vous ne possédez pas le code, ou il y a eu un problème technique?
x00
-1

vous devez ajouter le code ci-dessous au cas où vous êtes sur un sous-domaine et que vous voulez une ressource du domaine

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