ProHoster > Π‘Π»ΠΎΠ³ > Kev tswj hwm > Preload, prefetch thiab lwm yam cim npe

Preload, prefetch thiab lwm yam cim npe

muaj ntau txoj hauv kev los txhim kho lub vev xaib ua haujlwm. Ib tug ntawm lawv yog preloading cov ntsiab lus uas yuav xav tau tom qab. CSS pre-processing, tag nrho nplooj ntawv pre-rendering los yog sau npe daws teeb meem. Peb ua txhua yam ua ntej, thiab tom qab ntawd mam li tso tawm qhov tshwm sim! Suab txias.

Dab tsi tseem txias dua yog tias nws tsuas yog siv tau yooj yim heev. Tsib tag muab qhov browser rau cov lus txib kom ua haujlwm ua ntej:

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


Cia peb piav me ntsis txog lawv ua dab tsi thiab thaum twg yuav siv lawv.

dhia mus rau: preload Β· ua ntej Β· txuas ua ntej Β· dns-prefetch Β· ua ntej

preload

<link rel= "preload"> qhia rau tus browser kom thauj khoom thiab khaws cia cov peev txheej (xws li tsab ntawv lossis daim ntawv style) sai li sai tau. Qhov no muaj txiaj ntsig zoo thaum xav tau cov peev txheej ob peb feeb tom qab nplooj ntawv thauj khoom - thiab koj xav kom ceev cov txheej txheem.

Lub browser tsis muaj dab tsi nrog cov peev txheej tom qab thauj khoom. Cov ntawv sau tsis raug ua tiav, cov nplooj ntawv style tsis raug siv. Cov peev txheej tsuas yog cached thiab ua tam sim ntawd muaj raws li qhov kev thov.

syntax

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

href taw tes rau cov peev txheej koj xav rub tawm.

as tuaj yeem yog txhua yam uas tuaj yeem rub tawm hauv browser:

  • style rau cov ntaub ntawv style,
  • script rau scripts,
  • font rau fonts,
  • fetch rau cov ntaub ntawv loaded siv fetch() los yog XMLHttpRequest,
  • saib daim ntawv teev tag nrho ntawm MDN.

Nws yog ib qho tseem ceeb kom qhia tus cwj pwm as - qhov no yuav pab tau qhov browser kom ua tau qhov tseem ceeb thiab teem caij rub tawm.

Thaum yuav siv

Siv preloading thaum cov peev txheej xav tau nyob rau yav tom ntej ze. Piv txwv li:

  • Tsis yog-tus qauv fonts los ntawm cov ntaub ntawv sab nraud: 
    <!-- index.html -->
<link rel="stylesheet" href="index.css" />
/* index.css */
@font-face {
  src: url('comic-sans.woff2') format('woff2');
}

    los ntawm neej ntawd hais comic-sans.woff2 yuav pib loading tsuas yog tom qab downloading thiab parsing index.css. Txhawm rau kom tsis txhob tos ntev, koj tuaj yeem rub tawm font ua ntej siv <link rel= "preload">:

    <link rel="preload" href="comic-sans.woff2" as="font" />
  • Yog tias koj cais koj cov style raws li txoj hauv kev Critical CSS ua ob ntu, tseem ceeb (rau kev qhia tam sim) thiab tsis tseem ceeb: 
    <style>
/* Inlined critical styles */
</style>

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

    Nrog rau txoj hauv kev no, cov qauv tsis tseem ceeb tsuas yog pib thauj khoom thaum JavaScript khiav, uas tuaj yeem tshwm sim ob peb feeb tom qab ua tiav. Tsis txhob tos JS siv <link rel= "preload">pib rub tawm ua ntej:

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

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

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

Tsis txhob overuse preloading. Yog tias koj thauj khoom txhua yam ua ke, lub xaib yuav tsis nrawm nrawm; ntawm qhov tsis sib xws, nws yuav tiv thaiv qhov browser los ntawm kev npaj nws txoj haujlwm kom raug.

Tsis txhob tsis meej pem nrog prefetching. Tsis txhob siv <link rel= "preload">, yog tias koj tsis xav tau cov peev txheej tam sim tom qab nplooj ntawv thauj khoom. Yog tias koj xav tau tom qab, piv txwv li rau nplooj ntawv tom ntej, ces siv <link rel= "prefetch">.

Saib cov ntsiab lus

