Ottimizzare WordPress

Ottimizza WordPress: Come analizzare il tuo sito web in 7 secondi

Se vuoi ottimizzare WordPress, alcune misure sono chiare, note e di provata efficacia. Ma anche i siti web che si suppone siano ottimizzati in tutto e per tutto spesso hanno ancora del potenziale. Ecco perché vale la pena guardare oltre Google PageSpeed Insights e simili. Perché molti strumenti di performance forniscono vere e proprie miniere di dati che consentono un'analisi molto completa, se sai cosa cercare.

Semplici strumenti di performance come Google Prova il mio sito o Google PageSpeed Insights e di conseguenza un elenco di azioni consigliate. All'inizio può andare bene. Ma se vuoi monitorare i tuoi progetti WordPress in modo efficiente e ottimizzare WordPress in modo significativo, prima o poi dovrai ricorrere a uno strumento di performance che fornisca anche i tempi di caricamento del tuo sito web e ti mostri esattamente come si comporta il tuo blog, il tuo negozio, il tuo sito aziendale durante il caricamento.

Questi includono, ad esempio, Pingdom, GTMetrix o Webpagetest. Spesso questi forniscono un cosiddetto diagramma a cascata. Questi set di dati un po' ingombranti sono poco notati da molti. Ma se lavori professionalmente con WordPress, dovresti capire come funzionano. Perché: non esiste un'altra fonte di dati che ti mostri la velocità di caricamento del tuo sito web, la qualità del tuo host web, l'efficienza di caricamento del tuo sito web e la posizione dei siti di costruzione del tuo sito web.

E con un po' di pratica puoi analizzare qualsiasi sito web a colpo d'occhio e in (mano) 7 secondi 😉 Come si fa? Oggi ti mostrerò passo dopo passo!

Ottimizzazione di WordPress: senza un grafico a cascata vedi solo la punta dell'iceberg

Forse ora ti stai chiedendo: A cosa serve tutto questo sforzo? Esistono ottimi strumenti di performance che mi mostrano già tutte le misure di ottimizzazione più importanti. Inoltre, di solito si limita ai seguenti punti:

Naturalmente, se hai chiarito e ottimizzato questi punti, hai creato un'ottima base per un sito web davvero veloce. Ecco perché questi motivi sono (giustamente) presenti in tutte le guide alle prestazioni.

Ad esempio

E questi motivi sono anche ripetutamente in cima alla lista dei più comuni freni al tempo di caricamento dei siti web WordPress.

Tuttavia, la nostra esperienza di centinaia di analisi sistematiche delle prestazioni con Webpagetest e di controlli approfonditi del sito dimostra che anche nei siti WordPress presumibilmente "ottimizzati a fondo", ci sono sempre delle insidie per le prestazioni. Ed è proprio qui che entra in gioco il diagramma a cascata. Perché è in grado di fare qualcosa di speciale: ti mostra come viene caricato il tuo sito web, quali elementi vengono caricati e quanto velocemente avviene il tutto.

Ecco come si accede al tesoro di dati

Tutte le buone analisi delle prestazioni forniscono anche grafici a cascata. Se utilizzi gli strumenti di Pingdom, ad esempio, devi solo scorrere abbastanza in basso.

Ottimizzare WordPress Pingdom Waterfall

In Pingdom Tools, devi prima scorrere un po' per raggiungere il diagramma a cascata. La sezione corrispondente si chiama Richieste di file. Webpagetest e GT-Metrix hanno ciascuno le proprie schede per i diagrammi. Tuttavia, per acquisire correttamente tutte queste informazioni, devi capire come leggere correttamente i diagrammi a cascata.

Come leggere correttamente i grafici a cascata

