Cerca

La Guida Passo-Passo Su Come Velocizzare Il Tuo Sito WordPress Per Persone Non Tecnologiche!

Ecco il mio problema n. 1: sono impaziente. Voglio tutto ciò di cui ho deciso di aver bisogno ieri. Non voglio aspettare, non voglio parlare con nessuno, lo voglio solo ora. Di recente ho acquistato un nuovissimo iMac e l’attesa di consegna di 2 settimane è stata lancinante.

Ecco il kicker, non sono solo.

Hai bisogno d'aiuto?!  Contattaci qui

 

Sembra che le persone come noi e possibilmente il resto dell’umanità abbiano una qualche forma di ADHD e, a meno che non otteniamo ciò che vogliamo in questo momento, passiamo alla cosa successiva. Ecco perché i nostri siti web DEVONO essere veloci e belli . Perché altrimenti, i tuoi visitatori salteranno in una nuova scheda e andranno al tuo concorrente.

Alcuni Motivi Per Cui Vorresti Lavorare Sulla Velocità Del Tuo Sito:

  • Una maggiore velocità della pagina è fortemente correlata all’abbandono del carrello e alla frequenza di rimbalzo
  • La velocità della pagina è un fattore di ranking di Google. Più veloce = più traffico
  • I siti più veloci offrono un’esperienza utente migliore.

Il problema è che la maggior parte delle volte quando le persone parlano della velocità del sito, mi perdo. Parlano dell’ottimizzazione di Apache o dei file di configurazione del server e ad essere onesti, come non ingegnere, ho sempre pensato che questo fosse al di là di me e non avrei mai potuto ottenere un sito Web veloce a meno che non avessi perso migliaia di dollari per qualcun altro per farlo per me .

Ciò è stato fastidioso perché la velocità del sito è importante sia per il traffico dei motori di ricerca sia per l’ottimizzazione del tasso di conversione. Ma ho scavato e ho deciso che questo doveva essere capito. Ad essere onesti, ho anche rotto alcune volte l’ambizione di salute nel processo facendo casino con il DNS ma alla fine ce l’ho fatta.

Test di velocità del sito Web

La nostra home page ora carica meno di 1 secondo anziché 4. Questo è un enorme miglioramento e la nostra analisi testimonia come vedrai qui sotto.

Questa guida non è la guida perfetta per l’ottimizzazione della velocità della pagina. Questa è una guida all’ottimizzazione della velocità della pagina che puoi effettivamente fare senza spendere molti soldi e che ti dà risultati significativi. 80/20 di ottimizzazione della velocità della pagina per coloro che hanno paura quando viene loro chiesto di modificare una funzione javascript o php.

Prima di iniziare a commentare, vorrei anche dire che questo sito non ha ancora ricevuto questo trattamento e potrebbe caricarsi un po ‘più velocemente. È sulla mia lista di cose da fare, conserva l’odio nei commenti :).

Cosa Imparerai

  • Perché la velocità della pagina è importante se sei seriamente intenzionato a fare soldi online
  • I risultati della vita reale delle tattiche discusse in questo post
  • Il dettagliato passo dopo passo segue le istruzioni su come l’ho fatto.
  • Gli extra che puoi fare per siti ancora più veloci

Il Benchmark E I Risultati Di Questa Guida

In che modo questa guida è diversa dalla maggior parte delle guide che troverai online? Bene, il fatto è che ho effettivamente eseguito tutte le cose di cui parlerò sul nostro sito web Health Ambition .

Per testare la velocità del sito Web ho utilizzato 2 strumenti gratuiti che è possibile utilizzare per verificare la velocità del sito Web insieme ad alcuni consigli di miglioramento: informazioni sulla velocità della pagina di Google e Pingdom .

Prima

Page Speed ​​Insights

Quindi siamo stati molto negligenti della velocità del nostro sito, tuttavia i risultati precedenti non sono poi così male. Ciò è in parte dovuto a Performag , il tema che è stato sviluppato appositamente per noi dai ragazzi su temi ben sviluppati. Prima di passare al tema, il sito si stava esibendo a metà degli anni ’50, ma allora non ho fatto uno screenshot.

Dopo

Page Speed ​​Insights

