Come ottimizzare il tempo di caricamento della pagina e migliorare la tua SEO?

Viviamo in un mondo follemente impaziente. Fornire contenuti di qualità velocemente è stato un risultato invidiabile qualche anno fa. Oggi è un requisito rudimentale per qualsiasi attività commerciale.

Più a lungo fai aspettare le persone per accedere al tuo sito web, maggiore è la probabilità che rimbalzino. Un sito web lento è un problema serio che richiede un'attenzione immediata.

Come mai?

Supponiamo di avere un tasso di conversione del 3%. Ottieni tre potenziali clienti ogni 100 clic. Ora, cosa succede se tutti e tre rimbalzano perché la tua pagina di destinazione viene caricata negli anni dei dinosauri? Immagina l'impatto sui tuoi profitti.

In questo post, ti mostreremo come evitare questo scenario. Ci sono 5 passaggi per ottimizzare il tempo di caricamento della pagina.

Passaggio uno: trova la velocità di caricamento della pagina corrente.

Google PageSpeed ​​Insights e GTMetrix sono strumenti utili per calcolare la velocità della pagina. Entrambi elencano i fattori che ostacolano la velocità. Tuttavia, GTMetrix ti dice quanti secondi ci vogliono per caricare la tua pagina.

Inserisci l'URL del tuo dominio in GTMetrix e lascia che lo strumento esegua la sua magia.

In pochi secondi popolerà i numeri e ti assegnerà un voto.

Mostrerà anche il tempo impiegato per caricare ciascun elemento della pagina. Ad esempio, come nell'immagine sopra, ci sono voluti 5,5 secondi per caricare FCP, o First Colorful Paint. Il tempo di caricamento totale della pagina è di 7,3 secondi pigri!

Lo strumento stabilisce anche un elenco di suggerimenti per aumentare la velocità di caricamento della pagina...

…e qualche altro consiglio:

La prossima sezione spiega come ottenere un punteggio di velocità più veloce su GTMetrix.

Passaggio due: ottimizza il tuo sito Web per aumentare la velocità di caricamento della pagina.

Suggerimenti per l'ottimizzazione delle immagini SEO

Come ridurre le dimensioni dell'immagine?

Ogni sito Web è un file che viene caricato dai server su richiesta. Vuoi che la dimensione del file sia minima per promuovere un caricamento veloce.

Le immagini sono generalmente di dimensioni enormi! Ci vogliono eoni per caricarsi.

Ma aggiungono un enorme valore se usati con saggezza. Ad esempio, le immagini di GTMetrix mi hanno aiutato a esprimere meglio il mio punto di vista fornendoti un riferimento.

Non dobbiamo eliminare le immagini, ma possiamo ottimizzarne l'utilizzo. Questi sono 4 metodi per ridurre le dimensioni dell'immagine.

• Compressione dell'immagine
• Ritaglio di immagini
• Ridimensionamento delle immagini

Compressione dell'immagine

Rendi le immagini che usi di dimensioni inferiori. Il processo di riduzione della dimensione del file è chiamato compressione dell'immagine. Le immagini sono una pila di livelli; ogni strato aggiunge un sapore. La compressione riduce le dimensioni della pagina rimuovendo i livelli che rendono più nitida l'immagine.

Ciò ha un impatto sulla qualità dell'immagine, ma più che compensata guadagnando punti SEO.

Inizia salvando le tue immagini in formato JPG poiché occupano meno spazio su disco. Alcuni blog consigliano JPEG2000 o WEBP, ma il mio tema presentava problemi di rendering con quel formato. Spesso, JPG funziona bene.

Da qui, ci sono due modi per ottenere una maggiore compressione.

1. Comprimi le immagini online

Vai a compressjpeg e carica la tua immagine JPG. Lo strumento comprime l'immagine e dice quanto è stata compressa. Scarica l'immagine compressa e usala per la tua pagina web.

2. Usa i plugin per comprimere le immagini

