Performance Test i temi di WordPress più venduti su ThemeForest

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.

I temi scelti

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 settimanalmente

I test

Ci 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:

  • Queste demo sono tutte ospitate dai singoli autori di temi. Le specifiche di hosting non sono tutte uguali.
  • È stata scelta una demo casuale in cui erano disponibili più opzioni. WooCommerce, BuddyPress o altri plugin per la piattaforma sono stati evitati laddove possibile. Non sono stati utilizzati temi chiaramente influenzati dalle immagini (come i portfolio fotografici).
  • Tutti gli URL sono stati testati dalla California, ove possibile.
  • I risultati precisi possono variare di giorno in giorno.
  • Le demo tematiche sono spesso costruite per creare un impatto visivo, pieno di immagini di alta qualità e di tutte le funzionalità possibili. Ciò significa che le dimostrazioni raramente sono un riflesso accurato di come un sito Web risultante potrebbe apparire e comportarsi. È probabile che, con la tua copia, migliori i punteggi delle prestazioni di tutte queste demo.
  • Tutti gli autori di temi sono invitati a migliorare i loro punteggi su queste demo. L'articolo verrà aggiornato per riflettere i nuovi numeri.

Avada

Avada: demo creativa
  • Insight di Pagespeed per dispositivi mobili: 73%
  • Desktop approfondimenti di Pagespeed: 88%
  • Webpagetest.org: Straight A's: AAAAA☑
  • Pingdom: 92% (grado A)
  • Velocità di caricamento Pingdom: 0,97 s
  • Peso pagina strumenti di sviluppo di Chrome: 1.3Mb
  • Audit di accessibilità: punteggio del 94% (eccellente). Gli attributi ARIA seguono le best practice, gli elementi sono ben strutturati, i metatag utilizzati correttamente.

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

i7

The7: demo di costruzione
  • Insight di Pagespeed mobile: 64%
  • Desktop approfondimenti di Pagespeed: 91%
  • Webpagetest.org: A su tutta la linea. AAAAA☑
  • Pingdom: 68% (grado D)
  • Velocità di caricamento Pingdom: 1,51 s
  • Peso pagina strumenti di sviluppo di Chrome: 1.3Mb
  • Audit di accessibilità: punteggio dell'83% (non male). Mancano alcuni elementi dell'immagine 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).

BeTheme

BeTheme: demo 3D
  • Insight di Pagespeed per cellulari: 76%
  • Desktop approfondito di Pagespeed: 87%
  • Webpagetest.org: Straight A's AAAAA☑
  • Pingdom: 98 (grado A)
  • Velocità di caricamento Pingdom: 1,27 s
  • Peso pagina strumenti di sviluppo di Chrome: 1,8 Mb
  • Audit di accessibilità: l'80% non è all'altezza dei rapporti di contrasto (questo è un tema piuttosto cupo e intricato) e il suo uso imperfetto dei ruoli ARIA.

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.

Impreza

Impreza: demo del ristorante
  • Insight di Pagespeed mobile: 63%
  • Desktop approfondito di Pagespeed: 68% 
  • Webpagetest.org: FAABF☒
  • Pingdom: 80% (grado B)
  • Velocità di caricamento Pingdom: 2,34 s
  • Peso pagina strumenti di sviluppo di Chrome: 2,5 Mb
  • Audit di accessibilità: 94% (eccellente). Attributi utilizzati correttamente sugli elementi, compresi i ruoli ARIA. Nomi di elementi distinguibili e contenuti ben descritti.

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. 

avvolgere

Enfold: demo palestra
  • Insight di Pagespeed mobile: 60%
  • Desktop approfondimenti di Pagespeed: 60%
  • Webpagetest.org: AAADB☒
  • Pingdom: 70% (grado C)
  • Velocità di caricamento Pingdom: 2,79 s
  • Peso pagina strumenti di sviluppo di Chrome: 5.2 Mb
  • Audit di accessibilità: 89% Una delle demo a tema di punteggio più alto per l'accessibilità, che mostra una forza di fondo nella sua qualità di costruzione.

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.

