Pulogalamu ya ProHoster > Blog > Ulamuliro > Lowetsanitu, kutengeratu ndi ma tag ena

Lowetsanitu, kutengeratu ndi ma tag ena

pali njira zambiri zowonjezeretsa magwiridwe antchito a intaneti. Chimodzi mwa izo ndikutsitsa zomwe zidzafunike mtsogolo. CSS pre-processing, tsamba lonse la pre-rendering kapena domain name resolution. Timachita zonse pasadakhale, kenako ndikuwonetsa zotsatira zake nthawi yomweyo! Zikumveka bwino.

Chomwe chimakhala chozizira kwambiri ndikuti chimakhazikitsidwa mosavuta. Ma tag asanu patsani msakatuli lamulo kuti achite zoyambira:

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


Tiyeni tifotokoze mwachidule zomwe amachita komanso nthawi yoti azigwiritsa ntchito.

Pitani ku: kutsitsatu Β· chiganizo Β· kulumikizana Β· dns-prefetch Β· prerender

kutsitsatu

<link rel= "preload"> imauza msakatuli kuti atsegule ndikusunga gwero (monga script kapena masitayelo) posachedwa. Izi ndizothandiza ngati chothandizira chikufunika masekondi angapo tsambalo litatsitsidwa - ndipo mukufuna kufulumizitsa ntchitoyi.

Msakatuli sachita chilichonse ndi gwero pambuyo potsitsa. Zolemba sizimachitidwa, mapepala amtundu samayikidwa. Zothandizira zimangosungidwa ndikuperekedwa nthawi yomweyo mukapempha.

malembedwe

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

href amalozera kuzinthu zomwe mukufuna kutsitsa.

as ikhoza kukhala chilichonse chomwe chingatsitsidwe mu msakatuli:

  • style za style sheets,
  • script za scripts,
  • font kwa mafonti,
  • fetch kwa zida zodzaza ntchito fetch() kapena XMLHttpRequest,
  • onani mndandanda wonse pa MDN.

Ndikofunikira kufotokoza tanthauzo lake as - izi zimathandiza msakatuli kuti aziyika patsogolo bwino ndikukonza zotsitsa.

Ntchito

Gwiritsirani ntchito kulongedza zinthuzo ngati pakufunika kutero posachedwa. Mwachitsanzo:

  • Mafonti osakhazikika kuchokera pafayilo yakunja: 
    <!-- index.html -->
<link rel="stylesheet" href="index.css" />
/* index.css */
@font-face {
  src: url('comic-sans.woff2') format('woff2');
}

    zotsatira comic-sans.woff2 adzayamba Kutsegula pokhapokha otsitsira ndi parsing index.css. Kuti mupewe kudikirira motalika chotere, mutha kutsitsa mafontiwo kale pogwiritsa ntchito <link rel= "preload">:

    <link rel="preload" href="comic-sans.woff2" as="font" />
  • Ngati mulekanitsa masitayelo anu molingana ndi njira CSS yovuta m'magawo awiri, ofunikira (omasulira posachedwa) ndi osafunikira: 
    <style>
/* Inlined critical styles */
</style>

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

    Ndi njirayi, masitayelo osafunikira amangoyamba kutsitsa JavaScript ikayamba, zomwe zitha kuchitika masekondi angapo mutapereka. M'malo modikirira JS gwiritsani ntchito <link rel= "preload">kuti muyambe kutsitsa kale:

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

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

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

Osagwiritsa ntchito mochulukitsira podzaza. Ngati mutsitsa chilichonse motsatana, tsambalo silingafulumire mwamatsenga, m'malo mwake, zimalepheretsa osatsegula kukonzekera ntchito yake moyenera.

Osati kusokonezedwa ndi prefetching. Osagwiritsa ntchito <link rel= "preload">, ngati simukusowa chothandizira tsambalo litatsitsidwa. Ngati mukufuna pambuyo pake, mwachitsanzo patsamba lotsatira, gwiritsani ntchito <link rel= "prefetch">.

Onani zambiri

