Preîncărcare, preconectare, preluare preliminară: îmbunătățiți performanța site-ului dvs. cu sugestii de resurse

Browserele web moderne folosesc tot felul de tehnici diferite pentru a îmbunătăți performanța generală a site-ului dvs. - de la prioritizarea celor mai importante resurse și preluarea lor mai întâi până la ghicirea ce pagină va vizita utilizatorul în continuare.

Cu toate acestea, nu ar trebui să vă bazați pe browsere, oricât de avansate ar fi, pentru a lua toate deciziile cu performanța site-ului dvs.

În calitate de proprietar de site, tu știi care sunt resursele cele mai importante și care este călătoria reală a utilizatorului pe site-ul tău. Și pentru a îmbunătăți performanța generală, viteza percepută și experiența utilizatorului site-ului dvs., puteți folosi aceste cunoștințe pentru a ajuta browserele să vă încarce paginile mai repede.

Aici intervin indicii de resurse.

În rândurile următoare, vom arunca o privire la ele și la cum să le folosim avantajele în cel mai bun mod posibil.

Să ne scufundăm în ea.

Cum funcționează browserele (pe scurt)

Pentru a înțelege mai bine indicațiile de resurse și unde sunt aplicabile, să aruncăm o privire rapidă asupra modului în care browserele încarcă de fapt conținutul.

Am putea împărți întregul proces al unui browser de încărcare a unei pagini în trei pași:

• Stabilirea conexiunii;
• Descărcarea, analizarea și redarea codului;
• Realizarea paginii interactive;

În prima etapă, browserul trebuie să stabilească o conexiune cu serverul pentru a descărca resursele. Aceasta include căutarea numelui de domeniu și rezolvarea acestuia la o adresă IP, configurarea unei conexiuni la server și criptarea conexiunii pentru securitate.

Odată ce totul este gata, browserul poate continua cu descărcarea și analizarea informațiilor, construirea modelului de obiecte document (DOM) și modelul obiectelor CSS (CSSOM) și apoi redarea conținutului.

Ultima parte este să faci pagina interactivă. Toate procesele menționate mai sus au loc în firul principal. Deci, după ce firul principal al browserului s-a terminat cu analizarea, redarea și pictarea paginii, este timpul să vă ocupați de fișierele JavaScript amânate pentru a face pagina disponibilă pentru derulare, atingere și alte interacțiuni.

Pe scurt, acesta este procesul din culise de fiecare dată când se încarcă o pagină.

Să vedem cum poți avea un impact pozitiv asupra fiecăreia dintre aceste etape prin integrarea indicațiilor de resurse.

Sugestii pentru resurse: Preluare, Preconectare, Preîncărcare

După cum sugerează și numele, indicii de resurse sunt indicii sau instrucțiuni care spun browserului cum ar trebui să gestioneze anumite resurse sau pagini web. Cu alte cuvinte, acest set de instrucțiuni vă permite să ajutați browserul să prioritizeze originile sau resursele care trebuie preluate și redate.

Toate sugestiile de resurse folosesc atributul rel al elementului link pe care îl veți găsi în capul documentelor HTML.

Integrarea acelor fragmente de cod HTML pe site-ul dvs. web va permite browserului să înceapă să încarce fișierele selectate mai devreme decât dacă browserul le găsește în cursul normal al încărcării paginii.

Și acum că elementele de bază sunt în spatele nostru, să trecem la partea pentru care sunteți aici - prezentare generală a sugestiilor de resurse, beneficiile acestora și când să le folosiți.

Preluare

link rel=prefetch este un indiciu de resursă cu prioritate scăzută care permite browserului să preia resursele care ar putea fi necesare mai târziu și să le stocheze în memoria cache a browserului.

Deoarece preluarea preliminară setează o prioritate foarte scăzută, nu utilizați acest indiciu pentru fișiere de mare importanță .

Unul dintre cele mai bune cazuri de utilizare este utilizarea preîncărcării pentru a îmbunătăți timpul de încărcare a paginilor ulterioare. De exemplu, puteți aplica directiva prefetch în timpul autentificării unui utilizator. În acest fel, puteți profita de timpul necesar pentru a introduce acreditările pentru a preîncărca resursele necesare pentru pagina pe care o vor vedea în continuare.

Anticipând pașii vizitatorilor pe site-ul dvs. și preluând resursele, puteți îmbunătăți valori precum First Contentful Paint și Time to Interactive. Ceva pe care Netflix a făcut-o și și-a redus timpul la interactiv cu 30%.

Tot ceea ce am menționat până în acest moment se referă la preîncărcarea, cunoscută și sub denumirea de preîncărcare a linkurilor. Dar există alte două tipuri de preluare care sunt la fel de importante și trebuie să menționăm:

1. Preîncărcarea DNS
Browserul trebuie să efectueze o căutare DNS pentru a converti un nume de gazdă (URL-ul) într-o adresă IP înainte de a se conecta la gazdă (server de origine).

Deși acest lucru durează de obicei doar milisecunde, dacă un site web încarcă fișiere de la un nume de domeniu terță parte, ceea ce fac majoritatea site-urilor web, browserul trebuie să efectueze o căutare DNS pentru fiecare domeniu. Unele site-uri (de exemplu, site-uri de știri) folosesc o mulțime de resurse externe, ceea ce înseamnă că ar putea fi necesare zeci de căutări DNS pe pagină.

În aceste cazuri, utilizarea indicației dns-prefetch ar putea economisi câteva milisecunde, deoarece instrucțiunea îi spune browserului să înceapă acel proces imediat, mai degrabă decât dacă necesitatea este descoperită mai târziu în procesul de încărcare.

După cum se sugerează în Web Almanac 2021, o bună practică este să combinați dns-prefetch cu indiciu de preconectare pentru rezultate optime. Puteți vedea de ce în secțiunea în care vorbim despre preconectare .

2. Pre-rendarea
Pre-rendarea este foarte asemănătoare cu preluarea preliminară, prin faptul că optimizează resursele la care utilizatorul le poate naviga în continuare. Diferența este că prerendarea redă de fapt întreaga pagină în loc de resurse specifice.

Preconectare

La fel ca dns-prefetch , directiva de preconectare ajută browserul să stabilească conexiuni timpurii înainte de a trimite o solicitare inițială către server.

Cu toate acestea, indicația de preconectare duce un pas mai departe. În timp ce efectuează căutări DNS, include, de asemenea, negocieri TLS și strângeri de mână TCP. Acest lucru, la rândul său, elimină latența dus-întors și economisește și mai mult timp.

Dar aici vine întrebarea:

Dacă preconectarea face tot ce face dns-prefetch și mai sus, de ce aș folosi dns-prefetch în primul rând?

În cele mai multe cazuri, preconectarea este opțiunea preferată pentru dns-prefetch , dar problema este că preconectarea nu este acceptată de unele browsere:

Sursa: caniuse.com

Partea bună este că le puteți folosi împreună pentru a profita la maximum de ele. Puteți beneficia de preconectare în browserele care o acceptă cu o alternativă la dns-prefetch :

Potrivit Google:

În 2019, Chrome a reușit să-și îmbunătățească Time To Interactive cu aproape 1 secundă, preconectându-se la origini importante.

Preîncărcare

Înainte de a explica cum funcționează directiva de preîncărcare , trebuie să clarificăm ceva.

Deși preîncărcarea este menționată în mod regulat ca „Sugestie de resurse”, nu este. Preîncărcarea este o preluare declarativă și este obligatorie pentru browsere , ceea ce o face mai degrabă o comandă decât un indiciu.

Acestea fiind spuse, preîncărcarea este folosită pentru a forța browserul să descarce o resursă mai devreme decât ar descoperi browserul, deoarece este crucială pentru pagină.

Directiva de preîncărcare funcționează cel mai bine pe resursele care fac parte din calea critică de redare, dar nu sunt ușor de descoperit de browser. De exemplu, fonturi, CSS sau JavaScript critic.

O altă diferență față de sugestiile dns-prefetch și preconnect este că, deși au nevoie doar de atributele rel și href , preîncărcarea este mai complicată. Trebuie să adăugați atributul as , care indică tipul de conținut al resursei pe care doriți să o preîncărcați.

Potrivit lui Addy Osmani, manager de inginerie la Google, furnizarea unui atribut ca atunci când preîncărcarea este obligatorie:

Iată o listă completă de valori pe care le puteți specifica:

Includerea atributului as ajută browserul să stabilească prioritatea resursei preluate în prealabil în funcție de tipul acesteia și să determine dacă resursa există deja în cache.

Consultați documentul privind prioritățile și programarea resurselor Chrome pentru a afla mai multe despre modul în care sunt prioritizate diferitele tipuri de resurse.

Pentru unele resurse, cum ar fi fonturile, trebuie să includeți și atributul crossorigin .

Atributul crossorigin setează modul solicitării la o solicitare HTTP CORS. CORS (Cross-Origin Resource Sharing) este un mecanism care permite unui server să indice orice alte origini decât propriile origini de la care un browser ar trebui să permită încărcarea resurselor. Nu vom aprofunda acest lucru, deoarece nu este punctul central al acestui articol, dar puteți găsi mai multe informații aici.

