ProHoster > Блог > administratio > Preload, prefetch et alia tags

Preload, prefetch et alia tags

Sunt multis modis emendare textus effectus. Una earum est contenta preloading quod postea opus erit. CSS prae-processus, pagina plena praevia solutionis vel nominis domain reddit. Omnia ante agimus, et statim eventum ostendunt! Sonat frigus.

Quod etiam frigidius est, ipsum simpliciter impletur. Quinque tags da pasco mandatum ad actiones praeliminares faciendas;

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


Quid agant et quando utantur breviter exponamus.

Salire ad: preload · prefetch · preconnect · dns-prefetch · prerender

preload

<link rel= "preload"> narrat navigatrum ut quam primum schedulam oneraveris et subsidia cella. Hoc utile est cum auxilio paucis secundis post onera paginarum desideratur - et processum accelerare cupis.

Reconditorium nihil agit cum subsidiis oneratisque. Scripta non sunt exsecuta, schedae stili non applicantur. Subsidium simpliciter conditivum est et statim petitio prompta facta est.

Syntax

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

href demonstrat resource vis download.

as nihil potest esse quod in navigatro accipi possit:

  • style schedae ad stylum;
  • script pro Scriptor;
  • font ad fontes,
  • fetch nam opibus loaded utens fetch() aut XMLHttpRequest,
  • vide plenam album in MDN.

Is est maximus ut specificare attributum as – hoc navigatrum adiuvat ut proprie prioritizatio et schedula downloads.

Cum utor

Utere preloading cum subsidia in proximis futuris necessaria est. Exempli gratia:

  • Fontes non-externi documenti notae: 
    <!-- index.html -->
<link rel="stylesheet" href="index.css" />
/* index.css */
@font-face {
  src: url('comic-sans.woff2') format('woff2');
}

    per default comic-sans.woff2 incipiet loading nisi post demptionem et parsing index.css. Ne tam diu moratum, fonti antea utendo destruere potes <link rel= "preload">:

    <link rel="preload" href="comic-sans.woff2" as="font" />
  • Si secundum accessum separaveris styli Critica CSS in duas partes distributa, critica (pro immediata redditione) et non critica; 
    <style>
/* Inlined critical styles */
</style>

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

    Cum hoc aditu, styli non-critici oneraturae tantum incipient cum JavaScript currit, quod paucis secundis post redditum evenire potest. Expectans pro usu JS <link rel= "preload">incipere downloading ante:

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

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

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

Preloading non accen. Si in ordine omnia oneraveris, locus magice non accelerabitur, immo navigatrum impediet ne recte opus suum disponat.

Non confundendus cum prefetching. Non uti <link rel= "preload">, si ope paginae onera non indigent statim. Si postea eges, exempli gratia ad proximam paginam, utere <link rel= "prefetch">.

details

Hoc requiritur tag exsecutioni mandari ab pasco (si eam sustinet), ab omnibus aliis tags dissimilis ad preloading. In navigatro debet detrahere resource de quibus in <link rel="preload">. In aliis casibus potest ignorare preloading, verbi gratia, si lento nexu currit.

Priorities. Navigantes plerumque varias potioritates variis facultatibus (stylis, scriptis, fontibus, etc.) assignare solent ut primas opes maximis onerent. Hoc in casu, navigatrum prius determinat attributum as. Pro Chrome pasco potes intueri plena prioritas mensa.

Preload, prefetch et alia tags

prefetch

<link rel= "prefetch"> rogat navigatrum ut download et cella subsidia (sicut scriptum vel scheda styli) in curriculo. Loading in prioritate humilitas occurrit, unde non impedit maiora opum. Hoc utile est si in proxima pagina subsidio opus est et in antecessum condire voles.

Hic quoque navigatrum nihil agit cum subsidiis oneratum. Scripta non sunt exsecuta, schedae stili non applicantur. Subsidium simpliciter conditivum est et statim petitio prompta facta est.

Syntax

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

href demonstrat resource vis download.

as nihil potest esse quod in navigatro accipi possit:

  • style schedae ad stylum;
  • script pro Scriptor;
  • font ad fontes,
  • fetch nam opibus loaded utens fetch() aut XMLHttpRequest,
  • vide plenam album in MDN.

Is est maximus ut specificare attributum as - hoc adiuvat navigatrum recte prioritizandum et schedula downloads.

Cum utor

Ad opes alias paginassi ope alterius paginae indiges, eamque praeponere vis ut paginae illius reddendae tunc acceleret. Exempli gratia:

  • Copiam onlinem habes, et 40% usorum relinquas protocollum pro pagina producti. Usus <link rel= "prefetch">oneratisque CSS et JS fasciculis ad paginas productas reddendas.
  • Unius paginae applicationis habes, et variae paginae diversas sarcinas onerant. Cum paginam usoris invisit, fasciculi omnium paginarum coniungit praeloadi possunt.

