ProHoster > Bloc > Administració > Precarrega, recuperació prèvia i altres etiquetes

Precarrega, recuperació prèvia i altres etiquetes

Hi moltes maneres de millorar el rendiment web. Un d'ells és carregar prèviament contingut que es necessitarà més endavant. Preprocessament CSS, prerenderització de pàgina completa o resolució de noms de domini. Ho fem tot per endavant i, a continuació, mostrem el resultat a l'instant! Sona genial.

El que és encara més genial és que s'implementa de manera molt senzilla. Cinc etiquetes doneu al navegador una ordre per dur a terme accions preliminars:

<link rel="prefetch" href="/ca/style.css" as="style" />
<link rel="preload" href="/ca/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" />


Expliquem breument què fan i quan utilitzar-los.

Saltar a: precàrrega · preobtenció · preconnectar · dns-prefetch · prerender

precàrrega

<link rel= "preload"> diu al navegador que carregui i emmagatzemi un recurs (com ara un script o un full d'estil) tan aviat com sigui possible. Això és útil quan es necessita un recurs uns segons després de carregar la pàgina i voleu accelerar el procés.

El navegador no fa res amb el recurs després de carregar-lo. No s'executen scripts, no s'apliquen fulls d'estil. El recurs simplement s'emmagatzema a la memòria cau i es posa a disposició immediatament a petició.

sintaxi

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

href apunta al recurs que voleu descarregar.

as pot ser qualsevol cosa que es pugui descarregar al navegador:

  • style per a fulls d'estil,
  • script per als guions,
  • font per als tipus de lletra,
  • fetch per als recursos carregats utilitzant fetch() o XMLHttpRequest,
  • veure la llista completa a MDN.

És important especificar l'atribut as – Això ajuda el navegador a prioritzar i programar les descàrregues correctament.

Quan s’ha d’utilitzar

Utilitzeu la càrrega prèvia quan el recurs sigui necessari en un futur molt proper. Per exemple:

  • Tipus de lletra no estàndard d'un fitxer extern: 
    <!-- index.html -->
<link rel="stylesheet" href="index.css" />
/* index.css */
@font-face {
  src: url('comic-sans.woff2') format('woff2');
}

    Per defecte comic-sans.woff2 començarà a carregar-se només després de descarregar i analitzar index.css. Per evitar esperar tant de temps, podeu descarregar el tipus de lletra abans utilitzant <link rel= "preload">:

    <link rel="preload" href="comic-sans.woff2" as="font" />
  • Si separeu els vostres estils segons l'enfocament CSS crítics en dues parts, crítica (per a la representació immediata) i no crítica: 
    <style>
/* Inlined critical styles */
</style>

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

    Amb aquest enfocament, els estils no crítics només començaran a carregar-se quan s'executi JavaScript, cosa que pot passar uns segons després de la representació. En lloc d'esperar, utilitzeu JS <link rel= "preload">per començar a descarregar abans:

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

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

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

No feu un ús excessiu de la càrrega prèvia. Si ho carregueu tot seguit, el lloc no s'accelerarà màgicament; al contrari, impedirà que el navegador planifica el seu treball correctament.

No s'ha de confondre amb la recuperació prèvia. No utilitzi <link rel= "preload">, si no necessiteu el recurs immediatament després de carregar la pàgina. Si ho necessiteu més endavant, per exemple per a la pàgina següent, feu servir <link rel= "prefetch">.

Detalls

Aquesta és una etiqueta obligatòria per ser executat pel navegador (si és compatible), a diferència de totes les altres etiquetes relacionat amb la precàrrega. El navegador ha de descarregar el recurs especificat a <link rel="preload">. En altres casos, pot ignorar la càrrega prèvia, per exemple, si s'està executant en una connexió lenta.

Prioritats. Els navegadors solen assignar prioritats diferents als diferents recursos (estils, scripts, tipus de lletra, etc.) per tal de carregar primer els recursos més importants. En aquest cas, el navegador determina la prioritat per atribut as. Per al navegador Chrome, podeu consultar taula de prioritats completa.

Precarrega, recuperació prèvia i altres etiquetes

preobtenció

<link rel= "prefetch"> demana al navegador que baixi i emmagatzemi un recurs (com ara un script o un full d'estil) en segon pla. La càrrega es produeix amb una prioritat baixa, de manera que no interfereix amb els recursos més importants. Això és útil si el recurs es necessita a la pàgina següent i el voleu emmagatzemar a la memòria cau per endavant.

Aquí, també, el navegador no fa res amb el recurs després de la càrrega. No s'executen scripts, no s'apliquen fulls d'estil. El recurs simplement s'emmagatzema a la memòria cau i es posa a disposició immediatament a petició.

sintaxi

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

href apunta al recurs que voleu descarregar.

as pot ser qualsevol cosa que es pugui descarregar al navegador:

  • style per a fulls d'estil,
  • script per als guions,
  • font per als tipus de lletra,
  • fetch per als recursos carregats utilitzant fetch() o XMLHttpRequest,
  • veure la llista completa a MDN.

És important especificar l'atribut as - Això ajuda el navegador a prioritzar i programar les descàrregues correctament.

Quan s’ha d’utilitzar

Per carregar recursos d'altres pàgines, si necessiteu un recurs d'una altra pàgina i voleu carregar-lo prèviament per accelerar la representació d'aquesta pàgina. Per exemple:

  • Tens una botiga en línia i el 40% dels usuaris abandonen la pàgina d'inici per a la pàgina del producte. Ús <link rel= "prefetch">, carregant fitxers CSS i JS per representar pàgines de producte.
  • Teniu una sola aplicació de pàgina i pàgines diferents carreguen paquets diferents. Quan un usuari visita una pàgina, es poden carregar prèviament els paquets de totes les pàgines a les quals enllaça.

És probable que aquesta etiqueta es pugui utilitzar de manera segura en qualsevol mesura.. Els navegadors solen programar la recuperació prèvia amb la prioritat més baixa, de manera que no molesta a ningú. Només cal tenir en compte que consumeix trànsit d'usuaris, que pot costar diners.

No per a peticions urgents. No utilitzi <link rel= "prefetch">, quan el recurs es necessita en pocs segons. En aquest cas, utilitzeu <link rel= "preload">.

Detalls

Etiqueta opcional. El navegador no està obligat a seguir aquesta instrucció; pot ignorar-la, per exemple, en una connexió lenta.

Prioritat a Chrome. A Chrome <link rel= "prefetch"> normalment s'executa amb una prioritat mínima (vegeu taula de prioritats completa), és a dir, després de carregar tota la resta.

preconnectar

<link rel= "preconnect"> demana al navegador que es connecti al domini amb antelació quan vulgueu accelerar la configuració de la connexió en el futur.

El navegador ha d'establir una connexió si recupera recursos d'un nou domini de tercers. Per exemple, si carrega Google Fonts, React fonts des d'un CDN o sol·licita una resposta JSON d'un servidor d'API.

L'establiment d'una nova connexió sol trigar uns quants centenars de mil·lisegons. Es fa una vegada, però encara requereix temps. Si heu establert una connexió amb antelació, estalviareu temps i descarregareu recursos d'aquest domini més ràpidament.

sintaxi

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

href indica el nom de domini del qual voleu determinar l'adreça IP. Es pot especificar amb un prefix (https://domain.com) o sense ell (//domain.com).

Quan s’ha d’utilitzar

Utilitzeu-lo per a dominis que es necessitaran aviat per descarregar un estil, un guió o una imatge important d'allà, però encara no coneixeu l'URL del recurs. Per exemple:

  • La teva aplicació està allotjada a my-app.com i fa peticions AJAX a api.my-app.com: No coneixeu les consultes específiques per endavant perquè es fan de forma dinàmica des de JS. Aquí és molt apropiat utilitzar una etiqueta per connectar-se prèviament al domini.
  • La teva aplicació està allotjada a my-app.com i utilitza Google Fonts. Es descarreguen en dos passos: primer, el fitxer CSS es baixa del domini fonts.googleapis.com, llavors aquest fitxer demana tipus de lletra amb fonts.gstatic.com. No podeu saber de quins fitxers de tipus de lletra són específics fonts.gstatic.com necessitareu fins que carregueu el fitxer CSS, de manera que només podem fer una connexió prèvia prèvia.

Utilitzeu aquesta etiqueta per accelerar una mica algun script o estil de tercers a causa de la connexió preestablerta.

No feu un ús excessiu. Establir i mantenir una connexió és una operació costosa tant per al client com per al servidor. Utilitzeu aquesta etiqueta per a un màxim de 4-6 dominis.

Detalls

Etiqueta opcional. El navegador no està obligat a seguir aquesta instrucció i pot ignorar-la, per exemple, si ja s'han establert moltes connexions o en algun altre cas.

Què inclou el procés de connexió?. Per connectar-se a cada lloc, el navegador ha de fer el següent:

  • Resolució DNS. Cerca l'adreça IP del servidor (216.58.215.78) per al nom de domini especificat (google.com).
  • Encaixada de mans TCP. Intercanvia paquets (client → servidor → client) per iniciar una connexió TCP amb el servidor.
  • Encaixada de mans TLS (només llocs HTTPS). Dues rondes d'intercanvi de paquets (client → servidor → client → servidor → client) per iniciar una sessió TLS segura.

Nota: HTTP/3 millorarà i accelerarà el mecanisme de connexió de mans, però encara queda molt lluny.

dns-prefetch

<link rel= "dns-prefetch"> demana al navegador que realitzi una resolució DNS per al domini amb antelació si us connectareu aviat i voleu accelerar la connexió inicial.

El navegador ha de determinar l'adreça IP del domini si recuperarà recursos d'un nou domini de tercers. Per exemple, carregar fonts de Google, tipus de lletra React des d'un CDN o sol·licitar una resposta JSON a un servidor d'API.

Per a cada domini nou, la resolució del registre DNS sol trigar entre 20 i 120 ms. Això només afecta la càrrega del primer recurs d'un domini determinat, però encara introdueix un retard. Si realitzem la resolució DNS amb antelació, estalviarem temps i carregarem el recurs més ràpidament.

sintaxi

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

href indica el nom de domini per al qual voleu establir l'adreça IP. Es pot especificar amb un prefix (https://domain.com) o sense ell (//domain.com).

Quan s’ha d’utilitzar

Utilitzeu-lo per a dominis que es necessitaran aviat per descarregar-hi recursos que el navegador no coneix per endavant. Per exemple:

  • La teva aplicació està allotjada a my-app.com i fa peticions AJAX a api.my-app.com: No coneixeu les consultes específiques per endavant perquè es fan de forma dinàmica des de JS. Aquí és molt apropiat utilitzar una etiqueta per connectar-se prèviament al domini.
  • La teva aplicació està allotjada a my-app.com, i utilitza Google Fonts. Es descarreguen en dos passos: primer, el fitxer CSS es baixa del domini fonts.googleapis.com, llavors aquest fitxer demana tipus de lletra amb fonts.gstatic.com. No podeu saber de quins fitxers de tipus de lletra són específics fonts.gstatic.com el necessitareu fins que carregueu el fitxer CSS, de manera que només podem fer una connexió prèvia amb antelació.

Utilitzeu aquesta etiqueta per accelerar una mica algun script o estil de tercers a causa de la connexió preestablerta.

Tingueu en compte les característiques similars a <link rel= "dns-prefetch"/> и <link rel= "preconnect">. Normalment no té sentit utilitzar-los junts per a un domini: <link rel= "preconnect"> ja inclou <link rel= "dns-prefetch"/> i molt més. Això es pot justificar en dos casos:

  • Vols admetre navegadors antics?. <link rel= "dns-prefetch" /> recolzat per des de IE10 i Safari 5. <link rel= "preconnect"> va ser compatible durant un temps a Chrome i Firefox, però només es va afegir a Safari en 11.1 i encara no és compatible amb IE/Edge. Si necessiteu donar suport a aquests navegadors, feu servir <link rel= "dns-prefetch" /> com a opció de còpia de seguretat per <link rel= "preconnect">.
  • Voleu accelerar les connexions a més de 4-6 dominis. Etiqueta <link rel= "preconnect"> No es recomana utilitzar-lo amb més de 4-6 dominis, ja que establir i mantenir una connexió és una operació costosa. <link rel= "dns-prefetch" /> consumeix menys recursos, així que utilitzeu-lo si cal.

Detalls

Etiqueta opcional. El navegador no està obligat a seguir aquesta instrucció, de manera que pot ser que no faci la resolució de DNS, per exemple, si hi ha moltes etiquetes d'aquest tipus a la pàgina o en algun altre cas.

Què és el DNS. Cada servidor d'Internet té una adreça IP única, que sembla 216.58.215.78. El nom del lloc s'introdueix normalment a la barra d'adreces del navegador (per exemple, google.com), i els servidors DNS (sistema de noms de domini) el coincideixen amb l'adreça IP del servidor (216.58.215.78).

Per determinar una adreça IP, el navegador ha de consultar el servidor DNS. Es triga 20-120 ms en connectar-se a un nou domini de tercers.

El DNS s'emmagatzema a la memòria cau, encara que no és molt fiable. Alguns sistemes operatius i navegadors emmagatzemen a la memòria cau les consultes DNS: això estalviarà temps en consultes repetides, però no es pot confiar en la memòria cau. A Linux normalment no funciona gens. Chrome té una memòria cau DNS, però només dura un minut. Windows guarda a la memòria cau les respostes DNS durant cinc dies.

prerender

<link rel= "prerender"> demana al navegador que baixi l'URL i el mostri en una pestanya invisible. Quan l'usuari fa clic a l'enllaç, la pàgina s'ha de mostrar immediatament. Això és útil si esteu segur que l'usuari visitarà una pàgina determinada i voleu accelerar-ne la visualització.

Malgrat (o per) l'eficàcia excepcional d'aquesta etiqueta, el 2019 <link rel= "prerender"> mal compatible amb els principals navegadors. Veure més detalls. baix.

sintaxi

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

href apunta a l'URL que voleu començar a renderitzar en segon pla.

Quan s’ha d’utilitzar

Quan estàs realment segur que l'usuari anirà a una pàgina determinada. Si teniu un "túnel" a través del qual el 70% dels visitants de la pàgina A van a la pàgina B, aleshores <link rel= "prerender"> a la pàgina A ajudarà a mostrar la pàgina B molt ràpidament.

No feu un ús excessiu. La renderització prèvia és extremadament cara en termes d'amplada de banda i memòria. No utilitzi <link rel= "prerender"> durant més d'una pàgina.

Detalls

Etiqueta opcional. El navegador no està obligat a seguir aquesta instrucció i pot ignorar-la, per exemple, en una connexió lenta o quan no hi ha prou memòria lliure.

Per estalviar memòria Chrome no fa una renderització completaI només precarrega NoState. Això vol dir que Chrome carrega la pàgina i tots els seus recursos, però no representa ni executa JavaScript.

Firefox i Safari no admeten aquesta etiqueta en absolut. Això no infringeix l'especificació, ja que els navegadors no estan obligats a seguir aquesta instrucció; però encara trist. Error d'implementació Firefox porta set anys obert. Hi ha informes que Safari Tampoc admet aquesta etiqueta.

Resum

Ús:

  • <link rel= "preload"> - quan necessiteu un recurs en pocs segons
  • <link rel= "prefetch"> - quan necessiteu el recurs de la pàgina següent
  • <link rel= "preconnect"> - quan sabeu que necessitareu un recurs aviat, però encara no en coneixeu l'URL complet
  • <link rel= "dns-prefetch"> - de la mateixa manera, quan sabeu que necessitareu un recurs aviat, però encara no en coneixeu l'URL complet (per a navegadors antics)
  • <link rel= "prerender"> — quan esteu segur que els usuaris aniran a una pàgina determinada i voleu accelerar-ne la visualització

Font: www.habr.com

Afegeix comentari