ProHoster > Blog > Pulega > Mu'i uta, ave muamua ma isi pine

Mu'i uta, ave muamua ma isi pine

o loo i ai le tele o auala e faʻaleleia ai le faʻatinoga o le upega tafaʻilagi. O se tasi oi latou o le muaʻi utaina o mea o le a manaʻomia mulimuli ane. CSS mua'i fa'agaioiga, itulau atoa a'o le'i fa'aliliuina po'o le fa'ai'uga ole igoa ole igoa. Matou te faia muamua mea uma, ona faʻaalia loa lea o le taunuuga! E manaia tele.

O le mea e sili atu ona manaia o le faʻatinoina faigofie. Lima pine tu'u atu i le su'esu'e se fa'atonuga e fa'atino ai mea muamua:

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


Se'i o tatou faamatala faapuupuu atu mea latou te faia ma le taimi e faaaoga ai.

Alu i: muai faʻatulagaina · tusi muamua · mua'i feso'ota'i · dns-prefetch · mua'i tuuina atu

muai faʻatulagaina

<link rel= "preload"> ta'u atu i le masini su'esu'e e utaina ma teu se punaoa (e pei o se tusitusiga po'o se sitaili) i se taimi vave e mafai ai. E aoga lenei mea pe a manaʻomia se punaoa i ni nai sekone pe a maeʻa le utaina o le itulau - ma e te manaʻo e faʻavave le faagasologa.

E leai se mea e faia e le browser i le punaoa pe a uma ona utaina. E le fa'atinoina tusitusiga, e le fa'aogaina fo'i sitaili. O le puna'oa e na'o le teuina ma fa'aavanoa vave pe a talosagaina.

Faʻailoga

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

href faasino i le punaoa e te manaʻo e sii mai.

as e mafai ona avea ma soʻo se mea e mafai ona sii mai ile browser:

  • style mo sitaili pepa,
  • script mo tusitusiga,
  • font mo fonts,
  • fetch mo puna'oa utaina fa'aoga fetch() poʻo XMLHttpRequest,
  • va'ai le lisi atoa i luga ole MDN.

E taua le faʻamaonia o le uiga as - e fesoasoani lea i le suʻesuʻega e faʻamuamua lelei ma faʻatulagaina sauga.

O afea e faʻaaoga ai

Fa'aoga le utaina muamua pe a mana'omia le punaoa i se taimi lata mai. Faataitaiga:

  • Fonts e le masani ai mai se faila i fafo: 
    <!-- index.html -->
<link rel="stylesheet" href="index.css" />
/* index.css */
@font-face {
  src: url('comic-sans.woff2') format('woff2');
}

    e faaletonu comic-sans.woff2 o le a amata ona utaina pe a uma ona sii mai ma faʻasalalau index.css. Ina ia aloese mai le fa'atali umi, e mafai ona e la'uina muamua le vai papatisoga e fa'aaoga <link rel= "preload">:

    <link rel="preload" href="comic-sans.woff2" as="font" />
  • Afai e te tuueseeseina au sitaili e tusa ai ma le faiga CSS Mata'utia i ni vaega se lua, e taua (mo le fa'aalia vave) ma le le faitio: 
    <style>
/* Inlined critical styles */
</style>

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

    Faatasi ai ma lenei faiga, o sitaili e le faitioina o le a faatoa amata ona utaina pe a tamoʻe le JavaScript, lea e mafai ona tupu i ni nai sekone pe a uma ona faʻaalia. Nai lo le fa'atali fa'aaoga JS <link rel= "preload">e amata la'uina muamua:

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

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

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

Aua le soona faaaoga muamua le uta. Afai e te utaina mea uma i se laina, o le a le faʻavavevave le saite; i se isi itu, o le a taofia ai le masini mai le fuafuaina lelei o ana galuega.

Aua ne'i fenumia'i ma mua'i aumai. Aua le faaaogaina <link rel= "preload">, pe afai e te le manaʻomia le punaoa i le taimi lava e uma ai le utaina o le itulau. Afai e te manaʻomia mulimuli ane, mo se faʻataʻitaʻiga mo le isi itulau, ona faʻaaoga lea <link rel= "prefetch">.

