Accelerare WordPress Come abbiamo ottimizzato l'elenco25 Prestazioni del 256%

Vuoi velocizzare il tuo sito WordPress? Vuoi conoscere i trucchi di ottimizzazione di WordPress che possono aiutarti a ridurre i tempi di caricamento del tuo sito? In questo articolo, ti mostreremo come accelerare WordPress condividendo il modo in cui abbiamo ottimizzato il nostro sito List25 per migliorare le prestazioni.

Probabilmente hai sentito la velocità di WordPress è importante per SEO. Un sito più veloce ha un migliore coinvolgimento degli utenti, più visualizzazioni di pagina e vendite migliori. In un caso di studio strangeloop, hanno scoperto che un ritardo di un secondo può costare il 7% delle vendite, l'11% in meno di visualizzazioni di pagina e il 16% di diminuzione della soddisfazione dei clienti.

Quindi, come accelerare effettivamente WordPress?

Bene, invece di condividere semplicemente un elenco di suggerimenti sulla velocità, abbiamo deciso di fare un caso studio completo per mostrarti i risultati del nostro sito List25 insieme a come abbiamo realizzato tutto questo.

Panoramica

List25 è un blog di intrattenimento avviato dal nostro fondatore Syed Balkhi. Il sito ha oltre 1,5 milioni di abbonati e il canale YouTube ha più di un quarto MILIARDI visualizzazioni.

I contenuti del sito sono principalmente immagini e video che assorbono un terabyte di larghezza di banda, quindi l'ottimizzazione della velocità complessiva è stata fondamentale per noi per contenere i costi, ridurre l'abbandono delle pagine e migliorare i tempi sul sito.

Prima di iniziare l'ottimizzazione, la nostra homepage impiegava 2,21 secondi per caricare secondo Pingdom. Al termine, il tempo di caricamento della pagina è sceso a 1,21 secondi (~ 45% più veloce).

Durante questa ottimizzazione, siamo stati in grado di accelerare i tempi di risposta del nostro server, migliorare il nostro punteggio di prestazioni della velocità della pagina, ridurre il numero di richieste totali e migliorare il tempo di caricamento complessivo.

Diamo un'occhiata alle tecniche di ottimizzazione che ci hanno aiutato ad accelerare il nostro sito WordPress.

Hosting WordPress

Avere un buon web host è fondamentale per la velocità del tuo sito. Poiché il nostro sito è diventato più popolare, abbiamo semplicemente superato la nostra precedente società di hosting (HostGator).

I loro server non sono in grado di gestire un sito di queste dimensioni perché List25 riceve decine di milioni di visualizzazioni di pagina. HostGator è ottimo per siti più piccoli, ma non per qualcosa di così grande.

Abbiamo esaminato varie opzioni di hosting gestite da WordPress e alla fine abbiamo utilizzato SiteGround per ospitare List25 perché hanno offerto il miglior valore complessivo per questo sito.

Puoi vedere immediatamente il miglioramento nel tempo di risposta del nostro server. Siamo passati da un massimo di 442 ms a 172 ms di tempo di risposta. Questo è un miglioramento del 256%.

Siteground ha costruito booster di prestazioni per piattaforme specifiche come WordPress, Joomla e Magento. Basati sulla piattaforma del tuo sito, ottimizzano in modo particolare i tuoi server, il che si traduce in una migliore prestazione complessiva.

Abbiamo scritto un articolo su quando dovresti cambiare il tuo web hosting che parla dei 7 indicatori chiave.

Se stai cercando di cambiare host, prova assolutamente SiteGround. Gli utenti WPBeginner ottengono uno sconto esclusivo del 60% su hosting + dominio gratuito.

Caching Plugin

Quando si tratta di accelerare WordPress, il caching è il secondo fattore più importante dopo il tuo web hosting.

Normalmente quando un visitatore arriva sul tuo sito WordPress, il tuo server passa la richiesta PHP al Database MySQL che trova la pagina richiesta, la genera al volo e la mostra al visitatore. Questo richiede molte risorse. Quando si esegue il caching, si risparmiano tempo e risorse.

Lo schema seguente evidenzia il processo. In parole povere, pensa al caching come alla creazione di un collegamento sul desktop che ti aiuti ad arrivare più rapidamente al file.

