ProHoster > Blog > Administrasi > Preload, prefetch sareng tag anu sanés

Preload, prefetch sareng tag anu sanés

aya loba cara pikeun ngaronjatkeun kinerja wéb. Salah sahijina nyaéta preloading eusi anu bakal diperlukeun engké. CSS pra-processing, kaca pinuh pre-rendering atawa resolusi ngaran domain. Urang ngalakukeun sagalana sateuacanna, lajeng langsung nembongkeun hasilna! Sora tiis.

Anu langkung keren nyaéta yén éta ngan saukur dilaksanakeun. Lima tag masihan browser paréntah pikeun ngalakukeun tindakan awal:

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


Hayu urang ngajelaskeun sakeudeung naon anu aranjeunna laksanakeun sareng iraha ngagunakeunana.

Luncat ka: pramuat · prefetch · sambungkeun · dns-prefetch · prerender

pramuat

<link rel= "preload"> ngabejaan browser pikeun muka tur cache sumberdaya a (saperti naskah atawa stylesheet) pas mungkin. Ieu mangpaat nalika sumberdaya diperlukeun sababaraha detik sanggeus kaca dimuat - sarta anjeun hoyong ngagancangkeun prosés.

browser nu teu nanaon jeung sumberdaya sanggeus loading. Skrip teu dieksekusi, gaya lambar teu dilarapkeun. Sumberdayana ngan saukur sindangan sareng langsung disayogikeun upami dipénta.

sintaksis

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

href nunjuk kana sumberdaya nu Anjeun hoyong undeur.

as tiasa naon waé anu tiasa diunduh dina browser:

  • style pikeun lambaran gaya,
  • script pikeun naskah,
  • font pikeun font,
  • fetch pikeun sumberdaya dimuat ngagunakeun fetch() atawa XMLHttpRequest,
  • tingali daptar lengkep dina MDN.

Kadé nangtukeun atribut as - ieu ngabantuan browser pikeun leres prioritas sareng ngajadwalkeun undeuran.

Nalika nganggo

Paké preloading nalika sumberdaya diperlukeun dina mangsa nu bakal datang. Salaku conto:

  • Font non-standar tina file éksternal: 
    <!-- index.html -->
<link rel="stylesheet" href="index.css" />
/* index.css */
@font-face {
  src: url('comic-sans.woff2') format('woff2');
}

    sacara standar comic-sans.woff2 bakal ngamimitian loading ngan sanggeus diundeur jeung parsing index.css. Pikeun ngahindarkeun ngantosan anu lami, anjeun tiasa ngaunduh font sateuacana nganggo <link rel= "preload">:

    <link rel="preload" href="comic-sans.woff2" as="font" />
  • Upami anjeun misahkeun gaya anjeun dumasar kana pendekatan CSS kritis jadi dua bagian, kritis (pikeun rendering saharita) jeung non-kritis: 
    <style>
/* Inlined critical styles */
</style>

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

    Kalayan pendekatan ieu, gaya non-kritis ngan bakal ngamimitian loading nalika JavaScript dijalankeun, nu bisa lumangsung sababaraha detik sanggeus rendering. Gantina ngantosan pamakéan JS <link rel= "preload">pikeun ngamimitian ngundeur saméméhna:

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

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

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

Ulah overuse preloading. Upami anjeun ngamuat sadayana sakaligus, situsna moal nyepetkeun sacara gaib; Sabalikna, éta bakal nyegah panyungsi tina ngarencanakeun karyana kalayan leres.

Teu matak bingung jeung prefetching. Ulah make <link rel= "preload">, upami anjeun henteu peryogi sumberna langsung saatos halaman dimuat. Upami anjeun peryogi engké, contona pikeun halaman salajengna, teras paké <link rel= "prefetch">.

rinci

Ieu mangrupikeun tag anu diperyogikeun pikeun dieksekusi ku browser (upami ngarojong eta), teu kawas sakabeh tag lianna patali jeung preloading. Browser kedah ngaunduh sumber daya anu ditunjuk dina <link rel="preload">. Dina kasus anu sanés, éta tiasa malire preloading, contona upami dijalankeun dina sambungan anu laun.

Prioritas. Panyungsi biasana masihan prioritas anu béda pikeun sumber daya anu béda (gaya, naskah, fon, jsb) pikeun ngamuat sumber anu paling penting heula. Dina hal ieu, browser nangtukeun prioritas ku atribut as. Pikeun browser Chrome anjeun tiasa ningali tabel prioritas pinuh.

Preload, prefetch sareng tag anu sanés

prefetch

