ProHoster > Blog > Administrasyon an > Preload, prefetch ak lòt tags

Preload, prefetch ak lòt tags

Gen plizyè fason pou amelyore pèfòmans entènèt. Youn nan yo se preloading kontni ki pral bezwen pita. CSS pre-pwosesis, plen paj pre-rann oswa rezolisyon non domèn. Nou fè tout bagay davans, epi imedyatman montre rezilta a! Son fre.

Ki sa ki menm pi fre se ke li trè senpleman aplike. Senk tags bay navigatè a yon lòd pou fè aksyon preliminè:

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


Ann eksplike yon ti tan sa yo fè ak ki lè yo sèvi ak yo.

Ale nan: précharge · prefèt · prekonekte · dns-prefetch · prerann

précharge

<link rel= "preload"> di navigatè a pou chaje ak kachèt yon resous (tankou yon script oswa stylesheet) pi vit ke posib. Sa a itil lè yo bezwen yon resous kèk segond apre paj la chaje - epi ou vle akselere pwosesis la.

Navigatè a pa fè anyen ak resous la apre chaje. Scripts yo pa egzekite, fèy style yo pa aplike. Se resous la tou senpleman kach epi imedyatman disponib sou demann.

sentaks

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

href lonje dwèt sou resous ou vle telechaje a.

as ka nenpòt bagay ki ka telechaje nan navigatè a:

  • style pou fèy style,
  • script pou scripts,
  • font pou polis,
  • fetch pou resous chaje lè l sèvi avèk fetch() oswa XMLHttpRequest,
  • gade lis konplè sou MDN.

Li enpòtan pou presize atribi a as – sa a ede navigatè a byen priyorite ak pwograme downloads.

Lè pou itilize

Sèvi ak preloading lè resous la nesesè nan fiti prè. Pa egzanp:

  • Polis ki pa estanda ki soti nan yon dosye ekstèn: 
    <!-- index.html -->
<link rel="stylesheet" href="index.css" />
/* index.css */
@font-face {
  src: url('comic-sans.woff2') format('woff2');
}

    Pa default comic-sans.woff2 pral kòmanse chaje sèlman apre telechaje ak analiz index.css. Pou evite tann lontan, ou ka telechaje font la pi bonè lè l sèvi avèk <link rel= "preload">:

    <link rel="preload" href="comic-sans.woff2" as="font" />
  • Si ou separe estil ou selon apwòch la CSS kritik an de pati, kritik (pou rann imedya) ak ki pa kritik: 
    <style>
/* Inlined critical styles */
</style>

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

    Avèk apwòch sa a, estil ki pa kritik yo pral sèlman kòmanse chaje lè JavaScript kouri, sa ki ka rive kèk segonn apre rann. Olye pou yo tann JS itilize <link rel= "preload">pou kòmanse telechaje pi bonè:

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

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

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

Pa abuze preloading. Si ou chaje tout bagay nan yon ranje, sit la pa pral majik pi vit; Okontrè, li pral anpeche navigatè a planifye travay li kòrèkteman.

Pa dwe konfonn ak prefetching. Pa sèvi ak <link rel= "preload">, si ou pa bezwen resous la imedyatman apre paj la chaje. Si ou bezwen li pita, pou egzanp pou pwochen paj la, Lè sa a, sèvi ak <link rel= "prefetch">.

Detay

Sa a se yon tag obligatwa yo dwe egzekite pa navigatè a (si li sipòte li), kontrèman ak tout lòt tags ki gen rapò ak preloading. Navigatè a dwe telechaje resous ki espesifye nan <link rel="preload">. Nan lòt ka li ka inyore preloading, pou egzanp si li ap kouri sou yon koneksyon dousman.

Priyorite yo. Navigatè yo anjeneral bay diferan priyorite nan diferan resous (style, scripts, polis, elatriye) yo nan lòd yo chaje resous ki pi enpòtan yo an premye. Nan ka sa a, navigatè a detèmine priyorite pa atribi as. Pou navigatè Chrome ou ka gade tab priyorite konplè.

Preload, prefetch ak lòt tags

prefèt