Per il sito List25, utilizziamo SiteGround SuperCacher, un plug-in appositamente creato per i loro clienti. Inoltre, hanno aggiunto opzioni avanzate di cache dinamica utilizzando Varnish (parte del loro potenziamento delle prestazioni).

Se non sei su Siteground, non preoccuparti. Puoi configurare la cache sul tuo sito WordPress usando una delle tante soluzioni disponibili come W3 Total Cache o WP Super Cache.

In WPBeginner utilizziamo W3 Total Cache che fornisce una serie di opzioni di memorizzazione nella cache delle pagine, memorizzazione nella cache del database e memorizzazione nella cache degli oggetti.

Poiché più società di hosting sono specializzate per WordPress, vedremo più soluzioni di caching personalizzate. Pagely e WPEngine offrono anche il proprio sistema di caching integrato.

CDN

Content Delivery Networks (CDN) può aiutarti ad aumentare la velocità del tuo sito web. Abbiamo utilizzato MaxCDN dall'inizio di List25, quindi questa parte non è cambiata.

Abbiamo scritto un articolo completo su cosa è un CDN e perché ne hai bisogno insieme a un'infografica.

CDN ci consente di servire tutti i CSS, Javascript e immagini da una rete di Content Delivery. Questo funziona determinando la posizione del visitatore del sito e offrendo il contenuto da un server più vicino al visitatore.

Se non sei sul mercato per una soluzione CDN premium, puoi utilizzare Cloudflare.

Combinazione di file per ridurre le richieste HTTP

Man mano che aggiungi altri plugin, spesso aggiungono i propri file JavaScript e CSS. Ogni file aggiuntivo è una nuova richiesta HTTP.

Abbiamo combinato questi file JavaScript e CSS in un unico file per ciascuno per ridurre le richieste e accelerare i tempi di caricamento. Puoi vedere maggiori dettagli su come i plug-in di WordPress influiscono sul tempo di caricamento.

Mentre ora stiamo caricando alcune piccole funzionalità che potrebbero non essere necessarie su una particolare sezione del sito, questo codice è memorizzato nella cache della CDN, e i risultati mostrano che un numero minore di richieste di file fornisce prestazioni migliori rispetto al caricamento di diversi file JS più piccoli.

Questo è qualcosa che devi fare regolarmente perché i plugin che usi cambiano gli straordinari.

Sprites di immagini

Abbiamo utilizzato uno sprite di immagini che combinava diverse icone sociali e di siti in un'unica immagine:

Ogni volta che dovevamo mostrare una particolare icona, usavamo i CSS per:

1. Carica l'immagine come immagine di sfondo
2. Definisci la larghezza e l'altezza dell'elemento per il quale abbiamo bisogno dell'icona
3. Imposta la posizione dello sfondo per la nostra immagine per caricare l'icona necessaria

Ad esempio, per caricare le icone dei social media della barra laterale, utilizziamo:

li.widget_social_icons ul li float: left; larghezza: 36px; altezza: 36px; margine: 0 10px 10px 0; padding: 0; background: url (... /images/sprite.png) no-repeat;  li.widget_social_icons ul li.twitter background-position: 0 -50px;  li.widget_social_icons ul li.facebook background-position: -36px -50px;  li.widget_social_icons ul li.pinterest background-position: -72px -50px;  li.widget_social_icons ul li.google background-position: -108px -50px;  li.widget_social_icons ul li.rss background-position: -144px -50px;  li.widget_social_icons ul li.youtube background-position: -180px -50px;  

Il background-position, larghezza e altezza Le proprietà CSS ci aiutano a indirizzare la sezione specifica dell'immagine che vogliamo produrre:

Di conseguenza, solo la prima richiesta per questo file immagine utilizza la larghezza di banda. Le richieste successive al CDN per l'immagine comporteranno il caricamento della versione cache (tipicamente locale) e la richiesta di una singola immagine rispetto a 6 icone sociali diverse.

Combinando JavaScript, CSS e immagini, abbiamo ridotto significativamente il numero di richieste.

Codice Minification

La minificazione del codice comporta la rimozione di spazi bianchi e interruzioni di riga per ridurre le dimensioni del file, velocizzandone il caricamento quando richiesto.

