ProHoster > Blog > fitantanan-draharaha > Preload, prefetch ary marika hafa

Preload, prefetch ary marika hafa

Misy fomba maro hanatsarana ny fahombiazan'ny tranonkala. Ny iray amin'izy ireo dia ny fampidirana votoaty mialoha izay ilaina any aoriana. Fanodinana mialoha ny CSS, famoahana pejy feno na famahana ny anaran-tsehatra. Manao ny zava-drehetra mialoha izahay, ary avy eo dia asehoy ny vokatra! Toa mahafinaritra.

Ny tena mahafinaritra kokoa dia ny fampiharana azy io. Tag dimy omeo baiko ny navigateur hanao hetsika mialoha:

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


Andeha hohazavaina fohifohy ny ataony sy ny fotoana hampiasana azy.

Hanketo: preload · prefetch · mifandray mialoha · dns-prefetch · mialoha

preload

<link rel= "preload"> dia milaza amin'ny mpitety tranonkala mba hameno sy hitehirizana loharano (toy ny script na stylesheet) faran'izay haingana. Tena ilaina izany rehefa ilaina ny loharano iray segondra vitsy aorian'ny fampidirana ny pejy - ary tianao ny hanafaingana ny dingana.

Ny navigateur dia tsy manao na inona na inona amin'ny loharanon-karena aorian'ny fandefasana. Tsy vita ny script, tsy ampiharina ny takelaka style. Ny loharano dia voatahiry tsotra izao ary azo alaina avy hatrany rehefa misy fangatahana.

Syntaxe

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

href manondro ny loharano tianao alaina.

as dia mety ho na inona na inona azo alaina ao amin'ny navigateur:

  • style ho an'ny style sheets,
  • script ho an'ny script,
  • font ho an'ny endritsoratra,
  • fetch ho an'ny loharano ampiasaina fetch() na XMLHttpRequest,
  • jereo ny lisitra feno amin'ny MDN.

Zava-dehibe ny mamaritra ny toetra as - manampy ny mpitety tranonkala hanao laharam-pahamehana araka ny tokony ho izy sy handamina ny fampidinana izany.

Rahoviana no ampiasaina

Mampiasà fametahana mialoha rehefa ilaina ny loharanon-karena ato ho ato. Ohatra:

  • endritsoratra tsy manara-penitra avy amin'ny rakitra ivelany: 
    <!-- index.html -->