<link rel= "prefetch"> mande navigatè a telechaje ak kachèt yon resous (tankou yon script oswa yon fèy style) nan background nan. Chajman fèt nan priyorite ki ba pou li pa entèfere ak resous ki pi enpòtan yo. Sa a se itil si resous la nesesè nan pwochen paj la epi ou vle kachèt li davans.

Isit la, tou, navigatè a pa fè anyen ak resous la apre chaje. Scripts yo pa egzekite, fèy style yo pa aplike. Se resous la tou senpleman kach epi imedyatman disponib sou demann.

sentaks

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

href lonje dwèt sou resous ou vle telechaje a.

as ka nenpòt bagay ki ka telechaje nan navigatè a:

  • style pou fèy style,
  • script pou scripts,
  • font pou polis,
  • fetch pou resous chaje lè l sèvi avèk fetch() oswa XMLHttpRequest,
  • gade lis konplè sou MDN.

Li enpòtan pou presize atribi a as - sa a ede navigatè a kòrèkteman priyorite ak pwograme downloads.

Lè pou itilize

Pou chaje resous ki soti nan lòt paj, si ou bezwen yon resous ki soti nan yon lòt paj, epi ou vle prechaje li pou akselere rann paj sa a. Pa egzanp:

  • Ou gen yon magazen sou entènèt, ak 40% itilizatè yo kite paj kay la pou paj pwodwi a. Sèvi ak <link rel= "prefetch">, chaje dosye CSS ak JS pou rann paj pwodwi yo.
  • Ou gen yon sèl aplikasyon paj, ak diferan paj chaje pakè diferan. Lè yon itilizatè vizite yon paj, pakè pou tout paj li lyen yo ka prechaje.

Li posib ke tag sa a ka itilize san danje nan nenpòt limit.. Navigatè yo anjeneral pwograme prefetch ak priyorite ki pi ba a, kidonk li pa deranje pèsonn. Jis kenbe nan tèt ou ke li konsome trafik itilizatè, ki ka koute lajan.

Pa pou demann ijan. Pa sèvi ak <link rel= "prefetch">, lè resous la nesesè nan kèk segonn. Nan ka sa a, sèvi ak <link rel= "preload">.

Detay

Tag si ou vle. Navigatè a pa oblije swiv enstriksyon sa a; li ka inyore li, pou egzanp, sou yon koneksyon dousman.

Priyorite nan Chrome. Nan Chrome <link rel= "prefetch"> anjeneral egzekite ak priyorite minimòm (gade tab priyorite konplè), se sa ki, apre yo fin chaje tout lòt bagay.

prekonekte

<link rel= "preconnect"> mande navigatè a konekte ak domèn nan davans lè ou vle akselere konfigirasyon koneksyon alavni.

Navigatè a dwe etabli yon koneksyon si li rekipere nenpòt resous ki soti nan yon nouvo domèn twazyèm pati. Pou egzanp, si li chaje Google Polis, Polis React soti nan yon CDN, oswa mande yon repons JSON nan yon sèvè API.

Etabli yon nouvo koneksyon anjeneral pran kèk santèn milisgond. Li fèt yon fwa, men li toujou pran tan. Si ou te etabli yon koneksyon davans, ou pral ekonomize tan epi telechaje resous ki soti nan domèn sa a pi vit.

sentaks

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

