der binne in protte manieren om webprestaasjes te ferbetterjen. Ien fan har is it foarladen fan ynhâld dy't letter nedich sil wêze. CSS pre-ferwurking, folsleine side pre-rendering of domein namme resolúsje. Wy dogge alles fan tefoaren, en dan daliks werjaan it resultaat! Klinkt cool.

Wat noch cooler is, is dat it heul ienfâldich is ymplementearre. Fiif tags jou de browser in kommando om foarriedige aksjes út te fieren:

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

Litte wy koart útlizze wat se dogge en wannear se se moatte brûke.

Gean nei: foarlêze · prefetch · preconnect · dns-prefetch · prerender

foarlêze

<link rel= "preload"> fertelt de browser om in boarne (lykas in skript of stylblêd) sa gau mooglik te laden en te cache. Dit is handich as in boarne nedich is in pear sekonden neidat de side is laden - en jo wolle it proses fersnelle.

De browser docht neat mei de boarne nei it laden. Skripten wurde net útfierd, stylblêden wurde net tapast. De boarne wurdt gewoan yn it cache bewarre en direkt beskikber steld op oanfraach.

syntaksis

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

href wiist op de boarne dy't jo wolle downloade.

as kin alles wêze dat kin wurde downloade yn 'e browser:

style foar stylblêden,
script foar skripts,
font foar lettertypen,
fetch foar boarnen laden mei help fetch() of XMLHttpRequest,
sjoch folsleine list op MDN.

It is wichtich om it attribút te spesifisearjen as - dit helpt de browser om downloads goed te prioritearjen en te plannen.

Wannear te brûken

Brûk foarladen as de boarne yn 'e heule takomst nedich is. Bygelyks:

Net-standert lettertypen fan in eksterne triem:
```

<link rel="stylesheet" href="index.css" />
/* index.css */
@font-face {
  src: url('comic-sans.woff2') format('woff2');
}
```
standert comic-sans.woff2 sil begjinne te laden pas nei it ynladen en parsearjen index.css. Om foar te kommen dat jo sa lang wachtsje, kinne jo it lettertype earder downloade mei <link rel= "preload">:
```
<link rel="preload" href="comic-sans.woff2" as="font" />
```

As jo jo stilen skiede neffens de oanpak Kritysk CSS yn twa dielen, kritysk (foar direkte rendering) en net-kritysk:

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

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

Mei dizze oanpak sille net-krityske stilen allinich begjinne te laden as JavaScript rint, wat in pear sekonden nei it werjaan kin barre. Yn stee fan wachtsjen JS gebrûk <link rel= "preload">om earder te begjinnen mei downloaden:

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

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

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

Net oerbrûke foarladen. As jo alles op in rige lade, sil de side net magysk fersnelle, krekt oarsom, it sil foarkomme dat de browser har wurk korrekt plant.

Net te betiizjen mei prefetching. Net brûke <link rel= "preload">, as jo de boarne net direkt nedich hawwe neidat de side is laden. As jo it letter nedich hawwe, bygelyks foar de folgjende side, brûk dan <link rel= "prefetch">.

View details

Dit is in fereaske tag útfierd wurde troch de browser (as it stipet), yn tsjinstelling ta alle oare tags relatearre oan preloading. De browser moat de boarne downloade yn <link rel="preload">. Yn oare gefallen kin it foarladen negearje, bygelyks as it rint op in trage ferbining.

Prioriteiten. Browsers jouwe meastentiids ferskillende prioriteiten ta oan ferskate boarnen (stilen, skripts, lettertypen, ensfh.) Om de wichtichste boarnen earst te laden. Yn dit gefal bepaalt de browser prioriteit troch attribút as. Foar Chrome browser kinne jo sjen op folsleine prioriteit tafel.

prefetch

<link rel= "prefetch"> freget de browser om in boarne (lykas in skript of stylblêd) op 'e eftergrûn te downloaden en te cache. Laden bart mei lege prioriteit, sadat it net bemuoit mei wichtigere boarnen. Dit is handich as de boarne nedich is op 'e folgjende side en jo wolle it fan tefoaren cache.

Ek hjir docht de browser neat mei de boarne nei it laden. Skripten wurde net útfierd, stylblêden wurde net tapast. De boarne wurdt gewoan yn it cache bewarre en direkt beskikber steld op oanfraach.

syntaksis

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

href wiist op de boarne dy't jo wolle downloade.

as kin alles wêze dat kin wurde downloade yn 'e browser:

style foar stylblêden,
script foar skripts,
font foar lettertypen,
fetch foar boarnen laden mei help fetch() of XMLHttpRequest,
sjoch folsleine list op MDN.

It is wichtich om it attribút te spesifisearjen as - dit helpt de browser om downloads korrekt te prioritearjen en te plannen.

Wannear te brûken

Om boarnen fan oare siden te laden, as jo in boarne fan in oare side nedich hawwe, en jo wolle it foarlade om dan de werjefte fan dy side te fersnellen. Bygelyks:

Jo hawwe in online winkel, en 40% fan brûkers ferlitte de thússide foar de produktside. Brûke <link rel= "prefetch">, CSS- en JS-bestannen laden om produktsiden te werjaan.
Jo hawwe in inkele side-applikaasje, en ferskate siden laden ferskate pakketten. As in brûker in side besiket, kinne pakketten foar alle siden wêrnei't it keppele is foarladen wurde.

It is wierskynlik dat dizze tag yn elke mjitte feilich brûkt wurde kin.. Browsers planne gewoanlik prefetch mei de leechste prioriteit, sadat it gjinien hinderet. Hâld gewoan yn gedachten dat it brûkersferkear konsumearret, wat jild kin kostje.

Net foar driuwende oanfragen. Net brûke <link rel= "prefetch">, as de boarne nedich is yn in pear sekonden. Yn dit gefal, brûke <link rel= "preload">.

View details

Opsjoneel tag. De browser is net ferplichte om dizze ynstruksje te folgjen; hy kin it negearje, bygelyks op in trage ferbining.

Prioriteit yn Chrome. Yn Chrome <link rel= "prefetch"> meastal útfierd mei minimale prioriteit (sjoch folsleine prioriteit tafel), dat is, nei it laden fan al it oare.

preconnect

<link rel= "preconnect"> freget de browser om foarôf te ferbinen mei it domein as jo yn 'e takomst de ferbining opset wolle fersnelle.

De browser moat in ferbining meitsje as it boarnen ophellet fan in nij domein fan tredden. Bygelyks, as it Google Fonts laadt, React-fonts fan in CDN, of freget in JSON-antwurd fan in API-tsjinner.

It oprjochtsjen fan in nije ferbining duorret normaal in pear hûndert millisekonden. It wurdt ien kear dien, mar duorret noch tiid. As jo foarôf in ferbining hawwe oprjochte, sille jo tiid besparje en boarnen fan dit domein rapper downloade.

syntaksis

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

