Ottimizzazione di WordPress: come analizzare il tuo sito web in 7 secondi

Jan Hornung Ultimo aggiornamento il 12.10.2020
9 Min.
Con questi consigli e il nostro cheat sheet potete analizzare le vostre WordPress pagine in soli 7 secondi e anche meglio di Google PageSpeed Insights
Ultimo aggiornamento il 12.10.2020

Se vuoi ottimizzare WordPress, ci sono alcune misure chiare, ben note e di provata efficacia. Ma anche i siti che si suppone siano stati ottimizzati a fondo, hanno spesso ancora un potenziale. Ecco perché vale la pena di guardare oltre l'orizzonte di Google PageSpeed Insights e Co. Perché molti performance tool forniscono una vera miniera d'oro di datiche consentono un'analisi molto completa - se si sa cosa cercare. Oggi ti mostro 7 consigli, con cui l'analisiriesce in soli 7 secondi.

Semplici performance tool come quelli di Google Prova il mio sito oppure Google PageSpeed Insights danno un elenco di raccomandazioni per l'azione. Questo può andare bene per cominciare. Ma se vuoi monitorare in modo efficiente i progetti WordPress e ottimizzare WordPress nel modo giusto, prima o poi dovresti utilizzare un performance tool che visualizzi anche il tempo di caricamento del tuo sito e ti mostri esattamente come si comporta il tuo blog, il tuo negozio, la tua pagina aziendale durante il caricamento.

Questo include ad esempio Pingdom, GTMetrix oppure Webpagetest. Questi spesso forniscono un cosiddetto grafico a cascata Questi set di dati un po' ingombranti non vengono notati quasi mai da molti utenti. Ma se lavori con WordPress in modo professionale, dovresti capire come funzionano. Perché non c'è nessun'altra fonte di dati che ti mostri quanto velocemente il tuo sito si carica, quanto è buono il tuo hosting, quanto efficientemente il tuo sito si carica e dove si trovano i lavori in corso del tuo sito.

E con un po' di pratica, è possibile analizzare ogni pagina in un colpo d'occhio e in (a mano) 7 secondi 😉

Come si fa? Oggi te lo mostrerò passo dopo passo!

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

Forse ora ti stai chiedendo: qual è lo scopo di tutto questo? Ci sono ottimi performance tool che mi mostrano già tutte le misure di ottimizzazione importanti. Inoltre, in ogni caso, ci si limita per lo più ai seguenti punti:

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

Per esempio

E anche con i più frequenti freni per i tempo di caricamento dei siti WordPress questi motivi arrivano sempre al primo posto.

Tuttavia, la nostra esperienza derivante da centinaia di analisi sistematiche delle prestazioni con test di pagine web e controlli approfonditi del sito dimostra che anche nei siti WordPress che si suppone siano stati "ottimizzati a fondo", ci sono sempre dei trabocchetti nelle prestazioni. Ed è proprio qui che il grafico a cascata aiuta. Perché può fare qualcosa di speciale: ti mostra come si carica il tuo sito, quali elementi vengono caricati e quanto velocemente avviene il tutto.

Ecco come si accede al tesoro di dati

Tutte le analisi delle buone prestazioni producono anche grafici a cascata. Ad esempio, se si utilizzano i tool Pingdom, è sufficiente scorrere verso il basso.

WordPress  ottimizzare la cascata del Pingdom
Con i tool Pingdom devi prima scorrere un po' per raggiungere il grafico a cascata. La sezione corrispondente si chiama File Requests. Webpagetest e GT-Metrix hanno ciascuno le proprie schede per i grafici.

Ma per ottenere tutte queste informazioni corrette, è necessario capire come leggere correttamente i grafici 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:

  1. Il tempo è tracciato sull'asse X.
    I grafici a cascata sono strutturati cronologicamente: sull'asse delle x puoi vedere esattamente quando un elemento inizia a caricarsi e quanto tempo ci mette. È questa struttura cronologica che rende così prezioso un grafico a cascata. Puoi vedere esattamente dove si perde il tempo di caricamento e con quali processi è necessario iniziare per ottimizzare la velocità di caricamento.
  2. Ogni richiesta HTTP viene registrata sull'asse Y.
    Per la maggior parte dei grafici a cascata, è possibile fare clic sugli elementi sull'asse Y per ottenere ulteriori informazioni al riguardo.
  3. Una legenda mostra quale tipo di risorsa viene caricata.
    Webpagetest segna HTML, CSS, immagini, Flash, ecc. con i colori, Pingdom usa simboli per questo.
  4. Un sistema di codifica aggiuntivo fornisce informazioni su come vengono eseguite le singole richieste - ad esempio, quanto tempo ci vuole per connettersi al server o se viene utilizzato HTTPS.