href endike non domèn ou vle detèmine adrès IP la. Èske yo ka espesifye ak yon prefiks (https://domain.com) oswa san li (//domain.com).

Lè pou itilize

Sèvi ak pou domèn ki pral bezwen byento telechaje yon stil enpòtan, script oswa imaj soti nan la, men ou pa konnen URL resous la ankò. Pa egzanp:

  • Aplikasyon ou a òganize sou my-app.com epi fè demann AJAX pou api.my-app.com: Ou pa konnen demann espesifik yo davans paske yo fè dinamik nan JS. Isit la li se byen apwopriye yo sèvi ak yon tag pre-konekte nan domèn nan.
  • Aplikasyon ou a òganize sou my-app.com epi sèvi ak Google Fonts. Yo telechaje nan de etap: premye, yo telechaje dosye CSS la nan domèn nan fonts.googleapis.com, Lè sa a, dosye sa a mande polis ak fonts.gstatic.com. Ou pa ka konnen ki dosye polis espesifik yo soti fonts.gstatic.com w ap bezwen jiskaske ou chaje fichye CSS la, pou nou ka sèlman fè yon koneksyon preliminè davans.

Sèvi ak tag sa a pou akselere kèk script twazyèm pati oswa style yon ti kras akòz koneksyon pre-etabli.

Pa twòp. Etabli ak kenbe yon koneksyon se yon operasyon chè pou tou de kliyan an ak sèvè a. Sèvi ak tag sa a pou yon maksimòm 4-6 domèn.

Detay

Tag si ou vle. Navigatè a pa oblije swiv enstriksyon sa a epi li ka inyore li, pou egzanp, si gen anpil koneksyon deja etabli oswa nan kèk lòt ka.

Ki sa ki pwosesis koneksyon an genyen ladan l?. Pou konekte ak chak sit, navigatè a dwe fè bagay sa yo:

  • rezolisyon dns. Jwenn adrès IP sèvè (216.58.215.78) pou non domèn espesifye (google.com).
  • TCP lanmen. Echanj pake (kliyan → sèvè → kliyan) pou kòmanse yon koneksyon TCP ak sèvè a.
  • Lanmen TLS (sit HTTPS sèlman). De jij echanj pake (kliyan → sèvè → kliyan → sèvè → kliyan) pou kòmanse yon sesyon TLS an sekirite.

Remak: HTTP/3 pral amelyore ak akselere mekanis lanmen, men li toujou byen lwen.

dns-prefetch

<link rel= "dns-prefetch"> mande navigatè a pou fè rezolisyon DNS pou domèn nan davans si ou pral konekte ak li byento epi ou vle akselere koneksyon inisyal la.

Navigatè a dwe detèmine adrès IP domèn nan si li pral rekipere nenpòt resous ki soti nan yon nouvo domèn twazyèm pati. Pou egzanp, chaje Google Polis, Polis React soti nan yon CDN, oswa mande yon repons JSON nan yon sèvè API.

Pou chak nouvo domèn, rezolisyon dosye DNS anjeneral pran apeprè 20-120 ms. Sa a sèlman afekte chaj la nan premye resous ki soti nan yon domèn bay, men li toujou entwodui yon reta. Si nou fè rezolisyon DNS davans, nou pral ekonomize tan epi chaje resous la pi vit.

sentaks

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

href endike non domèn ou vle mete adrès IP la. Èske yo ka espesifye ak yon prefiks (https://domain.com) oswa san li (//domain.com).

Lè pou itilize

Sèvi ak pou domèn ki pral bezwen byento telechaje resous ki soti nan navigatè a pa konnen davans. Pa egzanp:

  • Aplikasyon ou a òganize sou my-app.com epi fè demann AJAX pou api.my-app.com: Ou pa konnen demann espesifik yo davans paske yo fè dinamik nan JS. Isit la li se byen apwopriye yo sèvi ak yon tag pre-konekte nan domèn nan.
  • Aplikasyon ou a òganize sou my-app.com, epi sèvi ak Google Polis. Yo telechaje nan de etap: premye, yo telechaje dosye CSS la nan domèn nan fonts.googleapis.com, Lè sa a, dosye sa a mande polis ak fonts.gstatic.com. Ou pa ka konnen ki dosye polis espesifik yo soti fonts.gstatic.com w ap bezwen li jiskaske ou chaje fichye CSS la, pou nou ka sèlman fè yon koneksyon preliminè davans.

Sèvi ak tag sa a pou akselere kèk script twazyèm pati oswa style yon ti kras akòz koneksyon pre-etabli.

Tanpri sonje karakteristik ki sanble ak <link rel= "dns-prefetch"/> и <link rel= "preconnect">. Anjeneral li pa fè sans pou itilize yo ansanm pou yon sèl domèn: <link rel= "preconnect"> deja gen ladann <link rel= "dns-prefetch"/> ak plis ankò. Sa a ka jistifye nan de ka:

  • Èske ou vle sipòte pi gran navigatè?. <link rel= "dns-prefetch" /> sipòte pa depi IE10 ak Safari 5. <link rel= "preconnect"> te sipòte pou yon ti tan nan Chrome ak Firefox, men li te sèlman ajoute nan Safari nan 11.1 ak toujou pa sipòte nan IE/Edge. Si ou bezwen sipòte navigatè sa yo, sèvi ak <link rel= "dns-prefetch" /> kòm yon opsyon backup pou <link rel= "preconnect">.
  • Ou vle akselere koneksyon ak plis pase 4-6 domèn. Tag <link rel= "preconnect"> Li pa rekòmande pou itilize ak plis pase 4-6 domèn, depi etabli ak kenbe yon koneksyon se yon operasyon chè. <link rel= "dns-prefetch" /> konsome mwens resous, kidonk sèvi ak li si sa nesesè.

Detay

Tag si ou vle. Navigatè a pa oblije swiv enstriksyon sa a, kidonk li ka pa fè rezolisyon DNS, pou egzanp, si gen anpil tags sa yo sou paj la oswa nan kèk lòt ka.

ki sa ki DNS. Chak sèvè sou entènèt la gen yon adrès IP inik, ki sanble 216.58.215.78. Non sit la anjeneral antre nan ba adrès navigatè a (pa egzanp, google.com), ak sèvè DNS (Domain Name System) matche li ak adrès IP sèvè a (216.58.215.78).

Pou detèmine yon adrès IP, navigatè a dwe mande sèvè dns la. Li pran 20-120 ms lè w konekte ak yon nouvo domèn twazyèm pati.

DNS nan kachèt, byenke pa trè serye. Gen kèk OS ak navigatè yo kachèt demann DNS: sa a pral ekonomize tan sou demann repete, men yo pa ka konte sou kachèt. Sou Linux li anjeneral pa travay ditou. Chrome gen yon kachèt DNS, men li dire sèlman pou yon minit. Windows kachèt repons DNS pou senk jou.

prerann

<link rel= "prerender"> mande navigatè a telechaje URL la epi montre li nan yon tab envizib. Lè itilizatè a klike sou lyen an, paj la ta dwe parèt imedyatman. Sa a se itil si ou sèten ke itilizatè a pral vizite yon paj sèten epi ou vle akselere ekspozisyon li yo.

Malgre (oswa akòz) efikasite eksepsyonèl tag sa a, nan 2019 <link rel= "prerender"> mal sipòte nan navigatè prensipal yo. Gade plis detay. anba a.

sentaks

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

href lonje dwèt sou URL ou vle kòmanse rann nan background nan.

Lè pou itilize

Lè ou reyèlman asire w ke itilizatè a pral ale nan yon paj sèten. Si ou gen yon "tinèl" nan ki 70% nan vizitè yo nan paj A ale nan paj B, lè sa a <link rel= "prerender"> nan paj A ap ede montre paj B trè vit.

Pa twòp. Pre-rann se trè chè an tèm de Pleasant ak memwa. Pa sèvi ak <link rel= "prerender"> pou plis pase yon paj.

Detay

Tag si ou vle. Navigatè a pa oblije swiv enstriksyon sa a epi li ka inyore li, pou egzanp, sou yon koneksyon dousman oswa lè pa gen ase memwa gratis.

Pou sove memwa Chrome pa fè rannman konplèAk sèlman preload NoState. Sa vle di ke Chrome chaje paj la ak tout resous li yo, men li pa rann oswa egzekite JavaScript.

Firefox ak Safari pa sipòte tag sa a ditou. Sa a pa vyole spesifikasyon la, paske navigatè yo pa oblije swiv enstriksyon sa a; men toujou tris. Bug aplikasyon Firefox te louvri pou sèt ane. Gen rapò ke Safari pa sipòte tag sa a tou.

Rezime

Sèvi ak:

  • <link rel= "preload"> - lè ou bezwen yon resous nan kèk segond
  • <link rel= "prefetch"> - lè ou bezwen resous la nan pwochen paj la
  • <link rel= "preconnect"> - lè ou konnen ke w ap bezwen yon resous byento, men ou poko konnen URL konplè li yo
  • <link rel= "dns-prefetch"> - Menm jan an tou, lè w konnen w ap bezwen yon resous byento, men ou poko konnen URL konplè li (pou navigatè ki pi gran yo)
  • <link rel= "prerender"> - lè ou sèten ke itilizatè yo pral ale nan yon paj sèten, epi ou vle akselere ekspozisyon li yo

Sous: www.habr.com

Add nouvo kòmantè