Vaʻai faʻamatalaga

Ole pine lea e mana'omia e fa'atino e le su'esu'e (pe a lagolagoina), e le pei o isi fa'ailoga uma e feso'ota'i ma le mua'i utaina. E tatau i le su'esu'e ona la'u maia le puna'oa ua fa'ailoa mai i totonu <link rel="preload">. I isi tulaga e ono le amana'ia le mua'i utaina, mo se fa'ata'ita'iga pe afai o lo'o fa'agasolo i se feso'ota'iga lemu.

Fa'amuamua. E masani lava ona tu'uina atu e tagata su'esu'e mea e ave i ai le faamuamua i punaoa eseese (siili, tusitusiga, fonuka, ma isi) ina ia mafai ai ona uta muamua punaoa sili ona taua. I lenei tulaga, e fuafua e le browser le faamuamua i uiga as. Mo Chrome browser e mafai ona e vaʻai i ai laulau fa'amuamua atoa.

Mu'i uta, ave muamua ma isi pine

tusi muamua

<link rel= "prefetch"> e fai atu i le masini su'esu'e e la'u mai ma teu se punaoa (e pei o se tusitusiga po'o se pepa sitaili) i tua. O le utaina e tupu i lalo o le fa'amuamua ina ia le fa'alavelave i punaoa sili atu ona taua. E aoga lenei mea pe afai e manaʻomia le punaoa i le isi itulau ma e te manaʻo e teu muamua.

O iinei foi, e leai se mea e faia e le browser i le punaoa pe a uma ona utaina. E le fa'atinoina tusitusiga, e le fa'aogaina fo'i sitaili. O le puna'oa e na'o le teuina ma fa'aavanoa vave pe a talosagaina.

Faʻailoga

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

href faasino i le punaoa e te manaʻo e sii mai.

as e mafai ona avea ma soʻo se mea e mafai ona sii mai ile browser:

  • style mo sitaili pepa,
  • script mo tusitusiga,
  • font mo fonts,
  • fetch mo puna'oa utaina fa'aoga fetch() poʻo XMLHttpRequest,
  • va'ai le lisi atoa i luga ole MDN.

E taua le faʻamaonia o le uiga as - e fesoasoani lea i le su'esu'ega e sa'o le fa'amuamua ma fa'atulaga le sauga.

O afea e faʻaaoga ai

Ina ia uta punaoa mai isi itulau, pe afai e te manaʻomia se punaoa mai se isi itulau, ma e te manaʻo e faʻapipiʻi muamua e faʻavave ai le faʻaliliuina o lena itulau. Faataitaiga:

  • E iai sau faleoloa i luga ole laiga, ma 40% o tagata faʻaoga e tuʻua le itulau autu mo le itulau o oloa. Fa'aoga <link rel= "prefetch">, utaina o faila CSS ma JS e tu'u ai itulau o oloa.
  • E i ai sau talosaga itulau e tasi, ma itulau eseese e utaina afifi eseese. A asiasi se tagata fa'aoga i se itulau, o afifi mo itulau uma e feso'ota'i i ai e mafai ona fa'apipi'iina muamua.

E foliga mai o lenei pine e mafai ona faʻaoga saogalemu i soʻo se itu.. E masani ona fa'atulaga e su'esu'e le mua'i fa'atau ma le fa'amuamua pito i lalo, ina ia le fa'alavelave ai se isi. Tau lava ia manatua o loʻo faʻaaogaina fefaʻatauaiga a tagata, lea e mafai ona tau ai tupe.

E le mo ni talosaga faanatinati. Aua le faaaogaina <link rel= "prefetch">, pe a manaʻomia le punaoa i ni nai sekone. I lenei tulaga, faʻaaoga <link rel= "preload">.

Vaʻai faʻamatalaga

Fa'ailoga filifiliga. E le manaʻomia le suʻesuʻega e mulimuli i lenei faʻatonuga; atonu e le amanaiaina, mo se faʻataʻitaʻiga, i luga o se fesoʻotaʻiga lemu.