Ottimizzazione di WordPress: come analizzare il tuo sito web in 7 secondi
WordPress  ottimizzare le aree di un diagramma a cascata
In questa figura troverai le quattro aree sopra descritte.

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?

Nell'analisi delle prestazioni abbiamo dimostrato con 7 secondi di analisi : Il diagramma fornisce informazioni su sette fattori importanti per la velocità di caricamento. Questi sette trucchi ti aiutano a capire esattamente come e quanto velocemente il tuo sito web viene renderizzato . E ti 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 consumati sull'asse Y), più richieste devono essere elaborate e più lento è il caricamento del sito. Tuttavia, una lunga cascata non deve necessariamente essere un male. Ci sono caratteristiche e risorse esterne di cui non si può o non si vuole fare a meno. Con noi, ad esempio, la live chat è uno di questi tool. Il caricamento del programma di chat rallenta il nostro sito, naturalmente. Ma il supporto veloce 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.

Perché con il nuovo standard web, le richieste possono essere elaborate contemporaneamente invece che una dopo l'altra come prima. Inoltre, il server invia i file HTML al browser sotto HTTP/2 come misura precauzionale. Il nuovo standard compensa quindi gli svantaggi che possono derivare da un gran numero di richieste HTTP. Per beneficiare di HTTP/2, tuttavia, il tuo sito web deve avere HTTPS, cioè un Certificato SSL ...ordine.

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

Se il tuo sito web supera questa soglia, dovresti dare un'occhiata più da vicino alle tue richieste HTTP. Ad esempio, la nostra homepage carica oltre 130 richieste HTTP. Quindi c'è un potenziale di ottimizzazione.

Se la tua cascata contiene più di 100 richieste, guarda bene a quali di queste puoi rinunciare.

Suggerimento n. 2: riconoscere il tempo di caricamento

Il valore massimo sull'asse x è essenziale per l'analisi della velocità di caricamento: qui puoi vedere quanto tempo passa prima che il tuo sito web sia completamente renderizzato. Più piccolo è questo valore, meglio è.

Se il valore massimo del tuo asse delle X è superiore a 10, dovrai assolutamente considerare la velocità di caricamento del tuo sito.

Il tempo totale di caricamento del tuo sito dovrebbe essere inferiore a 10 secondi

Suggerimento n. 3: Rilevare il tempo di caricamento percepito

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

Per te come gestore del sito è quindi importante migliorare il più possibile questa sensazione di velocità. Puoi raggiungere questo obiettivo grazie a un caching ottimale, a un'ottimizzazione Above-the-Fold o, se i tuoi clienti si trovano all'estero, all'utilizzo di un Content Delivery Network (CDN).

Fortunatamente, si arriva anche a conoscere molto bene questo tempo di caricamento sentito attraverso i grafici a cascata. Secondo noi, Webpagetest è l'unico tool gratuito che distingue tra tempo di caricamento tecnicamente misurato e il quello percepito dall'utente Il tempo di ricarica è diverso.

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 quando viene caricato il primo elemento visivo del sito web (questo è chiamato il punto "Start Render"). La linea blu indica quando l'utente percepisce il sito come completamente caricato - a questo punto, la probabilità di interagire con il sito aumenta notevolmente. Queste due linee dovrebbero essere il più a sinistra e il più vicino possibile.

WordPress  ottimizzare la mappatura del tempo di carico percepito
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 tool che può fornire questi dati. Nei Pingdom Tools o GTMetrix non lo sappiamo. Pertanto questa regola vale solo se usi webpagetest:

La linea verde dovrebbe apparire dopo circa 2 o 3 secondi, la linea blu al massimo dopo 7 secondi.

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

HTTP/2 offre un vantaggio decisivo rispetto a HTTP/1: con il nuovo web standard, i siti si caricano molto più velocemente. Tuttavia, oltre al certificato SSL, l'utente dipende anche dal proprio hoster che fornisce questo servizio. Molti operatori di siti web non sono sicuri se questo sia effettivamente il loro caso o meno.

Uno dei maggiori vantaggi di HTTP/2 è l'elaborazione simultanea di più richieste. E questo lo puoi vedere chiaramente nel tuo grafico a cascata. Poiché qui le richieste vengono rimosse cronologicamente, quando si utilizza HTTP/2, diverse barre partono dallo stesso punto dell'asse X.