href jout de domeinnamme oan wêrfoar jo it IP-adres bepale wolle. Kin opjûn wurde mei in foarheaksel (https://domain.com) of sûnder it (//domain.com).

Wannear te brûken

Brûk foar domeinen dy't gau nedich binne om dêr in wichtige styl, skript of ôfbylding te downloaden, mar jo kenne de boarne-URL noch net. Bygelyks:

Jo applikaasje wurdt hosted op my-app.com en makket AJAX fersiken oan api.my-app.com: Jo kenne de spesifike fragen net fan tefoaren, om't se dynamysk makke wurde fan JS. Hjir is it hiel passend om in tag te brûken om foarôf te ferbinen mei it domein.
Jo applikaasje wurdt hosted op my-app.com en brûkt Google Lettertypen. Se wurde yn twa stappen ynladen: earst wurdt it CSS-bestân downloade fan it domein fonts.googleapis.com, dan freget dit bestân lettertypen mei fonts.gstatic.com. Jo kinne net witte hokker spesifike lettertypebestannen fan binne fonts.gstatic.com jo sille nedich hawwe oant jo it CSS-bestân lade, sadat wy allinich in foarriedige ferbining kinne meitsje.

Brûk dizze tag om wat skripts fan tredden of styl in bytsje te fersnellen fanwegen foarôf fêststelde ferbining.

Net oermjittich brûke. It oprjochtsjen en ûnderhâlden fan in ferbining is in djoere operaasje foar sawol de kliïnt as de tsjinner. Brûk dizze tag foar maksimaal 4-6 domeinen.

View details

Opsjoneel tag. De browser is net ferplichte om dizze ynstruksje te folgjen en kin it negearje, bygelyks as der al in protte ferbinings binne makke of yn in oar gefal.

Wat omfettet it ferbiningsproses?. Om te ferbinen mei elke side, moat de browser it folgjende dwaan:

DNS resolúsje. Sykje tsjinner IP-adres (216.58.215.78) foar de opjûne domeinnamme (google.com).
TCP hândruk. Wissel pakketten (kliïnt → tsjinner → kliïnt) om in TCP-ferbining mei de tsjinner te begjinnen.
TLS-handshake (allinich HTTPS-siden). Twa rûnen fan pakketútwikseling (kliïnt → tsjinner → kliïnt → tsjinner → kliïnt) om in feilige TLS-sesje te begjinnen.

Opmerking: HTTP/3 sil it handshake-meganisme ferbetterje en fersnelle, mar it is noch in lange wei fuort.

dns-prefetch

<link rel= "dns-prefetch"> freget de browser om DNS-resolúsje foar it domein fan tefoaren út te fieren as jo der gau mei ferbine en de earste ferbining wolle fersnelle.

De browser moat it IP-adres fan it domein bepale as it alle boarnen sil ophelje fan in nij domein fan tredden. Bygelyks, it laden fan Google-lettertypen, React-lettertypen fan in CDN, of it oanfreegjen fan in JSON-antwurd fan in API-tsjinner.

Foar elk nij domein nimt resolúsje fan DNS-records typysk sawat 20-120 ms. Dit beynfloedet allinich it laden fan 'e earste boarne fan in opjûne domein, mar stelt noch in fertraging yn. As wy DNS-resolúsje fan tefoaren útfiere, sille wy tiid besparje en de boarne rapper laden.

syntaksis

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

href jout de domeinnamme oan wêrfoar jo it IP-adres ynstelle wolle. Kin opjûn wurde mei in foarheaksel (https://domain.com) of sûnder it (//domain.com).

Wannear te brûken

Brûk foar domeinen dy't gau nedich binne om dêr boarnen te downloaden wêrfan de browser net fan tefoaren wit. Bygelyks:

Jo applikaasje wurdt hosted op my-app.com en makket AJAX fersiken oan api.my-app.com: Jo kenne de spesifike fragen net fan tefoaren, om't se dynamysk makke wurde fan JS. Hjir is it hiel passend om in tag te brûken om foarôf te ferbinen mei it domein.
Jo applikaasje wurdt hosted op my-app.com, en brûkt Google Lettertypen. Se wurde yn twa stappen ynladen: earst wurdt it CSS-bestân downloade fan it domein fonts.googleapis.com, dan freget dit bestân lettertypen mei fonts.gstatic.com. Jo kinne net witte hokker spesifike lettertypebestannen fan binne fonts.gstatic.com jo sille it nedich hawwe oant jo it CSS-bestân lade, dus kinne wy allinich in foarriedige ferbining meitsje.

Brûk dizze tag om wat skripts fan tredden of styl in bytsje te fersnellen fanwegen foarôf fêststelde ferbining.

Please note ferlykbere skaaimerken oan <link rel= "dns-prefetch"/> и <link rel= "preconnect">. It hat normaal gjin sin om se tegearre te brûken foar ien domein: <link rel= "preconnect"> al omfettet <link rel= "dns-prefetch"/> en safolle mear. Dit kin wurde rjochtfeardige yn twa gefallen:

Wolle jo âldere browsers stypje?. <link rel= "dns-prefetch" /> stipe troch sûnt IE10 en Safari 5. <link rel= "preconnect"> waard stipe foar in skoft yn Chrome en Firefox, mar waard allinnich tafoege oan Safari yn 11.1 en noch net stipe yn IE / Edge. As jo dizze browsers moatte stypje, brûk dan <link rel= "dns-prefetch" /> as reservekopy opsje foar <link rel= "preconnect">.

Jo wolle ferbinings fersnelle nei mear dan 4-6 domeinen. Tag <link rel= "preconnect"> It is net oan te rieden om te brûken mei mear as 4-6 domeinen, om't it oprjochtsjen en ûnderhâlden fan in ferbining in djoere operaasje is. <link rel= "dns-prefetch" /> verbruikt minder boarnen, dus brûk it as it nedich is.

View details

Opsjoneel tag. De browser is net ferplichte om dizze ynstruksje te folgjen, dus it kin gjin DNS-resolúsje útfiere, bygelyks as d'r in protte sokke tags op 'e side binne of yn in oar gefal.

Wat is DNS. Elke server op it ynternet hat in unyk IP-adres, dat liket 216.58.215.78. De namme fan 'e side wurdt normaal ynfierd yn' e adresbalke fan 'e browser (bygelyks, google.com), en DNS (Domain Name System) tsjinners oerienkomme mei it IP-adres fan de tsjinner (216.58.215.78).

Om in IP-adres te bepalen, moat de browser de DNS-tsjinner opfreegje. It duorret 20-120 ms by it ferbinen mei in nij domein fan tredden.

DNS is yn cache, hoewol net heul betrouber. Guon OSes en browsers cache DNS-fragen: dit sil tiid besparje op werhelle fragen, mar caching kin net fertroud wurde. Op Linux wurket it normaal hielendal net. Chrome hat in DNS-cache, mar it duorret mar in minút. Windows cache DNS-antwurden foar fiif dagen.

prerender

<link rel= "prerender"> freget de browser om de URL te downloaden en wer te jaan yn in ûnsichtbere ljepper. As de brûker op de keppeling klikt, moat de side daliks werjûn wurde. Dit is handich as jo der wis fan binne dat de brûker in bepaalde side sil besykje en syn werjefte fersnelle wolle.

Nettsjinsteande (of fanwegen) de útsûnderlike effektiviteit fan dizze tag, yn 2019 <link rel= "prerender"> min stipe yn grutte browsers. Sjoch mear details. hjirûnder.

syntaksis

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

href wiist op de URL dy't jo wolle begjinne mei werjaan op 'e eftergrûn.

Wannear te brûken

As jo echt wis binne dat de brûker nei in bepaalde side sil gean. As jo in "tunnel" hawwe wêrmei 70% fan 'e besikers fan side A nei side B gean, dan <link rel= "prerender"> op side A sil helpe om side B hiel fluch wer te jaan.

Net oermjittich brûke. Pre-rendering is ekstreem djoer yn termen fan bânbreedte en ûnthâld. Net brûke <link rel= "prerender"> foar mear as ien side.

View details

Opsjoneel tag. De browser is net ferplichte om dizze ynstruksje te folgjen en kin it negearje, bygelyks op in trage ferbining of as der net genôch frije ûnthâld is.

Om ûnthâld te bewarjen Chrome docht gjin folsleine renderingen allinne preload NoState. Dit betsjut dat Chrome de side en al syn boarnen laadt, mar JavaScript net werjaan of útfiert.

Firefox en Safari stypje dizze tag hielendal net. Dit is net yn striid mei de spesifikaasje, sûnt browsers binne net ferplichte om te folgjen dizze ynstruksje; mar dochs tryst. Implementaasje bug Firefox is al sân jier iepen. Der binne rapporten dat Safari stipet dizze tag ek net.

Gearfetting

Brûke:

<link rel= "preload"> - as jo in boarne nedich binne yn in pear sekonden
<link rel= "prefetch"> - as jo de boarne op 'e folgjende side nedich binne
<link rel= "preconnect"> - as jo witte dat jo gau in boarne nedich hawwe, mar jo de folsleine URL noch net witte
<link rel= "dns-prefetch"> - op deselde manier, as jo witte dat jo gau in boarne nedich binne, mar jo de folsleine URL noch net witte (foar âldere browsers)
<link rel= "prerender"> - as jo der wis fan binne dat brûkers sille gean nei in bepaalde side, en jo wolle fersnelle syn werjefte

Boarne: www.habr.com

Preload, prefetch en oare tags

foarlêze

syntaksis

Wannear te brûken

View details

prefetch

syntaksis

Wannear te brûken

View details

preconnect

syntaksis

Wannear te brûken

View details

dns-prefetch

syntaksis

Wannear te brûken

View details

prerender

syntaksis

Wannear te brûken

View details

Gearfetting

Add a comment cancel reply