Aghiuta.com è un blog politico e di monitoraggio dei media scritto da Florin Popescu. Ecco l'ottimizzazione di WordPress che abbiamo fatto per questo blog.
Prima dell'ottimizzazione
La velocità di caricamento della prima pagina è stata di 4,3 secondi.
La homepage ha 86 richieste e 1,3 MB.
- 14 javascript – 505,6 k
- Foglio di stile di 20 siti – 41,1 k
- 23 file – 601 k
JS
Facebook Connect JS ha 174,4K e viene caricato in 0,69 secondi. La casella Mi piace di Facebook può essere inserita come widget di testo copiando il codice iframe dalla Casella mi piace degli sviluppatori di Facebook e questo elimina il file JS.
Il tema Gonzo include un file script.js da 101,3K. Include diversi script come:
- fitvids
- flexslider
- allentamento di jquery
- schede tabber
- allungamento all'indietro
- scatola luminosa per foto graziose
- elastislide
Backstretch viene utilizzato per l'immagine di sfondo grande, ma almeno quattro delle altre non vengono utilizzate: flexslider, Prettyphoto, elastislide e tabber tab.
Fitvids rende reattivi gli incorporamenti video, quindi probabilmente è necessario.
jQuery Easing ha qualche effetto sul clic (la diapositiva dal modulo di ricerca).
Inoltre, jQuery Easing (8,1 K) viene caricato ancora una volta dal plugin LayerSlider (26K) che non viene utilizzato da nessuna parte.
Ho rimosso gli script inutilizzati e la dimensione del file è diminuita da 101,3K a soli 29K.
Pulsanti di condivisione di file JS
Il plugin che inserisce i pulsanti di condivisione sul sito web ha un impatto piuttosto grande sul tempo di caricamento:
- Più 1 – 25,8K
- API di Google – 84,2K
- Twitter – 84,5K
- Barra sociale – 1,8K
Tutto questo può essere risolto utilizzando un altro plugin ( Jetpack ) che carica un unico file JS da 35K per tutti i pulsanti.
jQuery può essere caricato dalla Libreria di Google invece di caricarlo dal server.
Il JS Addfreestats restituisce un errore 404. Ti consigliamo di utilizzare Google Analytics.
CSS
Sono presenti troppi file CSS (20), alcuni caricati con @import che non è l'opzione migliore per le prestazioni.
Abbiamo combinato ciò che era possibile (a volte la combinazione di file js o css genera errori) e ora abbiamo solo 7 file CSS.
Immagini
Le immagini possono essere ottimizzate meglio per il web (stessa qualità ma meno KB) e penso che possiamo risparmiare almeno il 5% di ciascuna immagine.
Nella prima pagina, le miniature hanno una dimensione di 166x166px ma le immagini caricate sono più grandi, 300x300px.
Le immagini dovrebbero essere caricate a 166x166px.
WordPress crea troppe miniature:
- 960×677
- 150×105
- 300×211
- 550×387
- 700×426
- 300×300
- 50×50
- 290×166
- 620×310
- 620×350
- 186×186
- 620×220
Il sito necessita solo di:
- 166×166 – miniature della prima pagina
- 50×50 – miniature per la barra laterale
- 134×77 – miniature per post correlati
- 290×166 – miniatura per l'archivio delle categorie
Le restanti dimensioni sono inutili e occupano spazio sul server. Possiamo cancellarli ed eliminare il codice non necessario dal tema che dice a WordPress di creare quei pollici.
Abbiamo implementato Lazy Load in modo che vengano caricate solo le immagini nella parte superiore della pagina (above the fold), il che offre un notevole miglioramento nella velocità percepita.
Dopo l'ottimizzazione
Dopo aver rimosso il codice non necessario dai file JS, combinato i file CSS, corretto la configurazione e l'implementazione della cache della pagina e della cache del database, il sito Web ora effettua 48 richieste e dispone di 634,5K.
Velocità di caricamento della prima pagina: 1,47 secondi.
Abbiamo ottenuto un miglioramento delle prestazioni di circa il 60%.
Possiamo ottimizzare ulteriormente, ma ciò significherebbe rimuovere alcuni elementi che forniscono funzionalità specifiche desiderate dal proprietario, quindi ci siamo fermati qui.
Lascia un commento