103 Sfaturi timpurii: Ce este și cum să o implementați

103 Early Hints este noul cod de stare HTTP care ajută browserele să decidă ce conținut să preîncarce înainte ca pagina să înceapă chiar să sosească.

După ce a fost menționat pentru prima dată de Cloudflare la sfârșitul anului trecut, acum Google a anunțat oficial că Early Hints este disponibil în versiunea Chrome 103, cu suport pentru preîncărcare și preconectare pentru a începe:

În rândurile următoare, veți afla ce este exact Early Hints și cum le puteți implementa pe site-ul dvs. web pentru a îmbunătăți performanța.

Dar înainte de asta, trecem printr-o scurtă trecere în revistă a modului în care funcționează browserele și de ce a fost nevoie de Sfaturi timpurii în primul rând.

Pe scurt: browsere, servere și server Think-Time

Pentru ca dvs. să încărcați această pagină (sau orice altă pagină) și să citiți conținutul, browserul dvs. avea nevoie de instrucțiuni pentru ce să randați și ce resurse (cum ar fi imagini, fonturi, fișiere JavaScript) trebuie preluate pentru a finaliza pictura.

Practic, browserul dvs. trimite o solicitare către un server, iar instrucțiunile despre ce să încărcați provin din răspunsul serverului.

Din păcate, ar putea exista o latență de câteva sute de milisecunde până când serverul adună toate resursele necesare pentru a compila întreaga pagină web și a o trimite înapoi în browser.

Această perioadă este cunoscută sub numele de „timpul de gândire al serverului”.

În timpul acestei perioade de gândire a serverului, browserul rămâne acolo și așteaptă fără a afișa niciun conținut. Și cred că am putea fi de acord că nimeni nu vrea să se uite la un ecran gol.

Acolo intră în joc Sfaturile timpurii.

Ce este Early Hints?

O modalitate de a îmbunătăți performanța paginii este să folosești indicii de resurse. După cum sugerează și numele lor, ei oferă browserului „sfaturi” despre ce resurse ar putea avea nevoie mai târziu – de exemplu, preîncărcarea anumitor fișiere sau conectarea la un alt server.

Dacă sunteți interesat de subiect și doriți să aflați mai multe, consultați articolul nostru despre sugestii de resurse și implementarea acestora.

Oricât de grozav ar suna să folosești indicii de resurse, există o captură. Pentru ca browserul să acționeze asupra lor, serverul trebuie să trimită cel puțin o parte din pagină.

Introduceți sugestii timpurii.

Early Hints profită de „timpul de gândire al serverului” pentru a trimite în mod asincron instrucțiuni către browser pentru a începe să încarce subresurse critice (cum ar fi foi de stil, fișiere JavaScript critice etc.) sau pentru a stabili o conexiune cu originile care sunt probabil să fie utilizate pe pagina în timp ce serverul compilează răspunsul complet.

Fără indicii timpurii

În termeni mai simpli:

Cu Early Hints activat, serverul trimite două răspunsuri: primul (codul de stare HTTP 103 Early Hints) pentru a instrui browserul despre ce poate începe să se încarce imediat, iar al doilea (codul de stare HTTP 200) este răspunsul complet cu restul. informație.

Cu Sfaturi timpurii activate

Trimițând aceste indicii către browser înainte de compilarea răspunsului complet, browserul își poate da seama ce trebuie să facă pentru a încărca mai rapid pagina web pentru utilizator.

Rezultatul final:

Timpi de încărcare a paginii mai rapid și latență redusă percepută de utilizator.

Dacă sunteți în căutarea unei explicații mai formale, Cloudflare a făcut o treabă grozavă furnizând-o:

Implementarea sugestiilor timpurii pe site-ul dvs. web

Trebuie să faceți mai mulți pași pentru a implementa cu succes Sfaturile timpurii pe site-ul dvs. web.

