Cum să evitați înlănțuirea cererilor critice
Publicat: 2023-08-03Primiți avertismentul „Evitați înlănțuirea solicitărilor critice” de fiecare dată când rulați un test PageSpeed Insights?
Ei bine, asta se termină astăzi.
După ce ați citit acest ghid, veți ști totul despre solicitările critice, modul în care înlănțuirea acestora vă afectează performanța și, cel mai important, cum să remediați avertismentul „Evitați înlănțuirea cererilor critice”.
- Ce este considerată o cerere critică?
- Ce înseamnă „Evitați înlănțuirea cererilor critice”.
- Cum vă afectează performanța înlănțuirea solicitărilor critice
- Cum să evitați înlănțuirea cererilor critice pe WordPress
- Bonus: Alte bune practici pentru a remedia „Evitați înlănțuirea cererilor critice”
Citește mai departe.
Ce este considerată o cerere critică?
O solicitare critică este o resursă care este esențială pentru redarea vizualizării inițiale a unei pagini web. Cu alte cuvinte - tot ceea ce este încărcat deasupra pliului.
De exemplu, iată ce văd pe laptopul meu când încarc pagina de pornire a NitroPack:
Toate elementele de mai sus sunt considerate critice, deoarece, în funcție de cât de repede sunt încărcate, utilizatorul poate avea o experiență grozavă sau poate sări imediat.
Ce înseamnă Avoid Chaining Critical Requests?
Mai simplu spus, avertismentul „Evitați înlănțuirea solicitărilor critice” înseamnă că resursele critice necesare pentru a vă afișa pagina sunt prea mari.
În ceea ce privește partea de înlănțuire, un lanț de cereri critice este o secvență de solicitări care depind unele de altele și sunt esențiale pentru redarea paginii. Ordinea în care cererile sunt analizate și executate este determinată de Critical Rendering Path (CRP).
Calea critică de redare se referă la secvența de pași pe care îi face un browser web pentru a converti codul HTML, CSS și JavaScript într-o reprezentare vizuală pe ecranul unui utilizator.
Când browserul începe să analizeze codul, procesează cererile critice pe baza priorității atribuite:
Acum că știți ce este CRP și cum atribuie browserele prioritățile, să revenim la definiția „lanțului de cereri critice”.
Deoarece este o secvență de solicitări caredepind una de cealaltă , încărcarea solicitărilor critice mari și neoptimizate va duce inevitabil la lanțuri critice mai lungi, încetinind încărcarea paginii.
Pentru a ilustra această afirmație, să aruncăm o privire la următorul exemplu:
Imaginați-vă o pagină web simplă care include următoarele resurse:
- index.html – fișierul HTML principal care definește structura paginii.
- styles.css – definește aspectul vizual și aspectul paginii.
- main.js – conține scripturi care adaugă interactivitate și funcționalitate paginii web.
- logo.png (fișier imagine)
Luați în considerare o situație în care fiecare resursă face parte dintr-un lanț lung de cereri critice. De exemplu, imaginați-vă că fișierul HTML face referire la mai multe fișiere CSS și JavaScript și fiecare dintre aceste fișiere, la rândul său, face referire la alte resurse, ceea ce duce la un lanț de dependențe.
Într-un astfel de scenariu, o întârziere în încărcarea oricăreia dintre resursele din lanț va avea un efect în cascadă asupra latenței căii critice și a performanței generale a paginii dvs.
Și vorbind despre performanța web, să vedem ce valori vor primi cel mai mare impact din înlănțuirea solicitărilor critice...
Cum vă afectează performanța înlănțuirea solicitărilor critice
Cu cât lanțul este mai lung, cu atât este nevoie de mai mult pentru browser pentru a reda resursele necesare pentru a vă afișa conținutul.
În ceea ce privește valorile de performanță web, acest lucru se traduce printr-o slabă vopsea de conținut First Contentful Paint (FCP) și cea mai mare vopsea de conținut conținut (LCP).
Prima vopsea satisfăcătoare eșuată (FCP)
FCP măsoară cât timp îi ia browserului să vizualizeze prima bucată de conținut DOM (de exemplu, imagine, SVG, element de pânză neblank) pe o pagină.
Aceste elemente pot părea nesemnificative, dar sunt esențiale pentru experiența utilizatorului site-ului dvs. Ei spun vizitatorilor dvs. intrarea lor este procesată și site-ul se încarcă. Dacă o pagină rămâne goală câteva secunde înainte de a se încărca, utilizatorii nu știu dacă ceva se întâmplă sau nu.
Pentru a garanta că browserul poate reda această primă bucată de conținut DOM cât mai curând posibil, lanțurile de solicitări critice trebuie să fie scurte și ușoare. În caz contrar, șansele ca vizitatorii tăi să sară din cauza unui ecran gol și a eșecului FCP sunt multMAI MARE.
Cea mai mare vopsea cu conținut eșuat (LCP)
LCP măsoară cât timp durează până când cel mai mare element din partea superioară a paginii se încarcă pe o pagină.
Este unul dintre cele trei Core Web Vitals (CWV), care sunt un set de valori centrate pe utilizator care măsoară timpul de încărcare a site-ului dvs., stabilitatea vizuală și interactivitatea. Ele sunt, de asemenea, un factor de clasare Google .
Deci, a avea un scor LCP slab din cauza încărcării lanțurilor de solicitări critice lungi nu înseamnă doar că nu reușiți o anumitămăsurătoare de performanță, dar și:
- Reducerea șanselor de a trece CWV
- A afecta clasamentul site-ului dvs
- Oferirea unei experiențe proaste pentru utilizator
Modul sigur de a evita tot ceea ce este să scurtezi calea critică prin optimizarea numărului și dimensiunii resurselor tale.
Și iată cum să o faci...
Cum să evitați înlănțuirea cererilor critice (pe WordPress)
Dacă există o singură strategie de acces pentru a remedia „Evitați înlănțuirea cererilor critice”, aceasta ar fi eliminarea resurselor de blocare a redării.
Resursele care blochează randarea sunt fișiere pe care, atunci când browserul le întâlnește, trebuie să le descarce, să le analizeze și să le execute, înainte de a face orice altceva, inclusiv randarea.
Principalii vinovați marcați cel mai frecvent ca „blocare a randării” sunt fișierele CSS și JavaScript neoptimizate.
Următoarele tehnici vă vor ajuta să le gestionați cu succes pe ambele:
Eliminați CSS neutilizat
Termenul CSS neutilizat se referă la regulile CSS care nu sunt utilizate în pagina curentă.
Aceste reguli fac fișierele mai mari decât este necesar, umfland codul și creând lanțuri lungi de cereri critice. Ca rezultat, încărcarea fișierelor și a paginii dvs. durează mult timp.
Dacă vă simțiți confortabil să vă reglați codul, puteți utiliza un instrument online precum PurifyCSS.
Introduceți adresa URL a paginii dvs. și instrumentul va elimina automat codul care nu este necesar. Apoi, puteți descărca CSS-ul „purificat” și îl puteți încărca pe site-ul dvs.:
Important : modificarea codului ascunde riscul de a distruge designul și funcționalitatea site-ului.Dacă nu aveți experiență anterioară în tehnologie, contactați un dezvoltator web sau instalați un plugin care o va face automat pentru dvs.
Eliminați CSS neutilizat printr-un clic pe un buton. Instalați NitroPack și optimizați automat site-ul dvs. →
Amână JavaScript
Amânarea fișierelor JavaScript vă permite să le încărcați numai atunci când este necesar, astfel încât browserul să se poată concentra mai întâi pe difuzarea conținutului cel mai esențial (de deasupra foldului).
Puteți încărca leneș fișierele dvs. JS folosindasincron și amână atribute.
- asincron
Încărcarea asincronă înseamnă că scriptul va fi preluat în fundal în timp ce parsarea HTML și redarea paginii continuă.
Când scriptul este descărcat, va întrerupe analiza HTML, va executa scriptul imediat și apoi va relua analiza. Ca rezultat, ordinea în care se execută scripturile cu atributul asincron poate fi imprevizibilă, deoarece pot finaliza încărcarea în momente diferite.
Atributul asincroneste perfect pentru scripturile de la terți pe care nu doriți să blocați încărcarea și redarea paginii dvs.
- amâna
Atributul defer , ca și asincron, încarcă și scriptul asincron, dar diferă în modul în care este executat.
Scripturile cu atributul defer vor fi descărcate în fundal în timp ce analiza HTML continuă, dar execuția scriptului va fi amânată până la finalizarea analizei HTML. Ordinea de execuție a scripturilor cu amânare este menținută în ordinea în care apar în HTML.
Utilizați atributuldeferatunci când doriți să mențineți ordinea de execuție a scriptului așa cum apar în HTML.
Comprimarea și minificarea codului
Un alt nivel de optimizare critică a lanțului de cereri este de a reduce dimensiunea totală a resurselor, deoarece va ajuta browserul să le descarce, să le analizeze și să le redeze mai rapid.
Și modalitatea de a face acest lucru este comprimarea și minimizarea fișierelor.
Aplicareacompresiei va rescrie codul binar al fișierelor și va codifica informațiile folosind mai puțini biți decât originalul.
Cel mai popular instrument de compresie este gzip. Gzipping-ul funcționează prin găsirea șirurilor repetitive și înlocuirea lor cu pointeri către prima instanță a șirului. Avantajul este că pointerii folosesc mai puțin spațiu decât textul.
Minificarea , pe de altă parte, elimină elementele de cod inutile, cum ar fi comentariile, întreruperile de rând sau spațiile albe:
Sursa:KeyCDN
Prin tăierea codului, vă puteți scurta solicitările critice, ceea ce duce la o îmbunătățire a vitezei site-ului dvs.
Există o mulțime de instrumente gratuite online care vă pot ajuta să vă optimizați dimensiunea codului. Folosirea acestora va necesita să introduceți codul, apoi să copiați versiunea redusă/comprimată și să o inserați înapoi pe site-ul dvs. Iată câteva sugestii:
- CSSNano
- Toptal JavaScript Minifier
- Codul de înfrumusețare
Alte bune practici pentru a remedia „Evitați înlănțuirea cererilor critice”
Subsetarea fontului
După ce ați avut grijă de resursele CSS și JavaScript ale site-ului dvs., următorul cel mai bun candidat pentru optimizare sunt fonturile dvs. web.
În mare parte trecute cu vederea, fonturile web sunt adesea fișiere mari care durează ceva timp pentru a se încărca și pot chiar bloca redarea textului.
Pentru a evita acest lucru, trebuie să reduceți dimensiunea acestora, astfel încât browserul să le poată încărca imediat.
Introduceți subsetarea fontului.
Subsetarea fontului este o tehnică de optimizare care elimină glifele (caracterele) neutilizate dintr-un font pentru a-i reduce masiv dimensiunea.
De exemplu, gândiți-vă la câte glife unice folosește pagina dvs. de pornire. Suntem dispuși să pariem că nu sunt mai mult de 100.
Pentru a pune acest lucru în perspectivă, Font Awesome, al doilea font cel mai folosit (7% din toate site-urile web îl folosesc),are 26.107 de caractere .
Sursa:Web Almanah
Imaginați-vă cât timp ați putea salva browserul și vizitatorii dvs. încărcând doar ceea ce este absolut necesar pentru pagina respectivă.
Există câteva instrumente online care vă pot ajuta să aplicați subsetarea fonturilor. Va trebui să încărcați fișierul fontului și să selectați simbolurile pe care doriți să le eliminați. Apoi, reveniți pe site-ul dvs. și încărcați fișierul subsetat.
De asemenea, trebuie să vă asigurați că parcurgeți procesul de fiecare dată când actualizați conținutul.
Important : subsetarea fișierelor cu fonturi prin instrumente online ascunde riscul de a lipsi caractere de pe pagina dvs. după optimizare. Dacă nu ați mai lucrat cu fonturi înainte, vă recomandăm insistent să contactați un specialist în performanță web sau să instalați un plugin care o va face automat pentru dvs.
Subsetați fonturile fără riscuri. Reduceți dimensiunea acestora cu până la 70% instalând NitroPack →
Preîncărcați solicitările de cheie
Utilizarea atributului link rel=preload pentru a preîncărca cererile critice este o altă strategie de optimizare care vă va îmbunătăți FCP și LCP și va scurta calea critică.
Pentru a identifica cererea dvs. cea mai critică, rulați site-ul prin PageSpeed Insights și verificați avertismentul „Preîncărcare cheie solicitare”:
Apoi, accesați codul dvs. și adăugați eticheta link rel=preload la resursa specifică:
Nu uitați să includeți atributul as , astfel încât browserul să poată seta prioritatea resursei preluate în prealabil în funcție de tipul acesteia și să determine dacă aceasta există deja în cache.
Resurse suplimentare: Verificați lista completă a valorilor ca.
Cum să evitați înlănțuirea cererilor critice cu NitroPack
Optimizarea lanțurilor de solicitări critice poate fi o sarcină obositoare dacă nu sunteți înarmat cu instrumentele potrivite.
După cum știți deja, există mai multe ocazii în care reglarea fină a codului dvs. poate da înapoi și poate distruge funcționalitatea și designul site-ului dvs.
Dar repararea unui singur avertisment PSI nu ar trebui să fie o astfel de durere de cap.
Sau cel puțin nu este cu NitroPack.
NitroPack este un instrument all-in-one de optimizare a vitezei care va spori performanța site-ului dvs. prin aplicarea:
- Eliminați CSS neutilizat
- Amână JavaScript
- Subsetarea fontului
Și peste 32 de alte tehnici de optimizare dovedite pentru tine.
Cu NitroPack, nu este necesară nicio codificare sau experiență anterioară în tehnologie pentru a crește performanța site-ului dvs.
Sună prea frumos pentru a fi adevărat?
Să aruncăm o privire la unul dintre site-urile web ale clienților noștri cu și fără NitroPack.
Iată rezultatele lor fără NitroPack:
Scor de performanță 41 pe mobil, 47 de lanțuri și latență a căii critice de 3.781 ms.
Fără NitroPack
Și iată rezultatele cu NitroPack:
Scor de performanță 95, 1 lanț, latență a căii critice de peste 2 ori mai scurtă:
Cu NitroPack
Puteți experimenta acest lucru și o grămadă de alte îmbunătățiri ale performanței. Instalează NitroPack astăzi și lasă-ne să ne ocupăm de viteza fulgerului site-ului tău.