ProHoster > Blog > Amministrazione > Preload, prefetch è altre tag

Preload, prefetch è altre tag

Ci sò parechje manere di migliurà u rendiment web. Unu di elli hè preloading cuntenutu chì serà necessariu più tardi. Pre-elaborazione CSS, pre-rendering di pagina completa o risoluzione di nomi di duminiu. Facemu tuttu in anticipu, è dopu affissà istantaneamente u risultatu! Sona cool.

Ciò chì hè ancu più cool hè chì hè assai simplice implementatu. Cinque tag dà à u navigatore un cumandamentu per fà l'azzioni preliminari:

<link rel="prefetch" href="/co/style.css" as="style" />
<link rel="preload" href="/co/style.css" as="style" />

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

<link rel="prerender" href="https://example.com/about.html" />


Spieghemu brevemente ciò chì facenu è quandu l'utilizanu.

Vai à: precaricà · prechjamà · preconnect · dns-prefetch · prerender

precaricà

<link rel= "preload"> dice à u navigatore per carica è cache una risorsa (cum'è un script o un fogliu di stile) u più prestu pussibule. Questu hè utile quandu una risorsa hè necessariu uni pochi seconde dopu a carica di a pagina - è vulete accelerà u prucessu.

U navigatore ùn faci nunda cù a risorsa dopu a carica. I scripts ùn sò micca eseguiti, i fogli di stile ùn sò micca applicati. A risorsa hè simplicemente in cache è immediatamente dispunibule nantu à dumanda.

fuori

<link rel="preload" href="/co/style.css" as="style" />

href punta à a risorsa chì vulete scaricà.

as pò esse qualcosa chì pò esse scaricatu in u navigatore:

  • style per i fogli di stile,
  • script per i script,
  • font per i caratteri,
  • fetch per risorse caricate usendu fetch() o XMLHttpRequest,
  • vede a lista completa nantu à MDN.

Hè impurtante di specificà l'attributu as - questu aiuta u navigatore à priurità currettamente è pianificà e scaricamentu.

Quandu aduprà

Aduprate preloading quandu a risorsa hè necessariu in un futuru assai vicinu. Per esempiu:

  • Fonti non standard da un schedariu esternu: 
    <!-- index.html -->
<link rel="stylesheet" href="index.css" />
/* index.css */
@font-face {
  src: url('comic-sans.woff2') format('woff2');
}

    automaticamente comic-sans.woff2 cumminciarà a carica solu dopu à scaricà è analizà index.css. Per evità d'aspittà tantu tempu, pudete scaricà u font prima utilizendu <link rel= "preload">:

    <link rel="preload" href="comic-sans.woff2" as="font" />
  • Se separate i vostri stili secondu l'approcciu CSS criticu in duie parti, critica (per a rendering immediata) è micca critica: 
    <style>
/* Inlined critical styles */
</style>

<script>
/* Custom JS that starts downloading non-critical styles */
loadCSS('/app/non-critical.css');
</script>

    Cù questu approcciu, i stili non critichi cumincianu à carica solu quandu JavaScript corre, chì pò accade uni pochi di seconde dopu a rendering. Invece di aspittà JS aduprà <link rel= "preload">per inizià a scaricazione prima:

    <style>
/* Inlined critical styles */
</style>

<link rel="preload" href="/co/app/non-critical.css" as="style" />

<script>
/* Custom JS that starts downloading non-critical styles */
loadCSS('/app/non-critical.css');
</script>

Ùn abusate micca di preloading. Se caricate tuttu in una fila, u situ ùn accelerà magicamente; à u cuntrariu, impedisce à u navigatore di pianificà u so travagliu currettamente.

Ùn deve esse cunfunditu cù prefetching. Ùn aduprate micca <link rel= "preload">, Se ùn avete micca bisognu di a risorsa immediatamente dopu a carica di a pagina. Sè avete bisognu dopu, per esempiu per a pagina dopu, allora utilizate <link rel= "prefetch">.

Vede u detalls

Questu hè un tag necessariu per esse eseguitu da u navigatore (se u sustegnu), à u cuntrariu di tutti l'altri tag in relazione à u preloading. U navigatore deve scaricà a risorsa specificata in <link rel="preload">. In altri casi, pò ignurà preloading, per esempiu s'ellu hè in esecuzione in una cunnessione lenta.

Priurità. I navigatori di solitu assignanu diverse priorità à e diverse risorse (stili, scripts, fonts, etc.) per carica prima e risorse più impurtanti. In questu casu, u navigatore determina a priorità per attributu as. Per u navigatore Chrome pudete vede tavula di priorità piena.

Preload, prefetch è altre tag

prechjamà

<link rel= "prefetch"> dumanda à u navigatore per scaricà è cache una risorsa (cum'è un script o un fogliu di stile) in fondo. U caricamentu si faci cù priorità bassa per quessa ùn interferisce micca cù risorse più impurtanti. Questu hè utile se u risorsu hè necessariu in a pagina dopu è vulete cache in anticipu.

Quì, ancu, u navigatore ùn faci nunda cù a risorsa dopu a carica. I scripts ùn sò micca eseguiti, i fogli di stile ùn sò micca applicati. A risorsa hè simplicemente in cache è immediatamente dispunibule nantu à dumanda.

fuori

<link rel="prefetch" href="/co/style.css" as="style" />

href punta à a risorsa chì vulete scaricà.

as pò esse qualcosa chì pò esse scaricatu in u navigatore:

  • style per i fogli di stile,
  • script per i script,
  • font per i caratteri,
  • fetch per risorse caricate usendu fetch() o XMLHttpRequest,
  • vede a lista completa nantu à MDN.

Hè impurtante di specificà l'attributu as - questu aiuta u navigatore à priurità currettamente è pianificà i download.

Quandu aduprà

Per carica risorse da altre pagine, Sè avete bisognu di una risorsa da una altra pagina, è vulete precaricallu per poi accelerà u rendering di quella pagina. Per esempiu:

  • Avete una tenda in linea, è u 40% di l'utilizatori lascianu a pagina di casa per a pagina di u produttu. Aduprà <link rel= "prefetch">, carica i schedari CSS è JS per rende e pagine di produttu.
  • Avete una sola applicazione di pagina, è diverse pagine caricanu diversi pacchetti. Quandu un utilizatore visita una pagina, i pacchetti per tutte e pagine chì ligami ponu esse precaricati.

Hè prubabile chì sta tag pò esse usata in modu sicuru in ogni puntu.. I navigatori di solitu pianificanu prefetch cù a priorità più bassa, cusì ùn disturba à nimu. Solu tenite in mente chì cunsuma u trafficu di l'utilizatori, chì pò custà soldi.

Micca per richieste urgenti. Ùn aduprate micca <link rel= "prefetch">, quandu a risorsa hè necessariu in pochi seconde. In stu casu, aduprà <link rel= "preload">.

Vede u detalls

Tag opzionale. U navigatore ùn hè micca necessariu di seguità sta struzzione; pò ignurà, per esempiu, in una cunnessione lenta.

Priorità in Chrome. In Chrome <link rel= "prefetch"> di solitu eseguitu cù priorità minima (vede tavula di priorità piena), vale à dì dopu avè caricatu tuttu u restu.

preconnect

<link rel= "preconnect"> dumanda à u navigatore per cunnette à u duminiu in anticipu quandu vulete accelerà a configurazione di cunnessione in u futuru.

U navigatore deve stabilisce una cunnessione s'ellu ricupera qualsiasi risorse da un novu duminiu di terzu. Per esempiu, se carica Google Fonts, React fonts da un CDN, o dumanda una risposta JSON da un servitore API.

Stabbilimentu di una nova cunnessione generalmente dura uni pochi di centu millisecondi. Hè fattu una volta, ma piglia sempre u tempu. Sè avete stabilitu una cunnessione in anticipu, risparmià tempu è scaricate risorse da stu duminiu più veloce.

fuori

<link rel= "preconnect" href="https://api.my-app.com" />

href indica u nome di duminiu per quale vulete determinà l'indirizzu IP. Pò esse specificatu cù un prefissu (https://domain.com) o senza ellu (//domain.com).

Quandu aduprà

Aduprà per duminii chì serà necessariu prestu per scaricà un stilu impurtante, script o imagine da quì, ma ùn cunnosci micca l'URL di a risorsa. Per esempiu:

  • A vostra applicazione hè ospitata my-app.com è face richieste AJAX à api.my-app.com: Ùn cunnosci micca e dumande specifiche in anticipu perchè sò fatte dinamicamente da JS. Quì hè abbastanza apprupriatu per utilizà una tag per pre-cunnettà à u duminiu.
  • A vostra applicazione hè ospitata my-app.com è usa Google Fonts. Sò scaricati in dui passi: prima, u schedariu CSS hè scaricatu da u duminiu fonts.googleapis.com, allura stu schedariu dumanda fonti cù fonts.gstatic.com. Ùn pudete micca sapè da quale sò i schedarii di fonti specifichi fonts.gstatic.com vi tuccherà finu à carica u schedariu CSS, cusì pudemu fà solu una cunnessione preliminare prima.

Aduprate sta tag per accelerà un pocu script di terzu o stile per via di una cunnessione predeterminata.

Ùn abusate micca. Stabbilimentu è mantene una cunnessione hè una operazione caru per u cliente è u servitore. Aduprate sta tag per un massimu di domini 4-6.

Vede u detalls

Tag opzionale. U navigatore ùn hè micca necessariu di seguità sta struzzione è pò ignurà, per esempiu, se parechje cunnessione sò digià stabilitu o in qualchì altru casu.

Chì include u prucessu di cunnessione?. Per cunnette à ogni situ, u navigatore deve fà e seguenti:

  • Risoluzione DNS. Truvà l'indirizzu IP di u servitore (216.58.215.78) per u nome di duminiu specificatu (google.com).
  • Stretta di manu TCP. Scambià pacchetti (cliente → servitore → cliente) per inizià una cunnessione TCP cù u servitore.
  • Handshake TLS (solu siti HTTPS). Dui turni di scambiu di pacchetti (cliente → servitore → cliente → servitore → cliente) per inizià una sessione TLS sicura.

Nota: HTTP/3 hà da migliurà è accelerà u mecanismu di handshake, ma hè sempre assai luntanu.

dns-prefetch

<link rel= "dns-prefetch"> dumanda à u navigatore per realizà a risoluzione DNS per u duminiu in anticipu s'ellu vi sarà cunnessu à questu prestu è vulete accelerà a cunnessione iniziale.

U navigatore deve determinà l'indirizzu IP di u duminiu s'ellu ricuperà qualsiasi risorse da un novu duminiu di terzu. Per esempiu, caricate Google Fonts, React fonts da un CDN, o dumandà una risposta JSON da un servitore API.

Per ogni novu duminiu, a risoluzione di registrazione DNS generalmente dura circa 20-120 ms. Questu solu affetta a carica di a prima risorsa da un duminiu datu, ma ancu introduce un ritardu. Se realicemu a risoluzione DNS in anticipu, risparmieremu u tempu è carcà a risorsa più veloce.

fuori

<link rel= "dns-prefetch" href="https://api.my-app.com" />

href indica u nome di duminiu per quale vulete stabilisce l'indirizzu IP. Pò esse specificatu cù un prefissu (https://domain.com) o senza ellu (//domain.com).

Quandu aduprà

Aduprà per duminii chì serà necessariu prestu per scaricà risorse da quì chì u navigatore ùn cunnosci micca in anticipu. Per esempiu:

  • A vostra applicazione hè ospitata my-app.com è face richieste AJAX à api.my-app.com: Ùn cunnosci micca e dumande specifiche in anticipu perchè sò fatte dinamicamente da JS. Quì hè abbastanza apprupriatu per utilizà una tag per pre-cunnettà à u duminiu.
  • A vostra applicazione hè ospitata my-app.com, è usa Google Fonts. Sò scaricati in dui passi: prima, u schedariu CSS hè scaricatu da u duminiu fonts.googleapis.com, allura stu schedariu dumanda fonti cù fonts.gstatic.com. Ùn pudete micca sapè da quale sò i schedarii di fonti specifichi fonts.gstatic.com avarete bisognu finu à carica u schedariu CSS, cusì pudemu fà solu una cunnessione preliminare in anticipu.

Aduprate sta tag per accelerà un pocu script di terzu o stile per via di una cunnessione predeterminata.

Per piacè nutate caratteristiche simili à <link rel= "dns-prefetch"/> и <link rel= "preconnect">. Di solitu ùn hè micca sensu per aduprà inseme per un duminiu: <link rel= "preconnect"> include digià <link rel= "dns-prefetch"/> è assai di più. Questu pò esse ghjustificatu in dui casi:

  • Vulete sustene i navigatori più vechji?. <link rel= "dns-prefetch" /> sustinutu da da IE10 è Safari 5. <link rel= "preconnect"> hè statu supportatu per un tempu in Chrome è Firefox, ma hè statu aghjuntu solu à Safari in 11.1 è ancora micca supportatu in IE/Edge. Sè avete bisognu di supportà questi navigatori, utilizate <link rel= "dns-prefetch" /> cum'è una opzione di salvezza per <link rel= "preconnect">.
  • Vulete accelerà e cunnessione à più di 4-6 domini. Tag <link rel= "preconnect"> Ùn hè cunsigliatu di utilizà cù più di 4-6 domini, postu chì stabilisce è mantene una cunnessione hè una operazione caru. <link rel= "dns-prefetch" /> consume menu risorse, cusì utilizate se ne necessariu.

Vede u detalls

Tag opzionale. U navigatore ùn hè micca necessariu di seguità sta struzzione, perchè ùn pò micca fà a risoluzione DNS, per esempiu, se ci sò parechje tags in a pagina o in qualchì altru casu.

Cosa hè DNS. Ogni servitore in Internet hà un indirizzu IP unicu, chì pare 216.58.215.78. U nome di u situ hè generalmente inseritu in a barra di indirizzu di u navigatore (per esempiu, google.com), è i servitori DNS (Domain Name System) currispondenu cù l'indirizzu IP di u servitore (216.58.215.78).

Per stabilisce un indirizzu IP, u navigatore deve dumandà à u servitore DNS. Ci vole 20-120 ms quandu si cunnetta à un novu duminiu di terzu.

U DNS hè in cache, ancu s'ellu ùn hè micca assai affidabile. Certi OS è navigatori cachenu e dumande DNS: questu risparmià tempu nantu à e dumande ripetute, ma a caching ùn pò micca esse affidata. In Linux, di solitu ùn funziona micca. Chrome hà una cache DNS, ma dura solu per un minutu. Windows cache risposti DNS per cinque ghjorni.

prerender

<link rel= "prerender"> dumanda à u navigatore per scaricà l'URL è vede in una tabulazione invisibile. Quandu l'utilizatore cliccà nantu à u ligame, a pagina deve esse visualizata immediatamente. Questu hè utile sè site sicuru chì l'utilizatore visitarà una certa pagina è vulete accelerà a so visualizazione.

Malgradu (o per via) l'efficacità eccezziunale di sta tag, in 2019 <link rel= "prerender"> pocu supportatu in i principali navigatori. Vede più dettagli. quì sottu.

fuori

<link rel="prerender" href="https://my-app.com/pricing" />

href punta à l'URL chì vulete cumincià à rende in fondo.

Quandu aduprà

Quandu site veramente sicuru chì l'utilizatore andarà à una certa pagina. Se tenete un "tunnel" attraversu quale u 70% di i visitori à a pagina A andate à a pagina B, allora <link rel= "prerender"> in a pagina A aiuterà à vede a pagina B assai rapidamente.

Ùn abusate micca. Pre-rendering hè estremamente caru in termini di larghezza di banda è memoria. Ùn aduprate micca <link rel= "prerender"> per più di una pagina.

Vede u detalls

Tag opzionale. U navigatore ùn hè micca necessariu di seguità sta struzzione è pò ignurà, per esempiu, in una cunnessione lenta o quandu ùn ci hè micca una memoria libera insufficiente.

Per salvà a memoria Chrome ùn faci micca un rendering cumpletue solu preload NoState. Questu significa chì Chrome carica a pagina è tutte e so risorse, ma ùn rende micca o eseguisce JavaScript.

Firefox è Safari ùn supportanu micca questu tag. Questu ùn viola micca a specificazione, postu chì i navigatori ùn sò micca obligati di seguità sta struzzione; ma sempre tristi. Bug di implementazione Firefox hè apertu dapoi sette anni. Ci sò rapporti chì Safari ùn sustene ancu sta tag.

Resumen

Utilizà:

  • <link rel= "preload"> - quandu avete bisognu di una risorsa in pochi seconde
  • <link rel= "prefetch"> - quandu avete bisognu di a risorsa nantu à a pagina dopu
  • <link rel= "preconnect"> - quandu sapete chì avete bisognu di una risorsa prestu, ma ùn cunnosci micca ancu u so URL sanu
  • <link rel= "dns-prefetch"> - simile, quandu sapete chì averà bisognu di una risorsa prestu, ma ùn cunnosci micca ancu u so URL cumpletu (per i navigatori più vechji)
  • <link rel= "prerender"> - quandu site sicuru chì l'utilizatori andaranu à una certa pagina, è vulete accelerà a so visualizazione

Source: www.habr.com

Add a comment