X

X: demo della Chiesa
  • Insight di Pagespeed mobile: 77%
  • Desktop approfondimenti di Pagespeed: 74%
  • Webpagetest.org: DFAAB☒
  • Pingdom: 87% (grado B)
  • Velocità di caricamento Pingdom: 2,45 s
  • Peso pagina strumenti di sviluppo di Chrome: 2,1 Mb
  • Audit di accessibilità: 91% Un punteggio A11y molto sano, deluso solo dalla mancanza di 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.

ponte

Bridge: demo spa
  • Insight di Pagespeed mobile: 78%
  • Desktop approfondimenti di Pagespeed: 91%
  • Webpagetest.org: AAAAA☒
  • Pingdom: 80% (grado B)
  • Velocità di caricamento Pingdom: 1,11 s
  • Peso pagina degli strumenti di sviluppo di Chrome: 1,6 Mb
  • Audit di accessibilità: 91% (molto buono). Piccoli punti che riducono il punteggio complessivo, ma gli attributi ARIA seguono le best practice e gli elementi della pagina hanno nomi distinguibili, descrivono bene il loro contenuto e sono strutturati correttamente.

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.

Flatsome

Flatsome: esplora la demo
  • Insight di Pagespeed mobile: 53%
  • Desktop approfondito di Pagespeed: 57%
  • Webpagetest.org: AAAAA☑
  • Pingdom: 96% (grado A)
  • Velocità di caricamento Pingdom: 1,02 s
  • Peso pagina strumenti di sviluppo di Chrome: 3,7 Mb
  • Audit di accessibilità: 83% Punti persi sul fronte A11y non riuscendo a nominare i pulsanti correttamente (i pulsanti icona WooCommerce wishlist non possono essere letti correttamente dagli screen reader) e alcuni link sono ugualmente vaghi. Un basso contrasto su alcuni elementi e ID elemento duplicati sono anche correzioni facili.

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

Giove

Giove: modello Bellona
  • Insight di Pagespeed mobile: 38%
  • Desktop approfondito di Pagespeed: 44%
  • Webpagetest.org: AAAFA☑
  • Pingdom: 92% (grado A)
  • Velocità di caricamento Pingdom: 1,07 s
  • Peso della pagina degli strumenti di sviluppo di Chrome: 3,3 Mb
  • Audit di accessibilità: 91% (molto buono). A causa della natura incisiva della grafica (che adoro, tra l'altro), il testo su alcune immagini rende i rapporti di contrasto deboli. La struttura della pagina e l'uso descrittivo degli elementi, insieme al corretto utilizzo di ARIA, compensano le carenze del contrasto.

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.

Giornale

Giornale: notizie di tecnologia
  • Insight di Pagespeed per cellulari: 76%
  • Desktop approfondito di Pagespeed: 77%
  • Webpagetest.org: AAAAA☑
  • Pingdom: 93% (grado A)
  • Velocità di caricamento Pingdom: 1,19 s
  • Peso pagina degli strumenti di sviluppo di Chrome: 1,5 Mb
  • Audit di accessibilità: 86% Un buon punteggio - potrebbe essere migliorato descrivendo in modo appropriato i link e i pulsanti che vengono effettivamente utilizzati per controlli JavaScript, alternatori e simili.

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.

Come rendere il tuo sito WordPress più veloce

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:

Risorse per il rendimento di WordPress

  • Ottimizza il tuo sito web senza AMP di Kezz Bracey
  • Perché (WordPress) Performance Matters di Rachel McCollin
  • Accelerare WordPress di Barış Ünver
  • Ottimizzazione di Google Page Speed ​​a 100 in WordPress di Jeff Reifman
  • Come utilizzare i plugin WordPress senza compromettere le prestazioni di Barış Ünver