Share
Cosa starai creandoBenvenuti alla seconda parte della nostra serie su Google PageSpeed. Nel primo episodio, ho ottimizzato il tema PageSpeed del mio sito, MySiteMyWay's Construct. Sono riuscito a raggiungere 70 Mobile e 86 Desktop.
Tuttavia, con la chiusura di MySite, ho scelto un nuovo tema e ho raggiunto 100 PageSpeed per dispositivi mobili e desktop. Mi ci sono volute circa 12 ore di sforzi extra per raggiungere questo obiettivo. Ora, le prestazioni del mio sito sono tra i siti WordPress più veloci che ho visto da molto tempo: dai un'occhiata. La navigazione è quasi istantanea.
In questo tutorial, ti illustrerò come ho realizzato questo e cosa ho imparato su WordPress e Google PageSpeed. Per gran parte del giorno in cui ci ho lavorato, ho pensato che avrei potuto superare negli anni '90. Sono stato sorpreso un po 'quando è balzato improvvisamente a 100 per Desktop e c'erano solo alcuni dettagli per massimizzare Mobile.
Per coloro che non lo sanno, Google 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 Moz's Perché l'ottimizzazione della velocità del sito dovrebbe essere parte della tua strategia SEO. Evidenzia, "... diversi case study hanno mostrato che le pagine di caricamento più veloci sono fortemente correlate a maggiori entrate".
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, Google.
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 dispone di 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, è una vera sfida nel mondo WordPress di temi e plug-in in continua evoluzione.
Ciò rende tristi molti sviluppatori:
Credito immagine: la mia foto dal Picasso Museo di Parigi. Potrebbe ora essere chiamato "Sviluppatore Sad Confrontando PageSpeed di Mobile 55 / Desktop 62"
Detto questo, permettimi di incoraggiarti mostrando come l'ho fatto (non hai nulla di utile da fare oggi, vero?). Tieni presente che le esigenze del tuo sito potrebbero differire leggermente dalle mie.
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.
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.
Proprio come un esempio delle aspettative del settore, il sito web del New York Times ha ottenuto un punteggio di 53/55 per me, molto al di sotto di 100.
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 al giorno d'oggi. Alcuni creator non sembrano guardare i PageSpeed mentre costruiscono.
Per questo tutorial, mi concentrerò sul miglioramento del mio sito personale, JeffReifman.com. Ho scelto Media per temi di matrice per alcuni motivi.
Il primo era la sua velocità di base. Punteggi medi Mobile 74 e Desktop 89 per iniziare dal loro server demo. Anche se questo era già leggermente migliore di quanto avevo massimizzato su Construct, era un tema più moderno e c'erano molti passaggi di ottimizzazione rimanenti che potevo provare. Speravo di portare PageSpeed negli anni '80 o '90.
Inoltre, data la crescita dei lettori mobili, ho voluto allontanarmi dal fare affidamento sulle barre laterali, soprattutto per il posizionamento pubblicitario (Spero di scrivere delle mie nuove entrate nelle nostre direzioni serie Google DFP in corso). Il tema Medio fa un buon lavoro di piegare la barra laterale sinistra in un menu reattivo e nascondere la barra laterale destra.
Ecco la versione iniziale di PageSpeed per la demo di Medium (l'hosting demo non è mai ottimamente ottimizzato). È stato davvero incoraggiante vedere che aveva molti problemi non indirizzati perché ha dimostrato che era meglio del mio Costrutto ottimizzato prima che venisse applicato uno sforzo extra e attività simili che sapevo di eseguire per massimizzare il suo punteggio:
Qui ci sono più dei problemi:
E ancora:
E le sfide dell'esperienza utente, che erano più localizzate:
Finalmente, ecco il suo punteggio Desktop dimostrativo:
Incoraggiato dal punteggio di fondazione, ho acquistato e installato il tema Medium sul mio server e ho iniziato a lavorare.
Tieni presente che cambiare i temi può essere piuttosto complicato. Per me, la sostituzione, l'eliminazione e l'aggiornamento degli shortcode incorporati dal tema Costruisci hanno richiesto più tempo e non ho ancora completato l'operazione, ad es. dropcaps, varianti pullquote, pulsanti, schede e menu di navigazione basati sulla pagina. La mia spinta verso i 100 mi spinse a proseguire a fatica, a prescindere. Come eseguire la ricerca di massa e sostituire in WordPress offre alcune buone soluzioni per trovare e sostituire shortcode.
Sebbene questo tutorial non ti guidi attraverso passaggi esatti per aumentare il PageSpeed del tuo sito a 100, ti guiderà attraverso molte delle possibili soluzioni e identificherà i blocchi stradali comuni. C'è un'altra grande risorsa generalizzata che condividerò alla fine.
Ho contattato ArrayThemes un po 'sulla performance demo del sub-100 del tema Medium. Hanno inviato una risposta eccellente:
Il test di ottimizzazione di PageSpeed dovrebbe essere preso con un pizzico di sale ... la nostra demo è in bilico per non fare il caching, ma non abbiamo realmente bisogno del caching sui nostri demo ... I suggerimenti di Page Speed non sono del tutto esatti o esemplificativi della performance di un tema. Dipenderà interamente dalla configurazione, dal server, dalla memorizzazione nella cache e da altre ottimizzazioni che decidi di fare.
Questo rende un punto di partenza perfetto per rivedere gli elementi fondamentali comuni per le prestazioni di WordPress. Tutte le aree delle prestazioni sottoindirizzano i punteggi di PageSpeed sottostanti, non completamente ma le basi.
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.
Si scopre che ci sono una serie di plugin progettati per aiutarti ad affrontare la sfida dell'efficiente caching. Qui ci sono due dei migliori che ho provato:
Credito immagine: Taverna WordPress
Entrambe sono state utili, ma nessuna delle barriere abbastanza rimosse relative a PageSpeed, come l'incorporamento di CSS all'interno del mio tag per rimuovere i problemi PageSpeed; in altre parole, questo plugin non ti porterà fino a 100 PageSpeed. Ho trovato che Minification Dependency era efficiente e utile, ma la sua mancanza di flessibilità mi ha fatto andare via.
In definitiva, vorrei tornare più volte a W3 Total Cache e trovare nuovi modi più potenti per premerlo per le prestazioni. Non è perfetto e ha sicuramente alcuni bug UX, ha funzionato bene in un numero sufficiente di modi per trovare il mio percorso con altri approcci a PageSpeed 100.
Alla fine, ho scelto solo un nuovo plug-in che ha reso più semplice rimuovere i problemi PageSpeed con Disqus: lo esaminerò ulteriormente sotto.
Un altro servizio che è fondamentale è una rete di consegna dei contenuti. In precedenza ho scritto su Accelerate Your Content Delivery con KeyCDN su Envato Tuts + e poi ho deciso di passare a loro come cliente.
Alla fine, ci sono una varietà di CDN tra cui scegliere, come CloudFlare e RackSpace, per citarne alcuni.
Recentemente, ho iniziato a sperimentare con il nuovo servizio di ottimizzazione dell'immagine Optimus di KeyCDN e il plugin WordPress. C'è una piccola possibilità che è gestito da robot costruiti con vecchi Apple Lisas e Mac:
Funziona bene, ma un'altra alternativa popolare è WP-Smush, un vecchio plugin con oltre 300.000 utenti.
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:
Questo può essere un duro elemento WordPress da eliminare a causa del tema e dell'architettura dei plugin. Torneremo ad esso.
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.
Andiamo passo dopo passo attraverso le aree problematiche identificate e il modo in cui le ho risolte. In verità, ho fatto una grande quantità di sperimentazioni con diversi strumenti e approcci. Ho regolarmente abbandonato un approccio e restituito a un altro. La mia soluzione si è rivelata un patchwork di soluzioni abbastanza ben gestito. Il percorso non era diretto Yoda.
Ad esempio, ecco come ridurre al minimo l'HTML in W3 Total Cache:
Allo stesso modo, è facile minimizzare JavaScript in W3 Total Cache. Nota di seguito che sto istruendo W3TC per incorporare il file compresso non nel file ma invece poco prima . Il ritardo di JavaScript può migliorare il tuo punteggio PageSpeed.
Poiché sia i temi che i plugin utilizzano JavaScript e CSS, ci vuole un po 'di lavoro per ridurli al minimo e combinarli in un singolo file (e non è nemmeno abbastanza per Page Speed, che discuterò più avanti).
Per impedire ai plugin di caricare i propri CSS e istruire W3TC per caricare versioni compresse e combinate, è necessario trovare l'handle del plugin per il file CSS (distinto dai nomi dei file) e aggiungere codice al tema per interrompere le istruzioni di caricamento del plugin. Quindi, inserire il percorso di ogni file CSS all'interno della finestra di dialogo W3TC in alto per essere caricato con gli altri.
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.php del mio tema, a partire dal 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'); Ho creato manualmente un file CSS combinato con questi tre fogli di stile del plugin. Quindi, ho chiesto a W3TC di minimizzare e combinare quel file nel proprio mega-foglio di stile come mostrato sopra.
W3TC può combinare tutti i miei file di temi e plug-in, ma a PageSpeed non piace ancora vedere anche un solo CSS (così tanto per buone pratiche di sviluppo HTML):
Alla fine ho caricato nove file CSS (solo sette mostrati di seguito). In primo luogo, devi trovare gli handle del plugin per i CSS e cancellarli nel tuo tema come descritto sopra. Quindi, devi indirizzare tutti a W3TC.
Mentre ci sono diversi modi per ottenere una versione minificata di tutti questi, in realtà ho appena afferrato il file compresso del W3TC. Ho rimosso tutti gli argomenti della query di memorizzazione nella cache, ad es. ?cbe3w2, con ricerca e sostituzione in TextEditor. Sono ancora un fedele utente di TextMate, ma in realtà ha avuto enormi ritardi e si blocca ogni volta che ho provato a navigare in un file CSS minificato. Quindi TextEditor mi ha aiutato a modificare questi file individualmente. Mi scuso con i puristi, non mi sono ancora trasferito su Sublime.
Mentre ha funzionato per me per incollare il mio minified CSS nella mia intestazione, in seguito ho dovuto cambiarlo per ottenere in modo dinamico il contenuto dei file CSS ed echo in posizione.
Una volta aggiunto un altro plug-in per la condivisione social, l'incolla non funzionava più e dovevo separare i file con il meccanismo sopra descritto. Ciò fornisce anche una maggiore flessibilità per il futuro. Google Page Speed non vede mai questo e la mia cache di Varnish nasconde qualsiasi rallentamento di includere due file.
In definitiva, ho configurato tutti i miei file CSS in W3TC, fatto copie dei file compressi e poi disattivato questa funzione di inclusione:
Una lacuna di W3TC è che mostra ripetutamente messaggi di errore fastidiosi anche se la usi deliberatamente in modo insolito.
Quando si spostano i file CSS dalle directory dei plug-in, assicurarsi di impostare i percorsi relativi relativi alle immagini e così via per il funzionamento dalla directory principale del sito. Ho avuto un sacco di situazioni in cui le immagini non si caricavano fino a quando non ho trovato dove risolvere queste cose. Condividerò un esempio nel Risoluzione dei problemi sezione sottostante.
In modo divertente, PageSpeed di Google si lamenta se carichi le sue librerie JavaScript esternamente. Ho ricevuto demeriti per script esterni relativi a Flickr, Disqus e Google Analytics:
Questo si è rivelato un grosso ostacolo e richiede molto tempo e complessità per risolvere completamente questi problemi.
Per prima cosa, sono tornato da poco da un viaggio in India e ho inserito post di blog individuali con foto incorporate su Flickr sulla home page. Il mio tema Medio scorre velocemente attraverso una serie di post, quindi PageSpeed si è lamentato di tutti loro.
Dopo aver osservato che PageSpeed si è lamentato sia delle dimensioni di immagini incorporate ospitate da Flickr (a vari conteggi di pixel) che di questi demeriti di JavaScript esterni, sono tornato alle immagini ottimizzate di self-hosting sul mio sito. Continuano a collegarsi a Flickr per il mio album in corso in India.
Questo è un buon esempio di come provare a utilizzare un potente servizio di terze parti con il semplice scopo di incorporare le foto uccide il tuo punteggio PageSpeed. Flickr non ha fatto un lavoro ottimale per aiutare gli utenti di WordPress a risolverlo. Ad esempio, avrebbero bisogno di:
Con i miei restanti file Google, la soluzione migliore era quella di ospitare localmente una copia degli script per Analytics e DFP e utilizzare gli script di cron per aggiornarli regolarmente su un server.
Innanzitutto, ho smesso di utilizzare il mio plug-in di Google Analytics e aggiunto manualmente il codice modificato all'intestazione del mio tema:
// ...
Avviso Ho cambiato i percorsi alle mie copie locali degli script. Quindi, ho creato copie locali degli script per Google Analytics e Google DFP, e poco dopo la memorizzazione nella cache del browser in PageSpeed, ad eccezione di Disqus.
Non sono sicuro se sia per sicurezza o supporto multipiattaforma o pura "intelligenza", ma Disqus e altri provider come Flickr sembrano oscurare i file reali che stanno caricando con altri file. Ciò rende l'ottimizzazione di PageSpeed molto più difficile e spesso irrisolvibile.
Certo, ho passato due o tre ore a provare approcci diversi per ottimizzare il plug-in di Disqus: nulla ha funzionato per me.
In definitiva, ho disinstallato il plug-in Disqus e installato il carico condizionale di Disqus:
Mentre è destinato a fare un sacco di cose, rende anche possibile ottimizzare PageSpeed con l'installazione.
All'improvviso, i demeriti del caching del browser Leverage di PageSpeed erano spariti. Complimenti a DCL!
PageSpeed si lamenta spesso di link troppo ravvicinati nei dispositivi mobili. Ho sperimentato alcuni approcci e alla fine ho smesso di visualizzare i tag sui dispositivi mobili.
Se trascorro più tempo, probabilmente posso migliorare il loro UX e passare con Page Speed.
Il plug-in ArrayToolkit, che mostra le seguenti icone nella barra laterale destra, ha smesso di funzionare per me. Mi ci è voluto un po 'per capire quali percorsi dovevano essere codificati con percorsi assoluti per farlo funzionare.
In definitiva, ho trovato e sostituito questi percorsi con percorsi relativi corretti alla directory del plugin originale:
// Dovevo inserire il percorso nel plugin css @ font-face font-family: 'array'; src: url ('./ fontello / array.eot'); src: url ('./ fontello / array.eot # iefix') formato ('embedded-opentype'), url ('./ fontello / array.woff') formato ('woff'), url ('./ fontello /array.ttf ') format (' truetype '), url (' ./ fontello / array.svg # array ') format (' svg '); font-weight: normal; stile font: normale; Ho ancora un problema che devo risolvere. Il mio nuovo plugin per le schede (Construct aveva schede incorporate) ha smesso di funzionare lungo il percorso. Ho solo bisogno di passare il tempo a debuggarlo, ma dovrebbe essere abbastanza facile da risolvere.
Ho sperimentato con YUI Compressor con W3TC per comprimere i miei file JavaScript e CSS. Invece di portare ad una maggiore velocità, tutto si è rotto.
Se sei interessato a capire cosa ho sbagliato, puoi installare Java e YUICompressor in questo modo:
# buona fortuna sudo apt-get install openjdk-6-jre cd / usr / local / lib sudo wget https://github.com/yui/yuicompressor/releases/download/v2.4.8/yuicompressor-2.4.8.jar
Si prega di postare nei commenti se si sa come farlo giocare bene con WordPress.
Dopo questo secondo round di lavoro sul nuovo tema, tutto ha funzionato meglio di quanto avessi sperato. Non ero mai sicuro di aver raggiunto il mio obiettivo ottimale.
Ho ottenuto 100 Page Speed per Mobile e Desktop. Ancor più sensibilmente, il mio sito era in esecuzione super veloce e più veloce di quanto abbia mai fatto un blog prima. Sono molto curioso di vedere come il traffico di ricerca in entrata e l'attività dei lettori reagiscono ai punteggi e alle prestazioni più veloci nei prossimi mesi.
Ecco i miei punteggi finali PageSpeed, primo Mobile:
E ora Desktop:
Il desktop ha raggiunto il 100 prima e ho dovuto tornare indietro e completare alcune regolazioni (indirizzando i target dei tocchi) per ottenere Mobile lì.
E ancora, la velocità del sito rende merita una visita veloce. Se conosci altri siti Web commerciali in esecuzione su 100 PageSpeed, condividili nei commenti. Mi piacerebbe vederli.
Proprio come un esempio di modifiche SEO, il mio saggio popolare sugli appuntamenti è salito al terzo posto sui risultati mobili sotto "Incontri di Seattle"(non ancora sul desktop.) Questo mi dice che forse le storie sui principali siti che la battono hanno un povero Page Speed, perché non è facile.
Per ottimizzare il PageSpeed del mio sito, ho dovuto apportare alcune modifiche al mio tema, che ora creeranno dipendenze dalle modifiche agli script esterni e agli aggiornamenti del tema e dei plug-in. Ora che ho finito con il mio obiettivo a breve termine, ho del lavoro da fare per organizzare i miei sistemi per gestirlo più facilmente.
Presto avrò bisogno di implementare lo script di cron per sincronizzare i miei script Google self-hosted per Analytics e DFP.
Ecco una società che fornisce un approccio più semplice all'utilizzo di Analytics senza penalizzare PageSpeed, fissando l'ultimo punto su Google PageSpeed Insights. Preferirei non affidarmi ad altre terze parti.
Dovrò anche monitorare meglio gli aggiornamenti dei temi di Medium e integrare le modifiche. Anche la creazione di un tema figlio dalle mie modifiche potrebbe facilitare questo processo. Principalmente cercherò modifiche che sovrascrivono i miei file JavaScript e CSS aggiornati o aggiuntivi (o aggiuntivi).
Allo stesso modo, quando si aggiornano i plugin, dovrò cercare gli stessi tipi di aggiornamenti. Potrebbe aiutarmi a organizzare meglio il mio uso di GitHub con i plugin WordPress. Lo uso già per il mio tema.
Potrei voler passare un po 'di tempo a scrivere script per tenere traccia di quali file JavaScript e CSS sono in uso con il tema e i plugin aggiornati, scaricarli sul mio server e ridurre a icona e comprimere i file appropriati da collegare o includere.
Infine, una delle mie sorprese è che SSL non è necessario per raggiungere un Page Speed di 100. Questo ha un senso, ma sottolinea che una varietà di componenti diversi possono influenzare il ranking di ricerca di Google. Scriverò presto sull'implementazione di SSL gratuito di Let's Encrypt con WordPress.
Se ti è piaciuto questo, ma vuoi leggere un tutorial più generale che non si addentra in dettagli specifici che potrebbero o meno essere applicabili a te, il Google Page Speed Plus 100/100 di WordCDN con WordPress è un eccellente complemento. Ho anche scritto un pezzo sponsorizzato sul loro CDN su Envato Tuts + (Accelerate Your Content Delivery With KeyCDN) e ho continuato a continuare con loro come cliente.
Nel frattempo, se stai cercando altre utilità che ti aiutino a costruire il tuo set crescente di strumenti per WordPress o che il codice studi e diventi più esperto in WordPress, non dimenticare di vedere cosa abbiamo a disposizione in Envato Mercato.In futuro, vedrò ulteriori miglioramenti per migliorare le prestazioni generali del mio sito. Questi includono:
Se hai domande, per favore pubblicale qui sotto. Oppure puoi contattarmi su Twitter @reifman. Si prega di controllare la mia pagina di istruttori + istruttore Envato per vedere altri tutorial che ho scritto, come la clonazione di WordPress in Linux (in 90 secondi).