Pasul 0: Luați în considerare utilizarea link rel=preload sau link rel=preconnect în loc de Early Hints

Acesta este pasul 0, deoarece dacă serverul dvs. poate trimite imediat un răspuns de 200, adăugarea de sugestii timpurii este inutilă . În schimb, dacă doriți să accelerați răspunsul 200, chiar mai mult, puteți utiliza linkul rel=preload sau link rel=preconnect resursă.

Cel mai simplu mod de a determina cât de repede trimite serverul tău răspunsul 200 este să folosești instrumentul de testare a performanței KeyCDN. Tot ce trebuie să faceți este să introduceți adresa URL a site-ului dvs. și să obțineți datele:

Pasul 1: Identificați-vă paginile de top

În cazul în care pasul 0 nu este valabil pentru dvs. și serverul dvs. are nevoie de timp pentru a genera răspunsul, aveți toate condițiile preliminare pentru a continua cu integrarea Sfaturilor timpurii.

Primul pas este să identificați cele mai bune pagini de destinație sau, cu alte cuvinte, pagina în care utilizatorii încep călătoria pe site-ul dvs. Aceste puncte de intrare sunt mai importante decât orice alte pagini, deoarece eficiența Sfaturilor timpurii scade pe măsură ce vizitatorii dvs. navighează prin site-urile dvs. web .

Acest lucru se datorează faptului că browserele moderne sunt destul de bune să ghicească ce pagină va vizita utilizatorul în continuare și probabil că au toate resursele secundare de care au nevoie la a doua sau a treia navigare ulterioară.

Pasul 2: identificați originile critice și sub-resursele care contribuie cel mai mult la valorile cheie ale performanței

După ce v-ați identificat paginile de destinație de top, ar trebui să treceți la identificarea originilor și sub-resurselor care sunt candidați buni pentru indicii de preconectare sau preîncărcare. Acestea ar fi originile și resursele care contribuie în mod masiv la valorile cheie, cum ar fi cea mai mare vopsea de conținut și prima vopsea de conținut.

Mai precis, ați dori să căutați subresurse care blochează randarea, cum ar fi JavaScript sincron, foile de stil sau chiar fonturile web.

Le puteți identifica rulând site-ul dvs. printr-un instrument de testare, cum ar fi WebPageTest și verificând diagrama cascadă. Toate resursele care blochează randarea ar avea un „X” în fața lor:

Cea mai simplă modalitate de a identifica sub-resurse potrivite pentru Early Hints este dacă resursele dvs. principale utilizează deja link rel=preconnect sau link rel=preload . Aceștia sunt candidații perfecți.

Și așa puteți adăuga manual Sfaturi timpurii pe site-ul dvs. web.

Dar ce se întâmplă dacă nu aveți abilitățile tehnice pentru a o face singur?

Ei bine, există o cale mai ușoară.

Activarea sugestiilor timpurii folosind contul dvs. Cloudflare

Dacă sunteți utilizator Cloudflare, puteți activa Sfaturile timpurii prin tabloul de bord, urmând următorii pași:

1. Conectați-vă la tabloul de bord Cloudflare și selectați-vă domeniul.
2. Din tabloul de bord, faceți clic pe Viteză > Optimizare.
3. Sub Livrare optimizată, activați Sfaturile timpurii.

După cum probabil știți, CDN-ul încorporat al NitroPack este oferit și de Cloudflare. Această tranziție ne-a deschis ușa pentru a începe să lucrăm la o nouă funcție HTML edge caching, care, atunci când va fi lansată, ne va permite să oferim tuturor clienților noștri posibilitatea de a activa Early Hints fără a avea un cont Cloudflare.

Ne aflăm adânc în procesul de dezvoltare și lucrăm din greu pentru a elibera cât mai curând posibil cache-ul HTML. Așa că asigurați-vă că vă abonați la buletinul nostru informativ și urmăriți blogul nostru pentru a fi primii care află când îl anunțăm.