16 modi per velocizzare il tuo sito Web WordPress oggi!

Velocizzare il tuo sito web è l'unico modo garantito per ottenere più traffico e aumentare le vendite.

Nel 2010, Google ha confermato che la velocità del sito è uno degli oltre 200 indicatori che influiscono sulle classifiche di ricerca. I loro dati mostrano che quando le pagine si caricano lentamente, le persone trascorrono meno tempo. Eppure la maggior parte di noi si concentra poco per rendere i nostri siti Web più veloci.

Forse mettere a punto i trigger di velocità interni del tuo sito Web WordPress è troppo scoraggiante.

Per far luce sulla dimezzamento del tempo di caricamento, abbiamo invitato Stavros Papadakis a illustrare il suo processo per velocizzare i siti Web dei clienti.

Se il tempo di caricamento è superiore a 3 secondi o la dimensione della pagina è superiore a 2 MB, può essere un grosso problema che ti costa denaro, sia in termini di vendite perse che costi del server.

Esistono molti strumenti online gratuiti come WebPageTest, GTmetrix, Google PageSpeed ​​Insights e Pingdom che possono aiutarti a identificare i problemi che causano tempi di caricamento lenti e un'esperienza utente negativa per il tuo sito.

Ecco come prendere in carico le prestazioni del tuo sito web.

1. Abilita la compressione

La compressione dei file CSS e Javascript aiuterà i browser a scaricarli più velocemente.

La compressione Gzip può ridurre facilmente le dimensioni dei file da 200+KB (non compresso) a meno di 40KB (compresso). Finché il tuo server ha la compressione abilitata, approfittane.

Puoi essere certo che i tuoi utenti sperimenteranno una drastica velocità del tuo sito sia per desktop che per dispositivi mobili abilitando la compressione sul tuo server.

Aggiungi il seguente frammento di codice al tuo file .htaccess per abilitare la compressione per i file statici.

AddOutputFilterByType DEFLATE application/x-httpd-php text/php text/html text/plain text/css text/xml application/x-javascript text/javascript application/javascript text/x-js

BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Varia User-Agent

2. Ottimizza le tue immagini

Le immagini sono il principale colpevole del rallentamento di un sito web. Ottimizza sempre le tue immagini (soprattutto quelle sopra i 50 KB) prima di caricarle sul tuo sito web.

Il modo ottimale per ottimizzarli è utilizzare Photoshop o qualsiasi altro software di manipolazione delle immagini. Salva le immagini per il Web con una qualità dell'immagine fino al 60%.

Dovresti anche usare le immagini progressive per i file JPG perché il rendering progressivo delle immagini offre un'esperienza utente più fluida.

Si prega di controllare le due immagini seguenti, sembrano uguali ma quella a sinistra non è ottimizzata ed è 80 KB e quella a destra è ottimizzata ed è solo 18 KB, 4 volte più piccola.

Immagine non ottimizzata

Immagine ottimizzata

3. Sposta i file Javascript nel piè di pagina

Sebbene le librerie Javascript come jQuery, Mootools e Prototype siano fantastiche perché estendono le funzionalità del tuo sito Web, possono anche bloccare il rendering delle tue pagine.

I browser non iniziano a caricare il contenuto finché non sono stati scaricati tutti i file Javascript nell'intestazione della pagina.

Un modo semplice per risolvere questo problema è spostare i tuoi file Javascript, quelli che non sono richiesti durante il rendering della pagina iniziale, dall'intestazione al piè di pagina della pagina.

Se usi Wordpress, puoi spostare le chiamate di script da header.php a footer.php sul tuo tema e usare true come quarto parametro ogni volta che usi la funzione wp_enqueue_script.

Sposta gli script JS nel piè di pagina della pagina

4. Assicurati di avere KeepAlive abilitato

Apache (il server più comunemente utilizzato per piani di hosting condiviso presso società di hosting a basso costo) ha una grande "funzione" chiamata KeepAlive che mantiene aperte le connessioni per più di una richiesta HTTP.

Assicurati che KeepAlive sia attivato presso la tua società di hosting.

Se hai accesso al tuo file httpd.conf, abilita KeepAlive assicurandoti di avere "KeepAlive On" al suo interno, altrimenti aggiungi semplicemente il seguente pezzo di codice al tuo file .htaccess.

 <ifModule mod_headers.c>
 Set di intestazione Connessione keep-alive
</ifModulo>

Abilita KeepAlive per il tuo sito

5. Unisci file CSS – Inline piccoli file CSS

I browser gestiscono solo così tante richieste HTTP contemporaneamente. Quando viene raggiunto questo limite, alcuni file restano in attesa mentre altri vengono scaricati.

Unendo tutti i tuoi file CSS in un solo file CSS, la pagina viene visualizzata molto più velocemente.

Se hai file CSS inferiori a 2 KB, dovresti incorporarli invece di fare una richiesta HTTP aggiuntiva.

Wordpress ha alcuni fantastici plugin come Autoptimize e Better WordPress Minify che possono aiutarti a unire o persino in linea i tuoi fogli di stile CSS.

Unisci i file CSS e incorporali

6. Abilita la memorizzazione nella cache

La memorizzazione nella cache migliora drasticamente il tempo di caricamento delle pagine che non cambiano così spesso.

Abilitando la memorizzazione nella cache del tuo sito, il tuo codice non continua a generare la stessa pagina più e più volte. In questo modo l'esperienza dell'utente è molto migliore e il tuo server può gestire più traffico.

W3 Total Cache, WP Super Cache e WP Fastest Cache sono solo una breve selezione di plug-in Wordpress gratuiti che forniscono diversi tipi di memorizzazione nella cache, ad esempio la memorizzazione nella cache delle pagine, la memorizzazione nella cache del database e la memorizzazione nella cache degli oggetti, tra gli altri.

Il plug-in W3 Total Cache fornisce la cache di pagine, DB e oggetti

7. Utilizzare una rete di distribuzione dei contenuti

Sia che utilizzi un CMS come Wordpress, Joomla, Magento, Drupal o un sito PHP o HTML personalizzato, ti consiglio vivamente di configurare un Content Delivery Network (CDN).

Una CDN è un sistema distribuito di server distribuiti in più data center su Internet.
Quando un cliente visita il tuo sito, i contenuti statici come immagini e file CSS vengono serviti dal server geograficamente più vicino in modo che vengano visualizzati molto più velocemente.

A proposito, anche il carico sul tuo server viene drasticamente ridotto grazie a una CDN.

CloudFlare è un provider CDN e DNS gratuito, tra gli altri. MaxCDN è anche un'opzione fantastica e conveniente per ottimizzare il tempo di caricamento del tuo sito. Sono entrambi il meglio che possono ottenere.

CloudFlare è una rete di distribuzione di contenuti gratuita

8. Ridurre al minimo il numero di richieste HTTP

Più richieste HTTP hai, più lento sarà il tempo di caricamento del tuo sito.

Combina i tuoi file CSS, unisci file Javascript e combina immagini in sprite di dati tra gli altri per effettuare il minor numero possibile di richieste HTTP.

Quando lavoro sul sito di un cliente, uno dei miei obiettivi principali è ridurre al minimo il numero di richieste HTTP caricate per pagina.

Unisci file CSS, usa sprite di dati o URI di dati per ridurre il numero di richieste HTTP

9. Scegli il tipo di file corretto per le tue immagini

Usa JPG come impostazione predefinita. È il tipo di file di caricamento più piccolo e veloce.

Usa PNG solo per immagini con testo (JPG rasterizza il testo rendendolo sfocato) o se hai bisogno di uno sfondo trasparente.

Riduci al minimo o addirittura elimina i file GIF pesanti perché possono rallentare drasticamente il tempo di caricamento del tuo sito.

Sebbene le due immagini seguenti abbiano lo stesso aspetto, c'è un'enorme differenza tra loro. Quello a sinistra viene salvato come file png e pesa 102KB e l'altro è un file JPG con una dimensione di 18KB, esatto, 6 volte più leggero!

Immagine salvata come PNG

Immagine salvata come JPG

10. Correggi i tuoi errori 404

Che tu ci creda o no, qualsiasi file mancante genera un errore HTTP 404 e rallenterà sicuramente il tempo di caricamento del tuo sito.

Verifica sempre la presenza di eventuali errori 404 durante il rendering delle tue pagine per ottenere il tempo di caricamento più rapido.

Se la tua "cascata" (il modo in cui il browser visualizza il tuo sito) ha questo aspetto (attenzione alle righe rosse), gli errori 404 stanno rovinando il tempo di caricamento del tuo sito.

Gli errori 404 possono rovinare il tempo di caricamento del tuo sito

11. Prenditi cura delle dimensioni della tua pagina

Sebbene sia allettante visualizzare molti contenuti in ogni pagina, dovresti cercare di mantenere le dimensioni della pagina al minimo.

Questo è ancora più cruciale per i cellulari. Dover caricare un sito da 2 MB tramite dispositivo mobile in una connessione 3G è una ricetta per il disastro. Tieni presente che agli utenti non piace aspettare più di 2-3 secondi per il rendering di una pagina.

Una nuova immagine aggiunge valore al sito? In caso contrario, non dovresti aggiungerlo al tuo sito. Semplice così.

Riduci le dimensioni della pagina

12. Ridimensiona le immagini

Non ridimensionare mai le immagini al volo in HTML. Crea una miniatura dell'immagine di cui hai bisogno con le dimensioni esatte che verrà utilizzata nelle tue pagine.

Ad esempio, se hai un'immagine di 1200px x 675px e desideri utilizzare una versione "ridimensionata" a 480px x 270px, crea una nuova versione ridimensionata dell'immagine originale e usa quella invece.