Dopo aver lavorato sul sito per 5 ore, ecco il risultato che sono riuscito a raggiungere. Non è perfetto e non ho fatto irruzione negli anni ’90 per lo strumento di Google, ma secondo Pingdom, il sito si carica in meno di 1 secondo ed è più veloce del 90% di tutti i siti Web testati.

Inoltre, questa è la nostra progressione dell’analisi da quando abbiamo apportato le modifiche. Come puoi vedere, tutto è verde e l’8,35% di crescita della visualizzazione della pagina per noi significa 20.000 extra in poco meno di un mese. Inoltre, la frequenza di rimbalzo è leggermente migliore, così come la frequenza di uscita e il tempo sulla pagina.

Pagine Google Analytics Health Ambition

Ora lascia che ti mostri come esattamente l’ho raggiunto e come puoi fare lo stesso.

Il Piano Passo Dopo Passo

Passaggio 1: Ho Sostituito Un Tema Ottimizzato Per La Velocità

Difficoltà
40%
Lavoro richiesto
60%
Efficacia
80%

Cosa fa questo tweak: ti dà un tema wordpress che è già ottimizzato per la velocità della pagina

Perché farlo: il tuo tema è essenzialmente uno strato di WordPress che rende gran parte dei tuoi contenuti. È anche il codice inviato al browser dei tuoi visitatori. Se è scarsamente ottimizzato, le tue pagine saranno più pesanti e più lente.

Costo: $ 49 una tantum.

Alternativa: scegli qualsiasi tema disponibile e paga un esperto di velocità della pagina per ottimizzare il tuo tema (diverse centinaia di dollari)

Niente mi eccita più di quanto non vada su Foresta tematica e sfoglia il tema per ottenere immediatamente decine di idee per siti Web. Tuttavia c’è un problema. La maggior parte dei temi sulla maggior parte dei mercati sono realizzati per apparire belli e avere effetti fantasiosi.

Perché?

Perché li fa vendere di più: le persone raramente pensano alle prestazioni quando scelgono un tema perché design e aspetto sono molto più vivaci e attraenti per il loro lato emotivo in quel momento.

Questo è l’errore che abbiamo fatto quando abbiamo iniziato Health Ambition anche se il tema non era così elaborato, non è stato creato per la velocità. Il sito stava caricando un sacco di libreria javascript duplicata e inutilizzata, CSS e HTML non erano compressi o ottimizzati e di conseguenza, il sito era sloooooow.

Nel momento in cui ho deciso che il sito necessitava di una riprogettazione, i ragazzi di Thrive Themes mi hanno contattato e si sono offerti di costruire il tema WordPress per il miglior sito di autorità sul mercato ( Performag ). E uno dei criteri principali per questo era la velocità della pagina.

Ciò è stato ottenuto utilizzando i seguenti metodi:

  • Tutto l’HTML / CSS / javascript è compresso e minimizzato per impostazione predefinita
  • Nessun effetto fantasia superfluo, solo semplicità e velocità
  • Ridurre il numero di plug-in necessari inserendo sistemi pubblicitari, sistemi di condivisione ecc.
  • Ridurre il numero di elementi caricati sul cellulare
performag

Ho perso lo screenshot ma la velocità della nostra pagina era inizialmente di 55 e sono saliti a 67 dopo aver cambiato tema.

Una cosa positiva dei ragazzi di Thrive Themes è che comprimono automaticamente le tue nuove immagini tramite  kraken.io , il miglior servizio di ottimizzazione delle immagini, ma ne parlerò più avanti.

Come Lo Fai Per Il Tuo Sito?

  1. Vai su temi Thrive e scegli un tema che corrisponda a come desideri che il tuo sito assomigli.
  2. Una volta acquistato, vai nella tua dashboard di WordPress e fai clic su Aspetto> Temi> Aggiungi nuovo.
  3. Fai clic su Carica tema e carica il file del tema scaricato da Thrive Themes.
  4. Attiva il tema e inserisci il tuo codice di licenza nelle tre opzioni di opzione.
  5. Vai in Aspetto> Personalizza e modifica il design del tema in base al tuo marchio.
  6. Vai sulle pagine principali dei tuoi siti e assicurati che nulla abbia rotto con il nuovo tema e correggili manualmente.