WordPress   ottimizzare il comportamento di carica di un WordPress  -Pagina con e senza HTTP/2
A sinistra, il tipico comportamento di caricamento di un sito WordPress senza HTTP/2. Le singole richieste HTTP vengono eseguite una dopo l'altra. A destra si vede come la stessa pagina si comporta con HTTP/2: Le singole richieste vengono caricate contemporaneamente.

Se le singole richieste si caricano in parallelo, il tuo sito va con HTTP/2.

Suggerimento n. 5: riconoscere le immagini troppo grandi

In circa il 30% dei siti web che analizziamo, troviamo ancora un potenziale in termini di dimensioni dell'immagine. E questo avviene, nonostante il fatto che la maggior parte dei webmaster supponga di aver già tirato fuori questo potenziale.

Le immagini sono - secondo la nostra esperienza - il fattore più importante del tempo di caricamento dei siti dopo il caching. Per ogni immagine caricata nel backend, WordPress crea automaticamente un sacco di altri file, le thumbnail o le featured image. La corretta compressione di questi file è uno dei modi più efficaci per ridurre le dimensioni e quindi la velocità di caricamento del tuo sito.

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  ottimizzare questo è l'aspetto che si ha quando le immagini sono davvero troppo grandi
Un esempio estremo ma molto vivido di immagini non compresse. Alcuni dei file da soli richiedono più di 8 secondi per essere caricati, rallentando l'intero sito.

In un caso come quello qui sopra, dovresti dare un'occhiata da vicino alle tue foto. Cliccando sulla richiesta corrispondente, di solito si può vedere in un grafico a cascata esattamente di quali file si tratta. Questo rende molto più facile la ricerca dei freni per il tempo di caricamento.

Le barre di caricamento lunghe per le risorse di immagini indicano il potenziale di compressione.

Suggerimento n. 6: individuare i reindirizzamenti

Un grafico a cascata non solo aiuta a capire quali elementi vengono caricati quando e a quale velocità, ma anche quanti reindirizzamenti sono stati impostati e dove puntano.

Le richieste con reindirizzamenti sono di solito evidenziate a colori. Il grafico mostra anche quale reindirizzamento è impostato e dove conduce.

WordPress  ottimizzare Identificare l'inoltro
Questo sito ha diversi reindirizzamenti 302 di fila.

Così con un grafico a cascata si può vedere subito quanti e quali reindirizzamenti sono stati impostati. A proposito, questo aiuta anche a rilevare i cicli di reindirizzamento dopo un cambio di DNS. Grazie alle marcature gialle, siamo già stati in grado di rilevare più volte reindirizzamenti inutili o addirittura dannosi.

Le linee gialle indicano i reindirizzamenti.

Suggerimento #7: individuare subito gli errori

Accade qualche volta che gli elementi di un sito web non siano renderizzati correttamente. Questo può influenzare i frame AdSense, ad esempio, ma anche le mappe e i font incorporati.

WordPress  ottimizzare nel diagramma a cascata, gli errori vengono identificati con linee rosse
Questo sito espelle un errore 404.

In questo caso il grafico a cascata emette un messaggio di errore e contrassegna la linea con la relativa richiesta in rosso. Il grafico indica anche di che errore si tratta e quale risorsa sta producendo l'errore.

Le linee rosse indicano errori durante il rendering del sito.

Con il Cheat Sheet hai tutti i suggerimenti in bella vista

Un grafico a cascata è probabilmente la valutazione più preziosa che si possa ottenere per i tuoi siti WordPress. Esso combina vari dati che tu, in quanto proprietario del sito, dovresti tenere d'occhio: il tempi di caricamento, l'ordine di rendering e i messaggi di errore. Armato dei consigli di questo articolo, riconoscerai subito ed in maniera efficace dove c'è ancora potenziale per ottimizzare:

  • La cascata è troppo lunga (oltre 100 richieste)?
  • Il valore massimo dell'asse X è troppo grande (maggiore di 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 tra loro (quindi l'utente percepisce il sito come lento)?
  • Ci sono linee gialle inaspettate (reindirizzamenti)?
  • Ci sono 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.

RAIDBOXER della prima ora e responsabile del supporto. Al Bar- and WordCamps gli piace parlare di PageSpeed e delle prestazioni del sito web. Il modo migliore per corromperlo è con un espresso - o un pretzel bavarese.

Articoli correlati

Commenti su questo articolo

Scrivi un commento

Il tuo indirizzo mail non sarà pubblicato. I campi obbligatori sono contrassegnati con * marcato.