La concentrata densità delle informazioni fa sì che i diagrammi a cascata non siano esattamente noti per la loro chiarezza. In realtà, per capire i set di dati sono sufficienti quattro cose:

  • Il tempo è tracciato sull'asse X. I diagrammi a cascata sono strutturati cronologicamente: Utilizzando l'asse X, puoi vedere esattamente quando un elemento inizia a caricarsi e quanto tempo impiega per farlo. È proprio questa struttura cronologica che rende un diagramma a cascata così prezioso. In questo modo potrai vedere esattamente dove si perde tempo di caricamento e da dove devi partire per ottimizzare la velocità di caricamento.
  • L'asse Y registra ogni richiesta HTTP. Nella maggior parte dei diagrammi a cascata, puoi cliccare sugli elementi sull'asse Y per ottenere ulteriori informazioni su di essi.
  • Una legenda mostra il tipo di risorsa caricata. Webpagetest contrassegna HTML, CSS, immagini, Flash ecc. con un colore, mentre Pingdom utilizza dei simboli per questo.
  • Un ulteriore sistema di codifica fornisce informazioni sul modo in cui vengono eseguite le singole richieste, ad esempio il tempo necessario per connettersi al server o se viene utilizzato il protocollo HTTPS.

Nella seguente illustrazione troverai le quattro aree appena descritte.

WordPress Ottimizza le aree a cascata

Ottimizzare WordPress con l'analisi di 7 secondi

Quindi ora è chiaro come si legge un grafico a cascata - ma quali conclusioni se ne possono trarre?

L'analisi dei 7 secondi si è dimostrata valida nella nostra analisi delle prestazioni: Il diagramma fornisce informazioni su sette fattori importanti per la velocità di caricamento in un solo colpo d'occhio. Questi sette trucchi ti aiutano a capire esattamente come e quanto è veloce il rendering del tuo sito web. E mostrano dove c'è il potenziale per renderlo più veloce, risolvere i problemi o migliorarlo ulteriormente.

Nota

A proposito, nei nostri esempi faremo sempre riferimento ai grafici a cascata di Webpagetest, poiché in realtà utilizziamo sempre questo tool, non importa se manualmente o automaticamente.

Suggerimento n. 1: le dimensioni contano