Passaggio 2: Ho Aggiornato Il Nostro Hosting

Difficoltà
40%
Lavoro richiesto
20%
Efficacia
60%

Che cosa fa questo tweak: Si raccomanda un hosting provider che è stato meglio e più velocemente per noi rispetto a molti altri sul mercato.

Perché farlo : in realtà questo è più complicato da spiegare. In poche parole, il tuo hosting è il computer che serve i tuoi file e la sua connessione a Internet. Il tuo provider di hosting influisce anche sul tempo di attività del tuo sito.

Costo: $ 24,95 / mese per un massimo di 5 siti

Alternativa: hosting condiviso più economico ma più lento o “hosting WordPress” più costoso e meno costoso

Devo dire che il nostro hosting non è stato male ma non era neanche l’ideale. Usavamo Synthesis di Copyblogger. Quando stavo eseguendo il test della velocità della pagina, continuava a restituire la raccomandazione “migliorare i tempi di risposta del server”. Ciò significa fondamentalmente che il nostro server non era eccezionale dato il volume di traffico con cui avevamo a che fare.

Aggiungilo al fatto che non siamo stati in grado di eseguire servizi di ottimizzazione delle immagini, chiaramente non valeva $ 150 + che stavamo pagando mensilmente.

Inserisci Traffic Planet Hosting

Hosting WordPress Traffic Planet Hosting

Dopo aver letto le recensioni di diversi blogger, ho deciso di provare a Traffic Planet Hosting . Il motivo per cui sono andato da loro è perché in realtà si basano su Amazon S3 in termini di server in modo che, nonostante siano una piccola azienda, si affidano a una delle infrastrutture server più potenti al mondo.

Inoltre, offrono un servizio 24 ore di prim’ordine. Sono un po ‘un nottambulo e persino li infastidisco alle 2 del mattino in chat, sono sempre stati in grado di aiutarmi. Non male.

Ma il vero vantaggio di Traffic Planet Hosting nel contesto di questo post è che sono riuscito ad aumentare la velocità della mia pagina da 67 a 71 dopo essere passato a loro. Non una tonnellata, ma tieni conto del fatto che ero già su un hosting considerato premium e veloce. Se sei su qualcosa come Bluehost, molto probabilmente vedrai guadagni più alti.

Se lo abbini al fatto che ho letteralmente risparmiato $ 600 / anno nei costi di hosting e hanno fatto tutti i trasferimenti del sito per me, questa è stata un’operazione che valeva la pena e mi ha aiutato a ottenere la mia velocità di caricamento della pagina in meno di 1 secondo.

I loro piani partono da $ 24,99 / mese. Non è il più economico e se hai appena iniziato ti consiglio comunque Bluehost perché è abbastanza buono per un primo sito.

Ma non appena si desidera passare a qualcosa di più robusto con un supporto reale e ottimizzato per l’hosting WordPress, ora consiglio Traffic Planet Hosting su WPEngine o qualsiasi altro sia per il loro prezzo che per le loro prestazioni.

Come Lo Fai Per Il Tuo Sito?

  1. Vai su Trafficplanethosting.com
  2. Seleziona il piano di cui hai bisogno per la quantità di siti che gestisci (la maggior parte di voi dovrebbe andare bene con il piano più economico)
  3. Se vuoi che trasferiscano i tuoi siti dal tuo precedente host, invia un nuovo ticket con le informazioni di accesso di WordPress e di hosting, loro faranno il resto.

Nota sul trasferimento del sito: hanno trasferito 9 dei nostri siti in 24 ore, è stato tutto abbastanza buono ma alcune immagini si sono perse nel trasferimento. Assicurati di effettuare il backup prima di cambiare società di hosting.

Passaggio 3: Ho Corretto Le Nostre Immagini

Difficoltà
20%
Lavoro richiesto
40%
Efficacia
100%

Cosa fa questo aggiustamento: ti permette di ridurre le tue immagini usando vari algoritmi di ottimizzazione delle immagini direttamente dalla tua dashboard di WordPress senza perdita di qualità.

Perché farlo: le immagini sono la parte più pesante della maggior parte dei siti Web, la riduzione delle immagini rende le tue pagine molto più piccole e veloci.

Costo: da $ 9

