Zece moduri de a îmbunătăți timpul de încărcare a site-ului dvs. web și Google Core Vitals

Publicat: 2021-08-15

Cuprins

Care sunt elementele vitale ale web de bază

La începutul acestui an, Google a introdus un nou set de criterii care definesc stabilitatea, viteza și capacitatea de răspuns a oricărui site web. Cele trei criterii principale sunt următoarele:

  • Schimbarea aspectului cumulativ definește cât de mult ar trebui să se schimbe și să schimbe poziția structura unei pagini web. Valoarea de referință pentru aceasta este 0,1.
  • Cea mai mare vopsea de conținut măsoară cât timp durează încărcarea conținutului principal al unei pagini. Cele mai bune rezultate ar trebui să fie de 2,5 secunde sau mai puțin.
  • Întârzierea primei introduceri este timpul dintre deschiderea unei pagini web și momentul în care aceasta devine pentru prima dată interactivă. Cel mai frecvent interval de timp căutat este de aproximativ 100 de milisecunde.

Având în vedere acești termeni de bază, haideți să vedem cum puteți utiliza Core Vitals pentru a vă face site-ul cât mai rapid și eficient posibil.

1. Optimizați-vă CDN-ul și cache-ul browserului

Scorurile tale FID și LCP ar trebui îmbunătățite destul de rapid folosind această metodă. Serviți-vă activele statice dintr-un CDN sau păstrați-le în cache într-un serviciu precum Cloudfront de la AWS. Browserele vor obține rezultatele necesare mult mai repede după aceasta.

În plus, paginile dinamice pot fi stocate în cache în CDN-ul dvs. cu valorile TTL corecte deja aplicate, în funcție de modul în care se comportă aplicațiile dvs.

2. Utilizați dimensiunea exactă pentru toate anunțurile și media

Semnul Mărimea contează În ceea ce privește scorurile tale CLS, acesta este unul dintre cei mai importanți factori. Verificați întotdeauna dacă ați setat o anumită înălțime pentru imagini sau materiale etichetate, ceea ce este foarte important, în special pentru componentele de la nivel de pliere. Dacă sunteți presat de timp, puteți oricând să setați înălțimile la automat și să obțineți o dimensiune aproximativă care ar trebui să funcționeze suficient de bine într-un pic.

Reclamele iau în considerare, de asemenea, CLS și trebuie să le verificați cu atenție înălțimile și dimensiunile pentru a vă asigura că nu înlocuiesc conținutul prin afișarea incorect. Acest lucru poate necesita să contactați furnizorul dvs. de servicii de publicitate sau să faceți cumpărături pentru câteva opțiuni diferite, dacă CLS-ul dvs. este afectat în mod constant.

Dacă sunteți pe o platformă WordPress, vă recomandăm să luați în considerare un plugin precum Ewww , care vă poate livra automat imaginile în Webp și poate activa funcții precum încărcarea leneșă pentru a întârzia încărcarea tuturor imaginilor la încărcarea paginii.

3. Încărcați imagini cu rezoluție corectă în mod leneș, în funcție de tipul de dispozitiv utilizat

Această tehnică produce rezultate incredibil de rapid și ar trebui să fie una dintre primele dvs. considerații. Folosind un pachet de încărcare leneră pentru, în mod surprinzător, încărcarea leneșă a tuturor imaginilor de pe site-ul dvs., LCP-ul dvs. va fi afectat pozitiv, în primul rând prin reducerea greutății paginii și prin asigurarea că se încarcă cât mai repede posibil.

De asemenea, este esențial să setați rezoluția pentru fiecare activ în funcție de tipul de dispozitiv utilizat pentru a vă vizualiza site-ul. Încărcarea rezoluției ca o singură dimensiune va face site-ul mult mai lent pe dispozitive mai mici sau mai puțin puternice și va afecta LCP-ul dvs. în cel mai rău mod posibil.

4. Folosiți SSR și CSR în mod inteligent

Google este întotdeauna dornic să încurajeze și să promoveze pagini bine punctate Server Side Rendered (SSR) pentru a inspira performanțe SEO valoroase. Cu toate acestea, trebuie să luați în considerare echilibrul dintre SEO și performanța încărcării paginii. Paginile cu prea mult conținut pot dura mult timp să se încarce pe partea de server și să reducă performanța generală a site-ului dvs.