<link rel= "prefetch"> miwarang browser pikeun ngundeur tur cache sumberdaya (saperti skrip atawa style sheet) dina latar tukang. Loading lumangsung dina prioritas low jadi teu ngaganggu sumberdaya leuwih penting. Ieu mangpaat lamun sumberdaya diperlukeun dina kaca hareup jeung anjeun hoyong cache eta sateuacanna.

Di dieu, ogé, browser teu nanaon jeung sumberdaya sanggeus loading. Skrip teu dieksekusi, lambaran gaya teu dilarapkeun. Sumberdayana ngan saukur sindangan sareng langsung disayogikeun upami dipénta.

sintaksis

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

href nunjuk kana sumberdaya nu Anjeun hoyong undeur.

as tiasa naon waé anu tiasa diunduh dina browser:

  • style pikeun lambaran gaya,
  • script pikeun naskah,
  • font pikeun font,
  • fetch pikeun sumberdaya dimuat ngagunakeun fetch() atawa XMLHttpRequest,
  • tingali daptar lengkep dina MDN.

Kadé nangtukeun atribut as - ieu ngabantuan browser bener prioritas tur ngajadwalkeun undeuran.

Nalika nganggo

Pikeun ngamuat sumber tina kaca séjén, upami anjeun peryogi sumber daya tina halaman anu sanés, sareng anjeun badé ngamuat sateuacana teras ngagancangkeun rendering halaman éta. Salaku conto:

  • Anjeun gaduh toko online, sareng 40% pangguna ninggalkeun halaman bumi pikeun halaman produk. Paké <link rel= "prefetch">, ngamuat file CSS sareng JS pikeun ngajantenkeun halaman produk.
  • Anjeun gaduh aplikasi halaman tunggal, sareng halaman anu béda muka bungkusan anu béda. Lamun pamaké ngadatangan hiji kaca, bungkusan pikeun sakabéh kaca nu numbu ka bisa tos dimuat.

Eta kamungkinan yén tag ieu bisa aman dipaké pikeun extent sagala.. Panyungsi biasana ngajadwalkeun prefetch kalayan prioritas panghandapna, janten henteu ngaganggu saha waé. Ngan tetep dina pikiran nu eta meakeun lalulintas pamaké, nu bisa ngarugikeun duit.

Teu pikeun requests urgent. Ulah make <link rel= "prefetch">, lamun sumberdaya diperlukeun dina sababaraha detik. Dina hal ieu, ngagunakeun <link rel= "preload">.

rinci

Tag pilihan. Browser teu diwajibkeun nuturkeun parentah ieu; eta bisa jadi teu malire eta, contona, dina sambungan slow.

Prioritas dina Chrome. Dina Chrome <link rel= "prefetch"> biasana dieksekusi kalayan prioritas minimum (tingali tabel prioritas pinuh), nyaéta, saatos ngamuat sadayana anu sanés.

sambungkeun

<link rel= "preconnect"> naroskeun browser pikeun nyambung ka domain sateuacanna nalika anjeun hoyong nyepetkeun setelan sambungan di hareup.

Browser kudu nyieun sambungan lamun retrieves sagala sumberdaya ti domain pihak katilu anyar. Salaku conto, upami éta ngamuat Google Fonts, React fonts tina CDN, atanapi nyuhunkeun réspon JSON ti server API.

Ngadegkeun sambungan anyar biasana butuh sababaraha ratus milliseconds. Hal ieu dilakukeun sakali, tapi masih butuh waktu. Upami anjeun parantos ngadamel sambungan sateuacanna, anjeun bakal ngahémat waktos sareng ngaunduh sumber tina domain ieu langkung gancang.

sintaksis

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