Și asemănător cu atributul as , preîncărcarea fonturilor fără origini încrucișate va duce dublarea. Iată un alt fragment din articolul lui Addy Osmani pe această temă:

Mai multe sugestii de resurse, mai multe probleme

Citind totul până acum, s-ar putea să începi să te gândești că folosirea cât mai multor indicii de resurse ar duce doar la încărcarea paginilor de către browsere fulgerător.

Din păcate, nu este cazul.

Iată câteva dintre dezavantajele pe care ar trebui să le țineți cont atunci când integrați indicii de resurse:

1. Preluarea poate crește consumul de date

Deși prefatch stabilește o prioritate scăzută de descărcare, asta nu înseamnă că este inofensiv. Utilizarea acestuia ar putea crește consumul de date pe site-ul dvs., ceea ce poate prezenta probleme atât pentru dvs. (trafic crescut pe serverul dvs.), cât și pentru utilizatorii dvs. (consum excesiv inutil de resurse). În plus, puteți ajunge să încărcați octeți suplimentari care ar putea să nu fie utilizați în cele din urmă. Așa că gândește-te de două ori înainte de a-l integra.

2. Prerandarea poate cauza pierderi de lățime de bandă

Pariul cu redarea preliminară este chiar mai mare decât preluarea preliminară, deoarece descărcați pagini întregi în avans. Acest lucru face ca sugestia să fie grea în resurse și poate provoca risipă de lățime de bandă, în special pe dispozitivele mobile. Și partea cea mai proastă este că utilizatorii ar putea să nu vadă nici măcar efectul indicii dacă nu solicită pagina.

3. Preconectarea poate duce la o utilizare suplimentară a procesorului

Deși preconectarea este un indiciu cu prioritate scăzută, aceasta poate încă dăuna performanței site-ului dvs. web. Dacă o conexiune stabilită nu este utilizată rapid (în 10 secunde pe Chrome), atunci directiva de preconectare adaugă doar utilizarea suplimentară a procesorului și va fi închisă automat de browser. În plus, ar trebui să utilizați preconectarea cu moderație, deoarece dimensiunea certificatelor de criptare este de aproximativ 3 KB, ceea ce ar concura cu lățimea de bandă pentru alte resurse importante.

4. Preîncărcarea suprascrie prioritățile stabilite de analizorul browserului

preîncărcarea este o instrucțiune puternică, deoarece vă permite să faceți browser-ul să descarce imediat o resursă. Cu toate acestea, browserele web moderne sunt destul de bune la prioritizarea resurselor, așa că utilizarea excesivă a preîncărcării poate duce la rezultate negative. De exemplu, dacă adăugați o directivă de preîncărcare care se potrivește cu o adresă URL a resursei asincrone, browserul o va prelua mai repede, așa că o va analiza mai repede, anulând efectul atributului dvs. asincron prin întreruperea firului principal foarte devreme în încărcarea paginii.

Recapitulare

Am acoperit o mulțime de teren în acest articol, așa că haideți să facem o recapitulare rapidă a celor mai esențiale puncte:

• dns-prefetch și preconnect sunt folosite pentru a prioritiza numele de domenii (de exemplu, https://example.com).
• prefetch și preload sunt folosite pentru a prioritiza încărcarea resurselor. În timp ce preîncărcarea este utilizată pentru a îmbunătăți timpul de încărcare a paginilor ulterioare, preîncărcarea funcționează cel mai bine pe resursele critice pentru pagina curentă.
• pre- rendarea face referire la o pagină întreagă (de exemplu, blog.html).
• prefetch , prerender și preconnect sunt indicii de resurse și sunt executate așa cum consideră browserul de cuviință. Directiva de preîncărcare este o comandă care este obligatorie pentru browsere.
• Când utilizați preload , nu uitați să furnizați atributele as și crossorigin pentru a evita preluarea dublă.
• Deși sugestiile de resurse sunt instrucțiuni cu prioritate redusă, ele reprezintă totuși o amenințare pentru performanța site-ului dvs. Folosiți-le cu moderație și numai atunci când este necesar.
• preload este o directivă puternică care poate suprascrie prioritățile analizorului browserului. Nu uitați că browserele moderne sunt destul de bune la prioritizarea resurselor, așa că utilizați „hint” de preîncărcare cu moderație.

Utilizați cunoștințele nou dobândite despre indicii de resurse pentru a accelera livrarea conținutului și a activelor și pentru a îmbunătăți performanța generală a site-ului dvs. Și nu uitați să vă testați site-ul web în lumea reală (concentrați-vă pe datele de teren) de fiecare dată când faceți o schimbare.