Conținutul real ar trebui să fie păstrat deasupra paginii, în timp ce alte funcții ale site-ului ar trebui păstrate înapoi pentru a îmbunătăți SSR. Acest stil de încărcare asincronă ia mult timp în afara scorurilor de încărcare și randare.

5. Defalcă totul prin împărțirea codului tău

Linii de cod Utilizarea celor mai semnificative dimensiuni de fișiere pentru active (în special fișiere JS) este în general o idee proastă. În schimb, ar trebui să permiteți protocolul h2 și să îl folosiți pentru a încărca din nou activele asincron în bucăți separate.

De asemenea, în loc să utilizați un fișier HTML uriaș, puteți împărți site-ul în mai multe fișiere mai mici și, astfel, puteți reduce sarcina încărcării.

6. Folosiți tehnici de compresie Brotli pentru a reduce activele statice

În ceea ce privește compresia, Brotli pare a fi cea mai bună opțiune în ceea ce privește viteza de încărcare. Cu toate acestea, ratele de compresie mai mari se vor adăuga timpilor de pachet și de construire în ceea ce privește DevOps.

Dar, la sfârșitul zilei, timpul de încărcare a site-ului este cel mai important factor și ar trebui să fie prioritizat mai presus de orice altceva.

7. Faceți conținutul răspunsului și solicitarea API cât mai eficiente posibil

Fără îndoială, cel mai vital element în ceea ce privește vitezele de încărcare, chiar și cele mai minore modificări, pot da rezultate masive cu API. Răspunsurile și solicitările API ar trebui verificate frecvent de dragul optimizării.

De asemenea, definiți parametrii datelor și utilizați doar ceea ce este necesar pentru a vă economisi mult timp și efort. Alegerea unei rețele pentru API-urile dvs. merită, de asemenea, o analiză atentă, deoarece găzduirea pe subrețele greșite poate crește masiv necesarul de timp.

8. Reduceți dimensiunea generală a paginilor și documentelor dvs

Bărbat care se uită la document online Paginile de destinație cu coduri grele (orice peste 75 kb este probabil să fie grav) sunt foarte nedorite, deoarece cresc drastic timpii de încărcare și de preluare.

Încercați întotdeauna să păstrați lucrurile curate din partea codului, deoarece este ușor să pierdeți fragmente de date redundante.

9. Înlocuiți miniaturile video cu imagini de substituent

Mulți vizitatori de site-uri preferă să nu interacționeze cu conținutul video, așa că încărcarea miniaturilor pentru videoclipurile care nu sunt redate este o risipă de resurse în acest caz.

Este o idee mai bună să alegeți o imagine substituentă sau un spațiu video gol pentru a conserva resursele și, astfel, a crește viteza site-ului.

10. Alegeți cel mai rapid server disponibil

Linii de viteză Acesta poate părea un factor evident, dar încă merită spus. Investiția în cea mai bună infrastructură de server este de obicei o idee grozavă, deoarece afectează direct viteza întregului site, fără excepție.

Cheltuind puțin mai mulți bani, veți economisi o cantitate considerabilă de timp în general. Cloudflare este un instrument excelent la nivel DNS care vă permite să vă optimizați site-ul în mod eficient, fără resurse costisitoare de server.

Concluzie

Sfaturile de mai sus vă vor duce pe drumul cel bun pentru a obține un scor mai bun pentru viteza paginii și elementele vitale de bază. Cu toate acestea, s-ar putea să vă aflați pe o platformă sau o temă umflată care va însemna adesea cel mai bun curs de acțiune pentru a crea un site nou, mai curat și mai ușor.

Să presupunem că vă zgâriați din cap peste toți acești termeni sau că vă simțiți descurajat de ideea de a vă reelabora întregul site pentru mai multă viteză. În acest caz, poate doriți să luați în considerare o revizuire a site-ului de la un expert în design web care va sugera cel mai bun curs de acțiune pentru optimizarea site-ului dvs. existent sau vă va sugera evoluția către un site nou cu o bază de cod mai optimizată pentru elementele vitale de bază.