href nuduhkeun ngaran domain nu Anjeun hoyong nangtukeun alamat IP. Bisa ditangtukeun ku awalan (https://domain.com) atawa tanpa eta (//domain.com).

Nalika nganggo

Paké pikeun domain nu bakal diperlukeun pas pikeun ngundeur gaya penting, Aksara atawa gambar ti dinya, tapi anjeun teu nyaho URL sumberdaya acan. Salaku conto:

  • aplikasi anjeun hosted on my-app.com sarta ngajadikeun requests AJAX ka api.my-app.com: Anjeun teu nyaho queries husus sateuacanna sabab dijieun dinamis tina JS. Di dieu éta cukup luyu ngagunakeun tag pikeun tos nyambung ka domain.
  • aplikasi anjeun hosted on my-app.com sareng nganggo Google Fonts. Éta diunduh dina dua léngkah: kahiji, file CSS diunduh tina domain fonts.googleapis.com, teras file ieu nyuhunkeun fon sareng fonts.gstatic.com. Anjeun teu tiasa terang mana file font khusus asalna fonts.gstatic.com anjeun peryogi dugi ka ngamuat file CSS, janten urang ngan ukur tiasa ngadamel sambungan awal sateuacanna.

Anggo tag ieu pikeun nyepetkeun sababaraha naskah atanapi gaya pihak katilu sakedik alatan sambungan tos ngadegkeun.

Entong teuing. Ngadegkeun sareng ngajaga sambungan mangrupikeun operasi anu mahal pikeun klien sareng server. Anggo tag ieu maksimal 4-6 domain.

rinci

Tag pilihan. Browser henteu kedah nuturkeun paréntah ieu sareng tiasa malire, contona, upami seueur sambungan anu parantos didamel atanapi dina sababaraha kasus anu sanés.

Naon prosés sambungan kaasup?. Pikeun nyambung ka unggal situs, browser kedah ngalakukeun ieu:

  • resolusi DNS. Panggihan alamat IP pangladén (216.58.215.78) pikeun ngaran domain anu ditangtukeun (google.com).
  • TCP sasalaman. Tukeurkeun pakét (klien → server → klien) pikeun ngamimitian sambungan TCP sareng server.
  • Sasalaman TLS (situs HTTPS wungkul). Dua babak bursa pakét (klien → server → klien → server → klien) pikeun ngamimitian sési TLS anu aman.

Catetan: HTTP/3 bakal ningkatkeun sareng nyepetkeun mékanisme sasalaman, tapi masih jauh.

dns-prefetch

<link rel= "dns-prefetch"> naroskeun panyungsi pikeun ngalakukeun résolusi DNS pikeun domain sateuacanna upami anjeun bakal langsung nyambung sareng hoyong nyepetkeun sambungan awal.

Browser kedah nangtukeun alamat IP domain upami éta bakal nyandak sumber daya tina domain pihak katilu anu énggal. Salaku conto, ngamuat Google Fonts, React fonts tina CDN, atanapi nyuhunkeun réspon JSON ti server API.

Pikeun unggal domain anyar, résolusi catetan DNS ilaharna nyokot ngeunaan 20-120 mdet. Ieu ngan mangaruhan loading sahiji sumberdaya munggaran ti domain dibikeun, tapi masih ngawanohkeun reureuh. Upami urang ngalaksanakeun resolusi DNS sateuacanna, urang bakal ngahémat waktos sareng ngamuat sumberdaya langkung gancang.

sintaksis

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

href nunjukkeun ngaran domain nu Anjeun hoyong nyetel alamat IP. Bisa ditangtukeun ku awalan (https://domain.com) atawa tanpa eta (//domain.com).

Nalika nganggo

Paké pikeun domain nu bakal diperlukeun pas pikeun ngundeur sumberdaya ti dinya nu browser nu teu nyaho ngeunaan sateuacanna. Salaku conto:

  • aplikasi anjeun hosted on my-app.com sarta ngajadikeun requests AJAX ka api.my-app.com: Anjeun teu nyaho queries husus sateuacanna sabab dijieun dinamis tina JS. Di dieu éta cukup luyu ngagunakeun tag pikeun tos nyambung ka domain.
  • aplikasi anjeun hosted on my-app.com, sareng nganggo Google Font. Éta diunduh dina dua léngkah: kahiji, file CSS diunduh tina domain fonts.googleapis.com, teras file ieu nyuhunkeun fon sareng fonts.gstatic.com. Anjeun teu tiasa terang mana file font khusus asalna fonts.gstatic.com anjeun peryogi éta dugi ka ngamuat file CSS, janten urang ngan ukur tiasa ngadamel sambungan awal sateuacanna.

Anggo tag ieu pikeun nyepetkeun sababaraha naskah atanapi gaya pihak katilu sakedik alatan sambungan tos ngadegkeun.

Punten perhatikeun ciri anu sami sareng <link rel= "dns-prefetch"/> и <link rel= "preconnect">. Biasana teu asup akal ngagunakeunana babarengan pikeun hiji domain: <link rel= "preconnect"> geus kaasup <link rel= "dns-prefetch"/> sareng seueur deui. Ieu bisa diyakinkeun dina dua kasus:

  • Naha anjeun hoyong ngadukung browser anu langkung lami?. <link rel= "dns-prefetch" /> dirojong ku saprak IE10 sareng Safari 5. <link rel= "preconnect"> ieu dirojong bari di Chrome jeung Firefox, tapi ieu ngan ditambahkeun kana Safari di 11.1 jeung masih teu dirojong di IE / Tepi. Upami anjeun kedah ngadukung panyungsi ieu, paké <link rel= "dns-prefetch" /> salaku pilihan cadangan pikeun <link rel= "preconnect">.
  • Anjeun hoyong ngagancangkeun sambungan kana langkung ti 4-6 domain. Tag <link rel= "preconnect"> Henteu disarankeun pikeun nganggo langkung ti 4-6 domain, sabab ngadegkeun sareng ngajaga sambungan mangrupikeun operasi anu mahal. <link rel= "dns-prefetch" /> meakeun sumberdaya kirang, jadi make eta lamun perlu.

rinci

Tag pilihan. Browser henteu kedah nuturkeun paréntah ieu, janten éta henteu tiasa ngalaksanakeun résolusi DNS, contona, upami aya seueur tag sapertos dina halaman atanapi dina sababaraha kasus anu sanés.

Naon DNS. Unggal server dina Internét boga alamat IP unik, nu Sigana mah 216.58.215.78. Ngaran situs biasana diasupkeun kana bar alamat browser (contona, google.com), sareng server DNS (Domain Name System) cocog sareng alamat IP pangladén (216.58.215.78).

Pikeun nangtukeun alamat IP, browser kudu nanya ka server DNS. Butuh 20−120 mdet nalika nyambung ka domain pihak katilu anyar.

DNS ieu sindangan, sanajan teu pisan reliably. Sababaraha OS sareng panyungsi nga-cache query DNS: ieu bakal ngahémat waktos dina patarosan anu diulang, tapi cache henteu tiasa diandelkeun. Dina Linux, biasana henteu tiasa dianggo. Chrome gaduh cache DNS, tapi ngan ukur samenit. Windows caches réspon DNS salila lima poé.

prerender

<link rel= "prerender"> naroskeun ka browser pikeun ngundeur URL sareng ningalikeunana dina tab anu teu katingali. Nalika pangguna ngaklik tautan, halamanna kedah langsung ditingalikeun. Ieu mangpaat upami anjeun yakin yén pangguna bakal nganjang ka halaman anu tangtu sareng hoyong ngagancangkeun tampilanna.

Sanajan (atawa kusabab) efektivitas luar biasa tina tag ieu, dina 2019 <link rel= "prerender"> kirang didukung dina browser utama. Tempo leuwih rinci. di handap.

sintaksis

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

href nunjuk ka URL nu Anjeun hoyong mimitian rendering di latar tukang.

Nalika nganggo

Nalika anjeun leres-leres yakin yén pangguna bakal angkat ka halaman anu tangtu. Upami anjeun gaduh "torowongan" dimana 70% sémah ka halaman A angkat ka halaman B, teras <link rel= "prerender"> dina kaca A bakal mantuan pikeun nembongkeun kaca B pisan gancang.

Entong teuing. Pra-rendering mahal pisan dina hal bandwidth sareng mémori. Ulah make <link rel= "prerender"> pikeun leuwih ti hiji kaca.

rinci

Tag pilihan. Browser teu diperlukeun pikeun nuturkeun parentah ieu sarta bisa malire eta, contona, dina sambungan slow atawa lamun aya teu cukup memori bébas.

Pikeun nyimpen mémori Chrome henteu ngalakukeun rendering lengkepjeung ngan preload NoState. Ieu ngandung harti yén Chrome ngamuat halaman sareng sadaya sumberna, tapi henteu ngajantenkeun atanapi ngaéksekusi JavaScript.

Firefox sareng Safari henteu ngadukung tag ieu. Ieu henteu ngalanggar spésifikasi, sabab panyungsi henteu kedah nuturkeun paréntah ieu; tapi tetep sedih. bug palaksanaan Firefox parantos dibuka salami tujuh taun. Aya laporan yén Safari henteu ngadukung tag ieu ogé.

singgetan

Paké:

  • <link rel= "preload"> - mun anjeun peryogi sumberdaya dina sababaraha detik
  • <link rel= "prefetch"> - mun anjeun peryogi sumberdaya dina kaca salajengna
  • <link rel= "preconnect"> - nalika anjeun terang yén anjeun peryogi sumber daya pas, tapi anjeun henteu acan terang URL lengkepna
  • <link rel= "dns-prefetch"> - Sarupa oge, nalika anjeun terang yén anjeun bakal peryogi sumberdaya pas, tapi anjeun henteu acan terang URL lengkepna (pikeun browser anu langkung lami)
  • <link rel= "prerender"> - mun anjeun yakin yén pamaké bakal buka kaca nu tangtu, tur Anjeun hoyong ngagancangkeun tampilan na

sumber: www.habr.com

Tambahkeun komentar