<link rel="stylesheet" href="index.css" />
/* index.css */
@font-face {
  src: url('comic-sans.woff2') format('woff2');
}

    amin'ny alalan'ny toerana misy anao comic-sans.woff2 dia hanomboka hampiditra raha tsy aorian'ny fampidinana sy famafazana index.css. Mba hialana amin'ny fiandrasana ela dia azonao atao ny misintona ny endri-tsoratra aloha amin'ny fampiasana <link rel= "preload">:

    <link rel="preload" href="comic-sans.woff2" as="font" />
  • Raha manasaraka ny fomba fanaonao araka ny fomba fiasa ianao CSS mitsikera ho fizarana roa, mitsikera (ho an'ny famoahana avy hatrany) sy tsy mitsikera: 
    <style>
/* Inlined critical styles */
</style>

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

    Miaraka amin'io fomba fiasa io, ny fomba tsy mitsikera dia hanomboka hampiditra rehefa mandeha ny JavaScript, izay mety hitranga segondra vitsy aorian'ny famoahana. Raha tokony hiandry ny fampiasana JS <link rel= "preload">hanombohana misintona aloha kokoa:

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

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

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

Aza mampiasa be loatra ny preloading. Raha mameno ny zava-drehetra misesy ianao, dia tsy hanafaingana amin'ny fomba mahagaga ny tranokala; ny mifanohitra amin'izany, dia hanakana ny navigateur tsy hanomana ny asany araka ny tokony ho izy.

Aza afangaro amin'ny prefetching. Aza mampiasa <link rel= "preload">, raha tsy mila ny loharano avy hatrany ianao aorian'ny famenoana ny pejy. Raha mila izany ianao any aoriana, ohatra amin'ny pejy manaraka, dia ampiasao <link rel= "prefetch">.

Hizaha antsipiriany

Ity dia tenifototra ilaina hovonoin'ny navigateur (raha manohana azy io), tsy toy ny marika hafa rehetra mifandraika amin'ny preloading. Ny navigateur dia tsy maintsy misintona ny loharano voalaza ao <link rel="preload">. Amin'ny toe-javatra hafa dia mety tsy hiraharaha ny preloading, ohatra, raha mandeha amin'ny fifandraisana miadana.

ZAVA-DEHIBE INDRINDRA. Matetika ny navigateur dia manome laharam-pahamehana samihafa amin'ny loharano samihafa (fomba, script, endritsoratra, sns.) mba hampidirana ireo loharano manan-danja indrindra aloha. Amin'ity tranga ity, ny navigateur dia mamaritra ny laharam-pahamehana amin'ny toetra as. Ho an'ny navigateur Chrome azonao jerena latabatra laharam-pahamehana feno.

Preload, prefetch ary marika hafa

prefetch

<link rel= "prefetch"> mangataka amin'ny mpitety tranonkala mba hisintona sy hametaka loharano iray (toy ny script na style sheet) ao ambadika. Ny fametahana dia atao amin'ny laharam-pahamehana ambany ka tsy hanelingelina ireo loharano lehibe kokoa. Tena ilaina izany raha ilaina amin'ny pejy manaraka ny loharano ary te-hitahiry azy mialoha ianao.

Eto koa, ny navigateur dia tsy manao na inona na inona amin'ny loharanon-karena aorian'ny fandefasana. Tsy vita ny script, tsy ampiharina ny takelaka style. Ny loharano dia voatahiry tsotra izao ary azo alaina avy hatrany rehefa misy fangatahana.

Syntaxe

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

href manondro ny loharano tianao alaina.

as dia mety ho na inona na inona azo alaina ao amin'ny navigateur:

  • style ho an'ny style sheets,
  • script ho an'ny script,
  • font ho an'ny endritsoratra,
  • fetch ho an'ny loharano ampiasaina fetch() na XMLHttpRequest,
  • jereo ny lisitra feno amin'ny MDN.

Zava-dehibe ny mamaritra ny toetra as - izany dia manampy ny navigateur ho laharam-pahamehana sy handamina ny fampidinana.

Rahoviana no ampiasaina

Hampiakatra loharano avy amin'ny pejy hafa, raha mila loharanon-karena avy amin'ny pejy hafa ianao, ary te-hampiditra azy mialoha mba hanafainganana ny famoahana an'io pejy io. Ohatra:

  • Manana fivarotana an-tserasera ianao, ary ny 40% amin'ny mpampiasa dia miala amin'ny pejy fandraisana ny pejy vokatra. Ampiasao <link rel= "prefetch">, mametaka rakitra CSS sy JS mba hamoahana pejin'ny vokatra.
  • Manana fampiharana pejy tokana ianao, ary pejy samihafa dia mitondra fonosana samihafa. Rehefa mitsidika pejy iray ny mpampiasa iray dia azo alaina mialoha ny fonosana ho an'ny pejy rehetra mifandray aminy.

Azo inoana fa ity marika ity dia azo ampiasaina amin'ny lafiny rehetra.. Matetika ny navigateur dia manomana mialoha amin'ny laharam-pahamehana ambany indrindra, ka tsy manelingelina na iza na iza izany. Ataovy ao an-tsaina fotsiny fa mandany ny fifamoivoizana mpampiasa, izay mety handany vola.

Tsy noho ny fangatahana maika. Aza mampiasa <link rel= "prefetch">, rehefa ilaina ao anatin'ny segondra vitsy ny loharano. Amin'ity tranga ity, ampiasao <link rel= "preload">.

Hizaha antsipiriany

Tags azo atao. Ny navigateur dia tsy voatery hanaraka ity torolàlana ity; mety tsy hiraharaha izany izy, ohatra, amin'ny fifandraisana miadana.

Laharam-pahamehana amin'ny Chrome. Ao amin'ny Chrome <link rel= "prefetch"> matetika atao amin'ny laharam-pahamehana kely indrindra (jereo latabatra laharam-pahamehana feno), izany hoe aorian'ny fametrahana ny zavatra hafa rehetra.

mifandray mialoha

<link rel= "preconnect"> mangataka ny mpitety tranonkala hifandray mialoha amin'ny sehatra raha te hanafaingana ny fananganana fifandraisana amin'ny ho avy ianao.

Ny navigateur dia tsy maintsy mametraka fifandraisana raha toa ka maka loharanon-karena avy amin'ny sehatra antoko fahatelo vaovao. Ohatra, raha mampiditra Google Fonts, React endri-tsoratra avy amin'ny CDN, na mangataka valiny JSON avy amin'ny mpizara API.

Ny fametrahana fifandraisana vaovao matetika dia mila zato milliseconds vitsivitsy. Atao indray mandeha, nefa mbola mila fotoana. Raha efa nametraka fifandraisana mialoha ianao dia hamonjy fotoana sy hisintona loharanon-karena avy amin'ity sehatra ity haingana kokoa.

Syntaxe

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

href manondro ny anaran-tsehatra tianao hamaritana ny adiresy IP. Azo faritana amin'ny prefix (https://domain.com) na tsy misy azy (//domain.com).

Rahoviana no ampiasaina

Ampiasao ho an'ny sehatra izay ilaina tsy ho ela mba hisintona fomba, script na sary manan-danja avy any, fa tsy mbola fantatrao ny URL loharano. Ohatra:

  • Nampiantranoina ny fampiharana anao my-app.com ary manao AJAX fangatahana api.my-app.com: Tsy fantatrao mialoha ireo fanontaniana manokana satria natao dynamique avy amin'ny JS izy ireo. Eto dia mety tsara ny mampiasa marika mba hifandraisana mialoha amin'ny sehatra.
  • Nampiantranoina ny fampiharana anao my-app.com ary mampiasa Google Fonts. Amin'ny dingana roa izy ireo no alaina: voalohany, alaina avy amin'ny sehatra ny rakitra CSS fonts.googleapis.com, dia mangataka endri-tsoratra miaraka amin'ny fonts.gstatic.com. Tsy azonao fantarina hoe avy amin'ny inona ny rakitra endri-tsoratra manokana fonts.gstatic.com ilainao mandra-pametraka ny rakitra CSS, ka tsy afaka manao fifandraisana mialoha fotsiny izahay.

Ampiasao ity tenifototra ity mba hanafaingana kely ny sora-baventy na ny fomba fiasa noho ny fifandraisana efa napetraka.

Aza mampiasa be loatra. Ny fametrahana sy fikojakojana fifandraisana dia asa lafo ho an'ny mpanjifa sy ny mpizara. Ampiasao ity marika ity ho an'ny sehatra 4-6 ambony indrindra.

Hizaha antsipiriany

Tags azo atao. Ny navigateur dia tsy voatery hanaraka ity torolàlana ity ary mety tsy hiraharaha izany, ohatra, raha maro ny fifandraisana efa napetraka na amin'ny tranga hafa.

Inona no tafiditra amin'ny fizotran'ny fifandraisana?. Mba hifandraisana amin'ny tranokala tsirairay dia tsy maintsy manao izao manaraka izao ny navigateur:

  • DNS resolution. Mitadiava adiresy IP mpizara (216.58.215.78) ho an'ny anaran-tsehatra voafaritra (google.com).
  • TCP tanana. Fifanakalozana fonosana (mpanjifa → mpizara → mpanjifa) hanombohana fifandraisana TCP amin'ny mpizara.
  • Fifandraisana TLS (tranonkala HTTPS ihany). Fifanakalozana fonosana roa (client → server → client → server → client) hanombohana fivoriana TLS azo antoka.

Fanamarihana: Ny HTTP/3 dia hanatsara sy hanafaingana ny mekanika fifampikasihan-tanana, saingy mbola lavitra izany.

dns-prefetch

<link rel= "dns-prefetch"> mangataka amin'ny mpitety tranonkala hanao famahana DNS ho an'ny sehatra mialoha raha toa ka hifandray aminy tsy ho ela ianao ary te hanafaingana ny fifandraisana voalohany.

Ny navigateur dia tsy maintsy mamaritra ny adiresy IP an'ny sehatra raha toa ka haka loharanon-karena avy amin'ny sehatra an'ny antoko fahatelo vaovao. Ohatra, mametaka Google Fonts, React endri-tsoratra avy amin'ny CDN, na mangataka valiny JSON amin'ny mpizara API.

Ho an'ny sehatra vaovao tsirairay, ny famahana ny firaketana DNS dia mila 20-120 ms eo ho eo. Izany dia misy fiantraikany amin'ny fampidinana ny loharano voalohany avy amin'ny sehatra iray ihany, saingy mbola miteraka fahatarana ihany. Raha manao famahana DNS mialoha isika, dia hamonjy fotoana ary hampiditra haingana kokoa ny loharano.

Syntaxe

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

href manondro ny anaran-tsehatra tianao hapetraka ny adiresy IP. Azo faritana amin'ny prefix (https://domain.com) na tsy misy azy (//domain.com).

Rahoviana no ampiasaina

Ampiasao ho an'ny sehatra izay ilaina tsy ho ela mba hisintona loharano avy any izay tsy fantatry ny navigateur mialoha. Ohatra:

  • Nampiantranoina ny fampiharana anao my-app.com ary manao AJAX fangatahana api.my-app.com: Tsy fantatrao mialoha ireo fanontaniana manokana satria natao dynamique avy amin'ny JS izy ireo. Eto dia mety tsara ny mampiasa marika mba hifandraisana mialoha amin'ny sehatra.
  • Nampiantranoina ny fampiharana anao my-app.com, ary mampiasa Google Fonts. Amin'ny dingana roa izy ireo no alaina: voalohany, alaina avy amin'ny sehatra ny rakitra CSS fonts.googleapis.com, dia mangataka endri-tsoratra miaraka amin'ny fonts.gstatic.com. Tsy azonao fantarina hoe avy amin'ny inona ny rakitra endri-tsoratra manokana fonts.gstatic.com mila izany ianao mandra-pametraka ny rakitra CSS, ka tsy afaka manao fifandraisana mialoha fotsiny izahay.

Ampiasao ity tenifototra ity mba hanafaingana kely ny sora-baventy na ny fomba fiasa noho ny fifandraisana efa napetraka.

Mariho ny toetra mitovy amin'ny <link rel= "dns-prefetch"/> и <link rel= "preconnect">. Matetika tsy misy dikany ny fampiasana azy ireo miaraka amin'ny sehatra iray: <link rel= "preconnect"> efa ahitana <link rel= "dns-prefetch"/> sy ny maro hafa. Izany dia azo hamarinina amin'ny tranga roa:

  • Te hanohana mpitety tranonkala taloha ve ianao?. <link rel= "dns-prefetch" /> tohanan'ny hatramin'ny IE10 sy Safari 5. <link rel= "preconnect"> dia notohanana nandritra ny fotoana kelikely tao amin'ny Chrome sy Firefox, saingy nampidirina tamin'ny Safari tamin'ny 11.1 sy mbola tsy tohanana amin'ny IE/Edge. Raha mila manohana ireo navigateur ireo ianao dia ampiasao <link rel= "dns-prefetch" /> ho safidy backup ho an'ny <link rel= "preconnect">.
  • Te hanafaingana ny fifandraisana amin'ny sehatra mihoatra ny 4-6 ianao. tenifototra <link rel= "preconnect"> Tsy soso-kevitra ny hampiasa amin'ny sehatra mihoatra ny 4-6, satria ny fametrahana sy fitazonana fifandraisana dia asa lafo. <link rel= "dns-prefetch" /> mandany vola kely kokoa, koa ampiasao izany raha ilaina.

Hizaha antsipiriany

Tags azo atao. Tsy voatery hanaraka an'io torolalana io ny navigateur, ka mety tsy hanao famahana DNS izy, ohatra, raha misy marika maro toy izany ao amin'ny pejy na amin'ny tranga hafa.

Inona no atao hoe DNS. Ny mpizara tsirairay amin'ny Internet dia manana adiresy IP tokana, izay toa 216.58.215.78. Ny anaran'ny tranokala dia matetika ampidirina ao amin'ny adiresin'ny navigateur (ohatra, google.com), ary ny server DNS (Domain Name System) dia mifanandrify amin'ny adiresy IP an'ny mpizara (216.58.215.78).

Mba hamaritana adiresy IP dia tsy maintsy manontany ny mpizara DNS ny navigateur. Mitaky 20−120 ms izany rehefa mifandray amin'ny sehatra iray vaovao.

Ny DNS dia voatahiry, na dia tsy azo antoka loatra aza. Ny OS sy ny navigateur sasany dia mitahiry ny fangatahana DNS: izany dia hamonjy fotoana amin'ny fanontaniana miverimberina, saingy tsy azo ianteherana ny caching. Amin'ny Linux dia matetika tsy mandeha mihitsy. Chrome dia manana cache DNS, saingy maharitra iray minitra fotsiny izany. Ny Windows dia mitahiry valiny DNS mandritra ny dimy andro.

mialoha

<link rel= "prerender"> mangataka ny mpitety tranonkala mba haka ny URL ary hampiseho izany amin'ny tabilao tsy hita maso. Rehefa manindry ny rohy ny mpampiasa dia tokony haseho avy hatrany ny pejy. Tena ilaina izany raha azonao antoka fa hitsidika pejy iray ny mpampiasa ary te hanafaingana ny fampisehoana azy.

Na eo aza (na noho ny) ny fahombiazan'ity marika ity, tamin'ny taona 2019 <link rel= "prerender"> tsy tohanana amin'ny navigateur lehibe. Jereo ny antsipiriany bebe kokoa. ambany.

Syntaxe

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

href manondro ny URL tianao hatomboka ao ambadika.

Rahoviana no ampiasaina

Rehefa tena azonao antoka fa handeha amin'ny pejy iray ny mpampiasa. Raha manana "tunnel" ianao izay ahafahan'ny 70% amin'ny mpitsidika mankany amin'ny pejy A mankany amin'ny pejy B, dia <link rel= "prerender"> amin'ny pejy A dia hanampy amin'ny fampisehoana haingana ny pejy B.

Aza mampiasa be loatra. Tena lafo tokoa ny fandefasana mialoha amin'ny resaka bandwidth sy fahatsiarovana. Aza mampiasa <link rel= "prerender"> ho an'ny pejy mihoatra ny iray.

Hizaha antsipiriany

Tags azo atao. Ny navigateur dia tsy voatery hanaraka ity torolàlana ity ary mety tsy hiraharaha izany, ohatra, amin'ny fifandraisana miadana na rehefa tsy ampy ny fahatsiarovana maimaim-poana.

Mba hamonjy fahatsiarovana Tsy manao famandrihana feno ny Chromeary preload NoState ihany. Midika izany fa mameno ny pejy sy ny loharanony rehetra i Chrome, saingy tsy mamadika na manatanteraka JavaScript.

Tsy manohana an'io marika io mihitsy ny Firefox sy Safari. Tsy manitsakitsaka ny famaritana izany, satria tsy voatery hanaraka an'io torolàlana io ny navigateur; nefa mbola mampalahelo ihany. Bug fampiharana Nisokatra nandritra ny fito taona ny Firefox. Misy tatitra fa Safari tsy manohana io tag io koa.

famintinana

Ampiasao:

  • <link rel= "preload"> - rehefa mila loharano ianao ao anatin'ny segondra vitsy
  • <link rel= "prefetch"> - rehefa mila ny loharano ianao amin'ny pejy manaraka
  • <link rel= "preconnect"> - rehefa fantatrao fa mila loharano tsy ho ela ianao, nefa tsy mbola fantatrao ny URL feno
  • <link rel= "dns-prefetch"> - torak'izany koa, rehefa fantatrao fa mila loharano tsy ho ela ianao, saingy tsy mbola fantatrao ny URL-ny feno (ho an'ny navigateur taloha)
  • <link rel= "prerender"> - rehefa azonao antoka fa handeha amin'ny pejy iray ny mpampiasa, ary te hanafaingana ny fampisehoana azy ianao

Source: www.habr.com

Add a comment