Ichi ndi chizindikiro chofunikira kuti aphedwe ndi msakatuli (ngati amathandizira), mosiyana ndi ma tag ena onse zokhudzana ndi kutsitsa. Msakatuli ayenera kutsitsa zomwe zafotokozedwamo <link rel="preload">. Nthawi zina mwina kunyalanyaza preloading, mwachitsanzo ngati ikuyenda pa kugwirizana pang'onopang'ono.

Zofunika Kwambiri. Osakatula nthawi zambiri amaika zinthu zofunika kwambiri kuzinthu zosiyanasiyana (masitayelo, zolemba, mafonti, ndi zina zotero) kuti ayambe kuyika zinthu zofunika kwambiri. Pankhaniyi, msakatuli amasankha choyambirira ndi mawonekedwe as. Kwa msakatuli wa Chrome mutha kuyang'ana zonse zofunika tebulo.

Lowetsanitu, kutengeratu ndi ma tag ena

chiganizo

<link rel= "prefetch"> imafunsa msakatuli kuti atsitse ndi kusunga gwero (monga script kapena pepala) chakumbuyo. Kutsegula kumachitika mopepuka kotero kuti sikusokoneza zinthu zofunika kwambiri. Izi ndizothandiza ngati gwero likufunika patsamba lotsatira ndipo mukufuna kusungitsa pasadakhale.

Apanso, msakatuli sachita chilichonse ndi gwero pambuyo potsitsa. Zolemba sizimachitidwa, mapepala amtundu samayikidwa. Zothandizira zimangosungidwa ndikuperekedwa nthawi yomweyo mukapempha.

malembedwe

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

href amalozera kuzinthu zomwe mukufuna kutsitsa.

as ikhoza kukhala chilichonse chomwe chingatsitsidwe mu msakatuli:

  • style za style sheets,
  • script za scripts,
  • font kwa mafonti,
  • fetch kwa zida zodzaza ntchito fetch() kapena XMLHttpRequest,
  • onani mndandanda wonse pa MDN.

Ndikofunikira kufotokoza tanthauzo lake as - izi zimathandiza msakatuli kuti aziyika patsogolo ndikukonza zotsitsa.

Ntchito

Kuti mutsegule zopezeka pamasamba ena, ngati mukufuna gwero kuchokera patsamba lina, ndipo mukufuna kuyikanso kuti mufulumizitse kumasulira kwa tsambalo. Mwachitsanzo:

  • Muli ndi sitolo yapaintaneti, ndipo 40% ya ogwiritsa ntchito amasiya tsamba loyambira patsamba lazogulitsa. Gwiritsani ntchito <link rel= "prefetch">, kutsitsa mafayilo a CSS ndi JS kuti apereke masamba azogulitsa.
  • Muli ndi tsamba limodzi, ndipo masamba osiyanasiyana amadzaza mapaketi osiyanasiyana. Wogwiritsa ntchito akayendera tsamba, mapaketi amasamba onse omwe amalumikizana nawo amatha kutsitsa.

Zikuoneka kuti tag iyi itha kugwiritsidwa ntchito mosatetezeka kumlingo uliwonse.. Osakatula nthawi zambiri amakonza zotsatsa zomwe zili zofunika kwambiri, kotero sizivutitsa aliyense. Ingokumbukirani kuti imadya magalimoto ogwiritsira ntchito, zomwe zingawononge ndalama.

Osati zopempha mwachangu. Osagwiritsa ntchito <link rel= "prefetch">, pamene gwero likufunika mu masekondi angapo. Pankhaniyi, ntchito <link rel= "preload">.

Onani zambiri

Mwasankha tagi. Msakatuli safunikira kutsatira malangizowa, akhoza kunyalanyaza, mwachitsanzo, polumikizana pang'onopang'ono.

Choyambirira mu Chrome. Mu Chrome <link rel= "prefetch"> nthawi zambiri amachitidwa ndi cholinga chocheperako (onani zonse zofunika tebulo), ndiko kuti, mutatsitsa china chilichonse.

kulumikizana