Per List25, utilizziamo SCSS, un foglio di stile basato sulla sintassi (Introduzione a Sass). Questo ci consente di strutturare i nostri file CSS in diverse aree di sviluppo in un layout di facile lettura:

Usiamo CodeKit per compilare i file SCSS in un singolo file CSS. CodeKit rimuove anche gli spazi bianchi e le interruzioni di riga per garantire che il file sia il più piccolo possibile:

Di conseguenza, siamo riusciti a ridurre le dimensioni del file CSS del 28%.

Ottimizzazione dell'immagine

Abbiamo ottimizzato le nostre immagini in due aree: il nostro tema WordPress e il contenuto caricato.

Per il nostro tema WordPress, abbiamo usato CodeKit per garantire che tutte le immagini fossero compresse senza perdita di dati. Ciò garantisce che le dimensioni del file siano le più ridotte possibile, senza perdita di qualità.

Abbiamo anche istruito tutti i nostri scrittori sull'importanza di salvare immagini ottimizzate per il web. Guarda la nostra guida su come salvare immagini ottimizzate per il web.

Social sharing senza Javascript

La condivisione sociale per List25 è davvero importante proprio come qualsiasi altro sito web. Tuttavia i plug-in di condivisione sociale possono rallentare in modo significativo il tuo sito.

Mentre l'integrazione di questi script di quattro social network non ha avuto alcun impatto sul tempo di caricamento della pagina nei nostri test, ha visibilmente rallentato il sito Web durante la visualizzazione su un dispositivo mobile. I pulsanti di condivisione social dovrebbero impiegare alcuni secondi per apparire, nonostante gli script vengano caricati in modo asincrono, con il conseguente spostamento del contenuto del post mentre i pulsanti vengono caricati in visualizzazione.

Per affrontare questo problema, ci siamo spostati su una (quasi) soluzione priva di Javascript. Ciascuno dei pulsanti di condivisione del social network è reso dal nostro plugin WordPress personalizzato e Javascript del tema viene utilizzato solo per aprire la finestra del browser Web quando l'utente fa clic su un pulsante.

Tuttavia, volevamo ancora visualizzare il numero totale di condivisioni di un post su tutti i social network. Per fare questo, abbiamo prodotto un piccolo plugin WordPress personalizzato per recuperare e memorizzare nella cache la tabella dei post dei conteggi delle condivisioni sociali di ciascun social network. Questi conteggi vengono aggiornati ogni 24 ore, assicurando che le query che richiedono molto tempo non siano costantemente in esecuzione.

Puoi utilizzare un'API come Sharre o sezionare la barra social mobile per la personalizzazione.

Utilizzando la RUM di Pingdom (Real User Monitoring), questo nuovo plug-in di condivisione ha ridotto il tempo di caricamento della pagina "true" da 6 secondi a poco più di 2 secondi. Inoltre, abbiamo ridotto il numero di richieste fatte per script di terze parti.

Risultato

Abbiamo notevolmente migliorato la nostra velocità del sito. Il tempo di caricamento è passato da 2,2 secondi a 1,22 secondi.

Siamo stati in grado di ridurre significativamente il tempo di risposta del nostro server.

Ciò ha contribuito a ridurre il tempo speso per il download di una pagina da Google Bot che ha aiutato la nostra velocità di scansione.

La frequenza di rimbalzo complessiva è scesa del 7% perché il caricamento del sito è stato più rapido e, cambiando host, siamo riusciti a ridurre gli errori del server.

Come puoi immaginare con la frequenza di rimbalzo più bassa, il tempo trascorso sul sito è aumentato di oltre 30 secondi.

Conclusione

Come puoi vedere, un sito web in caricamento più veloce può migliorare il coinvolgimento dei visitatori. Le tecniche di cui abbiamo discusso hanno coperto una serie di miglioramenti di base e intermedi che è possibile implementare per ottimizzare il tuo sito WordPress. 

Speriamo che questo articolo ti abbia aiutato a velocizzare il tuo sito WordPress. Potresti anche voler controllare il nostro articolo su 20 deve avere plugin per WordPress per il 2015.

Se questo articolo ti è piaciuto, ti preghiamo di iscriverti al nostro canale YouTube per le esercitazioni video di WordPress. Puoi anche trovarci su Twitter e Facebook.