Più lunga è la cascata (cioè più elementi vengono portati lungo l'asse Y), più richieste devono essere elaborate e più lento è il caricamento del sito web. Tuttavia, una cascata lunga non deve necessariamente essere negativa. Ci sono funzioni e risorse esterne di cui non puoi o non vuoi fare a meno. Nel nostro caso, ad esempio, la live chat è uno strumento di questo tipo. Naturalmente, il caricamento del programma di chat rallenta il nostro sito web. Tuttavia, l'assistenza rapida via chat è una parte centrale del nostro hosting. Quindi non possiamo fare a meno del plugin.

Anche HTTP/2 assicura che il semplice numero di richieste non abbia più lo stesso significato di qualche anno fa.

Con il nuovo standard web, le richieste possono essere elaborate simultaneamente invece che una dopo l'altra. Inoltre, con HTTP/2, il server invia già i file HTML al browser come precauzione. Il nuovo standard compensa quindi gli eventuali svantaggi derivanti da un numero elevato di richieste HTTP. Per poter usufruire di HTTP/2, tuttavia, il tuo sito web deve essere caricato tramite HTTPS, ovvero deve avere un certificato SSL.

In ogni caso, la nostra esperienza ha dimostrato che non esiste una correlazione diretta tra la lunghezza di una cascata e l'effettiva velocità di caricamento. Almeno fino a un certo limite: con un numero di richieste significativamente superiore a 100, nella maggior parte dei casi c'è un potenziale di risparmio.

Se il tuo sito web supera questa soglia, dovresti dare un'occhiata più approfondita alle tue richieste HTTP. La nostra homepage, ad esempio, si carica con oltre 130 richieste HTTP. Quindi c'è un potenziale di ottimizzazione in questo caso. Se la tua cascata contiene più di 100 richieste, valuta attentamente quali di queste possono essere evitate.

Suggerimento n. 2: riconoscere il tempo di caricamento

Il valore massimo sull'asse delle X è fondamentale per analizzare la velocità di caricamento: qui puoi leggere quanto tempo trascorre prima che il tuo sito web venga visualizzato completamente. Più questo valore è piccolo, meglio è.

Se il valore massimo dell'asse X è superiore a 10, devi assolutamente controllare la velocità di caricamento del tuo sito web. Il tempo di caricamento totale del tuo sito web dovrebbe essere inferiore ai 10 secondi.

"*" indica i campi obbligatori

Desidero iscrivermi alla newsletter per essere informato sui nuovi articoli del blog, sugli ebook, sulle funzionalità e sulle novità di WordPress. Posso ritirare il mio consenso in qualsiasi momento. Si prega di prendere nota della nostra Politica sulla Privacy.
Questo campo è per la convalida e non deve essere modificato.

Suggerimento #3: rilevare il tempo di carico percepito

La maggior parte degli utenti non si preoccupa molto dei valori che gli strumenti di analisi sputano fuori. L'unica cosa che conta per loro è la velocità di caricamento del sito web.

Quando gestisci un sito web, è quindi importante migliorare il più possibile questa sensazione di velocità. Puoi ottenere questo risultato attraverso una cache ottimale, un'ottimizzazione above-the-fold o, se i tuoi clienti si trovano all'estero, l'utilizzo di una rete di distribuzione dei contenuti (CDN).

Fortunatamente, però, è possibile capire il tempo di caricamento percepito anche attraverso i diagrammi a cascata. A nostra conoscenza, Webpagetest è l'unico strumento gratuito che distingue tra il tempo di caricamento misurato tecnicamente e il tempo di caricamento percepito dall'utente.

L'intero diagramma rappresenta il - meno importante - tempo di caricamento tecnico. Il tempo di caricamento percepito è nascosto tra le linee blu e verdi del grafico.

La linea verde indica il momento in cui viene caricato il primo elemento visivo del sito web (questo punto è chiamato "start rendering"). La linea blu indica il momento in cui l'utente percepisce che il sito web è completamente carico: a questo punto, la probabilità di interagire con il sito web aumenta in modo significativo. Queste due linee devono essere il più possibile a sinistra e vicine tra loro.

Ottimizzare la velocità di caricamento percepita di WordPress

L'area arancione mostra la fase in cui non viene renderizzato alcun contenuto visibile. Fino alla fine di questa fase il visitatore vede solo una pagina bianca. L'area blu segna l'intervallo di tempo tra Start Render e Load Time, durante il quale il visitatore può percepire un processo di rendering visibile (ad esempio una clessidra). Entrambi insieme formano il tempo di caricamento percepito.

Webpagetest è l'unico strumento che ti fornisce questi dati. Non sappiamo nulla di Pingdom Tools o GTMetrix. Questa regola si applica quindi solo se utilizzi Webpagetest: La linea verde dovrebbe apparire dopo circa 2 o 3 secondi, quella blu al massimo dopo 7 secondi.

Suggerimento #4: HTTP/2 vs. HTTP/1

HTTP/2 offre un vantaggio decisivo rispetto a HTTP/1: i siti web si caricano molto più velocemente con il nuovo standard web. Tuttavia, oltre a un certificato SSL, dipende anche dal fatto che il tuo host fornisca questo servizio. Molte persone non sono sicure che questo sia effettivamente il caso per loro o meno.

Uno dei maggiori vantaggi di HTTP/2 è l'elaborazione simultanea di più richieste. E questo è esattamente ciò che puoi vedere chiaramente nel tuo diagramma a cascata. Poiché le richieste vengono elaborate cronologicamente, diverse barre partono dallo stesso punto sull'asse X quando si utilizza HTTP/2.

WordPress ottimizza HTTP2

A sinistra puoi vedere il tipico comportamento di caricamento di un sito WordPress senza HTTP/2. Le singole richieste HTTP vengono eseguite una dopo l'altra. A destra, puoi vedere come si comporta lo stesso sito web con HTTP/2: Le singole richieste vengono caricate simultaneamente.

Se le singole richieste vengono caricate in parallelo, il tuo sito web funziona con HTTP/2.

Suggerimento n. 5: riconoscere le immagini troppo grandi

In circa il 30% dei siti web che analizziamo, troviamo ancora del potenziale in termini di dimensioni delle immagini. E questo nonostante la maggior parte dei webmaster ritenga di aver già raggiunto l'optimum.

Secondo la nostra esperienza, le immagini sono il fattore più importante per il tempo di caricamento delle pagine dopo la cache. Per ogni immagine che carichi nel back end, WordPress crea automaticamente una serie di file aggiuntivi, le miniature o immagini in evidenza. La corretta compressione di questi file è uno dei metodi più efficaci per ridurre le dimensioni e quindi la velocità di caricamento del tuo sito web.

Qui sotto puoi veder, per esempio, come ottimizzare le tue immagini in modo adeguato:

Nel grafico a cascata, le immagini possono essere subito identificate con la legenda: Webpagetest li rappresenta con barre viola, Pingdom con un'icona. Solo GTMetrix non contraddistingue separatamente le immagini. In ogni caso: se le barre corrispondenti sono molto più lunghe delle barre delle rimanenti richieste, ciò indica un lungo tempo di caricamento delle immagini.

WordPress ottimizza le immagini grandi

Nella figura puoi vedere un esempio estremo ma molto chiaro di immagini non compresse. Alcuni file da soli impiegano oltre 8 secondi per essere caricati, rallentando l'intero sito web.

In un caso come quello sopra descritto, dovresti esaminare attentamente le tue immagini. Facendo clic sulla richiesta corrispondente, di solito puoi vedere in un diagramma a cascata quali sono i file coinvolti. In questo modo la ricerca di freni al tempo di caricamento diventa molto più semplice. Le lunghe barre di caricamento delle risorse di immagine indicano un potenziale di compressione.

Suggerimento n. 6: individuare i reindirizzamenti

Un grafico a cascata non solo ti aiuta a capire quali elementi si stanno caricando quando e a che velocità, ma anche quanti reindirizzamenti sono stati impostati e dove puntano. Le richieste con reindirizzamento sono solitamente evidenziate in colore. Il diagramma indica anche quale reindirizzamento è impostato e dove va.

WordPress ottimizza i reindirizzamenti

Il sito web in questa illustrazione presenta diversi reindirizzamenti 302 di fila.

Con un diagramma a cascata, puoi vedere a colpo d'occhio quanti e quali reindirizzamenti sono stati impostati. Questo aiuta anche a rilevare i loop di inoltro dopo una modifica del DNS.

Grazie ai contrassegni gialli, siamo già stati in grado di individuare più volte reindirizzamenti inutili o addirittura dannosi.

Suggerimento n. 7: Riconosci gli errori a colpo d'occhio

A volte, alcuni elementi di un sito web non vengono visualizzati correttamente. Questo può riguardare i frame di AdSense, ad esempio, ma anche le mappe e i font incorporati.

Errore di ottimizzazione di WordPress

In questo caso, il diagramma a cascata lancia un messaggio di errore e segna in rosso la riga con la richiesta in questione. Il diagramma indica anche qual è l'errore e quale risorsa lo sta producendo. Il sito web in questa illustrazione lancia un errore 404.

Le linee rosse indicano gli errori durante il rendering del sito web.

Tutti i consigli in un colpo d'occhio con la scheda informativa

Un grafico a cascata è probabilmente l'analisi più preziosa che puoi ottenere per i tuoi siti web WordPress. Combina diversi dati che dovresti tenere sotto controllo: I tempi di caricamento, l'ordine di rendering e i messaggi di errore. Armato dei suggerimenti di questo articolo, potrai riconoscere in modo rapido ed efficace dove c'è ancora un potenziale di ottimizzazione:

  • La cascata è troppo lunga (oltre 100 richieste)?
  • Il valore massimo dell'asse X è troppo grande (superiore a 10)?
  • Le richieste si caricano in parallelo (via HTTP/2)?
  • Le immagini sono troppo grandi (cioè le immagini non sono ben ottimizzate)?
  • Le linee verdi e blu sono troppo a destra o troppo distanti (cioè l'utente percepisce il sito come lento)?
  • Ci sono linee gialle inaspettate (reindirizzamenti)?
  • Ci sono delle linee rosse (errori)?

Te lo concedo: la prima volta, potrebbe essere necessario più tempo per l'analisi. Con un po' di esperienza, tuttavia, i grafici a cascata consentono di comprendere molto meglio i tuoi progetti WordPress e di ottimizzarli in modo più approfondito.

Ti è piaciuto l'articolo?

Con la tua valutazione ci aiuti a migliorare ancora di più i nostri contenuti. Grazie!

Scrivi un commento

Il tuo indirizzo e-mail non sarà pubblicato. I campi obbligatori sono contrassegnati da *.