Preîncărcare Preluare Preconectare
Folosim fiecare truc pentru a accelera site-urile web. Optimizarea imaginilor. CDN-uri. GZIP. Memorarea în cache. Dar, pe măsură ce site-urile devin mai complexe și împovărate, răspunsul reactiv la interacțiunile utilizatorilor nu este suficient. Trebuie să fim pro-activi – trebuie să anticipăm ce doresc utilizatorii și chiar să pregătim acel conținut pentru ei înainte de al cere.
Cu sugestii și directive cu privire la resurse, puteți face exact acest lucru – spuneți browserelor să preia și să descarce resurse pentru paginile dvs. din timp pentru o performanță mai bună a site-ului web real și perceput. Această tehnică este cunoscută sub numele de prebrowsing.
În acest articol, vom explora trei sugestii cheie de resurse: preîncărcare preluare preconectare, împreună cu modul în care funcționează, beneficiile lor și cum să le utilizăm.
Ce este Prebrowsing?
Steve Souders a inventat termenul de prebrowsing (din navigare predictivă) în 2013.
Prebrowsing înseamnă anticiparea acțiunilor utilizatorilor și pregătirea conținutului de pe site-ul dvs. pe care și l-ar putea dori utilizatorul înainte de a avea nevoie de el. Este un concept pentru un internet mai rapid, așa cum scrie Santiago Valdarrama de la A List Apart în articolul său, One Step Ahead: Improving Performance with Prebrowsing:
„Browserele lucrează deja în culise și caută modele pe site-urile noastre pentru a face navigarea cât mai rapidă posibil. Navigarea prealabilă se bazează pe asta: putem combina informațiile pe care le avem în propriile pagini cu o analiză ulterioară a modelelor utilizatorilor. Ajutând browserele să facă o treabă mai bună, accelerăm și îmbunătățim experiența pentru utilizatorii noștri.”
S-ar putea să vă întrebați: „Nu pentru asta este caching-ul?” Ei bine, da. Memorarea în cache a browserului este esențială pentru încărcarea rapidă a paginilor. Dar există momente când memorarea în cache are nevoie de puțin ajutor:
- Prima vizită a site-ului web: prima dată când un utilizator vizitează un site, browserul său nu a stocat încă în cache nicio resursă statică.
- Datele din browser șterse: utilizatorii care își șterg memoria cache a browserului nu vor mai avea o copie a resurselor dvs. data viitoare când vă vizitează site-ul.
- Date expirate ale browserului: conform HTTP Archive, 69% dintre resurse nu au antete de stocare în cache sau pot fi stocate în cache pentru mai puțin de o zi. Dacă utilizatorul revizitează aceste pagini și browserul stabilește că resursa a expirat, este necesară o solicitare HTTP pentru a verifica dacă există actualizări. Chiar dacă răspunsul indică că resursa din cache este încă valabilă, aceste întârzieri în rețea fac în continuare paginile să se încarce mai lent, în special pe mobil.
- Date vechi ale browserului: chiar dacă un utilizator a păstrat în cache conținut dintr-o vizită anterioară, este posibil ca site-ul web să se fi schimbat sau să fie actualizat cu resurse noi.
Din fericire, tehnicile de navigare vă pot ajuta să ocoliți aceste probleme.
1.Preîncărcare
Ați vrut vreodată să spuneți browserului despre un font sau un script important fără a întârzia evenimentul de încărcare a paginii?
Cu preload, puteți face exact asta. Această directivă spune browserului că este necesară o resursă ca parte a navigării curente și că ar trebui să înceapă să fie preluată cât mai curând posibil.
Iată un exemplu de utilizare:
<link rel="preload" as="script" href="really-important-stuff.js"> <link rel="preload" as="style" href="top-priority.css">
După cum explică Yoav Weiss, un arhitect principal la Akamai, care a lucrat la acest standard web:
„[Preload oferă] un control mai granular al încărcării dezvoltatorilor web. Oferă dezvoltatorilor posibilitatea de a defini logica de încărcare personalizată fără a suferi penalizarea performanței pe care o implică încărcările de resurse bazate pe scripturi.”
Când specificați că o resursă este necesară prin preîncărcare, aceasta este descărcată cu prioritate și stocată în browser, așteptând până când este referită în DOM, JavaScript sau CSS.
Atributul as spune browserului ce tip de resursă va descărca, astfel încât să poată fi gestionat corect. Fără acesta, browserul nu va folosi resursa preîncărcată. Valorile posibile includ:
- “font”
- “script”
- “style”
- “image”
- “media”
- “document”
<link rel=”preload”> supersedes <link rel=”subresource”>, care, conform Google, avea erori și dezavantaje semnificative. Nu a fost niciodată implementat în alte browsere decât Chrome. Ca atare, Chrome 50 a eliminat suportul pentru acesta în martie 2016.
De asemenea, este important să știți că preîncărcarea este o instrucțiune obligatorie pentru browser. Spre deosebire de celelalte sugestii de resurse pe care le vom analiza în această postare, preîncărcarea este ceva ce browserul trebuie să facă, mai degrabă decât opțional.
Weiss a publicat un ghid de preîncărcare înainte de lansarea sa în Chrome. Dacă sunteți interesat să învățați cum să utilizați eficient acest indiciu de resursă, vă recomand să citiți ghidul său.
Nu uitați că preîncărcarea este utilă pentru a optimiza Largest Contentful Paint.
2.Preluare
Crezi că poți prezice unde va face clic sau va interacționa utilizatorul în continuare?
Sugestia de prefetch este oarecum diferită de preîncărcare. Nu încearcă să facă ceva critic să se întâmple mai repede; mai degrabă, încearcă să facă ceva care nu este critic să se întâmple mai devreme – dacă există o șansă.
Cu preluare, puteți spune browserului să preia resursele de care credeți că utilizatorul ar putea avea nevoie mai târziu, ca parte a unei viitoare navigații sau interacțiuni, dacă utilizatorul întreprinde acțiunea pe care o așteptați. Aceste resurse vor fi apoi preluate cu cea mai mică prioritate în browser când pagina curentă se termină de încărcat și există lățime de bandă disponibilă.
Aceasta înseamnă că preluarea este cel mai bine utilizată pentru a anticipa următoarea acțiune a utilizatorului și a se pregăti pentru aceasta, cum ar fi preluarea scripturilor sau imaginilor necesare.
Există 3 tipuri de pre-preluare și ceea ce am descris mai sus este cunoscut de obicei sub denumirea de prefetching linkuri.
Conform documentelor web MDN ale Mozilla pentru preluarea prealabilă a linkurilor:
„… După ce browserul a terminat de încărcat pagina, începe să preia în tăcere documentele specificate și le stochează în memoria cache. Când utilizatorul vizitează unul dintre documentele preluate în prealabil, acesta poate fi difuzat rapid din memoria cache a browserului.”
Pentru acest tip de preluare preliminară, browserul caută preluarea preliminară fie într-un antet HTML <link>, fie într-un antet HTTP Link:. Iată un exemplu de utilizare a etichetei de link:
<link rel="prefetch" href="page-2.html">
Și iată același indiciu de preluare a linkului folosind un antet HTTP Link:
Link: </page-2.html>; rel=prefetch
Celelalte tipuri de preluare preliminară sunt preluarea preliminară DNS și redarea preliminară.
Preluare DNS
Preluarea DNS vă permite să spuneți browserului să efectueze căutări DNS pe o pagină în fundal în timp ce utilizatorul navighează. Deci, în momentul în care utilizatorul face clic pe un link așa cum era anticipat, aspectul DNS a avut deja loc, reducând astfel latența.
Preluarea DNS poate fi adăugată la o anumită adresă URL prin adăugarea etichetei rel=”dns-prefetch” la atributul link. De exemplu:
<link rel="dns-prefetch" href="//fonts.googleapis.com">
Intrarea de preluare DNS a documentelor web MDN Mozilla explică că:
„Solicitările DNS sunt foarte mici în ceea ce privește lățimea de bandă, dar latența poate fi destul de mare, în special pe rețelele mobile. Prin prelevarea speculativă a rezultatelor DNS, latența poate fi redusă semnificativ în anumite momente, cum ar fi atunci când utilizatorul face clic pe link. În unele cazuri, latența poate fi redusă cu o secundă. ”
Preredare
Preredarea preliminară îmbunătățește lucrurile, permițându-vă să spuneți browserului să descarce pagini întregi.
Să presupunem, că știți cu siguranță (pentru că v-ați verificat analiza și este un model de utilizare obișnuit) că utilizatorii vor ajunge pe pagina dvs. de pornire și apoi vor continua să acceseze servicii.html, deoarece aceasta este cea mai populară navigare. Puteți oferi browserului un indiciu de resursă:
<link rel="prerender" href="http://exemplu.ro/servicii.html">
După descărcarea paginii de pornire, browserul va descărca apoi servicii.html în fundal și îl va avea pregătit pentru utilizator de îndată ce acesta îl va solicita. Când în cele din urmă dă clic pe linkul „Servicii”, pagina redată în prealabil se va încărca instantaneu.
Dar ce se întâmplă dacă utilizatorul nu face clic pentru a vă vizita pagina „Servicii” și în schimb navighează la pagina „Despre”? Inutil să spun că pre-rendarea este o tehnică riscantă, deoarece pariezi pe următoarea mișcare a unui utilizator.
Dacă aveți dreptate, veți economisi timpul de a descărca o altă pagină. Dar dacă vă înșelați, aceasta poate provoca o risipă majoră de lățime de bandă, ceea ce este dăunător utilizatorilor de telefonie mobilă.
Ce este Preconnect?
Resursele terță parte pot încetini cu adevărat o pagină datorită în mare măsură numărului de călătorii dus-întors necesare înainte ca browserul să poată începe efectiv să descarce resursa. Aceste călătorii dus-întors includ căutarea DNS, conectare TCP și negociere TLS pentru HTTPS.
În funcție de pagină și de condițiile rețelei, aceste călătorii dus-întors pot adăuga sute de milisecunde de latență sau chiar mai mult, care se pot adăuga rapid dacă solicitați resurse de la mai multe gazde diferite. De exemplu, pagina dvs. s-ar putea conecta la Twitter și Facebook pentru distribuirea socială, Gravatar pentru comentarii și Google Analytics pentru analiză.
Dar ce se întâmplă dacă ai putea elimina unele dintre aceste călătorii dus-întors și ai accelera performanța percepută și timpul real de încărcare?
Preconnect vă permite să spuneți browserului că pagina dvs. intenționează să stabilească o conexiune la o resursă externă și că doriți ca procesul să înceapă cât mai curând posibil. Iată un exemplu despre cum ați folosi acest indiciu de resursă:
<link rel=”preconnect” href=”https://exemplu.ro”>
Să presupunem că doriți să accelerați afișarea fonturilor web Fonturi Google pe pagina dvs. Serviciul este fiabil și în general, rapid datorită CDN-ului global Google. Dar, deoarece regulile @font-face trebuie mai întâi descoperite în fișierele CSS înainte ca browserul să facă solicitări de font web, poate exista un fulger vizibil de conținut fără stil (FOUC) în timpul redării paginii.
Cu preconectare, puteți reduce foarte mult această întârziere adăugând următorul indiciu de preconectare:
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
După cum scrie Jeremy Frank, dezvoltatorul principal Viget, în ghidul său pentru indicii de preconectare, adăugarea de pre-conexiune a eliminat 3 călătorii dus-întors din calea critică de redare în timpul testării sale și a redus mai mult de jumătate de secundă de latență:
Ceea ce este grozav la acest exemplu special este că utilizarea pre-conectării ajută la reducerea blocării redării și îmbunătățește timpul de paint (inclusiv LCP încă o dată).
Potrivit inginerului de performanță web de la Google, Ilya Grigorik:
„Pre-conectarea este un instrument important în setul de instrumente de optimizare… poate elimina multe călătorii dus-întors costisitoare din calea solicitării – în unele cazuri reducând latența solicitării cu sute și chiar mii de milisecunde.”
Concluzie
Tehnicile de prebrowsing există de câțiva ani și sunt mai răspândite pe web decât vă puteți da seama — Google folosește indicii de resurse pentru a face căutarea aproape instantanee pentru utilizatorii săi.
Mai mult, cu WP Rocket poți beneficia de preîncărcare și preîncărcare DNS fără să te obosești prea mult! Și nu uitați că îmbunătățirea performanței web înseamnă și îmbunătățirea scorurilor Core Web Vitals!
Sunteți gata să începeți să navigați în prealabil pe site-ul dvs.?
Gândește-te la ceea ce știi despre paginile tale și despre utilizatorii tăi; începeți să notați tiparele utilizatorilor, căutați în Google Analytics pentru a afla cum navighează utilizatorii pe site-ul dvs. și ce resurse folosesc. Înarmat cu aceste informații, puteți accelera și îmbunătăți experiența utilizatorului prin Preîncărcare Preluare Preconectare.
