ProHoster > Blog > Utongi > Preload, prefetch uye mamwe ma tag

Preload, prefetch uye mamwe ma tag

kune nzira dzakawanda dzekuvandudza kushanda kwewebhu. Imwe yacho ndeye kurodha zvemukati izvo zvichazodiwa gare gare. CSS pre-processing, full page pre-rendering kana domain name resolution. Isu tinoita zvese pamberi, uye ipapo ipapo ratidza mhedzisiro! Inonzwika zvakanaka.

Chinotonyanya kutonhorera ndechekuti inongoitwa zviri nyore. Matagi mashanu ipa browser murairo wekuita zviito zvekutanga:

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


Ngatitsanangurei muchidimbu zvavanoita uye nguva yekuzvishandisa.

Enda ku: preload Β· preetch Β· preconnect Β· dns-prefetch Β· prerender

preload

<link rel= "preload"> inoudza bhurawuza kurodha uye kuchengetera sosi (senge script kana stylesheet) nekukurumidza sezvinobvira. Izvi zvinobatsira kana sosi ichidikanwa masekonzi mashoma mushure mekutakura peji - uye iwe unoda kukurumidza kuita.

Iyo bhurawuza haiite chinhu neiyo sosi mushure mekurodha. Ma script haaitwe, mapepa emhando haashandiswe. Iyo sosi inongovharirwa uye nekukasika inowanikwa pakukumbira.

nemarongerwo

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

href inonongedzera kune sosi yaunoda kudhawunirodha.

as inogona kuva chero chinhu chinogona kutorwa mubrowser:

  • style zvemapepa emhando,
  • script zvezvinyorwa,
  • font zvemafonti,
  • fetch kune zviwanikwa zvakatakurwa uchishandisa fetch() kana XMLHttpRequest,
  • ona runyorwa ruzere pa MDN.

Zvakakosha kutsanangura hunhu as -Izvi zvinobatsira bhurawuza kukoshesa uye kuronga kurodha.

Nguva yekushandisa

Shandisa preloading kana sosi iri kudiwa munguva pfupi iri kutevera. Semuyenzaniso:

  • Mafonti asiri akajairwa kubva kufaira rekunze: 
    <!-- index.html -->
<link rel="stylesheet" href="index.css" />
/* index.css */
@font-face {
  src: url('comic-sans.woff2') format('woff2');
}

    kubudikidza default comic-sans.woff2 inozotanga kurodha chete mushure mekudhawunirodha uye nekupatsanura index.css. Kuti udzivise kumirira kwenguva yakareba, unogona kudhawunirodha font pakutanga uchishandisa <link rel= "preload">:

    <link rel="preload" href="comic-sans.woff2" as="font" />
  • Kana iwe ukaparadzanisa zvitaera zvako zvinoenderana nemaitiro Yakakosha CSS muzvikamu zviviri, zvakakosha (pakungopa ipapo) uye zvisina kutsoropodza: 
    <style>
/* Inlined critical styles */
</style>

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

    Neiyi nzira, masitaera asina-akakosha anongotanga kurodha kana JavaScript ichimhanya, izvo zvinogona kuitika masekonzi mashoma mushure mekupa. Panzvimbo pekumirira JS shandisa <link rel= "preload">kutanga kurodha kare:

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

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

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

Usanyanyoshandisa preloading. Kana iwe ukarodha zvese zvakatevedzana, saiti haizo mhanyisa zvemashiripiti; pane zvinopesana, inodzivirira bhurawuza kuronga basa rayo nemazvo.

Hazvifanirwe kuvhiringwa neprefetching. Usashandise <link rel= "preload">, kana iwe usingade sosi pakarepo mushure mekutakura peji. Kana uchida gare gare, semuenzaniso kune peji rinotevera, wozoshandisa <link rel= "prefetch">.

Ona zvakadzama

Ichi chitupa chinodiwa kuti iitwe nebrowser (kana ichiitsigira), kusiyana nemamwe ma tag ese zvine chekuita nekurodha. Iyo bhurawuza inofanirwa kudhawunirodha sosi yakatsanangurwa mukati <link rel="preload">. Mune zvimwe zviitiko inogona kufuratira preloading, semuenzaniso kana iri kushanda pane inononoka yekubatanidza.

Zvinokosha. Mabhurawuza anowanzo kugovera zvakakoshesesa zvakasiyana kune zvakasiyana zviwanikwa (zvitaera, zvinyorwa, mafonti, nezvimwewo) kuitira kurodha zviwanikwa zvakakosha kutanga. Muchiitiko ichi, bhurawuza inosarudza kukosha nehunhu as. Kune Chrome browser iwe unogona kutarisa tafura yakazara yakakosha.

Preload, prefetch uye mamwe ma tag

preetch

