ProHoster > Блог > Administrasi > Preload, prefetch lan tag liyane

Preload, prefetch lan tag liyane

Ana akeh cara kanggo nambah kinerja web. Salah sijine yaiku preloading konten sing bakal dibutuhake mengko. Pre-processing CSS, pra-rendering kaca lengkap utawa resolusi jeneng domain. Kita nindakake kabeh sadurunge, banjur langsung nampilake asil! Swara kelangan.

Sing luwih keren yaiku dileksanakake kanthi gampang. Limang tag menehi browser prentah kanggo nindakake tumindak awal:

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


Ayo diterangake kanthi ringkes apa sing ditindakake lan kapan digunakake.

Langsung menyang: Preload · prefetch · prasambung · dns-prefetch · prerender

Preload

<link rel= "preload"> ngandhani browser supaya mbukak lan nyimpen sumber daya (kayata script utawa stylesheet) sanalika bisa. Iki migunani nalika sumber daya dibutuhake sawetara detik sawise kaca dimuat - lan sampeyan pengin nyepetake proses kasebut.

Browser ora nindakake apa-apa karo sumber daya sawise dimuat. Skrip ora dieksekusi, lembar gaya ora ditrapake. Sumber kasebut mung di-cache lan langsung kasedhiya yen dijaluk.

sintaks

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

href nuduhake sumber daya sing pengin didownload.

as bisa apa wae sing bisa diundhuh ing browser:

  • style kanggo lembaran gaya,
  • script kanggo skripsi,
  • font kanggo font,
  • fetch kanggo sumber daya dimuat nggunakake fetch() utawa XMLHttpRequest,
  • ndeleng dhaftar lengkap ing MDN.

Penting kanggo nemtokake atribut kasebut as – iki mbantu browser kanggo bener prioritize lan jadwal download.

Nalika digunakake

Gunakake preloading nalika sumber daya dibutuhake ing mangsa ngarep banget. Tuladhane:

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

    standar comic-sans.woff2 bakal miwiti loading mung sawise ngundhuh lan parsing index.css. Kanggo ngindhari ngenteni suwene, sampeyan bisa ndownload font sadurunge nggunakake <link rel= "preload">:

    <link rel="preload" href="comic-sans.woff2" as="font" />
  • Yen sampeyan misahake gaya sampeyan miturut pendekatan CSS kritis dadi rong bagean, kritis (kanggo rendering langsung) lan non-kritis: 
    <style>
/* Inlined critical styles */
</style>

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

    Kanthi pendekatan iki, gaya non-kritis mung bakal diwiwiti nalika JavaScript mlaku, sing bisa kedadeyan sawetara detik sawise rendering. Tinimbang ngenteni nggunakake JS <link rel= "preload">kanggo miwiti ndownload luwih dhisik:

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

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

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

Aja nggunakake preloading kakehan. Yen sampeyan mbukak kabeh kanthi berturut-turut, situs kasebut ora bakal nyepetake kanthi ajaib, sebaliknya, bakal nyegah browser supaya ora ngrancang karya kanthi bener.

Aja bingung karo prefetching. Aja nggunakake <link rel= "preload">, yen sampeyan ora mbutuhake sumber kasebut langsung sawise kaca dimuat. Yen sampeyan butuh mengko, contone kanggo kaca sabanjure, banjur gunakake <link rel= "prefetch">.

Ndeleng rincian

Iki minangka tag sing dibutuhake bakal dieksekusi dening browser (yen ndhukung), ora kaya kabeh tag liyane related kanggo preloading. Browser kudu ngundhuh sumber daya sing ditemtokake ing <link rel="preload">. Ing kasus liyane iku bisa nglirwakake preloading, contone, yen lagi mlaku ing sambungan alon.

Prioritas. Browser biasane nemtokake prioritas sing beda kanggo sumber daya sing beda (gaya, skrip, font, lsp.) supaya bisa mbukak sumber daya sing paling penting luwih dhisik. Ing kasus iki, browser nemtokake prioritas miturut atribut as. Kanggo browser Chrome sampeyan bisa ndeleng tabel prioritas lengkap.

Preload, prefetch lan tag liyane

prefetch

