ADAUGĂ

© 2021 Toate drepturile rezervate. Promovare Google

Acasă / Blog / Viteza paginii: Ghid SEO pentru timpi de încărcare mai scurți

Create a Blog listing

Viteza paginii: Ghid SEO pentru timpi de încărcare mai scurți

Viteza paginii a fost mult timp un factor de clasare pentru Google. Începând din 2010, apoi consolidându-l cu o altă actualizare în 2018, și apoi încheind acordul cu introducerea Core Web Vitals în 2020. În acest articol, vom analiza ce viteză de pagină este astăzi, cum să îl măsurați și, cel mai important, cum să îmbunătățiți scorurile de viteză a paginii pentru site-ul dvs. web. Serviți imagini în formatele de ultimă generație Nu toate formatele de imagine sunt egale. Formatele noastre de încredere JPEG și PNG au acum caracteristici de compresie și calitate mult mai slabe în comparație cu AVIF, JPEG 2000, JPEG XR și WebP. Dintre aceste formate enumerate, WebP este probabil cel care trebuie luat în considerare mai întâi. Suportă atât compresia cu pierderi, cât și compresia fără pierderi, precum și permite transparență și animație. În plus, fișierele WebP sunt în general cu 25% până la 35% mai ușoare decât PNG-urile și JPEG-urile de calitate similară. Și, deși în trecut era o preocupare comună faptul că formatul WebP nu este acceptat de unele browsere, recent Safari a adăugat suportul pentru WebP în versiunea 14, astfel încât suportul total pentru formatul dintre browsere este acum de peste 90%. Dacă site-ul dvs. web este construit pe WordPress, puteți crea cu ușurință o copie WebP a imaginilor dvs. cu un plugin de optimizare a imaginii precum Imagify. Dacă site-ul dvs. web nu este construit pe o platformă CMS sau nu doriți să instalați prea multe pluginuri, vă puteți converti imaginile folosind convertoare online sau editori grafici. Using an online compressor, I have saved between 30% and 75% per image and 68% in total (heavier images pulled more weight and skewed the percentage). Amânați imaginile de pe ecran Imaginile în afara ecranului sunt cele care apar sub pli, ceea ce înseamnă că utilizatorul nu le-ar vedea până când nu derulează dincolo de ecranul inițial. Și aceasta va fi o temă obișnuită pe tot restul articolului - încărcarea a tot ceea ce este sub pliere ar trebui amânată până când elementele de mai sus sunt încarcate complet. Zona utilizată de Google pentru a măsura viteza paginii dvs. este cea mai mare parte a paginii, așa că aici trebuie să se concentreze majoritatea efortului dvs. de optimizare. Tehnica de tratare a imaginilor de pe ecran se numește încărcare leneșă. Practic, sunt încărcate mai întâi imaginile de sus, iar imaginile de pe ecran sunt încărcate numai pe măsură ce utilizatorul derulează pagina. Convertiți gif-uri în video S-ar putea să sune contraintuitiv, dar gifurile vor avea adesea o dimensiune a fișierului mai mare decât videoclipurile. Nu are sens, nu știu cum a fost, dar convertirea unui GIF mare într-un videoclip va oferi o reducere a dimensiunii de până la 500% sau chiar mai mult. Deci, dacă raportul dvs. de viteză a paginii vă spune să utilizați formate video pentru conținut animat, la fel de bine l-ați putea lua în serios. Pentru a converti gifurile în videoclipuri puteți utiliza orice convertor online sau puteți descărca un instrument precum FFmpeg. Google recomandă de fapt crearea a două formate video: WebM și mp4. WebM este similar cu WebP prin faptul că este mai ușor, dar nu este încă acceptat de toate browserele. Deci, atunci când adăugați videoclipul la pagină, ar trebui să listați mai întâi versiunea WebM și apoi versiunea mp4 ca rezervă: <sursă src = "animation.mp4" type = "video / mp4"> Rețineți că elementul video are, de asemenea, patru atribute suplimentare: redare automată, buclă, dezactivare și redare în linie. Aceste atribute fac ca videoclipul dvs. să se comporte ca un gif: începe să se redea automat, este în buclă, fără sunet și se redă în linie. Amânați CSS neutilizate CSS neutilizate pot încetini construcția arborelui de redare de către un browser. Problema este că un browser trebuie să parcurgă întregul arbore DOM și să verifice ce reguli CSS se aplică fiecărui nod. Prin urmare, cu cât este mai mult CSS neutilizat, cu atât mai mult timp va avea nevoie un browser pentru a calcula stilurile pentru fiecare nod. Scopul aici este de a identifica bucățile de CSS care sunt neutilizate sau necritice și fie le elimina complet, fie modifică ordinea în care se încarcă. Minimizează JS și CSS Fișierele JS și CSS pot conține adesea comentarii, spații, întreruperi de linie și bucăți de cod inutile. Dacă le eliminați, fișierele dvs. pot fi cu 50% mai ușoare, deși reducerea medie este mult mai mică. Totuși, este o contribuție marginală la viteza paginii dvs. și merită încercat. Dacă aveți un site mic, puteți minimiza codul folosind minificatoare online, cum ar fi CSS Minifier, JavaScript Minifier și HTML Compressor. Sau, dacă site-ul dvs. web este construit pe o platformă CMS, cum ar fi WordPress, există cu siguranță câteva pluginuri care vă pot face treaba. Pentru un site web personalizat, vă rugăm să consultați acest ghid despre minimizarea CSS și acesta despre minimizarea JS. Extrageți CSS critice În mod implicit, CSS este o resursă de blocare a redării. Pagina dvs. nu va fi redată până când browserul nu preia și analizează fișiere CSS, ceea ce poate consuma mult timp. Pentru a rezolva acest lucru, puteți extrage doar acele stiluri care sunt necesare pentru zona de sus a paginii și le puteți adăuga laa documentului HTML. Restul fișierelor dvs. CSS pot fi încărcate asincron. Acest lucru vă va îmbunătăți semnificativ scorurile LCP și va face ca paginile dvs. să apară mai repede pentru utilizatori. Improve server response time The most unpleasant thing about server response delays is that there is a wide selection of reasons that may cause them. For instance, these can be slow routing, slow application logic, resource CPU starvation, slow database queries, memory starvation, slow frameworks, etc. An easy non-dev solution to these issues is to switch to better hosting, which in many instances means from a shared to a managed hosting. Managed hosting usually comes with CDN networks and other content delivery tricks that will positively affect page speed. Amânați / asincronizați JS terță parte Resursele terților, cum ar fi butoanele de partajare socială și încorporările playerului video, tind să fie foarte grele pentru consumul de resurse. Mai mult, ori de câte ori browserul întâlnește o bucată de JS, acesta va întrerupe executarea HTML până când se ocupă de JS. Toate acestea tind să se adauge la o scădere măsurabilă a vitezei paginii. Dacă oricare dintre resursele dvs. terță parte este neesențială, adică nu contează pentru aspectul sau funcția de mai sus, ar trebui să le mutați din calea de redare critică. Pentru a încărca mai eficient resursele terților, puteți utiliza atributul asincronizat sau de amânare. Atributul asincron este mai moale - permite descărcarea HTML și JS simultan, dar va întrerupe în continuare HTML pentru a executa JS. Atributul de amânare este mai greu - nu va întrerupe HTML pentru a executa JS, care va fi executat doar la sfârșit. Preconectați-vă la resurse terțe De regulă, stabilirea conexiunilor, în special a celor sigure, necesită mult timp. Problema este că necesită căutări DNS, strângeri de mână SSL, schimb de chei secrete și câteva dus-întors către serverul final care este responsabil pentru solicitarea utilizatorului. Deci, pentru a economisi acest timp prețios, vă puteți conecta în prealabil la originile solicitate din timp. Pentru a vă preconecta site-ul web la o sursă terță parte, trebuie doar să adăugați o etichetă de link la pagina dvs.: După ce implementați eticheta, site-ul dvs. web nu va trebui să petreacă timp suplimentar pentru a stabili o conexiune cu serverul necesar, evitându-vă utilizatorii să aștepte mai multe dus-întors. Activați stocarea în cache a browserului Fără cache în browser, de fiecare dată când vizitați aceeași pagină, întreaga pagină este încărcată de la zero. Cu cache-ul browserului, unele elemente ale paginii sunt stocate în memoria browserului, deci numai o parte a paginii trebuie încărcată de pe server. Bineînțeles, pagina se încarcă mult mai repede la vizitele repetate, iar scorurile generale ale vitezei paginii cresc. În mod normal, obiectivul este de a memora în cache cât mai multe resurse de pagină cât mai mult timp și de a vă asigura că resursele actualizate sunt revalidate pentru cache. Puteți controla toți acești parametri cu anteturi HTTP speciale care conțin instrucțiuni de cache. Reduceți dimensiunea DOM Un arbore DOM prea mare cu reguli de stil complicate poate afecta negativ lucruri precum viteza, timpul de rulare și performanța memoriei. Cea mai bună practică este să aveți un arbore DOM, care este mai mic de 1500 de noduri în total, are o adâncime maximă de 32 de noduri și nici un nod părinte cu peste 60 de noduri copil. O practică foarte bună este eliminarea nodurilor DOM de care nu mai aveți nevoie. Pentru acea melodie, luați în considerare eliminarea nodurilor care nu sunt afișate în prezent din documentul încărcat și încercați să le creați numai după ce un utilizator derulează o pagină sau atinge un buton. Evitați prea multe redirecționări A scăpa de toate redirecționările inutile este unul dintre cele mai bune lucruri pe care le puteți face site-ului dvs. rapid. Fiecare redirecționare suplimentară încetinește redarea paginii și adaugă una sau mai multe dus-întors HTTP-solicitare-răspuns. Cea mai bună practică este să nu folosiți redirecționările cu totul. Cu toate acestea, dacă aveți nevoie disperată de a utiliza unul, este crucial să alegeți tipul de redirecționare corect. Cel mai bine este să folosiți o redirecționare 301 pentru redirecționarea permanentă. Dar dacă, să spunem, sunteți dispus să redirecționați utilizatorii către unele pagini promoționale pe termen scurt sau adrese URL specifice dispozitivului, redirecționările temporare 302 sunt cea mai bună opțiune. Gânduri finale Problemele enumerate mai sus nu sunt toate problemele care pot afecta viteza paginii, mai degrabă cele mai frecvente și cele cu cel mai mare potențial de îmbunătățire. Asigurați-vă că vă adaptați strategiile de optimizare la problemele reflectate în raportul de viteză al paginii. Rețineți că problemele prezente pe multe pagini ale site-ului dvs. web pot fi adesea rezolvate în bloc prin implementarea modificărilor la nivel de site.


Daca aveti nevoie de implementare pentru siteul dumneavoastra contactati o Agenție de SEO