<link rel= "prefetch"> inokumbira bhurawuza kudhawunirodha uye kuchengetera sosi (senge script kana chimiro shizha) kumashure. Kurodha kunoitika pasi pekutanga saka hazvikanganise zviwanikwa zvakakosha. Izvi zvinobatsira kana iyo sosi ichidikanwa pane inotevera peji uye iwe uchida kuichengeta pamberi.

Pano, zvakare, bhurawuza hariite chinhu nechishandiso mushure mekurodha. Ma script haaitwe, mapepa emhando haashandiswe. Iyo sosi inongovharirwa uye nekukasika inowanikwa pakukumbira.

nemarongerwo

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

href inonongedzera kune sosi yaunoda kudhawunirodha.

as inogona kuva chero chinhu chinogona kutorwa mubrowser:

  • style zvemapepa emhando,
  • script zvezvinyorwa,
  • font zvemafonti,
  • fetch kune zviwanikwa zvakatakurwa uchishandisa fetch() kana XMLHttpRequest,
  • ona runyorwa ruzere pa MDN.

Zvakakosha kutsanangura hunhu as - Izvi zvinobatsira bhurawuza kukoshesa uye kuronga kurodha.

Nguva yekushandisa

Kuisa zviwanikwa kubva kune mamwe mapeji, kana iwe uchida sosi kubva kune imwe peji, uye iwe uchida kufanorodha kuti wobva wakurumidza kupa iyo peji. Semuyenzaniso:

  • Iwe une chitoro chepamhepo, uye 40% yevashandisi vanosiya peji remba kune peji yechigadzirwa. Shandisa <link rel= "prefetch">, kurodha mafaira eCSS neJS kuti ape mapeji echigadzirwa.
  • Iwe une peji imwe chete application, uye mapeji akasiyana anorodha akasiyana mapakeji. Kana mushandisi akashanyira peji, mapakeji emapeji ese aanobatanidza anogona kutakurwa.

Zvingangodaro kuti iyi teki inogona kushandiswa zvakachengeteka kune chero nhanho.. Mabhurawuza anowanzo kuronga prefetch ine yakaderera pamberi, saka hazvinetse chero munhu. Ingo rangarira kuti inodya traffic yevashandisi, iyo inogona kudhura mari.

Kwete yezvikumbiro zvekukurumidzira. Usashandise <link rel= "prefetch">, kana sosi ichidikanwa mumasekonzi mashoma. Muchiitiko ichi, shandisa <link rel= "preload">.

Ona zvakadzama

Optional tag. Bhurawuza haifanirwe kutevedzera rairo iyi; inogona kuifuratira, semuenzaniso, pane inononoka yekubatanidza.

Kunyanya kukoshesa muChrome. MuChrome <link rel= "prefetch"> kazhinji inoitwa nekunyanya kukosha (ona tafura yakazara yakakosha), ndiko kuti, mushure mekutakura zvimwe zvese.

preconnect

<link rel= "preconnect"> inobvunza bhurawuza kuti ibatanidze kune iyo domain pachine nguva kana iwe uchida kukurumidzira kuseta yekubatanidza mune ramangwana.

Iyo bhurawuza inofanirwa kumisikidza chinongedzo kana ikatora chero zviwanikwa kubva kune yechitatu-bato domain. Semuenzaniso, kana yakatakura mafonti eGoogle, React fonts kubva kuCDN, kana kukumbira mhinduro yeJSON kubva kuAPI server.

Kugadzira chinongedzo chitsva kazhinji chinotora mazana mashoma emamilliseconds. Zvinoitwa kamwe chete, asi zvichitora nguva. Kana iwe wakagadzira chinongedzo pamberi, iwe unochengetedza nguva uye kurodha zviwanikwa kubva pane ino domain nekukurumidza.

nemarongerwo

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