Verisimile est hoc tag modo tuto adhiberi posse.. Navigatores solere schedulas praemittere cum prioritate infima, ideo nulli molesti sunt. Tantum meminerimus mercaturam usoris consumere, quae pecunia constare potest.

Non pro urgentibus petitionibus. Non uti <link rel= "prefetch">cum brevi tempore opus sit. In hoc casu utere <link rel= "preload">.

details

Ad libitum tag. Navigatorium ad hanc disciplinam sequi non requiritur, licet ignorare eam, exempli gratia, in nexu lento.

Prior Chrome. In Chrome <link rel= "prefetch"> plerumque supplicium est minimum prius (videatur plena prioritas mensa) id est , omnibus rebus oneratis.

preconnect

<link rel= "preconnect"> rogat ut navigatrum coniungas cum ad domain in antecessum cum nexum habeat in futuro accelerare vis.

Navigatorium nexum instituere debet si aliquas facultates e novo tertiae partis dominio reddat. Exempli gratia, si Google Pelvis onerat, React fontes ex CDN, vel JSON responsum ab API servo postulat.

Novam connexionem instituere plerumque paucis centenis millis secundariis sumit. Factum est semel, sed tempus tamen accipit. Si nexum in antecessum institueris, tempus servabis et facultates ex hac regione citius servabis.

Syntax

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