<link rel= "prefetch"> njaluk browser ndownload lan nyimpen sumber daya (kayata script utawa style sheet) ing latar mburi. Loading dumadi ing prioritas kurang supaya ora ngganggu sumber daya sing luwih penting. Iki migunani yen sumber daya dibutuhake ing kaca sabanjure lan sampeyan pengin cache sadurunge.

Ing kene uga, browser ora nindakake apa-apa karo sumber daya sawise dimuat. Skrip ora dieksekusi, lembar gaya ora ditrapake. Sumber kasebut mung di-cache lan langsung kasedhiya yen dijaluk.

sintaks

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

href nuduhake sumber daya sing pengin didownload.

as bisa apa wae sing bisa diundhuh ing browser:

  • style kanggo lembaran gaya,
  • script kanggo skripsi,
  • font kanggo font,
  • fetch kanggo sumber daya dimuat nggunakake fetch() utawa XMLHttpRequest,
  • ndeleng dhaftar lengkap ing MDN.

Penting kanggo nemtokake atribut kasebut as - iki mbantu browser kanthi bener prioritize lan jadwal download.

Nalika digunakake

Kanggo mbukak sumber daya saka kaca liya, yen sampeyan butuh sumber daya saka kaca liya, lan sampeyan pengin preload kanggo banjur nyepetake rendering kaca kasebut. Tuladhane:

  • Sampeyan duwe toko online, lan 40% pangguna ninggalake kaca ngarep kanggo kaca produk. Gunakake <link rel= "prefetch">, mbukak file CSS lan JS kanggo nerjemahake kaca produk.
  • Sampeyan duwe aplikasi siji kaca, lan kaca sing beda ngemot paket sing beda. Nalika pangguna ngunjungi kaca, paket kanggo kabeh kaca sing disambungake bisa dimuat sadurunge.

Koyone tag iki bisa digunakake kanthi aman kanthi cara apa wae.. Browser biasane nggawe jadwal prefetch kanthi prioritas paling murah, mula ora ngganggu sapa wae. Cukup elinga yen nggunakake lalu lintas pangguna, sing bisa entuk dhuwit.

Ora kanggo panjalukan urgent. Aja nggunakake <link rel= "prefetch">, nalika sumber daya dibutuhake ing sawetara detik. Ing kasus iki, gunakake <link rel= "preload">.

Ndeleng rincian

Tag opsional. Browser ora perlu ngetutake instruksi iki; bisa uga ora nglirwakake, contone, ing sambungan sing alon.

Prioritas ing Chrome. Ing Chrome <link rel= "prefetch"> biasane dieksekusi kanthi prioritas minimal (pirsani tabel prioritas lengkap), yaiku, sawise ngemot kabeh liyane.

prasambung

<link rel= "preconnect"> takon browser kanggo nyambung menyang domain ing advance nalika sampeyan pengin nyepetake persiyapan sambungan ing mangsa.

Browser kudu nggawe sambungan yen njupuk sumber daya saka domain pihak katelu anyar. Contone, yen ngemot Google Fonts, React fonts saka CDN, utawa njaluk respon JSON saka server API.

Nggawe sambungan anyar biasane njupuk sawetara atus milliseconds. Wis rampung sepisan, nanging isih butuh wektu. Yen sampeyan wis nggawe sambungan luwih dhisik, sampeyan bakal ngirit wektu lan ngundhuh sumber daya saka domain iki luwih cepet.

sintaks

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

