Share
Cosa starai creandoGoogle PageSpeed è uno strumento gratuito che valuta le prestazioni e l'usabilità del tuo sito Web per piattaforme mobili e desktop. È molto importante perché Google lo utilizza per determinare gli elementi chiave del nostro ranking SEO, cioè quanto in alto appaiono nei risultati di ricerca.
Se desideri maggiori informazioni sui vantaggi di una maggiore velocità del sito, leggi l'ottimizzazione della velocità del sito di Moz perché la tua strategia SEO, che evidenzia "... diversi case study hanno mostrato che le pagine di caricamento più veloci sono fortemente correlate a entrate maggiori."
In questo tutorial, ti illustrerò alcuni approcci tecnici per ottimizzare il PageSpeed del tuo sito Web WordPress. Mentre i cambiamenti di base possono essere abbastanza semplici e facili, gli aggiornamenti più completi possono essere piuttosto impegnativi.
È interessante notare che i siti Web personalizzati possono essere più facili da ottimizzare rispetto ai siti WordPress, a causa dell'ampio utilizzo da parte del framework di temi e plug-in di terze parti. Si basa anche su un'architettura che è stata progettata prima della sua popolarità e si basa su un'architettura imperfetta per compatibilità con le versioni precedenti.
Prima di iniziare, ricorda, cerco di partecipare alle discussioni di seguito. Se hai una domanda o un suggerimento sull'argomento, per favore pubblica un commento qui sotto o contattami su Twitter @reifman. Sono interessato alla tua esperienza con WordPress e PageSpeed.
Per questo tutorial, mi concentrerò sul miglioramento del mio sito personale, JeffReifman.com.
Qualche tempo fa, il mio PageSpeed era Mobile 65 e Desktop 64 - non così eccezionale:
Nota: ecco l'articolo da leggere se sei curioso di sapere divertente screenshot mobile con Russell Wilson.
Prima di iniziare a fare ottimizzazioni, parliamo di alcuni dei fattori di base di prestazioni di WordPress.
Ci sono alcuni modi principali per iniziare a ottimizzare il tuo sito WordPress per le prestazioni e aumentare PageSpeed.
Il PageSpeed di vari temi è fortemente influenzato dal numero e dalla dimensione dei file JavaScript e CSS che usano, dal numero di immagini utilizzate e dalle loro dimensioni e dall'approccio della loro implementazione mobile, cioè generalmente reattivo oggigiorno.
Se siete nel mercato per un nuovo tema WordPress e volete valutare PageSpeed, potreste essere sorpresi dal fatto che i punteggi per temi ben noti spesso girano negli anni '60 e '70 ma anche fino agli anni '90. Ecco un paio di articoli che valutano temi e PageSpeed tramite ColorLib e WPMU. In ogni caso, mi aspettavo più alto.
Ho usato il tema My Site's Construct di My Site per diversi anni. È interessante notare che il sito di supporto dell'azienda è diventato silenzioso di recente e non ha lasciato alcuna spiegazione per gli utenti.
Tuttavia, poiché non ci saranno più aggiornamenti sul tema, è per me un po 'più facile apportare alcune modifiche radicali alle sue prestazioni per questo tutorial senza dover gestire futuri aggiornamenti del codice da parte dell'azienda. Ci arriverò tra poco.
L'utilizzo di server dedicati molto probabilmente andrà meglio di server virtuali condivisi sempre più comuni e più convenienti. In passato, ho scritto su come installare WordPress su provider condivisi come Digital Ocean. C'è anche il mezzo tra servizi come WP Engine, che offrono un'attenzione agli sviluppatori e ai server sia condivisi che dedicati.
Anche la qualità dell'ospite sarà importante. Molti fornitori di WordPress condivisi possono fornire prestazioni incoerenti.
Ad esempio, utilizzo il tema KnowHow sia su Publishing con WordPress ospitato su un server virtuale Digital Ocean che su Flee the Jungle ospitato su WP Engine. I siti sono abbastanza simili nel peso del contenuto, ad es. utilizzo di testo e immagini. PageSpeed per la pubblicazione con PageSpeed di WordPress è Mobile 73 e Desktop 88, mentre Flee the Jungle su WP Engine è leggermente più veloce (Mobile 78 e Desktop 91); L'hosting gestito di WP Engine è un po 'più veloce del mio self-hosting con un server condiviso.
Ho anche visto scarso rendimento con l'hosting AWS di fascia bassa di Amazon. Si ottiene quello che si paga.
Il caching di WordPress è fondamentale per le prestazioni e ho scritto regolarmente sui miei preferiti: W3TC e Varnish Cache, ad es. Ottimizzazione di WordPress con Varnish e W3 Total Cache.
Un altro servizio che è fondamentale è una rete di consegna dei contenuti. In precedenza ho scritto su Accelerate Your Content Delivery con KeyCDN per Envato Tuts + e poi ho deciso di passare a loro.
Ridurre regolarmente le dimensioni e le dimensioni del file delle immagini su WordPress richiede tempo ma è fondamentale.
Uso regolarmente Acorn come strumento leggero per ridimensionare rapidamente le immagini per il web. Ho riso quando qualcuno ha twittato di recente che avevano appena aperto Photoshop e sarebbe stato disponibile per le chiamate telefoniche per un po 'mentre caricava - Acorn è piccolo e veloce. Quel modello di abbonamento Adobe è così lento da caricare, mi dispiace, gli abbonati.
Esistono anche plugin per l'ottimizzazione dell'immagine automatica come WP-Smush. Recentemente ho iniziato a sperimentare con il nuovo Optimus di KeyCDN. Inoltre, ecco il riepilogo della WPMU dei 10 migliori plugin di ottimizzazione delle immagini per accelerare il tuo sito WordPress.
Sempre più spesso, accedo anche a immagini sul mio post esternamente da Flickr. Ad esempio, quando il mio post sulla crescita del quartiere di Seattle in Amazon è diventato virale su Slashdot, non ci sono stati problemi di prestazioni o costi di larghezza di banda per tutte le foto, perché Flickr lo ha gestito.
Puoi leggere la Guida all'ottimizzazione dell'immagine di Google Page Speed, ma ho sempre notato che l'aiuto di Google è eccessivamente orientato alla ricerca (che è bello avere come risorsa) ma non è molto utile per risolvere autonomamente i problemi. Possono esserci troppi PhD e troppi pochi utenti effettivi.
Mentre ho sempre avuto W3TC e Varnish, l'aggiunta di KeyCDN e Optimus ha aumentato il mio PageSpeed in Mobile 72 e Desktop 82, un buon miglioramento da 65 e 64:
È interessante notare che i reclami sulla memorizzazione delle immagini di Google sembrano come se potessero andare avanti all'infinito, indipendentemente da ciò che si migliora. Per questo tutorial, ho sperimentato l'ottimizzazione di alcuni dei trasgressori rimanenti identificati per vedere cosa sarebbe successo. Il risultato è stato interessante e ti dirò di più a breve.
Se hai eseguito tutti i principali elementi di base, migliorare il tuo PageSpeed con WordPress risulta richiedere uno sforzo significativo e può richiedere molto tempo.
Un sito statico di solito ha un file con CSS e JS include che possono essere facilmente ridimensionati e combinati. WordPress è molto più complesso.
Tanto è creato dinamicamente attraverso l'architettura di WordPress - ahem - meno che perfetta. Può essere necessario del tempo per trovare dove vengono creati i file, se sono nei temi o nei plugin e come affrontare questi problemi. Si scopre che quando si hanno sette plug-in, inclusi i file JavaScript, e si desidera ridurli al minimo e combinarli in una sola opzione, consentendo al tempo stesso aggiornamenti regolari dei plug-in, è piuttosto una sfida.
L'aggiornamento delle mie impostazioni minime W3TC in HTML ha rapidamente risolto il reclamo di Page Speed.
Per i CSS, ho dovuto aggiungere i file PageSpeed singolarmente per informarmi sulla gestione dei file CSS di W3TC. W3TC ha quindi iniziato a minificare il mio CSS e combinare i file nominati in un singolo file da includere.
Questo ha risolto il requisito di minificazione CSS di Page Speed.
Ha inoltre ridotto il numero di file CSS segnalati per il blocco del rendering da sette a quattro file correlati al tema (elencati per la prima volta in Ottimizza CSS Delivery):
I tre file rimanenti provenivano da directory di plug-in esterne al mio tema (che esamineremo in seguito):
Spero che questo ti dia un'idea del buco del coniglio che l'ottimizzazione di WordPress PageSpeed diventa rapidamente.
Mentre la minimizzazione e la fusione dei CSS è in genere abbastanza semplice, JavaScript tende a fallire molto quando si tenta di fare ciò, creando grandi bug che distruggono il sito..
È interessante notare che Page Speed offre ora download completi zippati delle sue versioni compresse dei tuoi file che non gli piacciono.
Ha elencato dieci dei miei file JS che voleva che aggiusti:
Per riferimento, qui ci sono più risorse di minimizzazione di Google Page Speed per HTML, CSS e JS. Ho anche fatto uso di Refresh SF, che fornisce un facile accesso web a vari strumenti di compressione.
Comprimere e combinare JavaScript può sicuramente creare bug, quindi ho dovuto fare le cose passo dopo passo. Utilizzando la gestione file JS di W3TC, ho ridotto a icona e combinato i sette file JS all'interno del tema Construct:
Questo non mi ha permesso di indirizzare i file JS dei miei plug-in o problemi che stavo vedendo con un misterioso file host.js memorizzato esternamente. Passiamo ai problemi di Blocco dei Render e poi torniamo a Minification JS dopo.
Se hai una grande varietà di file che devono essere caricati in stile (CSS) e attivare (JS) le funzionalità della tua pagina web, la maggior parte dei browser rallenterà dopo che sono state richieste quattro risorse in parallelo.
Ecco un esempio del reclamo per il blocco del rendering CSS in PageSpeed:
Mentre W3TC ne aveva combinati molti nel suo include.c46b63.css, i successivi tre erano dai miei plugin.
Il blogger Justin Tadlock ha offerto alcune linee guida per spiegare come chiedere a WordPress di non caricare i file CSS che i miei plugin avevano accodato per il caricamento. La risposta è cancellarli e quindi caricare un file combinato da solo.
Ecco il mio plug-in Sommario che accoda i suoi file JS e CSS:
Accentsconagua
/ ** * Registrare e caricare file CSS e javascript per frontend. * / function wp_enqueue_scripts () $ js_vars = array (); // registra il nostro CSS e gli script wp_register_style ('toc-screen', $ this-> path. '/screen.min.css', array (), TOC_VERSION); wp_register_script ('toc-front', $ this-> path. '/front.min.js', array ('jquery'), TOC_VERSION, true); // accodali! if (! $ this-> options ['exclude_css']) wp_enqueue_style ("toc-screen"); if ($ this-> options ['smooth_scroll']) $ js_vars ['smooth_scroll'] = true; wp_enqueue_script ('toc-front');Seguendo il suggerimento di Tadlock, ho annullato la registrazione del mio plug-in nelle funzioni del mio tema.php, prima il CSS-devi trovare i riferimenti usati dallo sviluppatore del plugin:
add_action ('wp_print_styles', 'my_deregister_styles', 100); function my_deregister_styles () wp_deregister_style ('toc-screen'); wp_deregister_style ('blogsynthesis_jss_css'); wp_deregister_style ('edd-styles'); Ho creato manualmente un file CSS combinato con questi tre fogli di stile del plugin. Quindi, ho chiesto a W3TC di ridimensionare e combinare quel file nel proprio mega-foglio di stile:
C'è un grosso problema qui quando aggiorno i miei plugin, potrei aver bisogno di aggiornare questo file combinato combinato con i file JS che lo accompagnano.
Ecco un post sul blog con alcuni altri approcci che puoi utilizzare per queste sfide.
Utilizzando l'approccio di Tadlock, ecco come appariva il blocco di rendering PageSpeed in seguito:
Ho seguito gli stessi passaggi per i file JS, solo un po 'più attentamente. A poco a poco, il mio reclamo JS di PageSpeed per il mio sito è diventato piuttosto secondario:
Tuttavia, come puoi vedere di seguito, si è anche lamentato dei problemi di memorizzazione nella cache del browser con i file JS che non sono riuscito a trovare i collegamenti nella mia base di codice come ad_status.js da Doubleclick.
Rimozione di un lettore di YouTube legacy Incorpora
Alla fine, ho capito che sia il problema di miniseria JS che questo problema di caching erano legati al mio utilizzo di un video player esterno di YouTube.
Mentre ero curioso di provare una piccola correzione suggerita per impedire il caricamento del video senza l'intervento dell'utente, ho deciso di rimuovere il video dalla mia home page slideshow.
È probabile che il modo in cui il mio tema di costruzione ha incorporato i file di YouTube fosse una soluzione legacy. Il supporto HTML5 di YouTube potrebbe funzionare molto meglio ora. Tuttavia, è un po 'strano come un servizio di Google influisce sul punteggio delle prestazioni di un altro servizio di Google.
La rimozione di una funzione sulla mia home page che incorporava un video di YouTube ha risolto alcuni problemi:
Dato che non voglio che ti perdi la possibilità di vedere la mia metà migliore prima che venissi corrotto da WordPress, includerò il video qui. Ero un bravo ragazzo.
Ecco cosa stava succedendo:
Una volta apportate le modifiche JS precedenti e rimosso il video, il problema di minino JavaScript è stato risolto per il mio master PageSpeed:
Anche l'errore di memorizzazione nella cache del browser con DoubleClick mostrato sotto è scomparso.
Ora, in realtà avevo solo bisogno di memorizzare nella cache gpt.js e ga.js, altri due servizi Google ospitati esternamente:
Questo si è rivelato un grosso ostacolo e ha richiesto molta complessità per risolvere completamente questi problemi. La soluzione migliore è quella di ospitare localmente una copia degli script di Google per Analytics e DFP e utilizzare gli script di cron per aggiornarli regolarmente sul tuo server. Alice cominciò ad annoiarsi con me, spero che tu stia ancora seguendo.
Ho esaminato altri temi che uso con il plug-in di Google Analytics (Construct ha le impostazioni per Analytics) e non hanno risolto questo problema.
Così, ho realizzato copie locali degli script per Google Analytics e Google DFP e, poco dopo, il mio caching del browser è stato risolto in Page Speed:
Ecco ulteriori informazioni da Google sulla cache del browser, di nuovo una risorsa tecnica molto profonda senza molte indicazioni per gli amministratori di WordPress.
Google potrebbe fornire raggruppamenti comuni dei suoi file JavaScript conosciuti e combinati per supportare meglio PageSpeed dei publisher. Sarebbe d'aiuto anche se non caricassero i loro file individualmente e oscuramente negli script.
Ritorniamo brevemente ai reclami relativi alle dimensioni delle immagini PageSpeed prima di concludere.
I suggerimenti per le immagini di Google Page Speed sono in realtà in grado di indebolire l'usabilità del tuo sito. Ecco un esempio, un'immagine in primo piano che ho ospitato sulla mia home page.
Perché i miei post vengano visualizzati su Facebook con un'immagine in miniatura, il social network richiede dimensioni minime di 200 pixel sul lato più corto. La mia versione è 281 x 200 (mostrato qui leggermente adattato per i requisiti di Tuts +):
E, ecco la versione fornita da PageSpeed nel suo download zippato:
Puoi vedere che la qualità è anche peggiore, ma soprattutto PageSpeed vuole che io riduca l'immagine in una dimensione che Facebook non accetterebbe di mostrare nei suoi post.
Alla fine, ho scelto di lasciare il mio sito con una manciata di reclami per l'ottimizzazione dell'immagine di PageSpeed, riducendo i miei punteggi.
Dopo tutto questo lavoro, dove è finito il mio sito?
I punteggi finali di Page Speed inclusi Mobile 70, mostrando alcuni dei reclami rimanenti di seguito:
Ecco le ottimizzazioni dell'immagine rimanenti:
Ed ecco un riassunto di tutte le regole passate:
Inoltre, ecco i punteggi finali UX. La maggior parte dei siti non ha grossi problemi con questi, quindi non li ho affrontati oggi:
Il punteggio finale del desktop era 86, non male:
JavaScript è pignolo. Non sono mai riuscito a ridimensionare e combinare con successo questi ultimi due file nel primo. Anche lasciarli non compressi non ha mai funzionato. Lavorare con temi e plugin è difficile. Avrebbe richiesto diversi giorni di lavoro dedicato per risolvere questo problema.
Ecco i reclami relativi alle dimensioni del file immagine:
In definitiva, l'ottimizzazione del mio PageSpeed ha richiesto molto tempo e impegno e ha lasciato il mio sito vulnerabile al futuro plugin e agli aggiornamenti degli script di Google. Gran parte di questo lavoro è abbastanza confuso, orientato ai dettagli e richiede molto tempo. È anche un po 'pazzo e inquietante. Grazie a Google.
Page Speed non è tutto. Anche i contenuti contano. Ecco alcuni siti noti e il loro PageSpeed. I risultati ti sorprenderanno.
Daring Fireball (DF) è uno dei blog con contenuti più rapidi. Promuove gli inserzionisti in un modo minimale. Le pagine sono leggere e veloci. Il CMS di Gruber è una versione personalizzata di Movable Type. I punteggi sono solo un po 'meglio del mio sito. DF genera anche una tonnellata di entrate con pubblicità minima.
Ovviamente una grande organizzazione di notizie, hanno punteggi di PageSpeed terribili:
Sorprendentemente, il nostro straccio locale con la sua pubblicità spaventosa e il suo modello di rimbalzo dell'abbonamento è molto peggio:
Un sito di e-commerce popolare, B & H Photo, ha un punteggio mobile terribile e un punteggio desktop appena sotto il mio:
Potresti aver sentito parlare di questa azienda nella mia recente ricerca di come creare siti WordPress diversi dalla geografia: vendono molte cose online. I miei punteggi di PageSpeed sono significativamente più alti dei loro:
In futuro, vedrò ulteriori miglioramenti per migliorare PageSpeed del mio sito:
Se non eseguo la migrazione dei temi a breve, dovrò implementare lo script di cron per sincronizzare gli script Google self-hosted per Analytics e DFP e capire come monitorare gli aggiornamenti dei plug-in per le modifiche a JS e CSS. Potrei dover ripristinare questi specifici guadagni di Page Speed, onestamente.
Se hai domande, per favore pubblicale qui sotto. Oppure puoi contattarmi su Twitter @reifman. Si prega di controllare la mia pagina Envato Tuts + istruttore per vedere altri tutorial che ho scritto, come ad esempio la mia serie di avvio (Building Your Startup With PHP).