Non sono un grande fan dell'utilizzo dei plugin. Certo, rendono il lavoro facile se non puoi programmare. Ma ostacolano il codice esistente del tuo sito web. Tuttavia, è un'opzione che vale la pena considerare.

Ci sono tonnellate di plugin che possono aiutarti a comprimere le immagini; hai l'imbarazzo della scelta. Ad ogni modo, controlla il segno di spunta "Compatibile con la tua versione di WordPress" prima di utilizzare qualsiasi plug-in.

Scegli tra compressione con perdita/senza perdita di dati

La compressione può essere lossy/lossless. Rappresenta il grado di compressione delle tue immagini.

Uso la compressione senza perdita di dati per le immagini pesanti. Il testo dell'immagine con perdita tende ad essere troppo sfocato per essere letto. Uso la compressione senza perdita di dati per tutto il resto.

Sperimenta quale funziona meglio per te.

Ritaglia le immagini

Sembra un metodo ovvio per ridurre le dimensioni dell'immagine – stai letteralmente riducendo le dimensioni dell'immagine – ma molti tendono a ignorarlo.

Prendi nota delle dimensioni dell'immagine che funzionano per il tuo blog. L'immagine principale e le dimensioni dell'immagine in primo piano devono essere coerenti. Tuttavia, gli elementi visivi di supporto possono essere ritagliati per visualizzare ciò che è necessario.

Ad esempio, nessuno degli screenshot in questo post ha elementi visivi ridondanti. Nessuna barra degli indirizzi o piè di pagina. Ogni pixel aumenta il tempo di caricamento della pagina. Rimuovi quelli non necessari.

Ridimensiona le immagini su MS Paint

Questo metodo dal suono ovvio si nasconde in bella vista.

1. Apri la tua immagine in MS Paint. Vedrai l'opzione per ridimensionare.
2. Imposta la percentuale di ridimensionamento e ora hai una versione molto più piccola per dimensioni e dimensioni. Salva i carichi sulla dimensione del file!

Immagini a caricamento lento

Tutti i dati del tuo sito Web vengono archiviati nei data center e recuperati quando necessario; le immagini non sono diverse. La tecnica del carico pigro ritarda il processo di recupero fino al momento in cui il visitatore scorre alla visualizzazione.

È solo allora che il sistema ottiene le risorse necessarie per servire la suddetta immagine. Questa tecnica riduce il carico iniziale sul sistema mettendo in coda gli elementi per il caricamento solo quando necessario.

Ciò non solo consente di risparmiare sul tempo di caricamento iniziale, ma conserva anche la larghezza di banda.

Provalo in questa pagina: scorri verso il basso e guarda come si carica un'immagine quando la raggiungi, non prima.

Come implementare Lazy Load sul tuo sito web?

Il plug-in a3 Lazy Load può aiutarti a implementare rapidamente il lazy load.

Scegli il carattere adatto.

Il carattere rientra spesso nell'ambito del design; raramente è visto come un fattore di prestazione.

Ma contribuisce alla dimensione della pagina. Il rapporto di GTMetrix discusso in precedenza mostra che Font occupava la maggior parte delle dimensioni dopo le immagini.

Per una velocità di caricamento elevata, è necessario scegliere caratteri che si caricano velocemente.

Uso Open Sans per il mio sito Web perché non ho bisogno di essere fantasioso per la mia categoria di attività. Se possiedi un'attività creativa, potresti voler sacrificare un po' di velocità della pagina per l'aspetto estetico. Inoltre, se vuoi un carattere elegante che contribuisca all'identità del tuo marchio, provalo. Marca >> Velocità della pagina.

Comprimi il codice

JavaScript (JS) e Cascading Style Sheets (CSS) sono parti di codice che supportano ogni pagina Web visualizzata. Entrambi influiscono sulla velocità di caricamento della pagina in due modi: aumentano le dimensioni della pagina ed effettuano una serie di richieste al server che richiedono tempo per essere elaborate.

