Ottimizzazione WordPress per Wide Magazine

ottimizzato per i dispositivi mobili

Wide Magazine è una rivista di lifestyle che presenta fantastiche esperienze nel centro di Bucarest.

Sebbene la rivista fosse ospitata su un VPS, la velocità era lenta. Il costo del VPS gestito sembrava irragionevolmente alto.

La velocità di caricamento del sito è stata di 6,99 secondi, i componenti della pagina hanno totalizzato 2,5 MB e hanno eseguito 113 richieste al server.

eseguire il ping dei risultati prima dell'ottimizzazione
prima dell'ottimizzazione

La home page si stava caricando:

  • 30 file JS – 883,2 K
  • 11 file CSS – 138,3 K
  • 22 immagini CSS – 255,2 K
  • 13 immagini – 1320,7 K
  • 1 favicon – 16,9 K

Il punteggio di Google PageSpeed ​​Insights era 57/100, i consigli erano:

  • abilitare la compressione
  • sfruttare la memorizzazione nella cache del browser
  • ottimizzare le immagini
  • riduce i tempi di risposta del server
Punteggio di Google PageSpeed ​​Insights prima
prima dell'ottimizzazione

Rapporto di ottimizzazione

Anche la favicon ha troppi KB. Abbiamo fatto un test, lo abbiamo scaricato e importato su favicon.cc dove ne abbiamo generato uno nuovo. Abbiamo ottenuto un file di 1,6 K (anche se di qualità inferiore).

Immagini

Le immagini non sono ottimizzate e inoltre possono essere visualizzate gradualmente mentre i visitatori scorrono per accelerare il caricamento dei contenuti Above The Fold (carico lento).

Un altro problema con la visualizzazione delle immagini è che vengono caricate nella loro dimensione originale (1024*682px) e il browser le ridimensiona a 676*450px.

Si consiglia di caricare le immagini direttamente con una risoluzione di 676*450 px o di impostare una miniatura in quella dimensione particolare.

In questo modo il browser funziona meno con il ridimensionamento delle immagini + la dimensione della pagina (KB) diminuisce. Questi due fattori portano al miglioramento della velocità di caricamento.

Ad esempio, abbiamo scattato un'immagine casuale di 163 KB, l'abbiamo ridimensionata a 676*450px e successivamente Quello lo abbiamo ottimizzato con jpegmini.com. Il file risultante aveva 70,7 K.

Anche lasciato a 1024*682px e ottimizzandolo semplicemente con JPEGMini abbiamo ottenuto un file di 90,3K, un notevole miglioramento rispetto ai 163K iniziali.

File JS

La cosa successiva che abbiamo cercato è il numero e la dimensione complessiva dei file JS: 30 file per un totale di 883,2 KB.

E anche qui abbiamo riscontrato qualche problema.

JQuery veniva caricato due volte: la versione 1.9.1 (92,6K) da code.jquery.com e la versione 1.8.3 (93,6K) caricata dalla cartella WordPress locale.

Stesso problema con il codice di Google Analytics: una volta la vecchia versione, ga.js (39,8 K) e una volta la nuova versione, analytics.js (20,3 K).

Questo è un extra di 133,4K.

Ci sono diversi file JS caricati da 2 plugin che essenzialmente fanno la stessa cosa, visualizzando gallerie fotografiche: NextGen Gallery e PrettyPhoto Media.

PrettyPhoto Media non sembra essere utilizzato, quindi può essere rimosso per risparmiare circa 50K e 2 richieste.

Plugin

È possibile eliminare 2 plugin aggiuntivi, jQuery Mega Menu e Useful Banner Manager. jQuery Mega Menu non sembra essere utilizzato da nessuna parte. Utile Banner Manager viene utilizzato per un singolo banner, che può essere mostrato tramite un semplice codice html inserito in un widget di testo.

Il plugin ShareThis che aggiunge pulsanti di condivisione ai post utilizza un JS di 125,1K. Potrebbe essere sostituito con Jetpack che utilizza un JS di soli 38,5K.

Facebook Like Box non è implementato nel modo più efficiente, utilizzando un JS di 171,9K.

Il metodo più semplice ed efficace è copiare il codice iframe dalla pagina Like Box degli sviluppatori di Facebook e incollarlo in un widget di testo, eliminando così la necessità di JS.

Il plug-in di Google Maps utilizza quattro file JS per un totale di 60,7 KB.

Come per la Like Box, anche Google Maps può essere integrato con un iframe.

Ho controllato gli ultimi 10 post e nessuno ha integrato una mappa quindi se non è una funzionalità standard e viene utilizzata solo raramente, è più efficiente inserire manualmente le mappe con iframe nei post.

Cosa abbiamo fatto

  • abbiamo ottimizzato le immagini
  • impostiamo il caricamento progressivo delle immagini sul sito
  • abbiamo implementato la cache della pagina + la cache del database
  • abbiamo risolto il jQuery duplicato
  • abbiamo risolto il duplicato di Google Analytics JS
  • abbiamo risolto la casella Mi piace di Facebook.

Il risultato

risultati del ping dopo l'ottimizzazione
dopo l'ottimizzazione

La home page ora ha 62 componenti per un totale di 672,6 KB, rispetto a 113 elementi per un totale di 2,5 MB = un miglioramento del 73% .

La velocità media di carico è ora di 1,5 secondi – rispetto a 6,99 secondi = miglioramento del 78% .

Se hai bisogno di un sito Web WordPress più veloce, non esitare a contattarci e vedere cosa possiamo fare per aiutarti.

Commenti

Lascia un commento

Il tuo indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

Inglese