Fa'amuamua ile Chrome. I Chrome <link rel= "prefetch"> e masani ona fa'atinoina i lalo o le fa'amuamua (va'ai laulau fa'amuamua atoa), o lona uiga, pe a uma ona utaina mea uma.

mua'i feso'ota'i

<link rel= "preconnect"> fai atu i le su'esu'e e fa'afeso'ota'i i le vaega muamua pe a e mana'o e fa'avave le fa'atulagaina o feso'ota'iga i le lumana'i.

E tatau i le su'esu'e ona fa'atuina se feso'ota'iga pe a toe maua mai so'o se punaoa mai se vaega fou lona tolu. Mo se faʻataʻitaʻiga, afai e utaina Google Fonts, React fonts mai se CDN, pe talosagaina se tali JSON mai se API server.

O le fa'atuina o se feso'ota'iga fou e masani ona mana'omia ni nai selau milliseconds. E tasi ona fai, ae e alu lava le taimi. Afai na e faʻatuina muamua se fesoʻotaʻiga, e te faʻasaoina le taimi ma faʻapipiʻi vave punaoa mai lenei vaega.

Faʻailoga

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

href o lo'o fa'ailoa mai ai le igoa ole igoa e te mana'o e fa'ailoa ai le tuatusi IP. E mafai ona faʻamaonia i se prefix (https://domain.com) pe leai (//domain.com).

O afea e faʻaaoga ai

Fa'aoga mo vaega o le a mana'omia lata mai e sii mai ai se sitaili taua, tusitusiga poʻo se ata mai iina, ae e te leʻi iloa le URL punaoa. Faataitaiga:

  • O lo'o talimalo lau talosaga ile my-app.com ma faia talosaga AJAX i api.my-app.com: E te le iloa muamua fesili faʻapitoa aua e faia faʻamalosi mai le JS. O iinei e fetaui lelei le faʻaogaina o se pine e faʻafesoʻotaʻi muamua i le vaega.
  • O lo'o talimalo lau talosaga ile my-app.com ma fa'aoga Google Fonts. E lua la'asaga e la'u mai ai: muamua, e sii mai le faila CSS mai le vaega fonts.googleapis.com, ona talosagaina lea e lenei faila fonuka ma fonts.gstatic.com. E te le iloa po'o fea faila mata'itusi patino e sau mai ai fonts.gstatic.com e te manaʻomia seʻia e utaina le faila CSS, o lea e mafai ai ona matou faia muamua se fesoʻotaʻiga muamua.

Fa'aoga le pine lea e fa'avave ai nisi fa'amatalaga a isi vaega po'o sitaili teisi ona o le sootaga muamua.

Aua le soona faaaogaina. O le fa'atuina ma le fa'atumauina o se feso'ota'iga ose fa'agaioiga taugata mo le kalani ma le 'au'aunaga. Fa'aoga le pine lea mo le maualuga ole 4-6 domains.

Vaʻai faʻamatalaga

Fa'ailoga filifiliga. E le manaʻomia le suʻesuʻega e mulimuli i lenei faʻatonuga ma e ono le amanaʻia, mo se faʻataʻitaʻiga, pe a tele fesoʻotaʻiga ua uma ona faʻatuina pe i se isi tulaga.

O le a le mea e aofia ai le fa'agasologa o feso'ota'iga?. Ina ia faʻafesoʻotaʻi i nofoaga taʻitasi, e tatau i le browser ona faia mea nei:

  • DNS iugafono. Su'e tuatusi IP server (216.58.215.78) mo le igoa fa'apitoa (google.com).
  • TCP lululima. Fa'afesuia'i pepa (client → server → client) e amata ai se feso'ota'iga TCP ma le server.
  • TLS lulu lima (na'o nofoaga HTTPS). E lua ta'amilosaga o le fa'afesuiaiga o pepa (client → server → client → server → client) e amata ai se sauniga TLS malupuipuia.

Fa'aaliga: HTTP/3 o le a fa'aleleia ma fa'avavevave le faiga o le lululima, ae o lo'o mamao lava.

dns-prefetch

<link rel= "dns-prefetch"> fai atu i le su'esu'e e fa'atino le DNS resolution mo le domain i luma atu pe afai o le a e fa'afeso'ota'i vave ma mana'o e fa'avave le ulua'i feso'ota'iga.

E tatau i le su'esu'e ona fa'amautu le tuatusi IP a le vaega pe a maua mai so'o se punaoa mai se vaega fou lona tolu. Mo se faʻataʻitaʻiga, faʻapipiʻiina o Google Fonts, React fonts mai se CDN, poʻo le talosagaina o se tali JSON mai se API server.

Mo vaega fou ta'itasi, e masani ona ave le fa'amaumauga a DNS ile 20-120 ms. E na'o le a'afia ai o le utaina o le puna'oa muamua mai se vaega ua tu'uina atu, ae o lo'o fa'aalia pea le tuai. Afai tatou te faia le DNS resolution i luma atu, o le a tatou sefe le taimi ma uta vave le punaoa.

Faʻailoga

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

href o lo'o fa'aalia ai le igoa ole igoa e te mana'o e tu'u ai le tuatusi IP. E mafai ona faʻamaonia i se prefix (https://domain.com) pe leai (//domain.com).

O afea e faʻaaoga ai

Fa'aoga mo vaega o le a mana'omia lata mai e sii mai ai punaoa mai iina e le o iloa muamua e le browser. Faataitaiga:

  • O lo'o talimalo lau talosaga ile my-app.com ma faia talosaga AJAX i api.my-app.com: E te le iloa muamua fesili faʻapitoa aua e faia faʻamalosi mai le JS. O iinei e fetaui lelei le faʻaogaina o se pine e faʻafesoʻotaʻi muamua i le vaega.
  • O lo'o talimalo lau talosaga ile my-app.com, ma fa'aoga Google Fonts. E lua la'asaga e la'u mai ai: muamua, e sii mai le faila CSS mai le vaega fonts.googleapis.com, ona talosagaina lea e lenei faila fonuka ma fonts.gstatic.com. E te le iloa po'o fea faila mata'itusi patino e sau mai ai fonts.gstatic.com o le a e manaʻomia seʻia e utaina le faila CSS, o lea e mafai ai ona matou faia muamua se fesoʻotaʻiga muamua.

Fa'aoga le pine lea e fa'avave ai nisi fa'amatalaga a isi vaega po'o sitaili teisi ona o le sootaga muamua.

Faamolemole ia matau uiga tutusa i <link rel= "dns-prefetch"/> и <link rel= "preconnect">. E masani lava e le talafeagai le faʻaogaina faʻatasi mo le tasi vaega: <link rel= "preconnect"> ua uma ona aofia ai <link rel= "dns-prefetch"/> ma le tele o isi mea. E mafai ona faʻamaonia lenei mea i tulaga e lua:

  • E te mana'o e lagolagoina su'esu'ega tuai?. <link rel= "dns-prefetch" /> lagolagoina e talu mai le IE10 ma Safari 5. <link rel= "preconnect"> sa lagolagoina mo sina taimi i Chrome ma Firefox, ae na o le faaopoopo i Safari i le 11.1 ma e le'i lagolagoina lava ile IE/Edge. Afai e te manaʻomia le lagolagoina o nei suʻesuʻega, faʻaaoga <link rel= "dns-prefetch" /> e fai ma filifiliga faaleoleo mo <link rel= "preconnect">.
  • E te manaʻo e faʻavaveina fesoʻotaʻiga i le sili atu i le 4-6 domains. Tag <link rel= "preconnect"> E le fautuaina le faʻaaogaina ma le sili atu i le 4-6 domains, talu ai o le faʻavaeina ma le faʻamautuina o se fesoʻotaʻiga o se gaioiga taugata. <link rel= "dns-prefetch" /> fa'aitiitiina punaoa, fa'aaoga pe a mana'omia.

Vaʻai faʻamatalaga

Fa'ailoga filifiliga. E le manaʻomia le suʻesuʻega e mulimuli i lenei faʻatonuga, o lea atonu e le faia ai le DNS resolution, mo se faʻataʻitaʻiga, pe afai e tele na pine i luga o le itulau poʻo se isi tulaga.

O le a le DNS. O 'auʻaunaga taʻitasi i luga ole Initaneti e iai se tuatusi IP tulaga ese, e foliga mai 216.58.215.78. O le igoa o le saite e masani ona tuʻuina i totonu o le tuatusi pa o le browser (mo se faʻataʻitaʻiga, google.com), ma DNS (Domain Name System) e fetaui ma le tuatusi IP a le server (216.58.215.78).

Ina ia iloa se tuatusi IP, e tatau i le browser ona fesiligia le DNS server. E mana'omia le 20−120 ms pe a fa'afeso'ota'i i se vaega fou lona tolu.

DNS o lo'o natia, e ui lava e le fa'atuatuaina tele. O nisi OSes ma tagata su'esu'e e teu ai fesili DNS: o le a sefe ai le taimi i fesili faifaipea, ae e le mafai ona fa'alagolago i ai. I luga ole Linux e masani lava e le aoga. Chrome e iai le DNS cache, ae na'o le minute e alu ai. E natia e Windows tali DNS mo aso e lima.

mua'i tuuina atu

<link rel= "prerender"> fai atu i le su'esu'e e la'u mai le URL ma fa'aali i se fa'ailoga e le vaaia. A kiliki le tagata faʻaoga i luga o le soʻotaga, e tatau ona faʻaalia vave le itulau. E aoga lenei mea pe afai e te mautinoa o le a asiasi le tagata faʻaoga i se itulau patino ma manaʻo e faʻavave lona faʻaaliga.

E ui lava (pe ona o) le aoga tulaga ese o lenei pine, i le 2019 <link rel= "prerender"> le lelei ona lagolagoina i su'esu'ega tetele. Va'ai nisi fa'amatalaga. lalo.

Faʻailoga

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

href fa'asino i le URL e te mana'o e amata fa'aali i tua.

O afea e faʻaaoga ai

A e mautinoa lelei o le a alu le tagata faʻaoga i se itulau patino. Afai ei ai sau "tunnel" lea e 70% o tagata asiasi ile itulau A alu ile itulau B, ona <link rel= "prerender"> i le itulau A o le a fesoasoani e fa'aali vave le itulau B.

Aua le soona faaaogaina. O le mua'i fa'aliliuga e matua'i taugata lava i tulaga o le bandwidth ma le manatua. Aua le faaaogaina <link rel= "prerender"> mo le sili atu ma le tasi le itulau.

Vaʻai faʻamatalaga

Fa'ailoga filifiliga. E le manaʻomia le suʻesuʻega e mulimuli i lenei faʻatonuga ma e ono le amanaiaina, mo se faʻataʻitaʻiga, i luga o se fesoʻotaʻiga lemu poʻo pe a le lava le manatua saoloto.

Ina ia faasaoina manatua E le faia e Chrome se fa'aaliga atoatoama na'o mua'i uta NoState. O lona uiga e utaina e Chrome le itulau ma ana punaoa uma, ae e le faʻaalia pe faʻatino le JavaScript.

E le lagolagoina e Firefox ma Safari lenei pine. E le solia e lenei mea le faʻamatalaga, talu ai e le manaʻomia tagata suʻesuʻe e mulimuli i lenei faʻatonuga; ae faanoanoa lava. Fa'atinoga bug Firefox ua tatala mo le fitu tausaga. E i ai lipoti o Safari e le lagolagoina foi lenei pine.

Aotelega

Fa'aaogā:

  • <link rel= "preload"> - pe a e manaʻomia se punaoa i ni nai sekone
  • <link rel= "prefetch"> - pe a e manaʻomia le punaoa i le isi itulau
  • <link rel= "preconnect"> - pe a e iloa o le a vave ona e manaʻomia se punaoa, ae e te leʻi iloa lona URL atoa
  • <link rel= "dns-prefetch"> - fa'apena fo'i, pe a e iloa o le a e mana'omia vave se punaoa, ae e te le'i iloa lona URL atoa (mo su'esu'ega tuai)
  • <link rel= "prerender"> - pe a e mautinoa o le a alu tagata faʻaoga i se itulau patino, ma e te manaʻo e faʻavave lona faʻaaliga

puna: www.habr.com

Faaopoopo i ai se faamatalaga