Monitoraggio delle prestazioni e della salute del sito Web: suggerimenti e best practice

Configurare e gestire un sito Web o un progetto di e-commerce è fantastico, tuttavia, il tuo lavoro è tutt'altro che finito una volta che il tuo sito è attivo e funzionante.

Senza un adeguato monitoraggio della salute e delle prestazioni, il tuo sito web ne subirà le conseguenze, che possono essere molto maggiori della semplice velocità di caricamento lenta.

Rivolgiamo la nostra attenzione a uno scenario ipotetico e ideale in cui tutti i siti Web del mondo funzionano come dovrebbero. Sapevi che, oltre alla soddisfazione degli utenti alle stelle, contribuiremmo anche a un ambiente migliore?

I siti Web con prestazioni scadenti non solo hanno un impatto su chiunque li crei o li utilizzi, ma lasciano anche un'impronta di carbonio maggiore.

Secondo il Website Carbon Calculator, i siti Web hanno un'impronta di carbonio e la pagina media del sito Web emette 0,5 grammi di anidride carbonica per visualizzazione. Questa è solo la mediana.

Quando si guarda la media, che considera anche i siti Web altamente inquinanti, quel numero sale a 0,9 grammi.

A parte i problemi su scala globale, un sito Web malsano e con prestazioni inadeguate ti costerà tempo, denaro e entrate. La salute del sito web è simile alla nostra: è facile da trascurare e difficile da migliorare.

È necessario essere consapevoli dei componenti principali che costituiscono la salute del sito Web per condurre pratiche di monitoraggio appropriate per risparmiare tempo di elaborazione.

Con l'emergere di costruttori di siti Web facili e veloci, la creazione di siti Web è diventata accessibile a tutti. Tutto quello che devi fare è registrarti, scegliere un dominio, scegliere il tuo modello e voilà! Hai un sito web in pochi secondi.

Tuttavia, molti proprietari di siti Web ignorano il fatto che la creazione di siti Web sia solo il primo passo. Anche un adeguato mantenimento delle prestazioni e un monitoraggio dello stato di salute sono fondamentali.

E su questa nota, diamo un'occhiata ad alcuni indicatori essenziali di salute e prestazioni del sito Web: cosa sono, come monitorarli e come apportare miglioramenti.

Aspetti da monitorare per un punteggio di salute del sito Web elevato

Vitali Web principali

Immagine dell'autore, ottobre 2022

Google PageSpeed ​​Insights

Le prime metriche che dovresti considerare quando conduci i test delle prestazioni sono i tuoi Core Web Vitals. Questi indicatori di prestazione mostrano velocità, stabilità e reattività, aiutandoti a comprendere la qualità dell'esperienza utente del tuo sito web.

Diversi strumenti tengono traccia dei tuoi Core Web Vitals, ma molti proprietari di siti Web gravitano verso uno strumento semplice: Google PageSpeed ​​Insights.

Dopo aver inserito il tuo URL nello strumento, ti verrà presentato un rapporto che mostra se hai superato il test Core Web Vitals e qualsiasi altro aspetto che devi tenere d'occhio. Ecco le tre metriche chiave che vedrai:

La più grande vernice contenta (LCP)

Puntare a un punteggio di 2,5 secondi o meno .

Se il tuo punteggio è superiore a 2,5 secondi, ciò potrebbe indicare quanto segue: il tuo server è in ritardo, i tempi di caricamento delle risorse non sono all'altezza, hai un numero elevato di JavaScript e CSS che bloccano il rendering o il rendering è lento sul lato client.

Ritardo primo ingresso (FID)

Obiettivo per un punteggio di 100 millisecondi o meno .

Se il punteggio supera tale tempo, potrebbe essere necessario ridurre l'impatto del codice di terze parti, ridurre il tempo di esecuzione di JavaScript, ridurre al minimo il lavoro del thread principale, mantenere le dimensioni di trasferimento ridotte e il conteggio delle richieste basso.

Spostamento cumulativo del layout (CLS)

Puntare a un punteggio di 0,1 o meno .

Se il tuo punteggio supera questo valore, puoi evitare spostamenti casuali del layout includendo attributi di dimensione sui tuoi contenuti visivi e video (o riservando lo spazio con le caselle delle proporzioni CSS). Evita di sovrapporre i tuoi contenuti e fai attenzione quando animerai le tue transizioni.

