Vuoi velocizzare il tuo sito WordPress? Vuoi conoscere i trucchi di ottimizzazione di WordPress che possono aiutarti a ridurre il tempo di caricamento del tuo sito? In questo articolo, ti mostreremo come velocizzare WordPress condividendo come abbiamo ottimizzato il nostro sito List25 per migliorare le prestazioni.
Probabilmente hai sentito dire che la velocità di WordPress è importante per la SEO. Un sito più veloce ha un migliore coinvolgimento degli utenti, più visualizzazioni di pagina e migliori vendite. In uno studio di caso di strangeloop, hanno scoperto che un ritardo di un secondo può costarti il 7% delle vendite, l'11% in meno di visualizzazioni di pagina e una diminuzione del 16% della soddisfazione del cliente.
Quindi, come fai effettivamente a velocizzare WordPress?
Bene, invece di condividere solo un elenco di suggerimenti sulla velocità, abbiamo deciso di fare uno studio di caso completo per mostrarti i risultati del nostro sito List25 insieme a come abbiamo realizzato tutto.
Panoramica
List25 è un blog di intrattenimento avviato dal nostro fondatore Syed Balkhi. Il sito ha oltre 1,5 milioni di iscritti e il canale YouTube ha oltre un quarto di MILIARDO di visualizzazioni.
Il contenuto del sito è principalmente immagini e video che occupano terabyte di larghezza di banda, quindi l'ottimizzazione generale della velocità è stata fondamentale per noi per mantenere bassi i costi, ridurre l'abbandono delle pagine e migliorare il tempo trascorso sul sito.
Prima di iniziare l'ottimizzazione, la nostra homepage impiegava 2,21 secondi per caricarsi secondo Pingdom. Dopo aver finito, il nostro tempo di caricamento della pagina è sceso a 1,21 secondi (~45% più veloce).
Durante questa ottimizzazione, siamo stati in grado di velocizzare il nostro tempo di risposta del server, migliorare il nostro punteggio di prestazioni della velocità della pagina, ridurre il numero totale di richieste 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 web. Man mano che il nostro sito diventava più popolare, abbiamo semplicemente superato la nostra precedente società di hosting (HostGator).
I loro server semplicemente non potevano gestire un sito di queste dimensioni perché List25 riceve decine di milioni di visualizzazioni di pagina. HostGator è ottimo per i siti più piccoli, ma non per qualcosa di questa portata.
Abbiamo esaminato varie opzioni di hosting WordPress gestito, e alla fine abbiamo finito per utilizzare SiteGround per ospitare List25 perché offrivano il miglior valore complessivo per questo sito.
Puoi vedere immediatamente il miglioramento nel tempo di risposta del nostro server. Siamo passati da un tempo di risposta massimo di 442 ms a 172 ms. Si tratta di un miglioramento del 256%.
Siteground ha integrato potenziatori di prestazioni per piattaforme specifiche come WordPress, Joomla e Magento. In base alla piattaforma del tuo sito, ottimizzano appositamente i tuoi server, il che si traduce in prestazioni complessive migliori.
Abbiamo scritto un articolo su quando dovresti cambiare il tuo hosting web che parla dei 7 indicatori chiave.
Se stai cercando di cambiare hosting, allora prova assolutamente SiteGround. Gli utenti di WPBeginner ottengono uno sconto esclusivo del 60% sull'hosting + dominio gratuito.
Plugin di Cache
Quando si tratta di velocizzare WordPress, la cache è 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 hai la cache, risparmi tempo e risorse.
Il diagramma sottostante evidenzia il processo. In termini semplici, pensa alla cache come alla creazione di un collegamento sul desktop che ti aiuta ad accedere al file più velocemente.
Per il sito List25, stiamo utilizzando SiteGround SuperCacher, un plugin che hanno creato appositamente per i loro clienti. Inoltre, hanno aggiunto opzioni avanzate di cache dinamica utilizzando Varnish (parte del loro potenziatore di prestazioni).
Se non sei su Siteground, non preoccuparti. Puoi configurare la cache sul tuo sito WordPress utilizzando una delle molte soluzioni disponibili come W3 Total Cache o WP Super Cache.
Noi di WPBeginner utilizziamo W3 Total Cache che offre una serie di opzioni di caching delle pagine, caching del database e caching degli oggetti.
Man mano che più società di hosting si specializzeranno per WordPress, vedremo più soluzioni di caching personalizzate. Pagely e WPEngine offrono anche il proprio sistema di caching integrato.
CDN
Le reti di distribuzione dei contenuti (CDN) possono aiutarti ad aumentare la velocità del tuo sito web. Utilizziamo MaxCDN fin dall'inizio di List25, quindi questa parte non è cambiata.
Abbiamo scritto un articolo completo su cos'è una CDN e perché ne hai bisogno, insieme a un'infografica.
La CDN ci permette di servire tutti i CSS, Javascript e immagini da una Rete di Distribuzione dei Contenuti. Questo funziona determinando la posizione del visitatore del sito e servendo i contenuti da un server più vicino al visitatore.
Se non sei sul mercato per una soluzione CDN premium, allora puoi usare Cloudflare.
Combinare i file per ridurre le richieste HTTP
Man mano che aggiungi più 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 velocizzare il tempo di caricamento. Puoi vedere maggiori dettagli su questo in come i plugin di WordPress influenzano il tempo di caricamento.
Sebbene ora stiamo caricando alcune piccole funzionalità che potremmo non aver bisogno in una particolare sezione del sito, questo codice è memorizzato nella cache sul CDN e i risultati mostrano che meno richieste di file forniscono prestazioni migliori rispetto al caricamento di diversi file JS più piccoli.
Questa è una cosa che devi fare regolarmente perché i plugin che usi cambiano nel tempo.
Sprite di immagini
Abbiamo utilizzato uno sprite di immagini che ha combinato diverse icone social e del sito in un'unica immagine:
Ogni volta che avevamo bisogno di visualizzare una particolare icona, usavamo il CSS per:
- Caricare l'immagine come immagine di sfondo
- Definire la larghezza e l'altezza dell'elemento per cui abbiamo bisogno dell'icona
- Impostare 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, usiamo:
li.widget_social_icons ul li { float: left; width: 36px; height: 36px; margin: 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; }
Le proprietà CSS background-position, width e height ci aiutano a individuare la sezione specifica dell'immagine che vogliamo visualizzare:
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 memorizzata nella cache (tipicamente locale), oltre a dover richiedere una singola immagine anziché 6 icone social diverse.
Combinando JavaScript, CSS e immagini, abbiamo ridotto significativamente il numero di richieste.
Minificazione del codice
La minificazione del codice comporta la rimozione di spazi bianchi e interruzioni di riga per ridurre le dimensioni del file, rendendolo più veloce da caricare quando richiesto.
Per List25, utilizziamo SCSS, un foglio di stile basato su sintassi (Intro a Sass). Questo ci consente di strutturare i nostri file CSS in diverse aree di sviluppo in un layout di facile lettura:
Utilizziamo CodeKit per compilare i file SCSS in un unico file CSS. CodeKit rimuove anche spazi bianchi e interruzioni di riga per garantire che il file sia il più piccolo possibile:
Di conseguenza, siamo stati in grado di ridurre le dimensioni del nostro file CSS del 28%.
Ottimizzazione delle immagini
Abbiamo ottimizzato le nostre immagini in due aree: il nostro tema WordPress e i contenuti caricati.
Per il nostro tema WordPress, abbiamo utilizzato CodeKit per garantire che tutte le immagini fossero compresse senza perdita di dati. Ciò assicura che le dimensioni dei file siano le più piccole possibili, senza alcuna perdita di qualità.
Abbiamo anche formato tutti i nostri scrittori sull'importanza di salvare immagini ottimizzate per il web. Vedi la nostra guida su come salvare immagini ottimizzate per il web.
Condivisione Sociale senza Javascript
La condivisione sociale per List25 è molto importante, proprio come per qualsiasi altro sito web. Tuttavia, i plugin di condivisione sociale possono rallentare significativamente il tuo sito.
Sebbene l'integrazione degli script di queste quattro reti sociali non abbia influito sui tempi di caricamento della pagina nei nostri test, ha visibilmente rallentato il sito web quando visualizzato su un dispositivo mobile. I pulsanti di condivisione sociale impiegavano alcuni secondi per apparire, nonostante gli script venissero caricati in modo asincrono, con il risultato che il contenuto del post si spostava mentre i pulsanti apparivano.
Per affrontare questo problema, siamo passati a una soluzione (quasi) senza Javascript. Ciascuno dei pulsanti di condivisione delle reti sociali viene renderizzato dal nostro plugin WordPress personalizzato, e il Javascript del tema viene utilizzato solo per aprire la finestra del browser web quando l'utente fa clic su un pulsante.
Tuttavia, volevamo comunque visualizzare il numero totale di condivisioni che un post aveva su tutte le reti sociali. Per fare ciò, abbiamo prodotto un piccolo plugin WordPress personalizzato per recuperare e memorizzare nella cache i conteggi delle condivisioni sociali da ciascuna rete sociale nella tabella dei metadati del post. Questi conteggi vengono aggiornati ogni 24 ore, garantendo che le query dispendiose in termini di tempo non vengano eseguite costantemente.
Puoi utilizzare un'API come Sharre o analizzare il Floating Social Bar per la personalizzazione.
Utilizzando il RUM (Real User Monitoring) di Pingdom, questo nuovo plugin di condivisione ha ridotto il tempo di caricamento 'reale' della pagina da 6 secondi a poco più di 2 secondi. Ha anche garantito che riducessimo il numero di richieste effettuate per script di terze parti.
Risultato
Abbiamo migliorato significativamente la velocità del nostro sito. Il tempo di caricamento è passato da 2,2 secondi a 1,22 secondi.
Siamo stati in grado di ridurre significativamente il nostro tempo di risposta del server.
Questo ha contribuito a ridurre il tempo impiegato da Google bot per scaricare una pagina, il che ha migliorato il nostro tasso di scansione.
Il nostro tasso di rimbalzo complessivo è diminuito del 7% perché il sito si caricava più velocemente e, passando all'hosting, siamo stati in grado di ridurre gli errori del server.
Come puoi immaginare, con un tasso di rimbalzo inferiore, anche il tempo trascorso sul sito è aumentato di oltre 30 secondi.
Conclusione
Come puoi vedere, un sito web che si carica più velocemente può migliorare il coinvolgimento dei visitatori. Le tecniche che abbiamo discusso hanno coperto una serie di miglioramenti di base e intermedi che puoi implementare per ottimizzare il tuo sito WordPress.
Speriamo che questo articolo ti abbia aiutato ad accelerare il tuo sito WordPress. Potresti anche voler consultare il nostro articolo su 20 plugin WordPress indispensabili per il 2015.
Se ti è piaciuto questo articolo, iscriviti al nostro Canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.
Jiří Vaněk
Ho lottato molto con la velocità di WordPress quando il mio blog è cresciuto fino a circa 1000+ articoli. Google Search Console ha iniziato a mostrare numeri rossi e a indicare una velocità web insoddisfacente. Ho provato tutto il possibile, da varie minificazioni a regolazioni web. Diverse volte, ho persino rotto il sito mentre lo modificavo e ho dovuto ripristinare dai backup. Alla fine, la soluzione migliore, che uso ancora oggi, è stata il plugin WP Rocket. Non conosco niente di meglio per il caching (soprattutto grazie alla funzione di precaricamento). E dato che ho una CDN da CloudFlare, l'ho collegata direttamente tramite il plugin alla CDN. È una grande combinazione che ha incredibilmente velocizzato il sito web. Per me, è il miglior duo per la velocità di WordPress.
Peter
I love Performance Guides so much
Thanks for Sharing with us. In Germany there not so many Wordpress Blogs. But we have Great Guides too.
But don’t forget HTTP/2 this will change a lot. I mean combine fiels no longer good for optimize and priority are comes in the game
Gabe Livan
Per ridurre ulteriormente il numero di richieste HTTP, consiglio il plugin “WP Asset Clean Up” in quanto rimuove tutti gli stili e gli script non necessari che non sono richiesti sulla home page e su altri post/pagine.
Patrick Evans
Sto usando Rosehosting per ospitare i miei siti web WordPress e sono molto soddisfatto della velocità e dell'affidabilità del mio VPS.
Dai vostri tutorial, ho imparato come utilizzare gli sprite di immagini e come salvare immagini ottimizzate per il web e i miei siti web sono ora più veloci.
Grazie!
Miro
Sono passato da poco a SiteGround e sono davvero felice di loro. Ho anche seguito i passaggi di questo articolo e ho ottenuto risultati abbastanza buoni, tranne una cosa. Ho fallito nel combinare i file per ridurre le richieste HTTP. I plugin disponibili per farlo non funzionano bene, inoltre, o rompono il mio sito o lo rendono estremamente lento. Avete un articolo / un tutorial su come combinare manualmente i file per ridurre le richieste HTTP? Suggerireste qualcuno che fornisce un servizio simile (combinare file js e css per ridurre le richieste http). Grazie
Jane
Grazie per l'articolo ragazzi.
Avevamo decisamente bisogno di qualcosa per ottimizzare la nostra velocità a causa del gran numero di immagini ad alta risoluzione
Usiamo Wp Cache sul nostro sito di foto gratuito, ma abbiamo anche notato che, sebbene questo aiuti, dobbiamo ancora comprimere (ridimensionare) le immagini perché ci vuole molto tempo per caricare 20 immagini (sulla home page).
Quindi, in pratica, ridimensiona tutto e tieni le immagini ad alta risoluzione in background (per il download)
Buon fine settimana
Jane
Piet
Per le immagini usi uno sprite dici, ma le immagini che stai usando possono essere facilmente sostituite con un'icona di font come FontAwesome. A seconda di come lo installi (io userei Bower), non è nemmeno una richiesta http in uscita, quindi potresti risparmiarti il caricamento di quel file immagine (e tutto il calcolo per farlo funzionare correttamente, ovviamente).
Jay Castillo
Wow! I tuoi numeri per List25 con Siteground sono fantastici! Hai usato il piano GoGeek o c'è un piano più grande non elencato sul loro sito web?
Ancora una cosa, quale strumento hai usato per ottenere i tempi di risposta del server (il grafico appena sopra il tasso di scansione di Google bot)?
Staff editoriale
Stiamo usando il loro piano server dedicato con il pacchetto WordPress Booster. Abbiamo usato Pingdom per il grafico dei tempi di risposta del server.
Amministratore
Jay Castillo
Capito, grazie!
Alberto Serrano
Ciao, ho ospitato il mio sito su SiteGround ma non sapevo che avessero già un plugin di cache installato, quindi ho installato WP Super Cache. Dovrei disabilitarne uno e quale sarebbe meglio?
Grazie
Staff editoriale
Yup you probably don’t need SuperCache. I would confirm with SiteGround support just to make sure though
Amministratore
Lawrence
Grazie per questa guida molto utile!
Per favore, hai configurato Maxcdn insieme al SuperCacher di Siteground?
Mi sono recentemente trasferito su Siteground e mi piacerebbe sapere come configurare Maxcdn, dato che il plugin Supercacher è già attivo sul mio account
Supporto WPBeginner
Ciao Lawrence,
Quando metti in cache i contenuti sul tuo sito web, questi vengono comunque serviti dallo stesso server. MaxCDN, d'altra parte, serve i tuoi contenuti utilizzando la loro rete di distribuzione dei contenuti, il che migliora le prestazioni del tuo sito web. Per quanto riguarda le preoccupazioni sulla compatibilità, potresti voler contattare il tuo provider di hosting.
Ian Douglas
Per favore, considera di rilasciare il tuo plugin personalizzato per la condivisione sui social nel mondo (cioè, gratuito da scaricare per il pubblico). La condivisione sui social è sempre stata un peso per le pagine, quindi sarebbe fantastico avere un'opzione elegante e veloce.