Performanța site-ului și monitorizarea sănătății: sfaturi și bune practici

Configurarea și desfășurarea unui site web sau a unui proiect de comerț electronic este grozavă - cu toate acestea, munca dvs. este departe de a fi finalizată odată ce site-ul dvs. este deschis și funcțional.

Fără o monitorizare adecvată a sănătății și a performanței, site-ul dvs. web va suferi consecințele - care pot fi mult mai mari decât simpla viteză de încărcare redusă.

Să ne îndreptăm atenția către un scenariu ipotetic, ideal, în care toate site-urile din lume funcționează așa cum ar trebui. Știați că, pe lângă satisfacția vertiginoasă a utilizatorilor, vom contribui și la un mediu mai bun?

Site-urile web cu performanțe slabe nu numai că afectează pe oricine le creează sau le utilizează, dar lasă și o amprentă de carbon mai mare.

Potrivit Website Carbon Calculator, site-urile web au o amprentă de carbon, iar pagina medie de site emite 0,5 grame de dioxid de carbon per vizualizare. Asta e doar mediana.

Când ne uităm la medie, care ia în considerare și site-urile web cu poluare ridicată, acest număr ajunge la 0,9 grame.

Pe lângă problemele la scară globală, un site web nesănătos, cu performanțe necorespunzătoare vă va costa timp, bani și venituri. Sănătatea site-ului web este similară cu a noastră: este ușor de neglijat și greu de îmbunătățit.

Trebuie să fiți conștienți de principalele componente care alcătuiesc sănătatea site-ului web pentru a efectua practici de monitorizare adecvate pentru a ajuta la economisirea timpului de procesare.

Odată cu apariția unor constructori de site-uri rapid și ușor, crearea de site-uri web a devenit accesibilă tuturor. Tot ce trebuie să faceți este să vă înregistrați, să alegeți un domeniu, să vă alegeți șablonul și voila! Ai un site web în câteva secunde.

Cu toate acestea, mulți proprietari de site-uri web resping faptul că crearea site-ului web este doar primul pas. Menținerea corespunzătoare a performanței și monitorizarea sănătății sunt, de asemenea, cruciale.

Și, în acest sens, să ne uităm la câțiva indicatori esențiali de sănătate și performanță a site-ului web: ce sunt aceștia, cum să îi monitorizăm și cum să aducem îmbunătățiri.

Aspecte de monitorizat pentru un scor ridicat de sănătate a site-ului

Core Web Vitals

Imagine de la autor, octombrie 2022

Google PageSpeed ​​Insights

Primele valori pe care ar trebui să le luați în considerare atunci când efectuați testarea performanței sunt principalele dvs. vitale web. Acești indicatori de performanță arată viteza, stabilitatea și capacitatea de răspuns, ajutându-vă să înțelegeți calitatea experienței de utilizare a site-ului dvs.

Mai multe instrumente vă urmăresc principalele elemente vitale web, dar mulți proprietari de site-uri web gravitează către un instrument simplu: Google PageSpeed ​​Insights.

După ce ați introdus adresa URL în instrument, vi se va prezenta un raport care arată dacă ați trecut testul Core Web Vitals și orice alte aspecte pe care trebuie să le urmăriți. Iată cele trei valori cheie pe care le veți vedea:

Cea mai mare vopsea plină de conținut (LCP)

Țintește-te pentru un scor de 2,5 secunde sau mai puțin .

Dacă scorul dvs. este de peste 2,5 secunde, acest lucru ar putea indica următoarele: serverul dvs. este în întârziere, timpii de încărcare a resurselor nu sunt la egalitate, aveți un număr mare de JavaScript și CSS care blochează randarea sau există randare lentă pe partea clientului.

Întârziere la prima intrare (FID)

Țintește-te pentru un scor de 100 de milisecunde sau mai puțin .

Dacă scorul dvs. depășește acest timp, poate fi necesar să reduceți impactul codului terță parte, să reduceți timpul de execuție JavaScript, să minimizați munca firului principal, să păstrați dimensiunile transferurilor mici și numărul de solicitări scăzut.

Schimbare cumulativă a aspectului (CLS)

Țintește-te pentru un scor de 0,1 sau mai puțin .

Dacă scorul dvs. depășește acest lucru, puteți evita modificări aleatorii ale aspectului prin includerea atributelor de dimensiune în conținutul dvs. vizual și video (sau rezervați spațiul cu casete de raport de aspect CSS). Evitați suprapunerea conținutului și fiți atenți atunci când vă animați tranzițiile.