Blocco della velocità della pagina

Diversi fattori possono influenzare la velocità di caricamento del tuo sito web. Tuttavia, se hai un budget limitato e vorresti concentrarti prima sui principali colpevoli, presta molta attenzione ai seguenti fattori:

• Codice JavaScript e CSS non utilizzato.
• JavaScript e codice CSS bloccano il rendering.
• Codice JavaScript e CSS non minimizzato.
• File di immagini di grandi dimensioni (più su quello sotto).
• Troppe catene di reindirizzamento.

Per migliorare il caricamento dei file JavaScript e CSS, considera di precaricarli.

Un'altra opzione sarebbe abilitare i primi suggerimenti, che indicano al browser nella risposta del server HTTP quali risorse dovrebbe iniziare a scaricare sfruttando il "tempo di riflessione del server", accelerando così il caricamento della pagina.

Per testare il tuo sito web:

1. Vai a https://pagespeed.web.dev/
2. Immettere l'URL della pagina che si desidera scansionare.

Consiglierei di scegliere prima la tua home page.

Un altro strumento utile è WebPageTest.org, che mostra anche i tuoi vitali web principali e altre metriche che possono aiutarti a migliorare drasticamente le prestazioni e la salute del tuo sito web. Inoltre, è gratis!

Basta incollare l'URL di una pagina nella casella di ricerca mostrata sul sito e condurrà un test completo da una posizione predefinita.

Puoi anche registrarti come utente e scegliere da un elenco di posizioni per testare il tuo sito Web da diversi paesi, dispositivi e browser.

WebPageTest ti mostrerà esattamente dove si trova il tuo sito Web in termini di prestazioni e cosa potrebbe rallentarlo attraverso un riepilogo delle prestazioni composto da quattro sezioni chiave: opportunità ed esperimenti, metriche osservate, misurazioni dell'utente reale e corse individuali.

Immagine dell'autore, ottobre 2022

In UCRAFT, utilizziamo una combinazione di strumenti come PageSpeed ​​Insights, Chrome Dev Tools, WebPageTest e molti altri, per ottenere una chiara comprensione di ciò su cui dobbiamo lavorare quando si tratta delle prestazioni del nostro sito Web, soprattutto perché il settore SaaS è già molto competitivo.

Elementi di design

Screenshot dell'autore, ottobre 2022

Quando pensiamo alle prestazioni del sito Web e al monitoraggio della salute, di solito li lasciamo al team tecnico di occuparsene.

Ma cosa succede se ti dicessi come progetti il ​​tuo sito Web e gli elementi che scegli possono creare o distruggere le tue prestazioni?

Esatto: è ora di coinvolgere il team di progettazione.

Ottimizzazione dell'immagine

Le immagini sono fantastiche, ma possono rallentare il tuo sito web se non sono dimensionate in modo appropriato. Assicurati di ridimensionare le tue immagini ed evita di caricare file giganti quando non verranno mostrati nella loro interezza.

Allo stesso modo, comprimi le tue immagini e prova diversi tipi di file come WebP, JPEG 2000 e JPEG XR invece di optare per file JPEG o PNG più pesanti.

Prendi in considerazione l'implementazione del caricamento lento nativo per garantire che le immagini vengano caricate quando l'utente le visualizza, invece di caricarle tutte in una volta.

Quasi tutti i browser, inclusi Chrome, Safari e Firefox, supportano l'attributo loading=”lazy” su <img> o <iframe>, che indica al browser di caricarli quando l'utente scorre più vicino ad essi.

Assicurati di non caricare in modo pigro le immagini above the fold, poiché degraderebbe il punteggio LCP della tua pagina e Google consiglia di utilizzare l'attributo fetchpriority="high" sulle immagini above the fold per migliorare l'LCP.

Se utilizzi tale attributo, non è necessario precaricare le immagini. Dovresti precaricare o impostare l'attributo "fetchpriority" sulle immagini above the fold.

