Le prestazioni sono uno degli aspetti più importanti di qualsiasi sito Web, ma è qualcosa che raramente le persone sembrano prendere in considerazione quando acquistano temi WordPress. In questo riepilogo prenderemo i dieci temi più venduti su Themeforest, in ordine di apparizione, li eseguiamo attraverso alcuni test di base sulle prestazioni e vediamo quali conclusioni possiamo trarre.
L'elenco dei temi WordPress più venduti di ThemeForest viene aggiornato settimanalmente, ma spesso vedrai giocatori familiari in possesso dei primi posti per un po 'di tempo. Abbiamo preso la top ten (vista sotto) e li abbiamo messi uno contro l'altro con alcuni test di performance comuni.
Temi WordPress più venduti - aggiornato settimanalmenteCi sono molti strumenti disponibili per testare siti web, abbiamo scelto alcuni classici: Google Pagespeed Insights, Webpagetest.org, Pingdom e gli strumenti di sviluppo di Chrome. La maggior parte fornirà un riscontro sulla velocità di caricamento di una pagina web, sul suo peso complessivo, sull'efficienza con cui i suoi asset vengono convogliati e, in ultima analisi, fornisce una sorta di punteggio. Abbiamo eseguito una demo di ciascun tema attraverso questi strumenti e raccolto le cifre (vedi la tabella alla fine del post).
Oltre a questi test abbiamo utilizzato il plug-in Verifica accessibilità per gli strumenti di sviluppo di Chrome. Questo non è collegato alle prestazioni in quanto tali, ma i risultati danno sempre un'idea di come viene costruito un tema.
Alcune cose da notare:
Punteggi eccellenti su tutta la linea. I test iniziali sono stati meno intensi, ma ThemeFusion è stato in grado di migliorare significativamente i numeri ottimizzando le immagini utilizzate in questa demo. Il punteggio sul desktop di Pageview Insights è passato dal 48% all'88% unicamente sul peso dell'immagine, dimostrando quanto sia importante l'ottimizzazione dell'immagine! È bello vedere che Avada è anche costruito pensando all'accessibilità.
alt
attributi, il rapporto di contrasto del colore potrebbe essere migliore su parte del testo (rispetto al suo sfondo). Ma nel complesso, gli elementi sono ben strutturati e l'accessibilità è solida.In generale questa demo si carica abbastanza rapidamente; le sue immagini e risorse non sono troppo pesanti, e la pagina è utilizzabile relativamente presto dopo il caricamento. Eppure il suo grado di Pingdom non è ottimale. Potrebbero essere apportati miglioramenti combinando parte del JavaScript, allo stesso modo del CSS, mentre il caching potrebbe essere reso più semplice non forzando i numeri di versione sui nomi dei file (ad esempio: /assets/css/settings.css?ver=5.4.5.2
).
Questo tema viene caricato molto rapidamente. Molti dei suoi contenuti visibili hanno la priorità includendo gli stili essenziali incorporati nel capo
, e gran parte di ciò che viene caricato è minimizzato e concatenato. Come spesso accade, le immagini rappresentano la parte del leone del peso della pagina (69,5%), quindi non sarebbe difficile ottenere la homepage di questo demo sotto la soglia 1Mb dorata.
Mentre la velocità di caricamento della demo del ristorante di Impreza non è male, i suoi punteggi delle prestazioni sono ostacolati da oltre 2Mb di immagini. Da notare anche la mancanza di CDN e il tempo di risposta del server scarso; due aspetti specifici per l'hosting di questa demo e quelli che puoi facilmente migliorare.
Di nuovo, nessun CDN utilizzato per l'hosting di questa demo, che lo perde alcuni punti su webpagetest.org. Una mancanza di HTTPS potrebbe anche aver guadagnato un segno nero Enfold. Come al solito, questa demo cade nella trappola di essere il più visivamente visiva possibile, sacrificando il peso della pagina per la qualità dell'immagine. Con oltre 5 Mb questo è il peso massimo del gruppo, ma la dimensione dell'immagine è sempre qualcosa che può essere facilmente rimediato.
alt
attributi su alcune immagini, basso rapporto di contrasto su alcune aree (questo tema della chiesa è abbastanza attenuato) e assenza di a titolo
attributo su un iframe
. Tuttavia, dato che l'iframe proviene da un embed di YouTube, che non include un attributo title come standard, perdoniamo questa supervisione.Questa demo è una delle poche che fa un lavoro ragionevole mantenendo i costi generali delle immagini al minimo; webpagetest gli assegna un solido 97/100 per la compressione delle immagini. Invece, i suoi punteggi bassi provengono in gran parte dall'hosting; nessun CDN, nessun HTTPS, tempo di risposta iniziale scarso e mancanza di "keep alive", altrimenti noto come connessione HTTP persistente, qualcosa che può essere facilmente attivato. Come sempre, miglioramenti facili che tu stesso potresti attuare.
Una delle demo più leggere qui, ma i cursori di immagine faranno sempre aumentare la ponderazione della pagina, anche con immagini ottimizzate come queste. La riduzione di HTML e altre risorse avrebbe aiutato il punteggio di insight di Google Mobile Speed, sebbene il punteggio desktop sia estremamente buono. L'hosting migliorato farebbe ancora miracoli: un tempo di risposta del server migliore, un CDN e la memorizzazione nella cache di frutta a basso impatto.
Non visto attraverso gli occhi favorevoli di Pagespeed Insights, anche se le altre metriche di punteggio assolutamente amano Flatsome! Un buon hosting serve la pagina in modo efficiente (gli autori dei temi prendono nota), le risorse sono ridotte al minimo e le immagini con caricamento lento aiutano a ridurre progressivamente la pagina di peso medio..
Suonerò come un disco rotto qui, ma cinque minuti di ottimizzazione delle immagini ridurranno enormemente i costi generali di questa demo. casa-bg-08.jpg
da solo pesa quasi un intero megabyte; correndo attraverso TinyPNG si toglie l'87% subito. Perché non dovresti? Come suggeriscono Pingdom e Webpagetest, la maggior parte degli altri aspetti delle prestazioni sono molto buoni.
Grandi punteggi su tutta la linea, si applicano miglioramenti standard (ottimizzazione dell'immagine, compressione / concatenazione JS e CSS), ma tenete presente che questa demo viene fornita con un grande pull-out che promuove altre versioni del tema (aggiunta complicazione che la vostra versione improbabile che sia necessario). Senza molto sforzo questa demo potrebbe entrare nella classe di peso inferiore a 1Mb.
In questo modo conclude la nostra carrellata di punteggi. Avendo acquistato un tema WordPress, come hai potuto ottimizzare il sito che hai costruito con esso?
Non ti sorprenderà: un facile primo punto di riferimento quando ottimizzi il tuo sito web sono le tue immagini. Rimuovi le immagini indesiderate, comprime quelle di cui hai bisogno, salva i file JPEG come "progressivi" (in modo che ci sia almeno qualcosa da vedere mentre stanno caricando) e inizierai bene. Potresti anche voler installare un plugin Lazy Loading per fare un passo avanti. Abbiamo visto che pochissime di queste demo danno la priorità all'ottimizzazione delle immagini, ma ciò significa almeno che sarai in grado di migliorare i loro punteggi.
Per quanto riguarda i punteggi di Pagespeed Insights, notoriamente volubili, avrai notato che tutte queste demo (ad eccezione di una) hanno un punteggio migliore per il desktop rispetto alle loro versioni mobili. Ciò non riflette più il modo in cui viene utilizzato il Web, quindi per mantenere Google (e gli utenti) felici di prestare un'attenta considerazione alle prestazioni dei dispositivi mobili. Un primo atteggiamento mobile aiuterà anche il tuo SEO.
Come potresti fare questo? Concatenare e minimizzare CSS e JavaScript può essere difficile con WordPress; l'uso di plug-in di terze parti significa che i file possono essere molti e non si avrà molto controllo su di essi senza aiuto. Ancora, fai del tuo meglio per includere gli stili di "visione iniziale" vitali in linea nel e rendere il tuo sito Web utilizzabile il più rapidamente possibile impedendo agli script di "render-blocking" di rallentare il processo di caricamento. Se il dispositivo di scorrimento nella parte superiore della tua home page richiede che l'intera pagina venga caricata prima che venga visualizzata, Google ti penalizzerà.
Oltre a ciò, considera il tuo hosting. Abilita la compressione GZIP. HTTPS non farà alcun danno neanche. Utilizzare anche un servizio di memorizzazione nella cache; l'installazione e la configurazione di W3 Total Cache è un gioco da ragazzi. Utilizza un CDN se i tuoi contenuti sono destinati a un vasto pubblico. Infine, dai un'occhiata a questi tutorial e corsi per maggiori dettagli e aiuto sull'argomento: