Google PageSpeed è uno strumento gratuito che valuta le prestazioni e l'usabilità del tuo sito Web su piattaforme desktop e mobile. È importantissimo perché Google lo utilizza nel determinare gli elementi chiave del nostro SEO ranking, cioè quanto in alto appariamo nei risultati delle ricerche.
In questo tutorial, ho intenzione di analizzare alcuni approcci tecnici per ottimizzare la PageSpeed del tuo sito WordPress. Mentre le modifiche di base possono essere abbastanza semplici, aggiornamenti più completi in realtà possono essere molto impegnativi.
E interessante notale che i siti Web personalizzati possono essere più facili da ottimizzare rispetto ai siti WordPress — che fanno un vasto uso di temi e plugin di terze parti. Dipende anche da un'architettura che è stata progettata prima della sua popolarità e che è imperfetta per garantire piena compatibilità.
Prima di iniziare, ricorda che parteciperò alle discussioni qui sotto. Se hai una domanda o vuoi suggerire un argomento, posta un commento qui sotto o contattami su Twitter @reifman. Mi interessa la vostra esperienza con WordPress e PageSpeed.
Il mio punteggio PageSpeed iniziale
Per questo tutorial, vado a concentrarsi su come migliorare il mio sito personale, JeffReifman.com.
Qualche tempo fa, il mio PageSpeed era di 65 per Mobile e di 64 per Desktop — non un granché:
Prima di iniziare a fare le ottimizzazioni, parliamo di alcuni dei fattori di prestazioni base di WordPress.
Prestazioni di base di WordPress
Ci sono alcuni modi per iniziare a ottimizzare il tuo sito WordPress per migliorare il PageSpeed.
Scelta del tema
La PageSpeed di alcuni temi è fortemente influenzata dal numero e dalle dimensioni dei file JavaScript e CSS che sono usati, il numero di immagini utilizzate e la loro dimensione e l'approccio della loro implementazione mobile, che al giorno d'oggi è in prevalenza responsivo.
Nel mercato dei temi WordPress se si desidera valutare il PageSpeed, si può rimanere sorpresi di come i punteggi dei temi noti spesso raggiungano i 60 o 70 secondi, anche fino a 90 secondi. Qui ci sono un paio di articoli di valutazione temi e PageSpeed via ColorLib e WPMU. In ogni caso, mi aspettavo un punteggio più in alto.
Io ho usato per diversi anni il tema My Site My Way's Construct. Stranamente,il sito di supporto della società non ha dato nessuna spiegazione agli utenti.
Tuttavia, siccome non ci saranno ulteriori aggiornamenti al tema, questo rende più facile fare alcuni cambiamenti radicali per questo tutorial senza avere a che fare con gli aggiornamenti futuri da parte della società. Inizierò presto a farlo.
Fornitore di Hosting
Usare server dedicati è molto più performante rispetto all'uso dei più comuni e convenienti server virtuali. In passato, ho scritto come installare WordPress presso providers condivisi come Digital Ocean. C'è anche una via di mezzo come servizi tipo WP Engine, che danno attenzione agli sviluppatori e offrono sia servizi condivisi che server dedicati.
La qualità dell'host è importante. Molti hosting Wordpress condivisi forniscono prestazioni inconsistenti.
Ad esempio, io uso il tema KnowHow su entrambi: Publishing with WordPress ospitato presso un server virtuale Digital Ocean e Flee the Jungle ospitato presso WP Engine. I siti sono abbastanza simili nel peso contenuto, uso dei testi e delle immagini. Il PageSpeed di quello pubblicato con Publishing with WordPress è Mobile 73 e Desktop 88, mentre quello pubblicato con Flee the Jungle di WP Engine è più veloce (Mobile 78 e Desktop 91); Wp Engine hosting è un po' più veloce del mio self-hosting con un server condiviso.
Ho visto anche scarse prestazioni con Amazon's low-end AWS hosting. Si ottiene quello per cui si paga.
Normalmente ridurre le dimensioni delle immagini attraverso Wordpress richiede molto tempo.
Io uso regolarmente Acorn come strumento leggero per ridimensionare le immagini per il web. Ho riso quando qualcuno ha recentemente twittato che aveva appena aperto Photoshop e sarebbe stato disponibile per telefonate mentre caricava — Acorn è piccolo e veloce. Il modello di Adobe è tanto lento a caricare — ci dispiace, abbonati.
Sempre più spesso, inoltre, inserisco immagini nei miei post direttamente da Flickr. Ad esempio, quando il mio post Seattle's Amazon-driven neighborhood growth è diventato virale su Slashdot, non ci sono stati problemi di prestazioni o di costi di larghezza di banda per le foto, perché Flickr ha gestito il tutto.
È possibile leggere la Guida all'ottimizzazione delle immagini di Google, ma ho sempre trovato l'aiuto di Google eccessivamente orientato alla ricerca (che è bello avere come risorsa) ma non molto utile per risolvere il problema da soli. Questo perché forse ci sono troppi dottori e pochi utenti effettivi.
Il mio PageSpeed Score aggiornato
Mentre ho sempre avuto W3TC e Varnish, l'aggiunta di KeyCDN e Optimus ha aumentato mio PageSpeed a 72 per Mobile e a 82 per Desktop, un buon miglioramento da 65 e 64:
È interessante notare che gli avvisi di Google sulla cache delle immagini possono continuare all'infinito, a prescindere da cosa si migliori. Per questo tutorial, ho sperimentato con l'ottimizzazione di alcune delle altre sezioni identificate per vedere cosa sarebbe successo. Il risultato è stato interessante, ve lo racconterò brevemente.
La sfida di ottimizzazione del PageSpeed
Se hai fatto tutte le operazioni principali indicate sopra, migliorare il tuo PageSpeed con WordPress inizia a richiedere uno sforzo significativo e molto tempo.
La sfida di WordPress
Un sito statico di solito include un file CSS e JS che possono essere facilmente combinati e ridotti. WordPress è molto più complesso.
Quindi tante più cose vengono create in modo dinamico attraverso di WordPress — ahem — peggiore è l'architettura. Può richiedere tempo per trovare dove vengono creati i file, se sono nei temi o nei plugin e come affrontare questi problemi. Si scopre che quando hai sette plugin che includono file JavaScript e si vogliono ridurre al minimo combinandoli tra loro consentendo allo stesso tempo aggiornamenti regolari ai plugin, è una sfida.
Usare la minimizzazione
Minimizzazione HTML
Aggiornando le impostazioni di minimizzazione del mio W3TC risolvo subito le richieste del PageSpeed.
Minimizzazione CSS
Per i CSS, ho aggiunto individualmente i file indicati dal Page Speed dal pannello di gestione dei file CSS di W3TC. W3TC quindi inizia a minimizzare i CSS e li combina in un unico file che li include tutti.
Questo risolve il requisito di minimizzazione del CSS di PageSpeed.
Questo inoltre riduce il numero dei file CSS segnalati come blocco da sette a quattro file di tema. (elencati prima nelle indicazioni di ottimizzazione del CSS):
I tre file rimanenti erano da plugin esterni al mio tema (che esploreremo più tardi):
Spero che questo ti dia un senso della difficoltà che l'ottimizzazione del PageSpeed di Wordpress raggiunge rapidamente.
Minimizzazione Javascript
Mentre minimizzare e unire i CSS è generalmente abbastanza semplice, Javascript tende a creare problemi creando diversi errori.
È interessante notare che, PageSpeed ora offre il download completo zippato di sue versioni compresse dei file che non gli piacciono.
L'elenco di dieci dei miei file JS che dovevano essere fixati:
La compressione e la combinazione di JavaScript può sicuramente creare bug, così ho dovuto fare le cose un passo per volta. Usando il file management JS di W3TC, ho minimizzato e combinato tra loro sette file JS del tema.
Questo non mi permette di affrontare i file JS dei miei plugin o i problemi che stavo vedendo in un misterioso file esterno chiamato base.js. Andiamo avanti con i problemi di blocco e poi torniamo alla minimizzazione dei JS.
Eliminare i problemi di blocco
Se abbiamo una grande varietà di file che devono essere caricati (CSS) e attivati (JS) per avere la funzionalità delle pagine web, la maggior parte dei browser rallenterà dopo quattro richieste in parallelo.
Ecco un esempio di CSS che blocca la renderizzazione segnalato dal PageSpeed:
Mentre W3TC aveva combinato molti di loro nel suo include.c46b63.css, gli altri 3 erano dei miei plugin.
Seguendo le istruzioni suggerite da Tadlock, ho deregistrato le inclusioni dei miei plugin nel function.php , prima i CSS -- devi trovare i riferimenti usati dallo sviluppatore del plugin.
Ho creato manualmente un file CSS che unisce tre fogli di stile dei plugin. Poi ho chiesto a W3TC di minimizzare e combinare quel file nel suo mega foglio di stile.
Il grosso problema qua è che quando aggiorno i plugin potrebbe essere necessario dover aggiornare questo file CSS e i file JS di accompagnamento.
Utilizzando l'approccio di Tadlock, questo è quello che ora il PageSpeed indica come blocco:
Ho seguito la stessa procedura per i file JS, con un po' più di attenzione. Gradualmente, le indicazioni riguardo il JS del mio PageSpeed diventano minori:
Tuttavia, come può vedere qui sotto, lamenta anche problemi JS sul browser caching e non sono riuscito a trovare collegamenti con il mio codebase come ad_status.js da Doubleclick.
Rimuovere un Player di YouTube incorporato
Alla fine, ho capito che il problema di minimizzazione di JS e questo problema di memorizzazione nella cache sono collegati all'uso di un player YouTube esterno.
Mentre ero curioso di provare un piccolo fix suggerito qui per impedire il caricamento dei video senza l'intervento dell'utente, ho deciso di rimuovere il video solo dal mio slideshow di pagina iniziale.
È probabile che il mio tema sia stato costruito in maniera tale che l'incorporazione dei file di YouTube sia una soluzione predefinita. Il supporto HTML5 di YouTube potrebbe funzionare molto meglio ora. Ancora, è divertente come un servizio di Google influisca sulle prestazioni segnalate da un altro servizio di Google.
Rimuovere la funzione di incorporazione dei video Youtube sulla mia home page ha risolto alcuni problemi:
Dal momento che non voglio che ti perda la mia metà migliore prima che sia danneggiata da WordPress, includo il video qui. Sono un bravo ragazzo.
Il file js s.ytimg.com ospitato esternamente che si cercava di comprimere è stato generato da questo embed video di YouTube.
E static.doubleclick.net/instream/ ad_status.js lo stesso. C'é voluto un po' di tempo per rintracciare la posizione di questo file. La console di sviluppo di Safari mi ha aiutato, con me vedeva sia js e ad_status.js all'interno del frame di YouTube (era così in profondità nel buco del coniglio del miglioramento del PageSpeed che che Alice si è presentata):
Una volta che sono state apportate le modifiche precedenti al JS e il video rimosso, i problemi di minimizzazione di JavaScript per il mio padrone PageSpeed sono risolti:
Anche l'errore di memorizzazione nella cache del browser con Doubleclick illustrato di seguito è scomparso.
Utilizzo della cache del Browser
Ora, devo solo memorizzare nella cache gpt.js e GA. js, altri due servizi di Google ospitati esternamente:
Ho guardato altri temi che io uso con il Plugin di Google Analytics (Construct ha impostazioni per Analytics ) e non lo hanno neanche affrontato.
Così, ho fatto una copia locale degli script di Google Analytics e Google DFP, e poco dopo, la mia caching del browser è stata risolta in PageSpeed:
Ecco ulteriori informazioni da Google sul Caching del Browser, ancora una volta una risorsa tecnica molto profonda senza molte indicazioni per gli amministratori di WordPress.
Google potrebbe fornire gruppi comuni dei suoi popolari file JavaScript minimizzati e combinati per supportare meglio il PageSpeed. Sarebbe d'aiuto anche se essi non caricassero i file singolarmente e oscuramente negli script.
Brevemente torniamo agli avvisi di dimensione immagine del PageSpeed che stavamo trattando prima.
Tornando alla ottimizzazione delle immagini
I suggerimenti di immagine di Google PageSpeed possono effettivamente indebolire l'usabilità del tuo sito. Ecco un esempio, una foto in evidenza ospitata nella mia home page.
Perché le foto dei miei post appaiano in Facebook, il social network richiede dimensioni minime di 200 pixel sul lato più corto. La mia versione è 281 x 200 (mostrato qui leggermente diverso per i requisiti di Tuts+):
Ed ecco la versione fornita da PageSpeed nel suo download zippato:
Si vede che la qualità è ancora peggio, ma ancora più importante PageSpeed vuole farmi ridurre l'immagine a una dimensione che Facebook non avrebbe accettato di mostrare nel suo post.
In definitiva, ho scelto di lasciare il mio sito con una manciata di avvisi di ottimizzazione di immagine di PageSpeed, abbassando i miei punteggi.
In chiusura
Dopo tutto questo lavoro, dove è arrivato il mio sito?
Il mio punteggio finale di PageSpeed
Mobile PageSpeed
I punteggi finali di PageSpeed includono Mobile 70, mostrano alcuni degli avvisi restanti qui sotto:
Qui ci sono le ottimizzazioni di immagine restanti:
Ed ecco un riepilogo di tutte le regole superate:
Inoltre, qui si trovano i punteggi finali di UX. La maggior parte dei siti non ha grossi problemi con questi, quindi oggi non li affronteremo:
Desktop PageSpeed
Il Punteggio finale Desktop era 86, non è male:
JavaScript è schizzinoso. Non sono mai stato in grado di minimizzare e combinare questi ultimi due file nel primo. Anche lasciandoli non compressi non funziona. Lavorare con temi e plugin è difficile. Avrebbe richiesto diversi giorni di lavoro dedicati a risolvere il problema.
Ecco le sue notifiche di dimensioni del file immagine:
In ultima analisi, l'ottimizzazione mia PageSpeed ha preso un sacco di tempo e fatica e lasciato il mio sito vulnerabile ai futuri plugin e agli aggiornamenti di script di Google. Un sacco di questo lavoro è abbastanza confuso, orientato ai dettagli e richiede tempo. Fa anche diventare pazzi ed è noioso. Grazie Google.
Il PageSpeed di altri grandi siti
PageSpeed non è tutto. Contano anche i contenuti. Ecco alcuni siti ben noti e i loro PageSpeed. I risultati ti sorprenderanno.
John Gruber Daring Fireball
Daring Fireball (DF) è uno più veloci Blog orientati ai contenuti. Promuove gli inserzionisti in modo minimo. Le pagine sono leggere e veloci. Il CMS di Gruber è una versione personalizzata di Movable Type. I punteggi sono solo un po' più alti di quelli del mio sito. DF genera anche una tonnellata di entrate con pubblicità minimale.
The New York Times
Ovviamente un'organizzazione di notizie così importante, ha un terribile punteggio di PageSpeed:
The Seattle Times
Sorprendentemente, il nostro giornale locale con il suo terribile annuncio e modulo di sottoscrizione è molto peggio:
B&H Photo
Un popolare sito di e-commerce, B&H Photo, ha un punteggio mobile terribile e un punteggio desktop appena al di sotto del mio:
Amazon
Forse avete letto su questa azienda il mio recente saggio How to Make WordPress Sites Different by Geography — che vendono un sacco di cose online. I miei punteggi di PageSpeed sono significativamente superiori ai loro:
Quali sono le prospettive?
In futuro cercherò nuovi sistemi per aumentare il PageSpeed del mio sito:
La migrazione a un nuovo tema WordPress. Principalmente con un design più pulito, più performante, reattivo e con un PageSpeeds veloce.
Aggiornare il mio server a PHP7. L'aggiornamento promette quasi il doppio del miglioramento delle prestazioni. Non è semplice aggiornare prima del rilascio del bundle di Ubuntu, ma non è troppo difficile.
Aggiornare il mio server a Varnish4. L'aggiornamento richiede qualche rielaborazione dei file di configurazione e non sono sicuro della sua compatibilità con W3 Total Cache, ma sono disposto a fare un tentativo.
Controllare il mio PageSpeed su tutte le pagine del sito, non solo sulla homepage.
Se non cambio tema in fretta, avrò bisogno di implementare lo script cron per sincronizzare i miei self-hosted script di Google per Analytics e DFP e capire come monitorare plugin e aggiornamenti per le modifiche JS e CSS. Forse dovrò ripristinare gli specifici miglioramenti di PageSpeed, onestamente.
Jeff Reifman is a experienced technology consultant, former Microsoft Group Program Manager, writer, activist and yogi. He's the founder of Meeting Planner and author of the Envato Tuts+ series, Building Your Startup. He enjoys travel, photography and snowboarding in his free time.