href inoratidza zita rezita raunoda kuona iyo IP kero. Inogona kutsanangurwa nechivakashure (https://domain.com) kana pasina (//domain.com).

Nguva yekushandisa

Shandisa kune madomasi achadikanwa munguva pfupi kudhawunirodha yakakosha maitiro, script kana mufananidzo kubva ipapo, asi iwe hausati waziva iyo sosi URL parizvino. Semuyenzaniso:

  • Chikumbiro chako chinotambirwa my-app.com uye inoita zvikumbiro zveAJAX kuti api.my-app.com: Iwe hauzive iyo chaiyo mibvunzo pamberi nekuti inogadzirwa zvine simba kubva kuJS. Pano zvakanyatsokodzera kushandisa tag kufanobatanidza kune iyo domain.
  • Chikumbiro chako chinotambirwa my-app.com uye inoshandisa Google Fonts. Vanotorwa mumatanho maviri: kutanga iyo CSS faira inotorwa kubva kudura fonts.googleapis.com, zvino faira iri rinokumbira mafonti ne fonts.gstatic.com. Iwe haugone kuziva kuti ndeapi mafonti mafaera anobva fonts.gstatic.com iwe unozoda kusvika warodha iyo CSS faira, saka isu tinogona chete kuita yekutanga kubatana pamberi.

Shandisa tegi iyi kukurumidzira mamwe manyorerwo ebato rechitatu kana manyorerwo zvishoma nekuda kwekubatana kwakagadziriswa.

Usanyanyisa. Kugadzira uye kuchengetedza chinongedzo ibasa rinodhura kune vese mutengi uye sevha. Shandisa iyi tegi kune inokwana 4-6 domains.

Ona zvakadzama

Optional tag. Iyo bhurawuza haifanirwe kutevedzera iyi rairo uye inogona kuifuratira, semuenzaniso, kana akawanda ekubatanidza atotangwa kana mune imwewo nyaya.

Chii chinosanganisa nzira yekubatanidza?. Kuti ubatanidze kune yega saiti, browser inofanirwa kuita zvinotevera:

  • DNS resolution. Tsvaga server IP kero (216.58.215.78) yezita rezita rakataurwa (google.com).
  • TCP kubata maoko. Shandura mapaketi (mutengi β†’ sevha β†’ mutengi) kuti utange kubatana kweTCP neseva.
  • TLS kubata maoko (HTTPS masaiti chete). Matenderedzwa maviri ekutsinhana kwepakiti (mutengi β†’ sevha β†’ mutengi β†’ sevha β†’ mutengi) kutanga musangano wakachengeteka weTLS.

Ongorora: HTTP/3 ichavandudza uye nekumhanyisa mabatiro ekubata maoko, asi ichiri kure.

dns-prefetch

<link rel= "dns-prefetch"> inokumbira bhurawuza kuti iite DNS resolution yedomain pachine nguva kana iwe uchange uchibatanidza kwairi munguva pfupi uye uchida kukurumidzira yekutanga kubatana.

Iyo bhurawuza inofanirwa kuona iyo domain IP kero kana ichizotora chero zviwanikwa kubva kune yechitatu-bato domain. Semuenzaniso, kurodha mafonti eGoogle, React fonts kubva kuCDN, kana kukumbira mhinduro yeJSON kubva kune API server.

Kune yega yega dura idzva, DNS rekodhi kugadziriswa kazhinji inotora anenge 20-120 ms. Izvi zvinongokanganisa kurodha kwekutanga sosi kubva kune yakapihwa domain, asi zvichiri kuunza kunonoka. Kana tikaita DNS resolution pachine nguva, isu tinochengetedza nguva uye torodha sosi nekukurumidza.

nemarongerwo

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

href inoratidza zita rezita raunoda kuseta IP kero. Inogona kutsanangurwa nechivakashure (https://domain.com) kana pasina (//domain.com).

Nguva yekushandisa

Shandisa kune madomasi achadikanwa munguva pfupi kudhawunirodha zviwanikwa kubva ipapo izvo browser isingazive nezvayo pamberi. Semuyenzaniso:

  • Chikumbiro chako chinotambirwa my-app.com uye inoita zvikumbiro zveAJAX kuti api.my-app.com: Iwe hauzive iyo chaiyo mibvunzo pamberi nekuti inogadzirwa zvine simba kubva kuJS. Pano zvakanyatsokodzera kushandisa tag kufanobatanidza kune iyo domain.
  • Chikumbiro chako chinotambirwa my-app.com, uye inoshandisa Google Fonts. Iwo anotorwa mumatanho maviri: chekutanga, iyo CSS faira inotorwa kubva kudura fonts.googleapis.com, zvino faira iri rinokumbira mafonti ne fonts.gstatic.com. Iwe haugone kuziva kuti ndeapi mafonti mafaera anobva fonts.gstatic.com iwe unozoida kudzamara waisa CSS faira, saka isu tinogona chete kugadzira yekutanga kubatana pamberi.

Shandisa tegi iyi kukurumidzira mamwe manyorerwo ebato rechitatu kana manyorerwo zvishoma nekuda kwekubatana kwakagadziriswa.

Ndapota cherechedza maitiro akafanana ne <link rel= "dns-prefetch"/> ΠΈ <link rel= "preconnect">. Kazhinji hazvina musoro kuzvishandisa pamwe chete kune imwe domain: <link rel= "preconnect"> nechekare zvinosanganisira <link rel= "dns-prefetch"/> nezvimwe zvakawanda. Izvi zvinogona kururamiswa muzviitiko zviviri:

  • Unoda kutsigira mabhurawuza echikuru here?. <link rel= "dns-prefetch" /> inotsigirwa ne kubvira IE10 uye Safari 5. <link rel= "preconnect"> yakatsigirwa kwechinguva muChrome neFirefox, asi yakangowedzerwa kuSafari muna 11.1 uye haisati yatsigirwa muIE/Edge. Kana uchida kutsigira mabhurawuza aya, shandisa <link rel= "dns-prefetch" /> senzira yekuchengetedza ye <link rel= "preconnect">.
  • Iwe unoda kukurumidza kubatanidza kune anopfuura 4-6 domains. Tag <link rel= "preconnect"> Hazvikurudzirwe kushandisa neanopfuura 4-6 domains, sezvo kumisikidza uye kuchengetedza yekubatanidza ibasa rinodhura. <link rel= "dns-prefetch" /> inoshandisa zviwanikwa zvishoma, saka zvishandise kana zvichidikanwa.

Ona zvakadzama

Optional tag. Bhurawuza haifanirwe kutevedzera rairo iyi, saka inogona kusaita DNS resolution, semuenzaniso, kana paine akawanda ma tag papeji kana mune imwewo nyaya.

Chii chinonzi DNS. Sevha yega yega paInternet ine yakasarudzika IP kero, inoita senge 216.58.215.78. Iro zita resaiti rinowanzo kuisirwa mukero bar yebrowser (semuenzaniso, google.com), uye DNS (Domain Name System) maseva anoifananidza nekero yeIP yeseva (216.58.215.78).

Kuti uone kero yeIP, bhurawuza inofanirwa kubvunza iyo DNS server. Zvinotora 20βˆ’120 ms kana uchibatanidza kune itsva yechitatu-bato domain.

DNS yakavharirwa, kunyangwe isiri yakavimbika zvakanyanya. Mamwe maOS uye mabhurawuza cache DNS mibvunzo: izvi zvinochengetedza nguva pamibvunzo inodzokororwa, asi caching haigone kuvimbwa nayo. PaLinux kazhinji haishande zvachose. Chrome ine DNS cache, asi inongogara kweminiti. Windows inochengeta DNS mhinduro kwemazuva mashanu.

prerender

<link rel= "prerender"> inobvunza bhurawuza kuti itore iyo URL uye iratidze mune isingaonekwe tab. Kana mushandisi adzvanya pane chinongedzo, peji yacho inofanira kuratidzwa nekukasira. Izvi zvinobatsira kana uine chokwadi chekuti mushandisi achashanyira imwe peji uye anoda kukurumidzira kuratidzwa kwayo.

Kunyangwe (kana nekuda kwe) kushanda kwakasarudzika kweiyi tag, muna 2019 <link rel= "prerender"> isina kutsigirwa zvakanaka mumabhurawuza makuru. Ona mamwe mashoko. pasi.

nemarongerwo

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

href inonongedza kuURL yaunoda kutanga kupa kumashure.

Nguva yekushandisa

Paunenge uine chokwadi chekuti mushandisi achaenda kune imwe peji. Kana iwe uine "tunnel" kuburikidza iyo 70% yevashanyi kune peji A enda kupeji B, ipapo <link rel= "prerender"> papeji A ichabatsira kuratidza peji B nekukurumidza.

Usanyanyisa. Pre-rendering inodhura zvakanyanya maererano nebandwidth uye memory. Usashandise <link rel= "prerender"> kweanopfuura peji rimwe.

Ona zvakadzama

Optional tag. Bhurawuza haifanirwe kutevedzera rairo iyi uye inogona kuifuratira, semuenzaniso, pane inononoka yekubatanidza kana kana pasina kukwana yemahara memory.

Kuchengetedza ndangariro Chrome haiite zvizere kupauye chete preload NoState. Izvi zvinoreva kuti Chrome inotakura peji uye zvese zviwanikwa zvayo, asi haipe kana kuita JavaScript.

Firefox neSafari hazvitsigire tegi iyi zvachose. Izvi hazvityore zvakatemwa, nekuti mabhurawuza haafanirwe kutevedzera iyi rairo; asi zvichiri kusuwa. Implementation bug Firefox yakavhurwa kwemakore manomwe. Pane mishumo yekuti Safari haitsigirewo tag iyi.

Summary

Shandisa:

  • <link rel= "preload"> - kana iwe uchida sosi mumasekonzi mashoma
  • <link rel= "prefetch"> - kana iwe uchida sosi pane inotevera peji
  • <link rel= "preconnect"> - kana iwe uchiziva kuti iwe uchada sosi munguva pfupi, asi iwe hausati waziva iyo yakazara URL
  • <link rel= "dns-prefetch"> - zvakafanana, kana iwe uchiziva kuti iwe uchada sosi munguva pfupi, asi iwe hausati waziva iyo yakazara URL (yevakuru mabhurawuza)
  • <link rel= "prerender"> - kana uine chokwadi chekuti vashandisi vachaenda kune imwe peji, uye iwe unoda kukurumidza kuratidzwa kwayo

Source: www.habr.com

Voeg