Ma sono necessari per aggiungere un po' di stile e grinta al tuo sito web. Ad esempio, nota la mia casella di abbonamento qui sotto: annuisce quando scorri verso il basso fino ad essa. Se ti sei perso l'effetto, ricarica questa pagina e riprova.

L'effetto attira l'attenzione ma, se abusato, diventa distrazione.

C'è un compromesso tra stile e velocità della pagina. Non eliminare lo stile per la velocità della pagina. Tuttavia, l'ottimizzazione del codice aumenterà la velocità di caricamento della pagina.

Ed ecco come l'ho fatto:

Minimizza JS/CSS

La minimizzazione elimina blocchi di codice non necessari, riducendo le dimensioni del file. Ciò consente ai browser di scaricare ed eseguire il codice più velocemente, risparmiando larghezza di banda.

Sfrutta la memorizzazione nella cache

Una cache è l'unità di archiviazione che conserva le copie del tuo sito Web, ovviando alla necessità di caricare ogni volta che è necessario. Con la memorizzazione nella cache, dopo il caricamento per la prima volta, il tuo sito Web si caricherà più velocemente ogni volta che verrà richiamato.

Uso il plug-in LiteSpeed ​​Cache per minimizzare il codice e la cache.

Passaggio tre: valuta la possibilità di cambiare il tuo provider di hosting web.

Un'auto sportiva aerodinamica funzionerebbe a cherosene? No.

Allo stesso modo, un sito Web ben ottimizzato avrà una velocità di caricamento della pagina lenta se il server risponde solo entro la prossima era glaciale.

Ero riluttante a fare il cambiamento principalmente a causa dell'incertezza. Ma ho fatto delle ricerche e sono arrivato a scegliere Hostinger, e non ho rimpianti.

Molti altri host web fanno il lavoro per te. Decidi cosa funziona per te in base al tuo budget e alla tua posizione.

Ecco una guida completa per modificare il tuo WebHost.

Fase quattro: utilizzare una rete di distribuzione dei contenuti (CDN.)

La distanza geografica influisce molto sulla velocità della pagina. Più un visitatore è lontano da dove è ospitato il tuo sito web, maggiore è il tempo di caricamento della pagina.

CDN è una raccolta di server globali situati in più data center in tutto il mondo. Consente a un visitatore di connettersi con un server geograficamente più vicino anziché con il server principale. Lo fa sfruttando i server nei punti di scambio tra reti diverse.

La distanza ridotta promuove una pubblicazione più rapida della tua pagina web.

Uso il CDN Cloudflare e ha servito il suo scopo alla grande.

Passaggio cinque (facoltativo): utilizza le pagine mobili accelerate (AMP) per aumentare la velocità di caricamento delle pagine mobili

Ricorda che abbiamo parlato di minimizzare il codice. L'HTML è una forma di codice più leggera di CSS/JS. Non consente lo stile, ma l'HTML è il codice di base di cui i server hanno bisogno per caricare il tuo sito web.

Le pagine AMP sono il modulo HTML della tua pagina web. Si tratta di pagine della seconda versione utilizzate principalmente per i dispositivi mobili. Sono codice ridotto al minimo indispensabile, quindi le pagine si caricano in una frazione di secondo.

Diventare AMP significa eliminare lo stile dalla tua pagina. Tuttavia, sono utili per le pagine di notizie e i blog. Li ho usati brevemente, ma sono tornato sulla decisione perché i primi tre passaggi sono stati sufficienti anche per la velocità della mia pagina mobile.

Ho scritto una guida dettagliata su come decidere se implementare AMP o meno.

Risultati

I passaggi precedenti hanno fatto miracoli per la velocità di caricamento della mia pagina. Tornando a GTMetrix, ecco dove si trova oggi il mio sito web.

Si carica in 1,2 secondi. Circa un aumento di 6 volte.

Ma la prova è nel budino. Provalo e fammi sapere nei commenti come va.