<link rel= "preconnect"> imafunsa msakatuli kuti alumikizane ndi domeni pasadakhale pamene mukufuna kufulumizitsa khwekhwe kugwirizana mtsogolo.

Msakatuli ayenera kukhazikitsa cholumikizira ngati atenga zinthu zilizonse kuchokera kudera latsopano la chipani chachitatu. Mwachitsanzo, ikadzaza Mafonti a Google, React fonts kuchokera ku CDN, kapena ikupempha yankho la JSON kuchokera pa seva ya API.

Kukhazikitsa kulumikizana kwatsopano nthawi zambiri kumatenga ma milliseconds mazana angapo. Zimachitika kamodzi, komabe zimatenga nthawi. Ngati mwakhazikitsa malumikizanidwe pasadakhale, mudzasunga nthawi ndikutsitsa zothandizira kuchokera padawuniyi mwachangu.

malembedwe

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

href imasonyeza dzina lachidziwitso limene mukufuna kudziwa adilesi ya IP. Itha kutchulidwa ndi prefix (https://domain.com) kapena popanda (//domain.com).

Ntchito

Gwiritsani ntchito madomeni omwe adzafunike posachedwa kuti mutsitse kalembedwe kofunikira, zolemba kapena chithunzi kuchokera pamenepo, koma simukudziwa ulalo wothandizira. Mwachitsanzo:

  • Pulogalamu yanu imathandizidwa my-app.com ndikupanga zopempha za AJAX kuti api.my-app.com: Simukudziwa mafunso enieniwo pasadakhale chifukwa amapangidwa kuchokera ku JS. Apa ndikoyenera kugwiritsa ntchito tag kuti mulumikizane ndi domain.
  • Pulogalamu yanu imathandizidwa my-app.com ndipo amagwiritsa ntchito Google Fonts. Iwo dawunilodi mu masitepe awiri: choyamba, CSS wapamwamba dawunilodi kuchokera ankalamulira fonts.googleapis.com, ndiye fayiloyi imapempha mafonti ndi fonts.gstatic.com. Simungadziwe kuti mafayilo amtundu wanji akuchokera fonts.gstatic.com mudzafunika mpaka mutatsegula fayilo ya CSS, kuti titha kupanga kulumikizana koyambirira.

Gwiritsani ntchito tagiyi kuti mufulumizitse zolemba kapena masitayilo ena pang'ono chifukwa cha mgwirizano womwe unakhazikitsidwa kale.

Osagwiritsa ntchito mopambanitsa. Kukhazikitsa ndi kusunga kulumikizana ndi ntchito yodula kwa kasitomala ndi seva. Gwiritsani ntchito tagiyi pakupitilira madambwe 4-6.

Onani zambiri

Mwasankha tagi. Msakatuli safunikira kutsatira malangizowa ndipo akhoza kunyalanyaza, mwachitsanzo, ngati maulumikizidwe ambiri akhazikitsidwa kale kapena zina.

Kodi njira yolumikizira imaphatikizapo chiyani?. Kuti alumikizane ndi tsamba lililonse, msakatuli ayenera kuchita izi:

  • Kusintha kwa DNS. Pezani adilesi ya IP ya seva (216.58.215.78) pa dzina lachidziwitso (google.com).
  • TCP kugwirana chanza. Sinthani mapaketi (kasitomala β†’ seva β†’ kasitomala) kuti muyambitse kulumikizana kwa TCP ndi seva.
  • TLS kugwirana chanza (masamba a HTTPS okha). Mizere iwiri yosinthira paketi (kasitomala β†’ seva β†’ kasitomala β†’ seva β†’ kasitomala) kuti ayambitse gawo lotetezedwa la TLS.

Chidziwitso: HTTP/3 ikonza ndikufulumizitsa makina ogwiritsira ntchito manja, koma akadali patali.

dns-prefetch

<link rel= "dns-prefetch"> imafunsa msakatuli kuti apangitse kusamvana kwa DNS kwa madambwe pasadakhale ngati mulumikizane nayo posachedwa ndipo mukufuna kufulumizitsa kulumikizana koyamba.

Msakatuliyo akuyenera kudziwa adilesi ya IP ya domeniyo ngati atenganso zida zilizonse kuchokera kumalo atsopano. Mwachitsanzo, kutsitsa Mafonti a Google, Mafonti a React kuchokera ku CDN, kapena kupempha yankho la JSON kuchokera pa seva ya API.

Pamalo aliwonse atsopano, kusanja kwa DNS kumatenga pafupifupi 20-120 ms. Izi zimangokhudza kutsitsa koyambira kuchokera ku domeni yomwe yaperekedwa, komabe zimadzetsa kuchedwa. Ngati tichita kusamvana kwa DNS pasadakhale, tidzasunga nthawi ndikutsitsa gwero mwachangu.

malembedwe

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

href imasonyeza dzina lachidziwitso limene mukufuna kukhazikitsa adilesi ya IP. Itha kutchulidwa ndi prefix (https://domain.com) kapena popanda (//domain.com).

Ntchito

Gwiritsani ntchito madomeni omwe adzafunike posachedwa kutsitsa zothandizira kuchokera kumeneko zomwe osatsegula samadziwa pasadakhale. Mwachitsanzo:

  • Pulogalamu yanu imathandizidwa my-app.com ndikupanga zopempha za AJAX kuti api.my-app.com: Simukudziwa mafunso enieniwo pasadakhale chifukwa amapangidwa kuchokera ku JS. Apa ndikoyenera kugwiritsa ntchito tag kuti mulumikizane ndi domain.
  • Pulogalamu yanu imathandizidwa my-app.com, ndipo amagwiritsa ntchito Google Fonts. Iwo dawunilodi mu masitepe awiri: choyamba, CSS wapamwamba dawunilodi kuchokera ankalamulira fonts.googleapis.com, ndiye fayiloyi imapempha mafonti ndi fonts.gstatic.com. Simungadziwe kuti mafayilo amtundu wanji akuchokera fonts.gstatic.com mudzazifuna mpaka mutatsegula fayilo ya CSS, kotero titha kupanga kulumikizana koyambirira pasadakhale.

Gwiritsani ntchito tagiyi kuti mufulumizitse zolemba kapena masitayilo ena pang'ono chifukwa cha mgwirizano womwe unakhazikitsidwa kale.

Chonde dziwani zofanana ndi <link rel= "dns-prefetch"/> ΠΈ <link rel= "preconnect">. Nthawi zambiri sizikhala zomveka kuzigwiritsa ntchito limodzi pagawo limodzi: <link rel= "preconnect"> zikuphatikizapo <link rel= "dns-prefetch"/> ndi zina zambiri. Izi zitha kulungamitsidwa muzochitika ziwiri:

  • Kodi mukufuna kuthandizira asakatuli akale?. <link rel= "dns-prefetch" /> mothandizidwa ndi kuyambira IE10 ndi Safari 5. <link rel= "preconnect"> idathandizidwa kwakanthawi mu Chrome ndi Firefox, koma idangowonjezeredwa ku Safari mu 11.1 ndi komabe sichikuthandizidwa mu IE/Edge. Ngati mukufuna kuthandizira asakatuli awa, gwiritsani ntchito <link rel= "dns-prefetch" /> ngati njira yosunga zobwezeretsera <link rel= "preconnect">.
  • Mukufuna kufulumizitsa kulumikizana ndi madera opitilira 4-6. Tagi <link rel= "preconnect"> Sitikulimbikitsidwa kugwiritsa ntchito madera opitilira 4-6, popeza kukhazikitsa ndi kusunga kulumikizana ndi ntchito yodula. <link rel= "dns-prefetch" /> zimagwiritsa ntchito zinthu zochepa, choncho zigwiritseni ntchito ngati kuli kofunikira.

Onani zambiri

Mwasankha tagi. Msakatuli safunikira kutsatira malangizowa, chifukwa chake sangathe kuchita DNS resolution, mwachitsanzo, ngati pali ma tag ambiri patsamba kapena zina.

DNS ndi chiyani. Seva iliyonse pa intaneti ili ndi adilesi yapadera ya IP, yomwe imawoneka ngati 216.58.215.78. Dzina la tsambalo nthawi zambiri limalowetsedwa mu adilesi ya msakatuli (mwachitsanzo, google.com), ndi ma seva a DNS (Domain Name System) amafananiza ndi adilesi ya IP ya seva (216.58.215.78).

Kuti mudziwe adilesi ya IP, msakatuli ayenera kufunsa seva ya DNS. Zimatengera 20βˆ’120 ms polumikizana ndi dera lachitatu.

DNS imasungidwa, ngakhale sizodalirika. Ma OS ena ndi asakatuli amasunga mafunso a DNS: izi zipulumutsa nthawi pazofunsa mobwerezabwereza, koma kusungitsa sikungadaliridwe. Pa Linux nthawi zambiri sizigwira ntchito konse. Chrome ili ndi cache ya DNS, koma imangokhala kwa mphindi imodzi. Windows imasunga mayankho a DNS kwa masiku asanu.

prerender

<link rel= "prerender"> imafunsa msakatuli kuti atsitse ulalo ndikuwonetsa pa tabu yosawoneka. Wogwiritsa ntchito akadina ulalo, tsamba liyenera kuwonetsedwa nthawi yomweyo. Izi ndizothandiza ngati mukutsimikiza kuti wogwiritsa ntchito adzachezera tsamba linalake ndipo akufuna kufulumizitsa chiwonetsero chake.

Ngakhale (kapena chifukwa) chapadera cha tag iyi, mu 2019 <link rel= "prerender"> osathandizidwa bwino m'masakatuli akuluakulu. Onani zambiri. pansipa.

malembedwe

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

href amalozera ku ulalo womwe mukufuna kuti muyambe kutulutsa chakumbuyo.

Ntchito

Mukatsimikiza kuti wosuta adzapita kutsamba linalake. Ngati muli ndi "mphangayo" yomwe 70% ya alendo obwera patsamba A pitani patsamba B, ndiye <link rel= "prerender"> patsamba A lithandizira kuwonetsa tsamba B mwachangu kwambiri.

Osagwiritsa ntchito mopambanitsa. Kuperekeratu ndikokwera mtengo kwambiri pankhani ya bandwidth ndi kukumbukira. Osagwiritsa ntchito <link rel= "prerender"> kwa masamba oposa limodzi.

Onani zambiri

Mwasankha tagi. Msakatuli safunikira kutsatira malangizowa ndipo akhoza kunyalanyaza, mwachitsanzo, polumikizana pang'onopang'ono kapena ngati palibe kukumbukira kwaulere.

Kusunga kukumbukira Chrome sichita kumasulira kwathunthundi ingotsitsani NoState. Izi zikutanthauza kuti Chrome imadzaza tsambalo ndi zothandizira zake zonse, koma sizipereka kapena kuchita JavaScript.

Firefox ndi Safari sizigwirizana ndi chizindikiro ichi konse. Izi sizikuphwanya tsatanetsatane, popeza osatsegula safunikira kutsatira malangizowa; komabe zachisoni. Kukhazikitsa cholakwika Firefox yatsegula kwa zaka zisanu ndi ziwiri. Pali malipoti kuti Safari sichigwirizananso ndi tagi iyi.

Chidule

Gwiritsani ntchito:

  • <link rel= "preload"> - mukafuna gwero mumasekondi pang'ono
  • <link rel= "prefetch"> - mukafuna chothandizira patsamba lotsatira
  • <link rel= "preconnect"> - mutadziwa kuti mudzafunika chida posachedwa, koma simunadziwebe ulalo wake wonse
  • <link rel= "dns-prefetch"> - mofananamo, mutadziwa kuti mudzafunika chithandizo posachedwa, koma simunadziwebe ulalo wake wonse (kwa asakatuli akale)
  • <link rel= "prerender"> - mukakhala otsimikiza kuti ogwiritsa ntchito apita patsamba linalake, ndipo mukufuna kufulumizitsa chiwonetsero chake

Source: www.habr.com

Kuwonjezera ndemanga