Qhov no yog qhov yuav tsum tau tag kom ua tiav los ntawm qhov browser (yog tias nws txhawb nqa), tsis zoo li tag nrho lwm cov cim npe muaj feem xyuam rau preloading. Lub browser yuav tsum rub tawm cov peev txheej tau teev tseg hauv <link rel="preload">. Hauv lwm qhov xwm txheej nws yuav tsis quav ntsej preloading, piv txwv li yog tias nws khiav ntawm kev sib txuas qeeb.

Ua ntej. Browsers feem ntau muab qhov tseem ceeb sib txawv rau cov peev txheej sib txawv (styles, scripts, fonts, thiab lwm yam) txhawm rau txhawm rau thauj khoom tseem ceeb tshaj plaws ua ntej. Hauv qhov no, tus browser txiav txim siab qhov tseem ceeb los ntawm tus cwj pwm as. Rau Chrome browser koj tuaj yeem saib tag nrho lub rooj tseem ceeb.

Preload, prefetch thiab lwm yam cim npe

ua ntej

<link rel= "prefetch"> nug tus browser kom rub tawm thiab cache ib qho kev pab (xws li tsab ntawv lossis stylesheet) hauv keeb kwm yav dhau. Kev thauj khoom tshwm sim ntawm qhov tseem ceeb tsawg yog li nws tsis cuam tshuam nrog cov peev txheej tseem ceeb dua. Qhov no muaj txiaj ntsig yog tias cov peev txheej xav tau ntawm nplooj ntawv tom ntej thiab koj xav cache nws ua ntej.

Ntawm no, ib yam nkaus, browser tsis muaj dab tsi nrog cov peev txheej tom qab thauj khoom. Cov ntawv sau tsis raug ua tiav, cov nplooj ntawv style tsis raug siv. Cov peev txheej tsuas yog cached thiab ua tam sim ntawd muaj raws li qhov kev thov.

syntax

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

href taw tes rau cov peev txheej koj xav rub tawm.

as tuaj yeem yog txhua yam uas tuaj yeem rub tawm hauv browser:

  • style rau cov ntaub ntawv style,
  • script rau scripts,
  • font rau fonts,
  • fetch rau cov ntaub ntawv loaded siv fetch() los yog XMLHttpRequest,
  • saib daim ntawv teev tag nrho ntawm MDN.

Nws yog ib qho tseem ceeb kom qhia tus cwj pwm as - qhov no yuav pab tau qhov browser kom raug qhov tseem ceeb thiab teem caij rub tawm.

Thaum yuav siv

Txhawm rau thauj khoom los ntawm lwm nplooj ntawv, yog tias koj xav tau cov peev txheej los ntawm lwm nplooj ntawv, thiab koj xav tau preload nws mus rau qhov nrawm nrawm ntawm nplooj ntawv ntawd. Piv txwv li:

  • Koj muaj lub khw hauv online, thiab 40% ntawm cov neeg siv tawm hauv tsev rau nplooj ntawv khoom. Siv <link rel= "prefetch">, thauj khoom CSS thiab JS cov ntaub ntawv los ua cov nplooj ntawv khoom.
  • Koj muaj ib nplooj ntawv thov, thiab cov nplooj ntawv sib txawv thauj cov pob sib txawv. Thaum tus neeg siv mus ntsib ib nplooj ntawv, pob khoom rau tag nrho cov nplooj ntawv uas nws txuas rau tuaj yeem raug preloaded.

Nws zoo nkaus li tias daim ntawv no tuaj yeem siv nyab xeeb rau txhua qhov twg.. Browsers feem ntau teem sijhawm prefetch nrog qhov tseem ceeb tshaj plaws, yog li nws tsis thab leej twg. Tsuas yog nco ntsoov tias nws siv cov neeg siv tsheb khiav, uas tuaj yeem raug nqi nyiaj.

Tsis yog rau kev thov ceev. Tsis txhob siv <link rel= "prefetch">, thaum cov peev txheej xav tau hauv ob peb feeb. Hauv qhov no, siv <link rel= "preload">.

Saib cov ntsiab lus

Optional tag. Tus browser tsis tas yuav ua raws li cov lus qhia no; nws yuav tsis quav ntsej nws, piv txwv li, ntawm kev sib txuas qeeb.

Qhov tseem ceeb hauv Chrome. Hauv Chrome <link rel= "prefetch"> feem ntau yog ua tiav nrog qhov tseem ceeb yam tsawg kawg nkaus (saib tag nrho lub rooj tseem ceeb), uas yog, tom qab thauj khoom txhua yam.

