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

Jan Hornung Ultimo aggiornamento 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 12.10.2020

Se volete ottimizzare WordPress , alcune misure sono cristalline, ben note e di provata efficacia. Ma anche le pagine presumibilmente ottimizzate spesso hanno ancora del potenziale. Pertanto, vale la pena guardare oltre Google PageSpeed Insights e Co. Perché molti strumenti di performance forniscono vere e proprie miniere d'oro di datiche permettono un'analisi molto completa - se si sa cosa cercare. Oggi ti mostrerò 7 consigli che possono aiutarti ad analizzare i tuoidati in soli 7 secondi.

Semplici strumenti di performance come Google's Prova il mio sito o Google PageSpeed Insights principalmente lanciare una lista di azioni raccomandate come risultato. Questo può andare bene per l'inizio. Ma se vuoi monitorare efficacemente i tuoi progetti WordPress e ottimizzare significativamente WordPress , dovresti prima o poi ricorrere a uno strumento di performance che produca anche il tempo di caricamento della tua pagina e ti mostri esattamente come si comporta il tuo blog, il tuo negozio, la tua pagina aziendale durante il caricamento.

Questi includono, per esempio, Pingdom, GTMetrix o Webpagetest. Questi forniscono spesso un cosiddetto grafico a cascata. Queste serie di dati un po' ingombranti sono difficilmente notate da molti utenti. Ma se lavorate professionalmente con WordPress , dovreste capire come funzionano. Perché: non c'è nessun'altra fonte di dati che ti mostra quanto velocemente carica il tuo sito, quanto è buono il tuo hoster, quanto efficientemente carica il tuo sito e dove sono i cantieri del tuo sito.

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

Come si fa? Oggi vi 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 del tempo di carico di WordPress - lati questi motivi atterrano ancora e ancora sui primi posti.

Tuttavia, la nostra esperienza di centinaia di analisi sistematiche delle prestazioni con Webpagetest e controlli approfonditi del sito mostra: anche nelle pagine di WordPress che si suppone siano "ottimizzate a fondo", si possono trovare sempre delle insidie nelle prestazioni. Ed è proprio qui che il diagramma a cascata torna utile. Perché può fare qualcosa di speciale: ti mostra come viene caricata la tua pagina, quali elementi vengono caricati e quanto velocemente va 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 Pingdom Waterfall
In Pingdom Tools, 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 diagrammi.

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 diagrammi a cascata sono strutturati cronologicamente: Usando l'asse X, puoi vedere esattamente quando un elemento inizia a caricarsi e quanto tempo impiega a caricarsi. È questa struttura cronologica che rende un grafico a cascata così prezioso. In questo modo, è possibile vedere esattamente dove si perde tempo di caricamento e quali processi è necessario affrontare per ottimizzare la velocità di caricamento.
  2. Sull'asse Y, ogni richiesta HTTP è registrata.
    Nella maggior parte dei diagrammi a cascata, puoi cliccare sugli elementi sull'asse Y per ottenere ulteriori informazioni su di essi.
  3. Una legenda mostra che tipo di risorsa è caricata.
    Webpagetest contrassegna HTML, CSS, immagini, Flash ecc. con colori, Pingdom usa icone per questo.
  4. Un ulteriore sistema di codifica fornisce informazioni su come vengono eseguite le singole richieste - per esempio, quanto tempo ci vuole per connettersi al server o se viene usato 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?

Per l'analisi delle prestazioni, l'analisi dei 7 secondi si è dimostrata valida per noi: Il grafico fornisce informazioni su sette fattori importanti per la velocità di caricamento in un solo colpo d'occhio. Questi sette hack ti aiutano a capire esattamente come e quanto velocemente viene reso il 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 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.

Con il nuovo standard web, le richieste possono essere processate simultaneamente invece che una dopo l'altra come prima. Inoltre, sotto HTTP/2 il server invia già file HTML al browser come precauzione. Il nuovo standard compensa quindi gli eventuali svantaggi che si possono avere da un gran numero di richieste HTTP. Per beneficiare di HTTP/2, tuttavia, il tuo sito web deve essere caricato via HTTPS, cioè deve avere un certificato SSL.

Comunque, la nostra esperienza ha dimostrato che non c'è una correlazione diretta tra la lunghezza di una cascata e l'effettiva velocità di caricamento. Almeno fino a un certo limite: con molto più di 100 richieste, c'è sicuramente un potenziale di risparmio nella maggior parte dei casi .

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 #3: rilevare il tempo di carico percepito

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

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 può anche arrivare al fondo di questo tempo di carico percepito molto bene tramite i diagrammi a cascata. Per quanto ne sappiamo, Webpagetest è l'unico strumento gratuito che può distinguere tra tecnicamente misurato tempo di caricamento e il percepito dall'utente tempo di caricamento.

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 caricamento 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 strumento che ti dà questi dati. Questo non ci è noto da Pingdom Tools o GTMetrix. Questa regola si applica quindi solo se si usa Webpagetest:

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

Suggerimento #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 è che può gestire più richieste contemporaneamente. E questo si può vedere chiaramente nel suo diagramma a cascata. Poiché le richieste qui sono elaborate cronologicamente, diverse barre iniziano nello stesso punto sull'asse X quando viene utilizzato HTTP/2.

WordPress  ottimizzare il comportamento di caricamento di una pagina WordPress  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 è come appare 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.

OttimizzareWordPress  Identificare i reindirizzamenti
Questo sito ha diversi reindirizzamenti 302 di fila.

Con un diagramma a cascata, puoi vedere a colpo d'occhio quanti e quali reindirizzamenti sono stati impostati. A proposito, questo aiuta anche a rilevare i loop di inoltro dopo un cambio di DNS. Grazie ai marcatori gialli, siamo stati in grado di rilevare reindirizzamenti inutili o addirittura dannosi in diverse occasioni.

Le linee gialle indicano i reindirizzamenti.

Suggerimento #7: riconoscere gli errori a colpo d'occhio

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 sono 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.

Tutti i consigli a colpo d'occhio con il cheat sheet

Un grafico a cascata è probabilmente l'analisi più preziosa che puoi ottenere per le tue pagine WordPress . Combina vari dati che tu, come proprietario di un sito, dovresti tenere d'occhio: Tempi di caricamento, ordine di rendering e messaggi di errore. Armati dei consigli di questo articolo, potete riconoscere rapidamente ed efficacemente e in modo efficace, dove c'è ancora un potenziale di ottimizzazione:

  • 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 dall'inizio e capo del supporto. Ai Bar e ai WordCamps ama parlare di PageSpeed e delle prestazioni dei siti web. Il modo migliore per corromperlo è un espresso - o un pretzel bavarese.

Commenti su questo articolo

Scrivi un commento

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