Alternativa: strumento gratuito di compressione delle immagini meno capace smush.it

Nel 90% dei casi, le immagini sono i file più grandi da scaricare in una pagina Web. In realtà, rappresentano il 70% di tutto l’utilizzo della larghezza di banda in tutto il mondo. Ecco perché sono l’unica cosa su cui puoi ottenere significativi guadagni di velocità della pagina.

Vedi, ci sono diversi servizi di compressione delle immagini che ti consentono di ridurre le tue immagini, rendendo più veloce il caricamento delle tue pagine. I 2 contendenti principali sono Smush.it di Yahoo Yslow It e Kraken.io.

Smushit

Vs

Logo Kraken

Entrambi possono essere installati come plugin su WordPress, motivo per cui ho conservato quei due e in pratica ho eseguito l’immagine attraverso la loro API mentre li carica. Se usi un tema Thrive come raccomandato sopra, l’abbonamento Kraken è incluso, quindi non devi preoccuparti di questo passaggio.

La differenza tra i due è che Kraken è in gran parte superiore, tuttavia è un servizio a pagamento, mentre Smush è solo la metà buono ma gratuito. Decidi con il tuo portafoglio qual è la migliore opportunità per te.

Il motivo per cui mi sono iscritto a Kraken è stato quello di ottimizzare le nostre immagini caricate in precedenza poiché i temi Thrive ottimizzano solo le immagini appena caricate. Con $ 9 di credito sono stato in grado di ottimizzare l’intera libreria di immagini e ridurre le dimensioni delle immagini fino all’85%! È enorme!

Media Library Health Ambition WordPress
Ottimizzando le nostre immagini con Kraken.io siamo riusciti a ridurne le dimensioni fino all’80% sul pilota automatico con il plugin WordPress .

Il sito è risultato significativamente più veloce e leggero dopo aver apportato questa modifica. È difficile fornire un punto di riferimento poiché i guadagni di velocità variano da pagina a pagina, ma alcune delle nostre pagine sono passate da diversi megabit a poche centinaia di kilobyte. Non male per un investimento una tantum di $ 9.

Come Lo Fai?

  1. Vai su kraken.io e scegli il piano da $ 9 a meno che tu non abbia una vasta libreria di immagini
  2. Vai su WordPress.org e installa il plug-in .io Kraken e aggiungi la tua chiave API nelle impostazioni del plug-in
  3. Vai nella tua libreria multimediale, seleziona tutto e fai clic sul pulsante “krak ‘em all”, seleziona lossy ed esegui il plugin
  4. Ripeti l’operazione su ogni pagina del tuo sito web.

Passaggio 4: Ho Impostato Correttamente La Memorizzazione Nella Cache Sul Nostro Dominio

Difficoltà
60%
Lavoro richiesto
40%
Efficacia
60%

Cosa fa questo aggiustamento: poiché il tuo CMS genera dinamicamente pagine su ogni carico, la “memorizzazione nella cache” consente al tuo sito Web di non rigenerare il contenuto fisso con ogni caricamento della pagina, accelerando la generazione della pagina.

Perché farlo: perché è gratuito ed è un’attività una tantum che rende il tuo sito Web più veloce in modo permanente

Costo: gratuito

Alternative: non utilizzare la memorizzazione nella cache

Devo ammetterlo, WordPress ha cambiato la mia vita. Non sono un programmatore e mi ha dato gli strumenti per competere con i web designer quando si tratta di creare siti Web. Tuttavia, a causa del modo in cui funziona, deve calcolare molti dati ogni volta che viene caricata una pagina.

La memorizzazione nella cache aiuta a semplificare questo lavoro impedendo al tuo sito Web di dover ricalcolare l’intera pagina e sostanzialmente “salvare” il lavoro che è già stato fatto. In pratica ciò significa che cose come l’intestazione, la barra laterale, il piè di pagina ecc. Che tendono ad essere simili tra le pagine non devono essere scaricate più e più volte.

W3 cache totale

Il plug-in WordPress consigliato per configurare la cache della pagina e del browser è  W3 Total cache . È il più popolare in questa categoria e probabilmente il più integrato. Si collega a Yoast SEO, si collega alla maggior parte delle reti di distribuzione dei contenuti.