Inoltre, sfrutta la reattività dell'attributo "srcset" per caricare immagini di dimensioni adeguate in base alle dimensioni dello schermo ed evita di caricare immagini ridondanti di grandi dimensioni su schermi piccoli. Ciò contribuirà notevolmente a migliorare il punteggio LCP.

Caratteri

I caratteri personalizzati stravaganti sono spesso difficili da leggere per gli utenti senza una visione 20/20, ma possono anche rallentare notevolmente il tuo sito web.

Cambia i font ospitati esternamente per font più sicuri per il Web e prova i font di Google, purché siano ospitati tramite la CDN di Google.

Inoltre, considera di incorporare caratteri variabili nell'estetica generale del tuo sito Web, poiché questa specifica del carattere può ridurre significativamente le dimensioni dei file dei caratteri.

Assicurati di precaricare i tuoi caratteri.

Animazioni/Funzioni aggiuntive

Questo è ovvio: non esagerare con animazioni, video, effetti speciali, cursori o altri elementi fantasiosi.

È bello includere alcuni elementi interattivi qua e là, ma saturare il tuo sito Web con troppe "cose" in movimento può essere frustrante sia per gli utenti che per i tuoi server.

Non utilizzare animazioni non composte, poiché provocano il ridisegno della pagina, che aumenta il lavoro del thread principale e la pagina Web potrebbe apparire visivamente instabile durante il caricamento.

Soluzione PWA per l'ottimizzazione mobile

Perché non seguire l'intero percorso ottimizzato per i dispositivi mobili e trasformare il tuo sito mobile in un'app Web progressiva (PWA)?

Poiché le PWA sono create con gli addetti ai servizi, caricano il contenuto memorizzato nella cache a una velocità più rapida. Non solo, ma le PWA assomigliano alle app mobili native, il che è ottimo per prestazioni e UX.

Metriche aggiuntive delle prestazioni tecniche

Tempo di attività

Uptime mostra quanto bene funziona il tuo sito web.

Se il tuo sito Web si arresta in modo anomalo o non funziona frequentemente, danneggerà la tua esperienza utente, le classifiche di Google e, di conseguenza, le tue entrate.

Se possibile, punta ad avere un tempo di attività del 99,999% e testa il tuo sito web da luoghi diversi.

Strumenti per il monitoraggio del tempo di attività:

• Torta di stato.
• Pingdom.
• Tempo di attività migliore.
• UptimeRobot.

Prestazioni del database

Se hai verificato le nozioni di base e il tuo sito Web è ancora lento a rispondere, potrebbe essere dovuto alle scarse prestazioni del database.

Puoi verificarlo monitorando il tempo di risposta per le tue query e individuando le query del database che richiedono più tempo.

Una volta fatto, inizia a ottimizzare! Puoi utilizzare strumenti come Blackfire.io per aiutarti a identificare facilmente i colli di bottiglia e trovare soluzioni basate su dati accurati.

Hardware del server web

Il tuo sito Web potrebbe rimanere in ritardo se lo spazio su disco è pieno di file di registro, immagini, video e voci di database. Assicurati di monitorare regolarmente il carico dell'unità di elaborazione centrale (CPU), soprattutto dopo aver implementato aggiornamenti o modifiche alla progettazione.

Strumenti come New Relic possono aiutarti a migliorare l'intero stack attraverso un monitoraggio e un debug efficienti.

Visibilità di ricerca

Molte delle metriche discusse sopra hanno già un impatto significativo sulla visibilità della ricerca.

Quindi, quando esegui le pagine del tuo sito web tramite Google PageSpeed ​​Insights e le ottimizzi, stai anche facendo cose importanti per il tuo SEO.

Puoi anche optare per strumenti di scansione del sito Web come Semrush o Sitechecker.pro, Screaming Frog, DeepCrawl o qualsiasi altro strumento più adatto alle tue esigenze.

I crawler del sito Web aiutano a trovare tutti i tipi di problemi, come ad esempio:

• Collegamenti interrotti.
• Immagini spezzate.
• Monitora le metriche vitali del web principale.
• Reindirizzare le catene.
• Errori di dati strutturati.
• Pagine non indicizzate.
• Intestazioni e meta descrizioni mancanti.
• Contenuto misto.

Assicurati di essere pronto quando si tratta dei seguenti punti:

• Mappa del sito XML : assicurati che la tua mappa del sito sia formattata correttamente e controlla se è necessario apportare aggiornamenti e inviare nuovamente la mappa del sito tramite Google Search Console.
• Robots.txt – Assicurati di utilizzare un file robots.txt per le tue pagine web (HTML, PDF o qualsiasi altro formato non multimediale che i motori di ricerca possono leggere) per gestire meglio il traffico di scansione, soprattutto se sospetti che il tuo server possa essere sopraffatto da richieste dal crawler di Google.

Sicurezza e memorizzazione nella cache del sito web

Ottieni il tuo certificato SSL!

Un sito web sano è un sito web sicuro.

Anche se il tuo sito web si carica in perfetto orario e ottiene un punteggio di 100/100, non è possibile che gli utenti (o i motori di ricerca) si fideranno del tuo sito se non inizia con https://.

Un certificato SSL è essenzialmente un codice sul tuo server che crea una connessione crittografata, garantendo che i dati dell'utente rimangano al sicuro.

Ottenere un certificato SSL non è un processo particolarmente difficile, ma può essere lungo se eseguito manualmente.

Tuttavia, se stai utilizzando un provider di hosting consolidato come BlueHost, il più delle volte il tuo provider sarà in grado di emettere un SSL gratuito per il tuo dominio.

Considera l'utilizzo di una CDN

Le reti di distribuzione dei contenuti (CDN) sono server distribuiti che lavorano all'unisono per fornire contenuti Internet veloci.

In altre parole, una CDN è uno strumento che velocizza le prestazioni del tuo sito Web mantenendo il suo contenuto su server vicini agli utenti, indipendentemente dalla posizione geografica. Questo è anche noto come memorizzazione nella cache.

Se hai una presenza globale, una CDN è d'obbligo! Aumenterà la velocità di caricamento della tua pagina, ridurrà i costi della larghezza di banda, distribuirà il traffico (riducendo le possibilità che il tuo sito si interrompa) e aumenterà la sicurezza tramite funzionalità come la mitigazione DDoS.

I principali attori del settore includono Cloudflare, Amazon Cloudfront e Google Cloud CDN. Tuttavia, ci sono molte altre opzioni, quindi fai le tue ricerche e scegli il CDN migliore per il tuo sito Web e i requisiti aziendali.

Configurazione del firewall dell'applicazione Web

Un Web Application Firewall (WAF) protegge le applicazioni Web filtrando il traffico HTTP sospetto. Ha lo scopo di impedire alle applicazioni di attacchi quali:

• Falsificazione tra siti.
• Cross-site scripting (XSS).
• Inclusione di file.
• SQL Injection.

Di seguito è riportato un elenco dei firewall per applicazioni Web più popolari e affidabili:

• Cloudflare WAF.
• Firewall di GoDaddy.
• Microsoft Azure.

Oppure, se usi WordPress, puoi considerare l'installazione di plugin come:

• Recinzione di parole.
• Sucuri.
• Sicurezza All-In-One (AIOS).

Verdetto

Questo è un involucro! Come puoi vedere, le prestazioni e la salute del sito web dipendono da vari aspetti.

Se il tuo sito web è in ritardo, il primo passo logico è controllare i tuoi Core Web Vitals e vedere cosa puoi migliorare. Puoi anche dare un'occhiata ad altre metriche tecniche e migliorarle.

La SEO è anche vitale per la salute del tuo sito web, quindi controlla la visibilità della tua ricerca, i link e i potenziali blocchi del carico per vedere cosa puoi migliorare.

E non dimenticare nemmeno il tuo certificato SSL e la memorizzazione nella cache.

Il design del tuo sito Web può anche influire sulla velocità di caricamento e sulle prestazioni, soprattutto se tu o i tuoi designer vi piace utilizzare elementi di design pesanti.

Ricorda di ottimizzare le tue immagini, evitare caratteri pesanti e utilizzare le animazioni con moderazione.

Più risorse:

• Come utilizzare il rapporto UX di Chrome per migliorare le prestazioni del tuo sito
• 6 suggerimenti per potenziare le prestazioni della Rete Display di Google
• SEO tecnico avanzato: una guida completa

Immagine in primo piano: JulsIst/Shutterstock