Blocarea vitezei paginii

Mai mulți factori pot afecta viteza de încărcare a site-ului dvs. Cu toate acestea, dacă aveți un buget de timp și doriți să vă concentrați mai întâi pe principalii vinovați, acordați o atenție deosebită următorilor factori:

• Cod JavaScript și CSS neutilizat.
• Codul JavaScript și CSS de blocare a randării.
• Cod JavaScript și CSS neminificat.
• Dimensiuni mari ale fișierelor de imagine (mai multe despre asta mai jos).
• Prea multe lanțuri de redirecționare.

Pentru a îmbunătăți încărcarea fișierelor JavaScript și CSS, luați în considerare preîncărcarea acestora.

O altă opțiune ar fi activarea indicațiilor timpurii, care îi spune browserului în răspunsul serverului HTTP ce resurse ar trebui să înceapă să descarce, profitând de „timpul de gândire al serverului”, grărind astfel încărcarea paginii.

Pentru a testa site-ul dvs.:

1. Navigați la https://pagespeed.web.dev/
2. Introduceți adresa URL a paginii pe care doriți să o scanați.

Vă recomand să vă alegeți mai întâi pagina de pornire.

Un alt instrument la îndemână este WebPageTest.org, care afișează, de asemenea, valorile vitale ale Web-ului de bază și alte valori care vă pot ajuta să vă îmbunătățiți drastic performanța și sănătatea site-ului. De asemenea, este gratuit!

Pur și simplu inserați adresa URL a unei pagini în caseta de căutare afișată pe site și va efectua un test complet dintr-o locație implicită.

De asemenea, vă puteți înregistra ca utilizator și alege dintr-o listă de locații pentru a vă testa site-ul web din diferite țări, dispozitive și browsere.

WebPageTest vă va arăta exact unde se află site-ul dvs. în termeni de performanță și ce ar putea să-l încetinească printr-un Rezumat al performanței compus din patru secțiuni cheie: Oportunități și experimente, Valori observate, Măsurări ale utilizatorilor reali și Execuții individuale.

Imagine de la autor, octombrie 2022

La UCRAFT, folosim o combinație de instrumente precum PageSpeed ​​Insights, Chrome Dev Tools, WebPageTest și multe altele, pentru a obține o înțelegere clară a ceea ce trebuie să lucrăm atunci când vine vorba de performanța site-ului nostru – mai ales că industria SaaS este deja foarte competitiv.

Elemente de proiectare

Captură de ecran de la autor, octombrie 2022

Atunci când ne gândim la performanța site-ului web și la monitorizarea sănătății, de obicei lăsăm la latitudinea echipei de tehnologie să se ocupe de acestea.

Dar dacă ți-aș spune cum îți proiectezi site-ul web și elementele pe care le alegi îți pot face sau distruge performanța?

Așa este – este timpul să implicăm echipa de proiectare.

Optimizarea imaginii

Imaginile sunt grozave, dar vă pot încetini site-ul dacă nu sunt dimensionate corespunzător. Asigurați-vă că vă redimensionați imaginile și evitați să încărcați fișiere uriașe atunci când acestea nu vor fi afișate în întregime.

De asemenea, comprimați-vă imaginile și încercați diferite tipuri de fișiere, cum ar fi WebP, JPEG 2000 și JPEG XR, în loc să optați pentru fișiere JPEG sau PNG mai grele.

Luați în considerare implementarea încărcării native lazy pentru a vă asigura că imaginile sunt încărcate atunci când utilizatorul le vede, în loc să le încărcați pe toate odată.

Aproape toate browserele, inclusiv Chrome, Safari și Firefox, acceptă atributul loading="lazy" pe <img> sau <iframe>, care îi spune browserului să le încarce atunci când utilizatorul derulează mai aproape de ele.

Asigurați-vă că nu încărcați leneș imaginile deasupra paginii, deoarece va degrada scorul LCP al paginii dvs., iar Google recomandă să utilizați atributul fetchpriority="high" pe imaginile de deasupra plierii pentru a îmbunătăți LCP.

Dacă utilizați acest atribut, nu este nevoie să preîncărcați imaginile. Ar trebui fie să preîncărcați, fie să setați atributul „fetchpriority” pe imaginile de deasupra pliului.

