Ce face <link rel=preconnect> și dns-prefetch
Înainte să descarce un fișier de pe alt domeniu, browserul trebuie să afle adresa IP (DNS), să deschidă conexiunea și să negocieze HTTPS. rel="preconnect" face acești pași imediat, astfel încât prima cerere către domeniu pornește direct.
rel="dns-prefetch" face doar primul pas, căutarea DNS. Costă mai puțin și se poate folosi pentru domeniile mai puțin importante.
Fiecare conexiune deschisă consumă resurse, iar browserul o închide dacă nu o folosești în câteva secunde. Folosește preconnect doar pentru 2-3 domenii pe care pagina le cere sigur și devreme.
Atribute
| Atribut | Descriere |
|---|---|
href |
Originea domeniului (protocol + domeniu), de exemplu https://fonts.gstatic.com. |
crossorigin |
Necesar când fișierele de pe domeniu se cer cu CORS (fonturi, fetch); conexiunile CORS și cele fără CORS sunt separate. |
Exemple
Exemplul 1: Google Fonts: două domenii
CSS-ul fonturilor vine de pe fonts.googleapis.com, iar fișierele de font de pe fonts.gstatic.com, cu CORS.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap">Ce afișează browserul
În DevTools → Network, cererile către fonts.gstatic.com nu mai au timp de DNS, conexiune și TLS la început.Exemplul 2: preconnect pentru domeniul principal, dns-prefetch pentru restul
Imaginile vin de pe CDN (folosit imediat); harta și statisticile se încarcă mai târziu.
<link rel="preconnect" href="https://cdn.exemplu.ro">
<link rel="dns-prefetch" href="https://maps.exemplu.ro">
<link rel="dns-prefetch" href="https://statistici.exemplu.ro">Ce afișează browserul
Conexiunea către cdn.exemplu.ro e gata înainte de prima imagine; pentru celelalte două domenii adresa IP este deja cunoscută.Greșeli frecvente
- Preconnect către domeniul propriu: conexiunea cu el există deja, deci nu câștigi nimic.
- Lipsa lui
crossoriginpentru domeniul fonturilor: browserul deschide o conexiune care nu se potrivește și apoi încă una. - Preconnect către zece domenii: conexiunile nefolosite sunt închise, iar cele reale pierd prioritate.
Comenzi înrudite
<link rel=preload>: Cere browserului să descarce devreme o resursă de care pagina are sigur nevoie curând: font, imagine principală, script sau CSS.<link>: Leagă documentul curent de resurse externe: fișiere CSS, pictograme (favicon), fonturi web sau versiuni canonice.<head>: Conține metadatele documentului, linkuri către fișiere CSS, scripturi și informații pentru motoarele de căutare.