Il prefetch dei link funziona tra i sottodomini?

10

Ho cercato di utilizzare qualcosa di simile per ottenere un aumento delle prestazioni quando si fa clic da una semplice pagina di destinazione a un'app pesante a pagina singola:

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

Sembra che non ci sia un notevole aumento delle prestazioni quando la mia pagina di destinazione è su un sottodominio. Di ', https://subdomain.example.com.

Quando clicco su un link per visitare https://example.com, vedo ancora un lungo ritardo nella scheda di rete Chrome come app.jse app.cssvengono caricati:

Ecco la stessa risorsa con prefetching disabilitato:

Prende all'incirca la stessa quantità di tempo in totale.

Richiedi le intestazioni per una delle risorse caricate con la cache di prefetch:

Generale:

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

Risposta:

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

Richiesta:

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

La mia domanda è: se Chrome indica che viene utilizzata la cache di prefetch, perché c'è un tempo significativo per il download dei contenuti?

Sembra che Chrome abbia diversi tipi di cache: cache di prefetch, cache del disco e cache della memoria. La cache del disco e la cache della memoria sono molto veloci (tempi di caricamento di 5ms e 0ms). Tuttavia, la cache di prefetch è piuttosto inutile con tempi di download di 300 ms a volte. Posso avere una spiegazione tecnica del perché ciò accada? È un bug con Chrome? Sono su Chrome 79.0.3945.117.

html link-prefetch

— Maros
fonte

Il prefetch viene utilizzato per velocizzare le navigazioni future, vedere una breve spiegazione da ( web.dev/link-prefetch )

— Mohammad Yaseer,

Sì, il prefetch dovrebbe accelerare le navigazioni future. Allora perché non l'ha accelerato nel mio caso? Vedi i grafici dei tempi.

— Maros

Puoi provare a posizionare i contenuti del sottodominio su un altro dominio e verificare se il caricamento richiede anche lo stesso tempo? Sembra che tu abbia attinto che il sottodominio potrebbe essere un problema senza mostrarlo mostrando come funziona il caso non di sottodominio (ovvero altri domini). Se il sottodominio è un problema, il prossimo passo sarebbe quello di esplorare se c'è un'impostazione di configurazione di Chrome per modificare che farà questo, o

— Martin

Oppure gli stessi tempi di caricamento per entrambi i domini secondari e / o indipendenti vengono visualizzati su altri browser con set di strumenti simili come Firefox Inspector o Opera? Se lo stesso problema di temporizzazione si verifica su altri browser che utilizzano motori diversi (non sono sicuro di cosa facciano e non facciano più) come riferimento, potrebbe benissimo essere un bug - posso assolutamente credere che potrebbe essere un bug di Chrome se questi valori temporali rilevati sono notevolmente diversi su altri browser.

— Martin

0

L'aggiunta <link rel=prefetch>a una pagina Web indica al browser di scaricare intere pagine o alcune risorse (come script o file CSS), di cui l'utente potrebbe aver bisogno in futuro. Questo può migliorare metriche come First Contentful Paint e Time to Interactive e spesso può far sì che le successive navigazioni sembrino caricarsi all'istante.

Il suggerimento prefetch consuma byte extra per risorse che non sono immediatamente necessarie, quindi questa tecnica deve essere applicata in modo ponderato; precaricare le risorse solo quando si è certi che gli utenti ne avranno bisogno. Considera di non precaricare quando gli utenti hanno connessioni lente. Puoi rilevarlo con l'API delle informazioni di rete.

Esistono diversi modi per determinare quali collegamenti precaricare. Il più semplice è precaricare il primo o i primi collegamenti nella pagina corrente. Ci sono anche librerie che usano approcci più sofisticati, spiegati più avanti in questo post- https://web.dev/link-prefetch/ .

— Mohammad Yaseer
fonte

Stavo cercando di ottenere una spiegazione del perché il prefetching dei collegamenti non sta accelerando le cose nel mio caso particolare. È a causa di sottodomini, addetti all'assistenza o qualcos'altro? Se guardi i miei screenshot, puoi vedere che il browser scarica nuovamente il contenuto nonostante il prefetch.

