Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Google
Code

Consigli per migliorare PageSpeed di Google

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Improving Google PageSpeed.
Optimizing Google PageSpeed to 100 in WordPress

Italian (Italiano) translation by Roberta C (you can also view the original English article)

Final product image
What You'll Be Creating

Che cosa è il Google PageSpeed?

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.

Se vuoi ulteriori informazioni di base sui vantaggi di aumentare la velocità del sito, leggi l'articolo di Moz Perché l'ottimizzazione della velocità del sito dovrebbe essere parte della tua strategia SEO,"... diversi casi studio hanno dimostrato che il caricamento veloce delle pagine è correlato ad un maggior numero di ingressi".

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

Optimizing PageSpeed - Initial Mobile

Nota: qui trovi l'articolo da leggere se sei curioso di conoscere il divertente screenshot mobile con Russel Wilson.

Optimizing PageSpeed - Initial Desktop

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.

MySiteMyWay Discontinued - User Forum Erupts

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.

Caching

La gestione della cache di WordPress è critica per le prestazioni, e ho scritto sui miei preferiti: W3TC e Varnish Cache, Ottimizzare Wordpress con Varnish e W3 Total Cache.

Google PageSpeed improved with W3 Total Cache

Content Delivery Network (CDN)

Un altro servizio fondamentale è il content delivery network. Precedentemente ho scritto per Envato Tuts+ Accelerate Your Content Delivery With KeyCDN e vi rimando a questo

Optimizing PageSpeed - KeyCDN Dashboard

Ottimizzazione delle immagini

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.

Ci sono anche plugin per l'ottimizzazione automatizzata delle immagini come WP-Smush. Ho recentemente iniziato a sperimentare con Optimus di KeyCDN. Inoltre, ecco il sommario di WPMU con i 10 migliori plugin per ottimizzare le immagini e velocizzare il tuo sito WordPress.

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:

Optimizing PageSpeed - Updated Scores

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

Optimizing PageSpeed - Minify HTML with W3TC

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.

Optimizing PageSpeed - Minify CSS

Questo risolve il requisito di minimizzazione del CSS di PageSpeed.

Optimizing PageSpeed - Post HTML and CSS Minify Scores

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

Optimizing PageSpeed - Render Blocking After Minifying CSS

I tre file rimanenti erano da plugin esterni al mio tema (che esploreremo più tardi):

Optimizing PageSpeed - CSS Files from Plugins

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.

Optimizing PageSpeed - Download optimized files

L'elenco di dieci dei miei file JS che dovevano essere fixati:

Optimizing PageSpeed - Downloaded Files

Per riferimento, ecco alcune risorse di minimizzazione di Google PageSpeed per HTML, CSS e JS. Ho anche fatto uso di Refresh SF, che fornisce un facile accesso web ai vari strumenti di compressione.

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.

Google PageSpeed - W3TC JS File Management

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:

Google Page Speed - CSS Render Blocking

Mentre W3TC aveva combinato molti di loro nel suo include.c46b63.css, gli altri 3 erano dei miei plugin.

Il blogger Justin Tadlock ha scritto una guida in cui spiega come chiedere ad Wordpress di non caricare i file CSS inclusi nei miei plugin. La soluzione è di deregistrarli e poi caricarli autonomamente in un file composto.

Eccola la tabella dei miei plugin che includono i loro file JS e CSS:

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.

Google PageSpeed - W3TC Combine CSS

Il grosso problema qua è che quando aggiorno i plugin potrebbe essere necessario dover aggiornare questo file CSS e i file JS di accompagnamento.

Ecco un post del blog con alcuni altri approcci che è possibile utilizzare in questi casi.

Utilizzando l'approccio di Tadlock, questo è quello che ora il PageSpeed indica come blocco:

Optimizing PageSpeed

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:

Optimizing PageSpeed - JavaScript Minify Results

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.

Google PageSpeed - Leverage Browser Caching

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:

Optimizing PageSpeed - Troublesome YouTube on my home page

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.

Ecco ciò che stava accadendo:

  • 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):
Optimizing PageSpeed - Safari Developer Console

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:

Optimizing PageSpeed - Minify JavaScript Resolved

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:

Optimizing PageSpeed

Ciò si è rivelato essere un grande ostacolo ed ha richiesto un lavoro complesso per risolvere questi problemi. La soluzione migliore è di ospitare localmente una copia degli script di Google per Analytics e DFP e utilizzare gli script cron per aggiornarli regolarmente nel tuo server. Alice comincia ad annoiarsi con me — spero che tu mi stia ancora seguendo.

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:

Optimizing PageSpeed - Local use of Google Scripts

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+):

Jeff Reifman Featured Image on Home Page

Ed ecco la versione fornita da PageSpeed nel suo download zippato:

Google Page Speed Recommended Jeff Reifman Featured Image on Home Page

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:

Optimizing PageSpeed - Final Scores Mobile

Qui ci sono le ottimizzazioni di immagine restanti:

Optimizing PageSpeed - Final Scores Mobile with Image issues

Ed ecco un riepilogo di tutte le regole superate:

Optimizing PageSpeed - Final Scores Passed Rules

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:

Optimizing PageSpeed

Desktop PageSpeed

Il Punteggio finale Desktop era 86, non è male:

Google PageSpeed Final Desktop Score

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:

Google PageSpeed Final Desktop Score Image Complaints

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.

Daring Fireball PageSpeed

The New York Times

Ovviamente un'organizzazione di notizie così importante, ha un terribile punteggio di PageSpeed:

PageSpeed for New York Times

The Seattle Times

Sorprendentemente, il nostro giornale locale con il suo terribile annuncio e modulo di sottoscrizione è molto peggio:

Google PageSpeed - The Seattle Times

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:

PageSpeed BH Photo

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:

PageSpeed Amazon

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.

Se hai domande, lascia un commento qui sotto. In alternativa, puoi contattarmi su Twitter @reifman. Consulta la mia pagina di istruttore su Envato Tuts+ per vedere altri tutorial che ho scritto, come la mia serie sulle startup (Building Your Startup With PHP).

Related Links

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.