Manofmany.com è una rivista di stile australiana dedicata agli uomini.
Ogni giorno il team pubblica contenuti interessanti in termini di stile, gadget, tecnologia, ecc.
Dopo una chiacchierata con loro su Google+, abbiamo fornito loro questo semplice rapporto di ottimizzazione.
Tempo di caricamento
Strumenti diversi mostrano dati diversi:
- Barra degli strumenti SEO di Chrome – 7,43 sec
- Strumenti Pingdom – 12.62 dic
- GTMetrix – 9,86 secondi
- Webpagetest.org – 24,14 sec
Dimensioni della pagina
Strumenti diversi mostrano dati diversi:
- YSlow: 3096,5 byte
- Strumenti Pingdom: 4,0 MB
- GTMetrix: 3,88 MB
- Webpagetestst.org: 3,816 KB
Utilizzerò solo uno strumento in più, YSlow.
Componenti
Troppe richieste http: 51. 51 non è enorme ma può essere migliorato.
Javascript
Ci sono 15 file js, dimensione totale 627,1 K:
- https://apis.google.com/js/plusone.js – 22,9 k
- http://platform.twitter.com/widgets.js – 80,7 k
- http://www.google-analytics.com/ga.js – 37,3 k
- http://edge.quantserve.com/quant.js – 5,8 k
- http://manofmany.com/wp-content/themes/clearly/library/js/modernizr.full.min.js – 13,6 k
- http://manofmany.com/wp-content/themes/clearly/library/js/jquery.fitvids.js?… – 2,7 k
- http://manofmany.com/wp-content/themes/clearly/library/js/scripts.js?… – 7,1 k
- http://s3.buysellads.com/ac/bsa.js – 16,1 k
- http://s3.buysellads.com/r/s_74ca33a0013c12e56d70fc5c06b96646.js?… – 2,1 k
- http://pagead2.googlesyndication.com/pagead/show_ads.js – 13,9 k
- http://manofmany.com/wp-content/plugins/contact-form-7/includes/js/jquery.form.min.js?… – 15,1 k
- http://manofmany.com/wp-content/plugins/contact-form-7/includes/js/scripts.js?… – 6,9 k
- https://apis.google.com/…/cb=gapi.loaded_0 – 129,7 k
- http://manofmany.com/wp-includes/js/jquery/jquery.js?… – 93,6 k
- http://connect.facebook.net/en_GB/all.js#xfbml=1&appId=363084773773073 – 178,9 k
JQuery.js potrebbe essere caricato dalla Biblioteca di Google per una migliore velocità.
Il problema più grande riguarda i file JS dei social media; sicuramente non utilizzano il miglior plugin per la condivisione sui social media. Potrebbe essere fatto con un singolo JS di 38,5 k o anche senza script.
Ciò ridurrà 249,6 KB e lascerà il numero JS a 11. È un notevole miglioramento delle dimensioni della pagina.
CSS
Sono presenti 12 file CSS con una dimensione totale di 63,7 KB.
La dimensione non è molta ma il numero è piuttosto alto.
È possibile combinare 3 file in uno solo: il tema stili.css e i plugin Easy Columns e Contact Form.
Il resto sono caratteri caricati dalla Biblioteca di Google, quindi la domanda qui è: hai davvero bisogno di 9 caratteri?
Di solito, dovresti utilizzare 2 caratteri: uno per i titoli e uno per il corpo del testo.
PT Sans e Open Sans non sono così diversi, quindi potresti utilizzare solo uno dei 2.
Lora e PT Serif – come sopra, usane solo uno o usa semplicemente Georgia (è un bellissimo font websafe).
Nixie One – Non lo vedo in uso sul sito.
Per i caratteri utilizzati raramente non ha senso caricarli ogni volta, basta utilizzare i caratteri di sistema: Georgia, Arial, Courier.
Ciò migliorerà le richieste da 12 a solo 3-4, i miglioramenti delle dimensioni non sono così grandi ma si sommano.
Immagini
Questo è il problema più grande del sito web con il maggiore impatto sulla velocità: 18 immagini, dimensione totale di 2597,5 K.
Questo è enorme; devono ottimizzare le immagini prima di caricarle.
L'immagine più grande sul sito ha 420K e un semplice smush.it mostra che può essere migliorata del 27,6%, ovvero 104K proprio lì.
Se riusciamo a migliorare tutto del 25%, la perdita di peso supera i 600.000.
Soluzioni:
1. Ottimizzazione delle immagini
Utilizza Photoshop e Salva per il Web al 60% e seleziona la progressiva. Se i tuoi visitatori utilizzano Chrome, Firefox o IE9, i jpg progressivi vengono caricati supervelocemente. Per il resto sarà un po' più lento dei normali jpg.
Altrimenti basta risparmiare per il web al 60%-80% e controllare ottimizzato. Ciò salva i normali jpg.
Successivamente procedi con il caricamento delle immagini su WordPress.
Niente Photoshop?
Utilizza jpegmini.com per ottimizzare le immagini prima del caricamento o utilizza semplicemente un plug-in WP per farlo automaticamente al momento del caricamento.
2. Servire immagini
Offri contenuto statico da un dominio senza cookie e parallelizza i download tra nomi host.
Queste 2 cose possono essere ottenute caricando immagini da un sottodominio senza cookie, qualcosa come images.manofmany.com.
Ora il browser può scaricare più elementi contemporaneamente migliorando la velocità del sito web.
Caricamento pigro
Ciò significa che le immagini verranno caricate una per una e visibili agli utenti solo quando necessario.
Vengono caricati quando sono visibili solo nella finestra del browser.
Caricando solo le immagini sopra la piega, il guadagno di velocità è significativo.
Altre cose che puoi fare
– caching del browser
– combina js (se possibile)
– aggiungi intestazione con scadenza
– comprimi con gzip
– utilizzando etag
– Plugin di profilazione per vedere cosa influisce sul tempo di caricamento e sostituisci con plugin migliori
– Usa il codice in Functions.php invece dei plugin per cose semplici come caricamento di Google Fonts
– risolvi gli errori 404
– riduci al minimo i reindirizzamenti
– carica javascript in fondo alla pagina
– puoi utilizzare solo 5 post per pagina invece di 10
– potresti utilizzare immagini più piccole come le miniature ma quello significa interferire con il design
Conclusione
Nella maggior parte dei casi si tratta di cose semplici che possono avere un impatto enorme.
Per un'ottimizzazione più avanzata, dovremmo esaminare il tema e i plugin e verificare se ci sono problemi di prestazioni.
Lascia un commento