De asemenea, profitați de capacitatea de răspuns a atributului „srcset” pentru a încărca imagini cu dimensiuni adecvate în funcție de dimensiunea ecranului și pentru a evita încărcarea redundant de imagini mari pe ecrane mici. Acest lucru va ajuta foarte mult la îmbunătățirea scorului LCP.

Fonturi

Fonturile personalizate extravagante sunt adesea dificil de citit pentru utilizatorii fără viziune 20/20, dar pot, de asemenea, să încetinească considerabil site-ul dvs.

Schimbați fonturile găzduite extern pentru fonturi mai sigure pentru web și încercați fonturile Google – atâta timp cât sunt găzduite prin CDN-ul Google.

Mai mult, luați în considerare încorporarea fonturilor variabile în estetica generală a site-ului dvs., deoarece această specificație a fontului poate reduce semnificativ dimensiunea fișierelor fonturilor.

Asigurați-vă că preîncărcați fonturile.

Animații/Funcții suplimentare

Este de la sine înțeles: nu exagerați cu animații, videoclipuri, efecte speciale, glisoare sau alte elemente fanteziste.

Este plăcut să includeți câteva elemente interactive ici și colo, dar saturarea site-ului dvs. cu prea multe „lucruri” în mișcare poate fi frustrant atât pentru utilizatori, cât și pentru serverele dvs.

Nu folosiți animații necompozite, deoarece acestea provoacă revopsirea paginii, ceea ce crește munca firului principal - iar pagina web poate părea instabilă vizual când se încarcă.

Soluție PWA pentru optimizarea mobilă

De ce să nu parcurgeți întregul traseu pentru dispozitive mobile și să vă transformați site-ul mobil într-o aplicație web progresivă (PWA)?

Deoarece PWA-urile sunt create cu lucrători de servicii, ele încarcă conținutul în cache la o rată mai rapidă. Nu numai asta, dar PWA-urile seamănă cu aplicațiile mobile native, ceea ce este excelent pentru performanță și UX.

Valori suplimentare de performanță tehnică

Timp de funcționare

Uptime arată cât de bine funcționează site-ul dvs.

Dacă site-ul dvs. se blochează sau se blochează frecvent, vă va afecta experiența utilizatorului, clasamentul Google și, prin urmare, veniturile dvs.

Dacă este posibil, urmăriți să aveți un timp de funcționare de 99,999% și testați site-ul dvs. din diferite locații.

Instrumente pentru monitorizarea timpului de funcționare:

• Status Cake.
• Pingdom.
• Timp de funcționare mai bun.
• UptimeRobot.

Performanța bazei de date

Dacă ați verificat elementele de bază și site-ul dvs. web este încă lent să răspundă, este posibil să se datoreze performanței slabe a bazei de date.

Puteți verifica acest lucru prin monitorizarea timpului de răspuns pentru interogările dvs. și identificând interogările bazei de date care ocupă cel mai mult timp.

Odată ce ai făcut asta, optimizează-te! Puteți folosi instrumente precum Blackfire.io pentru a vă ajuta să identificați cu ușurință blocajele și să găsiți soluții bazate pe date precise.

Hardware-ul serverului web

Site-ul dvs. web poate rămâne în întârziere dacă spațiul pe disc este plin de fișiere jurnal, imagini, videoclipuri și intrări în baza de date. Asigurați-vă că monitorizați în mod regulat încărcarea unității centrale de procesare (CPU), mai ales după ce ați implementat actualizări sau modificări de proiectare.

Instrumente precum New Relic vă pot ajuta să vă îmbunătățiți întregul stack prin monitorizare și depanare eficiente.

Vizibilitate de căutare

Multe dintre valorile discutate mai sus au deja un impact semnificativ asupra vizibilității căutării.

Deci, atunci când rulați paginile site-ului dvs. prin Google PageSpeed ​​Insights și le optimizați, faceți și lucruri importante pentru SEO.

De asemenea, puteți opta pentru instrumente de accesare cu crawlere a site-urilor web, cum ar fi Semrush sau Sitechecker.pro, Screaming Frog, DeepCrawl sau orice alt instrument care se potrivește cel mai bine nevoilor dvs.

Crawlerele de site-uri web ajută la găsirea tuturor tipurilor de probleme, cum ar fi:

• Legături rupte.
• Imagini sparte.
• Monitorizați valorile vitale web de bază.
• Lanțuri de redirecționare.
• Erori de date structurate.
• Fără pagini indexate.
• Lipsesc titluri și meta descrieri.
• Conținut mixt.

Asigurați-vă că sunteți gata când vine vorba de următoarele puncte:

• Harta site-ului XML – Asigurați-vă că harta dvs. de site este formatată corect și verificați dacă este necesar să faceți actualizări și să retrimiteți harta site-ului prin Google Search Console.
• Robots.txt – Asigurați-vă că utilizați un fișier robots.txt pentru paginile dvs. web (HTML, PDF sau orice alte formate non-media pe care le pot citi motoarele de căutare) pentru a gestiona mai bine traficul cu crawlere, mai ales dacă bănuiți că serverul dvs. poate fi copleșit de solicitări de la crawler-ul Google.

Securitatea site-ului și stocarea în cache

Obțineți certificatul SSL!

Un site sănătos este un site securizat.

Chiar dacă site-ul dvs. se încarcă în timp perfect și obține un scor de 100/100, nu există nicio posibilitate ca utilizatorii (sau motoarele de căutare) să aibă încredere în site-ul dvs. dacă nu începe cu https://.

Un certificat SSL este în esență un cod pe serverul dvs. care construiește o conexiune criptată, garantând că datele utilizatorului rămân în siguranță.

Obținerea unui certificat SSL nu este un proces deosebit de dificil, dar poate fi lung atunci când este făcut manual.

Cu toate acestea, dacă utilizați un furnizor de găzduire bine stabilit, cum ar fi BlueHost, de cele mai multe ori, furnizorul dvs. va putea emite un SSL gratuit pentru domeniul dvs.

Luați în considerare utilizarea unui CDN

Rețelele de livrare de conținut (CDN) sunt servere distribuite care lucrează la unison pentru a furniza conținut rapid pe internet.

Cu alte cuvinte, un CDN este un instrument care accelerează performanța site-ului tău web prin păstrarea conținutului acestuia pe servere aproape de utilizatori, indiferent de locația geografică. Acest lucru este cunoscut și sub numele de caching.

Dacă aveți o prezență globală, un CDN este o necesitate! Va crește viteza de încărcare a paginii, va reduce costurile cu lățimea de bandă, va distribui traficul (reducerea șanselor ca site-ul dvs. să cadă) și va crește securitatea prin funcții precum atenuarea DDoS.

Jucătorii de top din industrie includ Cloudflare, Amazon Cloudfront și Google Cloud CDN. Cu toate acestea, există multe alte opțiuni, așa că faceți-vă cercetările și alegeți cel mai bun CDN pentru site-ul dvs. web și cerințele de afaceri.

Configurați aplicația Web Firewall

Un Web Application Firewall (WAF) protejează aplicațiile web prin filtrarea traficului HTTP suspect. Acesta are ca scop prevenirea aplicațiilor de atacuri precum:

• Fals încrucișat.
• Cross-site-scripting (XSS).
• Includerea fișierului.
• injecție SQL.

Mai jos este o listă cu cele mai populare și de încredere firewall-uri pentru aplicații web:

• Cloudflare WAF.
• Paravanul de protecție GoDaddy.
• Microsoft Azure.

Sau dacă utilizați WordPress, puteți lua în considerare instalarea de plugin-uri precum:

• WordFence.
• Sucuri.
• Securitate All-In-One (AIOS).

Verdict

Asta-i o înfășurare! După cum vă puteți da seama, performanța și sănătatea site-ului depind de diferite aspecte.

Dacă site-ul dvs. este în urmă, primul pas logic este să vă verificați Core Web Vitals și să vedeți ce puteți îmbunătăți. Puteți, de asemenea, să aruncați o privire asupra altor valori tehnice și să le îmbunătățiți.

SEO este, de asemenea, vital pentru sănătatea site-ului dvs., așa că verificați vizibilitatea căutării, linkurile și potențialii blocanți de încărcare pentru a vedea ce puteți îmbunătăți.

Și nu uitați nici de certificatul SSL și de stocarea în cache.

Designul site-ului dvs. poate afecta, de asemenea, viteza de încărcare și performanța dvs., mai ales dacă dvs. sau designerii dvs. sunteți pasionați să utilizați elemente de design grele.

Nu uitați să vă optimizați imaginile, să evitați fonturile grele și să utilizați animațiile cu moderație.

Mai multe resurse:

• Cum să utilizați raportul Chrome UX pentru a vă îmbunătăți performanța site-ului
• 6 sfaturi pentru supraalimentarea performanței Rețelei de display Google
• SEO tehnic avansat: un ghid complet

Imagine prezentată: JulsIst/Shutterstock