Questa immagine si collega a una versione "grande" dell'immagine utilizzando una miniatura in scala invece di modificare le dimensioni dell'immagine in HTML.

Miniatura (immagine in scala) Si collega a un'immagine di grandi dimensioni

13. Sfrutta la memorizzazione nella cache del browser

Google consiglia un tempo minimo di cache di una settimana e preferibilmente fino a un anno per le risorse che cambiano di rado.

Imposta una politica di memorizzazione nella cache per tutte le risposte del server ai file statici (immagini, CSS e Javascript) in modo che il browser possa determinare se può riutilizzare o meno un file caricato in precedenza.

Questo di solito viene fatto aggiungendo questo frammento di codice al file .htaccess per i piani di hosting condiviso

<ifmodule mod_expires.c>
ScadeAttivo il
ExpiresByType text/html "accesso più 7200 secondi"
ExpiresByType immagine/gif "accesso più 864000 secondi"
ExpiresByType image/jpg "accesso più 864000 secondi"
ExpiresByType image/png "accesso più 864000 secondi"
ExpiresByType testo/css "accesso più 864000 secondi"
ExpiresByType testo/javascript "accesso più 864000 secondi"
ExpiresByType applicazione/javascript "accesso più 864000 secondi"
</ifmodulo>

14. Ottimizza il tuo database

Se hai un sito basato su database (che include WordPress e tutti gli altri siti basati su CMS), assicurati di ottimizzare il tuo database.

Monitora il tuo codice per le query lente. Se utilizzi un VPS o un server dedicato, abilita la memorizzazione nella cache delle query e ottimizza la configurazione del server del database.

Sebbene l'ottimizzazione completa del database possa essere un processo davvero complicato e dispendioso in termini di tempo, phpMyAdmin ti offre alcune opzioni di ottimizzazione di base "ottimizzando le tue tabelle".

Ottimizza il tuo database tramite phpMyAdmin

15. Seleziona saggiamente la tua società di hosting

Scegli un piano di hosting che soddisfi le esigenze del tuo sito.

La maggior parte delle società di hosting applica limitazioni ai propri piani di hosting condiviso e ospita centinaia di siti per server per mantenere le tariffe al minimo.

Si ottiene quello che si paga. Se hai un sito e-commerce, un CMS pesante, molto traffico o picchi di traffico, evita i piani di hosting condiviso.

Consiglio vivamente la società di hosting Wordpress gestita da WPEngine per qualsiasi sito di eCommerce WordPress o qualsiasi sito WordPress con picchi di traffico.

16. Assumi un esperto

Il mio obiettivo è darti informazioni sufficienti per iniziare a ottimizzare la velocità del tuo sito web.

Ma come sai, è meglio assumere un esperto quando è importante farlo bene.

Un mio cliente mi ha contattato per ottimizzare il tempo di caricamento del suo sito web. Il caricamento delle pagine del sito Web richiedeva molto tempo e i visitatori si lamentavano perché l'esperienza utente era pessima.

Ho aggiornato WordPress all'ultima versione, migrato il sito Web a una società di hosting affidabile e applicato modifiche all'ottimizzazione della velocità per ottenere il miglior tempo di caricamento possibile.

Il tempo di caricamento è passato da 8,2 a 2,6 secondi. Il primo byte e il tempo di rendering iniziale sono stati ottimizzati rispettivamente fino a 0,147 e 0,384 secondi e il numero di richieste HTTP è stato ridotto da 96 a 78. Anche Google PageSpeed ​​Insights è stato ottimizzato all'88%.

La frequenza di rimbalzo è diminuita di circa il 10% in poche settimane. Il cliente e, soprattutto, gli utenti del sito web sono rimasti soddisfatti e la manutenzione del sito è diventata un'esperienza fantastica.

Per riassumere, ottimizzare il tempo di caricamento del tuo sito è una situazione vantaggiosa per te e per i tuoi potenziali clienti.

Immagina quanto saranno felici i tuoi utenti di vedere tempi di caricamento super veloci!

Se vuoi assumermi, sono felice di aiutarti. Guarda il mio portfolio e contattami su AwesomeWeb oggi!

Conclusione

Tutto migliora quando il tuo sito si carica più velocemente.

Google ti classifica più in alto. Gli utenti sono più felici. Le frequenze di rimbalzo diminuiscono. I tassi di conversione aumentano. E fai più vendite.

Smetti di perdere traffico e denaro. Inizia oggi stesso a ottimizzare il tempo di caricamento del tuo sito.

Oggi offro un pacchetto speciale da $ 497 per i lettori di IncomeDiary. Questa è la metà della mia tariffa normale. Se il tuo sito soddisfa le mie qualifiche minime, mi occuperò di tutto ciò che è elencato in questo post. Menziona IncomeDiary nel tuo messaggio e ti contatterò a breve. Inizia il 2015 con il sito web più veloce che puoi avere!

Assumimi qui o trova altri freelance per l'ottimizzazione della velocità su AwesomeWeb qui.