— Maros,

0

Posso solo indovinare. Probabilmente la risposta sicura può essere trovata solo da te, attraverso l'esperimento. Ci sono troppe variabili da tenere in considerazione. Ma ecco alcune idee:

prefetchè un suggerimento per un browser. Il browser può ignorarlo per alcuni motivi arbitrari. Inoltre ha la priorità più bassa.
Ad esempio, per favore, controlla le impostazioni del tuo browser:
Menu/Settings/Advanced/Privacy and security/Preload pages for faster browsing and searching
(o qualcosa del genere).
Se per caso stai usando Internet mobile, può anche essere un problema.
https://www.technipages.com/google-chrome-prefetch
Quanto velocemente navighi dalla tua landing page al example.com?
Controlla i log del tuo server per vedere se riceve mai prefetchrichieste.
Controlla se il tuo server imposta alcune strane intestazioni in risposta alle prefetchrichieste. Es Cache-Control: no-cache. Sì, vedo che haicache-control: max-age=31536000 , quindi sarebbe davvero strano, se il server invierà un'intestazione diversa per la stessa richiesta (beh ... quasi lo stesso , almeno non hai detto che lo sono, e almeno ci può essere alcune intestazioni che indicano che si tratta di una prefetchrichiesta), ma accadono cose strane.
Probabilmente dovresti provare ad aggiungere l' crossoriginattributo. Per esempio

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

Qui https://www.w3.org/TR/resource-hints/ puoi trovare questo esempio
```
<link rel="preconnect" href="//example.com">
<link rel="preconnect" href="//cdn.example.com" crossorigin>
```
abbastanza rilevante per il tuo caso, ma purtroppo senza spiegazioni.
Nella versione originale della tua domanda hai menzionato gli addetti all'assistenza ... Se scaricano qualcosa o scaricano anche te manualmente, potrebbe trattarsi del problema. A causa della priorità più bassa diprefetch

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

Se stai scaricando qualcosa utilizzando Mozilla, il prefetching dei link verrà ritardato fino al completamento di eventuali download in background

Penso che lo stesso vale per Chrome.
Hai provato a spostare la tua landing page nel dominio principale? Se sì e prefetchfunziona come previsto, sì - il sottodominio è la causa del problema. E il messaggio della GUI Status Code: 200 (from prefetch cache)è probabilmente solo un problema tecnico. Perché solo di recente alcune cose hanno iniziato a cambiare nelprefetch comportamento in Chrome. E non so ancora se le cose si siano sistemate. Fondamentalmente sì, c'è una certa probabilità che tu possa prefetchprovenire solo dalla stessa origine.

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

— X00
fonte

Alcune note casuali dopo aver letto la tua risposta: navigo molto lentamente dalla pagina di destinazione a example.com, lasciando tempo sufficiente per caricare tutte le risorse. Ho fatto i test sopra con i lavoratori dell'assistenza disabilitati in Chrome. Penso che l'attributo crossorigin sia per qualcos'altro. Ho provato a usarlo e senza fortuna. Nel peggiore dei casi, farò i test che suggerirai spostando la pagina di destinazione nel dominio principale. Speravo che una risposta qui mi avrebbe salvato il lavoro.

— Maros,

1

Hai provato FF? Dal link MDN sopra: "Mozilla eseguirà il prefetch dei documenti da un host diverso? Sì. Non esiste alcuna limitazione della stessa origine per il prefetching del link. Limitare il prefetch al solo URL dallo stesso server non offrirebbe una maggiore sicurezza del browser." Questo passaggio può essere obsoleto, ma comunque. Sarà utile sapere se differiscono nel loro comportamento con Chrome.

— x00

Ho provato ma non sono stato in grado di disabilitare gli operatori di servizio che sembravano avere la precedenza sulla cache di prefetch. Posso provarlo ancora.

— Maros,

@Maros, in qualche modo non possiedi il codice o c'è stato qualche problema tecnico?

— x00

-1

dovresti aggiungere il codice qui sotto nel caso in cui non sei sottodominio e desideri risorse dal dominio

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

— divyang4481
fonte