href nuduhake jeneng domain sing pengin sampeyan nemtokake alamat IP. Bisa ditemtokake kanthi prefiks (https://domain.com) utawa tanpa iku (//domain.com).

Nalika digunakake

Gunakake kanggo domain sing bakal dibutuhake enggal kanggo ngundhuh gaya penting, script utawa gambar saka ing kono, nanging sampeyan durung ngerti URL sumber. Tuladhane:

  • Aplikasi sampeyan di-host ing my-app.com lan ndadekake AJAX panjalukan kanggo api.my-app.com: Sampeyan ora ngerti pitakon tartamtu sadurunge amarga digawe kanthi dinamis saka JS. Ing kene cukup cocok kanggo nggunakake tag kanggo nyambungake menyang domain.
  • Aplikasi sampeyan di-host ing my-app.com lan nggunakake Google Fonts. Padha diundhuh ing rong langkah: pisanan, file CSS diundhuh saka domain fonts.googleapis.com, banjur file iki njaluk fonts karo fonts.gstatic.com. Sampeyan ora bisa ngerti saka file font tartamtu fonts.gstatic.com sampeyan kudu nganti sampeyan mbukak file CSS, supaya kita mung bisa nggawe sambungan awal sadurunge.

Gunakake tag iki kanggo nyepetake sawetara script pihak katelu utawa gaya sethitik amarga sambungan sing wis ditemtokake.

Aja kakehan nggunakake. Nggawe lan njaga sambungan minangka operasi sing larang kanggo klien lan server. Gunakake tag iki kanggo maksimal 4-6 domain.

Ndeleng rincian

Tag opsional. Browser ora perlu ngetutake instruksi iki lan bisa uga ora nglirwakake, contone, yen akeh sambungan sing wis digawe utawa ing sawetara kasus liyane.

Apa proses sambungan kalebu?. Kanggo nyambung menyang saben situs, browser kudu nindakake ing ngisor iki:

  • résolusi DNS. Golek alamat IP server (216.58.215.78) kanggo jeneng domain sing ditemtokake (google.com).
  • TCP jabat tangan. Exchange paket (klien → server → klien) kanggo miwiti sambungan TCP karo server.
  • TLS handshake (mung situs HTTPS). Rong babak pertukaran paket (klien → server → klien → server → klien) kanggo miwiti sesi TLS sing aman.

Cathetan: HTTP/3 bakal nambah lan nyepetake mekanisme salaman, nanging isih adoh.

dns-prefetch

<link rel= "dns-prefetch"> njaluk browser kanggo nindakake resolusi DNS kanggo domain ing advance yen sampeyan bakal nyambung menyang rauh lan pengin nyepetake sambungan dhisikan.

Browser kudu nemtokake alamat IP domain yen bakal njupuk sumber daya saka domain pihak katelu sing anyar. Contone, ngemot Google Fonts, React fonts saka CDN, utawa njaluk respon JSON saka server API.

Kanggo saben domain anyar, resolusi rekaman DNS biasane njupuk kira-kira 20-120 ms. Iki mung mengaruhi loading sumber pisanan saka domain tartamtu, nanging isih ngenalaken wektu tundha. Yen kita nindakake resolusi DNS luwih dhisik, kita bakal ngirit wektu lan mbukak sumber daya luwih cepet.

sintaks

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

href nuduhake jeneng domain sing sampeyan pengin nyetel alamat IP. Bisa ditemtokake kanthi prefiks (https://domain.com) utawa tanpa iku (//domain.com).

Nalika digunakake

Gunakake kanggo domain sing bakal dibutuhake enggal kanggo ngundhuh sumber daya saka ing kono sing browser ora ngerti sadurunge. Tuladhane:

  • Aplikasi sampeyan di-host ing my-app.com lan ndadekake AJAX panjalukan kanggo api.my-app.com: Sampeyan ora ngerti pitakon tartamtu sadurunge amarga digawe kanthi dinamis saka JS. Ing kene cukup cocok kanggo nggunakake tag kanggo nyambungake menyang domain.
  • Aplikasi sampeyan di-host ing my-app.com, lan nggunakake Google Fonts. Padha diundhuh ing rong langkah: pisanan, file CSS diundhuh saka domain fonts.googleapis.com, banjur file iki njaluk fonts karo fonts.gstatic.com. Sampeyan ora bisa ngerti saka file font tartamtu fonts.gstatic.com sampeyan bakal mbutuhake nganti sampeyan mbukak file CSS, supaya kita mung bisa nggawe sambungan awal ing advance.

Gunakake tag iki kanggo nyepetake sawetara script pihak katelu utawa gaya sethitik amarga sambungan sing wis ditemtokake.

Wigati dicathet karakteristik sing padha karo <link rel= "dns-prefetch"/> и <link rel= "preconnect">. Biasane ora ana gunane yen digunakake bebarengan kanggo siji domain: <link rel= "preconnect"> wis kalebu <link rel= "dns-prefetch"/> lan akeh liyane. Iki bisa ditrapake ing rong kasus:

  • Apa sampeyan pengin ndhukung browser lawas?. <link rel= "dns-prefetch" /> didhukung dening wiwit IE10 lan Safari 5. <link rel= "preconnect"> didhukung kanggo nalika ing Chrome lan Firefox, nanging mung ditambahake kanggo Safari ing 11.1 lan isih ora didhukung ing IE / Edge. Yen sampeyan kudu ndhukung browser kasebut, gunakake <link rel= "dns-prefetch" /> minangka pilihan serep kanggo <link rel= "preconnect">.
  • Sampeyan pengin nyepetake sambungan menyang luwih saka 4-6 domain. Tag <link rel= "preconnect"> Ora dianjurake kanggo nggunakake luwih saka 4-6 domain, amarga nggawe lan njaga sambungan minangka operasi sing larang. <link rel= "dns-prefetch" /> nggunakake sumber daya kurang, supaya nggunakake yen perlu.

Ndeleng rincian

Tag opsional. Browser ora diwajibake ngetutake instruksi iki, mula bisa uga ora nindakake resolusi DNS, contone, yen ana akeh tag kasebut ing kaca utawa ing sawetara kasus liyane.

Apa DNS. Saben server ing Internet duwe alamat IP unik, sing katon kaya 216.58.215.78. Jeneng situs biasane dilebokake ing bilah alamat browser (contone, google.com), lan server DNS (Domain Name System) cocog karo alamat IP server (216.58.215.78).

Kanggo nemtokake alamat IP, browser kudu takon server DNS. Butuh 20−120 ms nalika nyambung menyang domain pihak katelu anyar.

DNS di-cache, sanajan ora bisa dipercaya. Sawetara OS lan browser cache pitakon DNS: iki bakal ngirit wektu kanggo pitakon bola-bali, nanging cache ora bisa diandelake. Ing Linux biasane ora bisa digunakake. Chrome nduweni cache DNS, nanging mung sedhela. Windows nyimpen tanggapan DNS sajrone limang dina.

prerender

<link rel= "prerender"> njaluk browser ndownload URL lan nampilake ing tab sing ora katon. Nalika pangguna ngeklik link kasebut, kaca kasebut kudu langsung ditampilake. Iki migunani yen sampeyan yakin pangguna bakal ngunjungi kaca tartamtu lan pengin nyepetake tampilan.

Sanajan (utawa amarga) efektifitas tag iki, ing 2019 <link rel= "prerender"> kurang didhukung ing browser utama. Waca rincian liyane. ing ngisor iki.

sintaks

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

href nuding URL sing pengin diwiwiti ing latar mburi.

Nalika digunakake

Nalika sampeyan yakin manawa pangguna bakal pindhah menyang kaca tartamtu. Yen sampeyan duwe "terowongan" sing 70% pengunjung menyang kaca A menyang kaca B, banjur <link rel= "prerender"> ing kaca A bakal mbantu nampilake kaca B kanthi cepet.

Aja kakehan nggunakake. Pre-rendering larang banget babagan bandwidth lan memori. Aja nggunakake <link rel= "prerender"> kanggo luwih saka siji kaca.

Ndeleng rincian

Tag opsional. Browser ora dibutuhake kanggo tindakake pandhuan iki lan bisa nglirwakake, contone, ing sambungan alon utawa yen ana ora cukup memori free.

Kanggo nyimpen memori Chrome ora nindakake rendering lengkaplan mung preload NoState. Iki tegese Chrome mbukak kaca lan kabeh sumber daya, nanging ora nerjemahake utawa nglakokake JavaScript.

Firefox lan Safari ora ndhukung tag iki. Iki ora nglanggar spesifikasi, amarga browser ora diwajibake ngetutake instruksi iki; nanging isih sedhih. Implementasi bug Firefox wis mbukak pitung taun. Ana laporan yen Safari ora ndhukung tag iki uga.

Ringkesan

Gunakake:

  • <link rel= "preload"> - nalika sampeyan butuh sumber daya ing sawetara detik
  • <link rel= "prefetch"> - nalika sampeyan butuh sumber daya ing kaca sabanjure
  • <link rel= "preconnect"> - yen sampeyan ngerti yen sampeyan butuh sumber daya, nanging sampeyan durung ngerti URL lengkape
  • <link rel= "dns-prefetch"> - Kajaba iku, yen sampeyan ngerti yen sampeyan bakal mbutuhake sumber daya, nanging sampeyan durung ngerti URL lengkape (kanggo browser lawas)
  • <link rel= "prerender"> - yen sampeyan yakin manawa pangguna bakal pindhah menyang kaca tartamtu, lan sampeyan pengin nyepetake tampilan

Source: www.habr.com

Add a comment