txuas ua ntej

<link rel= "preconnect"> nug tus browser kom txuas rau tus sau ua ntej thaum koj xav kom ceev kev sib txuas teeb tsa yav tom ntej.

Tus browser yuav tsum tsim kom muaj kev sib txuas yog tias nws khaws cov peev txheej los ntawm tus thib peb tus neeg thib peb sau tshiab. Piv txwv li, yog tias nws thauj Google Fonts, React fonts los ntawm CDN, lossis thov JSON cov lus teb los ntawm API server.

Tsim kom muaj kev sib txuas tshiab feem ntau yuav siv li ob peb puas milliseconds. Nws yog ua tiav ib zaug, tab sis tseem siv sijhawm. Yog tias koj tau tsim kev sib txuas ua ntej, koj yuav txuag lub sijhawm thiab rub tawm cov peev txheej los ntawm lub vev xaib no sai dua.

syntax

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

href qhia lub npe sau npe uas koj xav txiav txim qhov chaw nyob IP. Yuav tau teev nrog prefix (https://domain.com) los yog tsis muaj (//domain.com).

Thaum yuav siv

Siv rau thaj chaw uas yuav xav tau sai sai txhawm rau rub tawm cov qauv tseem ceeb, tsab ntawv lossis duab los ntawm qhov ntawd, tab sis koj tsis paub qhov chaw URL tseem. Piv txwv li:

  • Koj daim ntawv thov muaj nyob rau my-app.com thiab ua rau AJAX thov rau api.my-app.com: Koj tsis paub cov lus nug tshwj xeeb ua ntej vim lawv raug tsim los ntawm JS. Ntawm no nws yog qhov tsim nyog siv lub cim npe ua ntej txuas mus rau tus sau.
  • Koj daim ntawv thov muaj nyob rau my-app.com thiab siv Google Fonts. Lawv raug rub tawm hauv ob kauj ruam: ua ntej, cov ntaub ntawv CSS raug rub tawm los ntawm tus sau fonts.googleapis.com, ces cov ntaub ntawv no thov fonts nrog fonts.gstatic.com. Koj tsis tuaj yeem paub cov ntaub ntawv font tshwj xeeb yog los ntawm fonts.gstatic.com koj yuav xav tau kom txog thaum koj thauj cov ntaub ntawv CSS, yog li peb tsuas tuaj yeem ua qhov kev sib txuas ua ntej ua ntej.

Siv daim ntawv lo no kom nrawm qee cov ntawv thib peb lossis style me ntsis vim muaj kev sib txuas ua ntej.

Tsis txhob siv ntau dhau. Tsim thiab tswj kev sib txuas yog kev ua haujlwm kim rau ob tus neeg siv khoom thiab cov neeg rau zaub mov. Siv daim ntawv no rau qhov siab kawg ntawm 4-6 lub npe.

Saib cov ntsiab lus

Optional tag. Lub browser tsis tas yuav tsum ua raws li cov lus qhia no thiab yuav tsis quav ntsej nws, piv txwv li, yog tias muaj ntau qhov kev sib txuas tau tsim los lossis lwm yam.

Cov txheej txheem txuas nrog dab tsi?. Txhawm rau txuas mus rau txhua qhov chaw, browser yuav tsum ua cov hauv qab no:

  • DNS daws teeb meem. Nrhiav tus IP chaw nyob server (216.58.215.78) rau lub npe sau npe (google.com).
  • TCP tuav tes. Hloov pob ntawv (tus neeg siv khoom β†’ neeg rau zaub mov β†’ tus neeg siv) los pib TCP kev sib txuas nrog lub server.
  • TLS tuav tes (HTTPS qhov chaw nkaus xwb). Ob puag ncig ntawm pob ntawv pauv (tus neeg siv khoom β†’ server β†’ tus neeg siv khoom β†’ server β†’ tus neeg siv khoom) los pib qhov kev sib kho TLS ruaj ntseg.

Nco tseg: HTTP / 3 yuav txhim kho thiab ua kom nrawm ntawm kev sib tuav tes, tab sis nws tseem nyob deb.

dns-prefetch

<link rel= "dns-prefetch"> nug tus browser kom ua DNS daws teeb meem rau tus sau ua ntej yog tias koj yuav txuas rau nws sai sai thiab xav kom ceev cov kev sib txuas pib.

Tus browser yuav tsum txiav txim siab tus lej tus IP chaw nyob yog tias nws yuav rov qab tau cov peev txheej los ntawm tus thib peb tus thawj tswj hwm tshiab. Piv txwv li, thauj khoom Google Fonts, React fonts los ntawm CDN, lossis thov JSON cov lus teb los ntawm API server.

Rau txhua tus sau npe tshiab, DNS cov ntaub ntawv daws teeb meem feem ntau siv li 20-120 ms. Qhov no tsuas yog cuam tshuam rau kev thauj khoom ntawm thawj cov peev txheej los ntawm ib qho chaw muab, tab sis tseem qhia txog kev ncua sijhawm. Yog tias peb ua DNS daws teeb meem ua ntej, peb yuav txuag lub sijhawm thiab thauj khoom sai dua.

syntax

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

href qhia lub npe sau npe uas koj xav teev tus IP chaw nyob. Yuav tau teev nrog prefix (https://domain.com) los yog tsis muaj (//domain.com).

Thaum yuav siv

Siv rau thaj chaw uas yuav xav tau sai sai mus download tau cov peev txheej los ntawm qhov ntawd uas browser tsis paub ua ntej. Piv txwv li:

  • Koj daim ntawv thov muaj nyob rau my-app.com thiab ua rau AJAX thov rau api.my-app.com: Koj tsis paub cov lus nug tshwj xeeb ua ntej vim lawv raug tsim los ntawm JS. Ntawm no nws yog qhov tsim nyog siv lub cim npe ua ntej txuas mus rau tus sau.
  • Koj daim ntawv thov muaj nyob rau my-app.com, thiab siv Google Fonts. Lawv raug rub tawm hauv ob kauj ruam: thawj zaug CSS cov ntaub ntawv raug rub tawm los ntawm tus sau fonts.googleapis.com, ces cov ntaub ntawv no thov fonts nrog fonts.gstatic.com. Koj tsis tuaj yeem paub cov ntaub ntawv font tshwj xeeb yog los ntawm fonts.gstatic.com koj yuav xav tau kom txog thaum koj thauj cov ntaub ntawv CSS, yog li peb tuaj yeem ua qhov kev sib txuas ua ntej ua ntej.

Siv daim ntawv lo no kom nrawm qee cov ntawv thib peb lossis style me ntsis vim muaj kev sib txuas ua ntej.

Thov nco ntsoov cov yam ntxwv zoo sib xws rau <link rel= "dns-prefetch"/> ΠΈ <link rel= "preconnect">. Nws feem ntau tsis tsim nyog siv lawv ua ke rau ib lub npe: <link rel= "preconnect"> twb suav nrog <link rel= "dns-prefetch"/> thiab ntau ntxiv. Qhov no tuaj yeem ua ncaj ncees hauv ob qhov xwm txheej:

  • Koj puas xav txhawb cov browser qub?. <link rel= "dns-prefetch" /> txhawb los ntawm txij li IE10 thiab Safari 5. <link rel= "preconnect"> tau txais kev txhawb nqa ib ntus hauv Chrome thiab Firefox, tab sis tsuas yog ntxiv rau Safari hauv 11.1 thiab tseem tsis txaus siab hauv IE/Edge. Yog tias koj xav txhawb cov browsers no, siv <link rel= "dns-prefetch" /> raws li kev xaiv thaub qab rau <link rel= "preconnect">.
  • Koj xav kom ceev kev sib txuas mus rau ntau tshaj 4-6 tus thawj. Tag <link rel= "preconnect"> Nws tsis pom zoo kom siv nrog ntau dua 4-6 lub npe, txij li kev tsim thiab tswj kev sib txuas yog ib qho lag luam kim. <link rel= "dns-prefetch" /> siv nyiaj tsawg, yog li siv nws yog tias tsim nyog.

Saib cov ntsiab lus

Optional tag. Lub browser tsis tas yuav tsum ua raws li cov lus qhia no, yog li nws yuav tsis ua DNS daws teeb meem, piv txwv li, yog tias muaj ntau cov cim npe ntawm nplooj ntawv lossis qee qhov xwm txheej.

DNS yog dab tsi. Txhua tus neeg rau zaub mov hauv Is Taws Nem muaj qhov tshwj xeeb IP chaw nyob, uas zoo li 216.58.215.78. Lub npe ntawm lub xaib feem ntau nkag mus rau hauv qhov chaw nyob ntawm qhov browser (piv txwv li, google.com), thiab DNS (Domain Name System) servers phim nws nrog server tus IP chaw nyob (216.58.215.78).

Txhawm rau txiav txim siab tus IP chaw nyob, tus browser yuav tsum nug DNS server. Nws yuav siv sij hawm 20-120 ms thaum txuas mus rau tus thib peb-tog domain tshiab.

DNS yog cached, txawm tias tsis muaj kev ntseeg siab heev. Qee qhov OS thiab browsers cache DNS cov lus nug: qhov no yuav txuag lub sijhawm ntawm cov lus nug rov qab, tab sis caching tsis tuaj yeem tso siab rau. Ntawm Linux nws feem ntau tsis ua haujlwm txhua. Chrome muaj DNS cache, tab sis nws tsuas kav ib feeb xwb. Windows caches DNS teb rau tsib hnub.

ua ntej

<link rel= "prerender"> nug tus browser kom rub tawm qhov URL thiab tso nws hauv qhov pom tsis pom. Thaum tus neeg siv nyem rau ntawm qhov txuas, nplooj ntawv yuav tsum tshwm sim tam sim ntawd. Qhov no muaj txiaj ntsig yog tias koj paub tseeb tias tus neeg siv yuav mus ntsib ib nplooj ntawv tshwj xeeb thiab xav kom ceev nws cov zaub.

Txawm hais tias (lossis vim yog) qhov ua tau zoo tshwj xeeb ntawm daim ntawv no, hauv 2019 <link rel= "prerender"> tsis txaus siab nyob rau hauv loj browsers. Saib cov ntsiab lus ntxiv. hauv qab.

syntax

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

href taw tes rau qhov URL koj xav pib rendering hauv keeb kwm yav dhau.

Thaum yuav siv

Thaum koj paub tseeb tias tus neeg siv yuav mus rau ib nplooj ntawv. Yog tias koj muaj "tunnel" uas 70% ntawm cov neeg tuaj xyuas nplooj ntawv A mus rau nplooj B, ces <link rel= "prerender"> ntawm nplooj ntawv A yuav pab kom pom nplooj B sai heev.

Tsis txhob siv ntau dhau. Pre-rendering yog kim heev nyob rau hauv cov nqe lus ntawm bandwidth thiab nco. Tsis txhob siv <link rel= "prerender"> rau ntau tshaj ib nplooj ntawv.

Saib cov ntsiab lus

Optional tag. Lub browser tsis tas yuav tsum ua raws li cov lus qhia no thiab yuav tsis quav ntsej nws, piv txwv li, ntawm kev sib txuas qeeb lossis thaum tsis muaj lub cim xeeb dawb.

Kom txuag lub cim xeeb Chrome tsis ua tag nrho renderingthiab tsuas yog preload NoState. Qhov no txhais tau tias Chrome thauj cov nplooj ntawv thiab tag nrho nws cov peev txheej, tab sis tsis ua lossis ua rau JavaScript.

Firefox thiab Safari tsis txhawb qhov cim npe no txhua. Qhov no tsis ua txhaum qhov kev qhia tshwj xeeb, vim tias browsers tsis tas yuav ua raws li cov lus qhia no; tab sis tseem tu siab. Kev siv cov kab mob Firefox tau qhib tau xya xyoo. Muaj lus ceeb toom tias Safari tsis txhawb qhov tag thiab.

Txoj kev xaus

Siv:

  • <link rel= "preload"> - thaum koj xav tau cov peev txheej hauv ob peb feeb
  • <link rel= "prefetch"> - Thaum koj xav tau cov peev txheej ntawm nplooj ntawv tom ntej
  • <link rel= "preconnect"> - thaum koj paub tias koj yuav xav tau cov peev txheej sai sai, tab sis koj tseem tsis tau paub nws qhov URL tag nrho
  • <link rel= "dns-prefetch"> - zoo sib xws, thaum koj paub tias koj yuav xav tau cov peev txheej sai sai, tab sis koj tseem tsis tau paub nws qhov URL tag nrho (rau cov browser qub)
  • <link rel= "prerender"> - thaum koj paub tseeb tias cov neeg siv yuav mus rau ib nplooj ntawv tshwj xeeb, thiab koj xav ua kom nws cov zaub

Tau qhov twg los: www.hab.com

Ntxiv ib saib