href indicat nomen regio pro quo vis IP oratio determinare. Certum esse potest cum praepositione (https://domain.com) Vel sine ea (//domain.com).

Cum utor

Utere pro dominicis quae mox opus erunt ut momenti stilum, scriptum vel imaginem inde detrahas, sed resource URL adhuc non scis. Exempli gratia:

  • Vestri application est hosted in my-app.com et petit ut AJAX api.my-app.com: Interrogationes specificas in antecessum non scis quia dynamice fiunt ab JS. Hic satis convenit uti tag ad praecellere cum dominio.
  • Vestri application est hosted in my-app.com et utitur Google Pelvis. Duobus gradibus receptae sunt: ​​primum, fasciculus CSS ex dominio receptatur fonts.googleapis.com, tunc fasciculus hic petit fontes cum fonts.gstatic.com. Non potes scire quae propria files fontium sunt e fonts.gstatic.com necesse erit donec limam CSS oneratis, ita solum ante praeviam connexionem facere possumus.

Hoc tag utere ut acceleraretur tertia pars scriptor vel style paulo debitum ad pre-constitutum nexum.

Noli accen. Constituere et conservare nexum pretiosa operatio est tam clienti quam servo. Hoc tag utere pro maximis 4-6 ditionibus.

details

Ad libitum tag. Navigatorium ad hanc instructionem sequi non requiritur et eam ignorare potest, exempli gratia, si plures nexus iam constitutum est vel in alio casu.

Quid nexus processus includit?. Ad quemlibet locum coniungere, navigatrum sequentia facere debet:

  • DNS resolutio. Invenire servo IP oratio (216.58.215.78) Ad certum domain nomen (google.com).
  • TCP handshake. Commutatio facis (clientis → servo → clientis) ut TCP nexum cum servo inchoaret.
  • TLS handshake (HTTPS locis only). Duae circumeunt fasciculus commutationis (clientis → servo → clientis → servo → clientis) ad securam sessionem TLS inchoandam.

Nota: HTTP/3 mechanismum maculosum emendare et accelerare, sed adhuc longe est.

dns-prefetch

<link rel= "dns-prefetch"> rogat navigatrum ut solutionem DNS praestandi pro dominio in antecessum si mox illi coniungeris et nexum initialem accelerare vis.

Navigatorium electronicum IP definire debet si aliquas facultates recuperabit ex nova tertia factione dominii. Exempli gratia, onerantium Google Fonts, React fontes ex CDN, vel JSON responsionem ab API servo petens.

Pro unoquoque novo ditione, DNS record resolutio typice accipit circiter 20-120 ms. Hoc solum oneratione primae subsidii ex data ditione afficit, sed tamen moram inducit. Si DNS resolutionem in antecessum praestiterimus, tempus servabimus et subsidia citius onerabimus.

Syntax

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

href indicat nomen regio pro quo vis IP inscriptio electronica constituendi. Determinari potest cum praepositione (https://domain.com) Vel sine ea (//domain.com).

Cum utor

Utere pro dominicis quae mox opus erunt facultates inde trahere quod navigatrum non scit de praemissis. Exempli gratia:

  • Vestri application est hosted in my-app.com et petit ut AJAX api.my-app.com: Interrogationes specificas in antecessum non scis quia dynamice fiunt ab JS. Hic satis convenit uti tag ad praecellere cum dominio.
  • Vestri application est hosted in my-app.comet utitur Google Pelvis. Duobus gradibus receptae sunt: ​​primum, fasciculus CSS ex dominio receptatur fonts.googleapis.com, tunc fasciculus hic petit fontes cum fonts.gstatic.com. Non potes scire quae propria files fontium sunt e fonts.gstatic.com necesse erit donec fasciculum CSS onerant, quo modo praevia nexum facere possumus.

Hoc tag utere ut acceleraretur tertia pars scriptor vel style paulo debitum ad pre-constitutum nexum.

Placere note similes notae <link rel= "dns-prefetch"/> и <link rel= "preconnect">. Solet non convenit illis una pro una regione uti: <link rel= "preconnect"> iam includit <link rel= "dns-prefetch"/> et multo magis. Quod quidem iustificari potest in duobus.

  • Visne maior navigatores sustinere?. <link rel= "dns-prefetch" /> fultus quia IE10 et Safari V ". <link rel= "preconnect"> in Chrome et Firefox aliquandiu subnixa, sed tantum addita est Safari in 11.1 et tamen non valet in III / Edge. Si hos navigatores sustentare debes, utere <link rel= "dns-prefetch" /> ut tergum optio for <link rel= "preconnect">.
  • hospites ad ditiones 4-6 plus quam vis accelerare. Tag <link rel= "preconnect"> Non plus quam 4-6 ditionibus uti commendatur, cum connexionem constituere et conservare pretiosa operatio est. <link rel= "dns-prefetch" /> minus facultates consumit, ita utere, si necesse est.

details

Ad libitum tag. Navigatorium hanc disciplinam sequi non requiritur, ut DNS resolutionem praestare non possit, exempli gratia, si in pagina vel in alio casu multa talia sunt.

Quid est DNS?. Unusquisque in Interreti server unicam IP inscriptionem habet quae similis est 216.58.215.78. Nomen situs plerumque in vectem electronicam navigatoris ingressus est (exempli gratia: google.com) et DNS (Nomen Domain System) servientes congruit cum servo IP oratio (216.58.215.78).

Ut inscriptionem IP definias, navigatrum in DNS server inquirere debet. 20−120 ms accipit cum ad novam tertiam partem dominii coniungendam.

DNS conditivo, etsi non admodum certo. Quaedam OS et navigatores cache DNS queries: hoc tempus servabit crebris quaestionibus, sed captio fideri non potest. In Linux fere omnino non operatur. Chrome cella DNS habet, sed solum per minutam durat. Fenestrae cella DNS respondeant per quinque dies.

prerender

<link rel= "prerender"> rogat navigatrum ut Domicilium deprimat et illud in tab invisibili exhibeat. Cum usor cliccum in nexu, pagina statim proponendum est. Hoc utile est, si certus es quod usor aliquam paginam visitabit et eius ostentationem accelerare cupis.

Quamvis (vel propter) eximiam efficaciam huius tag, in MMXIX <link rel= "prerender"> male sustentata in majoribus browsers. Vide plura. inferius.

Syntax

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

href indicat URL vis reddere in curriculo incipere.

Cum utor

Cum vere certus es quod usor ad certam paginam ibit. Si habere "cuniculum" per quod 70% salutantium ad paginam A vade ad paginam B, deinde <link rel= "prerender"> in pagina A ostendet paginam celerrime B ostendet.

Noli accen. Prae- redditio perquam cara est in terminis bandae et memoriae. Non uti <link rel= "prerender"> plus quam una pagina.

details

Ad libitum tag. Navigatorium hanc disciplinam sequi non requiritur et eam ignorare potest, exempli gratia, in lento nexu vel cum memoria gratuita non est.

Servare memoriam Chrome non facit plenam redderequod nisi preload NoState. Hoc significat Chrome paginam omniaque eius facultates onerat, sed JavaScript non reddit vel exequitur.

Firefox et Safari hoc tag omnino non sustinent. Hoc specificationem non violat, cum navigatores ad hanc instructionem sequendam non requirantur; sed tristique etiam. Exsequendam cimex Firefox aperta est per septem annos. Sunt tradit Safari nec hoc tag vel.

summary

Utere:

  • <link rel= "preload"> - cum opus est auxilio brevi tempore
  • <link rel= "prefetch"> - cum opus fuerit eopia in pagina proxima
  • <link rel= "preconnect"> - cum scias te mox auxilio egere, sed nondum plenum URL scis
  • <link rel= "dns-prefetch"> - Similiter, cum scias te mox subsidio egere, sed plenum URL nondum scis (pro navigatoribus vetustioribus)
  • <link rel= "prerender"> - Cum certus es quod utentes ad paginam quandam ibunt et vis eius ostentationem accelerare

Source: www.habr.com

Add a comment