Attenzione, se lo si imposta in modo errato, questo plug-in può danneggiare il sito Web e talvolta eliminarlo completamente.

Come Lo Fai?

  1. Vai nel motore di ricerca dei plugin di WordPress e cerca W3 Total Cache
  2. Installa e attiva il plug-in
  3. Vai in Prestazioni> Impostazioni generali
  4. Attiva cache della pagina, minimizza e cache del browser e fai clic su Salva

W3 Total cache è un plugin complicato e potrebbe danneggiare il tuo sito. 

Passaggio 5: Installare Il Modulo Di Velocità Della Pagina Di Google

Nota: sembra che Google l’abbia appena tolto proprio mentre pubblicavo il post. Tuttavia, è possibile installare lo stesso set di script sui propri server gratuitamente con il modulo di velocità della pagina. Dai un’occhiata qui .

Difficoltà
60%
Lavoro richiesto
60%
Efficacia
80%

Cosa fa questo tweak: utilizza i server e gli algoritmi di Google per servire il tuo sito Web e velocizzare ulteriormente il caricamento con cose come priorità di caricamento above the fold, caricamento pigro di immagini ecc.

Perché farlo: perché è gratuito e se uno dei motivi per migliorare la velocità della tua pagina è il traffico di ricerca, chi meglio di Google lo ottimizza passivamente per te?

Costo: gratuito (per ora)

Alternative: codifica personalizzata e consulenza sulla velocità del sito

Mi considero piuttosto intelligente, ma sono sicuro che i Phd di Google sono probabilmente più intelligenti. Il servizio di velocità della pagina di Google è (per ora) un servizio gratuito offerto da Google che consente a chiunque disponga di un sito Web di sfruttare l’infrastruttura di Google per servire alcune delle proprie risorse.

Ecco le caratteristiche principali della velocità della pagina di Google:

  • Serve file importanti dai data center locali di Google (funge da CDN basato sulla rete di Google)
  • Riscrivi e combina HTML, CSS e Javascript per ridurre il numero di richieste del server
  • Pulisci il codice per ridurne le dimensioni
  • Ottimizza la priorità di caricamento per caricare prima i contenuti visibili (miglioramento della velocità di caricamento percepito).
  • Ridimensiona le immagini alla dimensione di rendering.

Una cosa molto interessante di questo servizio è l’aumento della velocità della pagina “percepita”. Ciò significa che hanno la priorità di caricare prima i contenuti above the fold, rendendo così il tuo sito più veloce per il visitatore (ed è una spinta per il core della velocità della tua pagina SEO).

Un’altra caratteristica interessante è che il servizio è fondamentalmente un CDN gratuito e che si sente molto meglio della versione gratuita di Cloudflare . Di solito, i servizi CDN premium come Max CDN partono da $ 9 / al mese. Questo è un risparmio di $ 108 / anno insieme all’ottimizzazione del tuo codice.

Se vuoi capire come funziona tecnicamente il servizio, guarda questo video:

Come Lo Fai?

Avrei potuto fare una guida passo per passo, ma Google ha fatto meglio di me :).

Conclusione

Ecco qui. Dopo aver fatto molte ricerche online, ho applicato queste 5 cose al nostro sito Web e sono riuscito a raggiungere il 10% superiore dei siti Web in termini di velocità, nonostante il fatto che ho iniziato molto basso.

Comprendo l’esatta implicazione tecnica di ogni passaggio? Ovviamente no. Non sono un ingegnere e molti dei passaggi suggeriti si basano su tecnologie web avanzate che nemmeno la maggior parte degli ingegneri potrebbe necessariamente spiegare.

Ma la prova è nel budino: funziona ed è conveniente. Se dovessi applicare tutto ciò che hai trovato in questa guida, vedresti un costo una tantum di $ 58 insieme a un costo di $ 24,99 / mese per l’hosting invece di $ 7,99 per i provider di hosting più economici.

Questo è un piccolo costo rispetto all’alternativa: assumere un dev di fascia alta per fare tutto questo per te per un sacco di soldi.

Mi piacerebbe ricevere il tuo feedback nella sezione commenti su questo e forse imparare gli altri trucchi che hai usato per rendere il tuo sito più veloce!

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.