Come far caricare le foto più velocemente su WordPress: 6 tattiche chiave

Hai difficoltà a caricare le foto più velocemente sul tuo sito web?

Le immagini ti aiutano a creare un sito web più coinvolgente, quindi è fantastico usarle. Ma se usi molte immagini, rischi di rallentare il tuo sito se non le ottimizzi, motivo per cui è positivo che tu sia interessato a imparare come caricare più velocemente le immagini.

Per fortuna, ci sono molte tattiche che puoi implementare per velocizzare le tue immagini, con o senza influire sulla qualità delle foto.

In questo post condivideremo una guida completa su come caricare più velocemente le immagini che utilizzi sul tuo sito web.

Inizieremo condividendo sei tattiche chiave per accelerare il caricamento delle immagini. Quindi, ti mostreremo come utilizzare due plugin WordPress adatti ai principianti per implementare queste tattiche sul tuo sito WordPress.

Come far caricare le foto più velocemente: sei strategie di performance

In questa prima sezione parleremo delle tattiche che puoi implementare per caricare più velocemente le tue immagini sul tuo sito. Quindi, nella prossima sezione, ti mostreremo come implementare tutte queste tattiche su WordPress.

Puoi pensare a questa sezione come alla " teoria " e alla sezione successiva come al " come fare pratica ".

Se ti stai chiedendo cosa fa caricare le immagini più velocemente, continua a leggere! Ecco le sei tattiche che puoi utilizzare per velocizzare le immagini sul tuo sito, classificate all'incirca in ordine di importanza:

1. Comprimi le foto.
2. Ridimensiona le foto.
3. Converti le foto in formati ottimizzati come WebP.
4. Utilizza una rete di distribuzione dei contenuti (CDN) per accelerare i tempi di download delle immagini (soprattutto per i visitatori lontani dall'hosting del tuo sito).
5. Immagini a caricamento lento.
6. Abilita la memorizzazione nella cache del browser per velocizzare le visite successive.

Le prime tre tattiche riguardano l'ottimizzazione dei file immagine stessi, mentre le ultime tre si concentrano sull'ottimizzazione del modo in cui il tuo sito Web carica quei file immagine.

Vediamo come queste tattiche possono accelerare il caricamento delle tue immagini su WordPress.

1. Comprimi le immagini

La compressione delle foto ti consente di ridurre le dimensioni del file di un'immagine senza modificarne le dimensioni. La compressione funziona rimuovendo le informazioni ridondanti/non necessarie e applicando vari algoritmi per ridurre le dimensioni del file.

Esistono due tipi di compressione:

• Lossless : una piccola riduzione delle dimensioni del file senza alcun cambiamento nella qualità.
• Lossy : una riduzione molto maggiore delle dimensioni del file, ma potrebbe esserci una perdita di qualità dell'immagine. Esistono diversi livelli di compressione con perdita: alcuni potrebbero non essere nemmeno percepibili dall'occhio umano, mentre algoritmi più aggressivi potrebbero avere un impatto notevole.

Puoi saperne di più nel nostro articolo sulla compressione delle immagini con perdita e senza perdita di dati.

Per la maggior parte dei siti Web, andrai bene con la compressione con perdita. Tuttavia, se sei un fotografo o in un altro settore in cui la qualità dell'immagine è fondamentale, potresti voler mantenere la compressione senza perdita di dati.

Se usi la compressione con perdita, puoi ottenere dei risparmi piuttosto impressionanti. Ad esempio, abbiamo usato Imagify per comprimere una semplice immagine JPG. Imagify è uno strumento gratuito di ottimizzazione delle immagini di cui parleremo più avanti in questa guida.

Dopo aver utilizzato la compressione con perdita di dati sull'immagine di prova, siamo stati in grado di ridurre le dimensioni da 133,7 KB a 36,9 KB con pochissime modifiche alla qualità, ovvero una riduzione del 73% circa delle dimensioni del file :

2. Ridimensiona le immagini

Sopra, ti abbiamo detto che la compressione delle foto ti consente di modificare la dimensione del file di un'immagine senza cambiarne le dimensioni. Ma nella maggior parte dei casi, vuoi cambiare le dimensioni dell'immagine, ed è qui che entra in gioco il ridimensionamento delle foto.

A parità di condizioni, maggiori sono le dimensioni di un'immagine, maggiore sarà la sua dimensione del file. E maggiore è la dimensione del file, più lentamente verranno caricate le immagini.

Per un sito web, dovresti provare a ridimensionare le immagini alla dimensione esatta che stai utilizzando. Ad esempio, se l'area dei contenuti del tuo sito ha una larghezza di 800 px, ti consigliamo di ridimensionare le immagini a 800 px ( o forse raddoppiarle a 1.600 px per tenere conto dei monitor ad alta risoluzione come gli schermi Retina ).

Quanto sono grandi i risparmi ? Ecco un rapido esempio di test in cui abbiamo semplicemente ridimensionato l'immagine senza aggiungere alcuna compressione:

Se combini la compressione con il ridimensionamento, puoi ottenere alcune incredibili riduzioni delle dimensioni dell'immagine . Ad esempio, dopo aver compresso l'immagine ridimensionata con Imagify, l'abbiamo ridotta ulteriormente a 101 KB.

Quindi, semplicemente ridimensionando e comprimendo l'immagine, l'abbiamo rilasciata da 380 KB a 101 KB con praticamente zero cambiamenti nella qualità ( supponendo che tu lo stia visualizzando su un sito Web ).

3. Converti foto in WebP

WebP è un moderno formato immagine di Google che può offrire file di dimensioni inferiori rispetto a JPEG o PNG senza alcuna perdita di qualità.

In media, le immagini WebP sono del 25-34% più piccole delle immagini JPEG comparabili e del 26% più piccole delle immagini PNG comparabili.

Per beneficiare di questi risparmi di dimensioni, puoi convertire le tue immagini in WebP quando le carichi sul tuo sito WordPress.

Per saperne di più su questo formato, consulta la nostra guida completa alle immagini WebP.

4. Utilizzare una rete di distribuzione dei contenuti (CDN)

Una CDN è essenzialmente solo una rete globale di server in tutto il mondo. Se configuri il tuo sito WordPress per utilizzare una CDN, puoi ospitare tutte le foto del tuo sito (e altri file statici) su questa rete di server.

Quindi, i visitatori del tuo sito potranno scaricare le foto dalla posizione di rete più vicina a loro invece di doverle scaricare direttamente dal server di hosting del tuo sito.

Riducendo la distanza fisica che i file di immagine devono percorrere, verranno caricati più velocemente per i tuoi visitatori.

Un CDN veloce è particolarmente utile se il pubblico del tuo sito web è distribuito in un'ampia area geografica, come più paesi o continenti.

Tuttavia, se il tuo sito web si rivolge solo a persone in una specifica posizione geografica (come la tua città locale), potresti non notare molti miglioramenti nel tempo di caricamento delle immagini utilizzando una CDN.

5. Immagini a caricamento lento

Il caricamento lento delle immagini del tuo sito WordPress può limitare l'impatto che le tue foto hanno sui tempi di caricamento complessivi del tuo sito.

In sostanza, il caricamento lento ti consente di attendere per caricare le immagini che si trovano al di fuori del riquadro di visualizzazione visibile di un visitatore. Invece, il tuo sito caricherà le immagini solo "just in time" quando un visitatore inizia a scorrere verso il basso.

Ciò porterà a tempi di caricamento iniziali più rapidi, anche se hai molte immagini sulla pagina.

6. Abilita la memorizzazione nella cache del browser

La memorizzazione nella cache del browser non velocizzerà il caricamento delle foto la prima volta che una persona visita il tuo sito. Ma accelererà istantaneamente il caricamento delle immagini per le visite successive .

Come? Bene, la memorizzazione nella cache del browser ti consente di dire ai browser dei visitatori di memorizzare le immagini del tuo sito sui computer locali dei visitatori ( nella cache del browser ).

Una volta che il visitatore ha scaricato le immagini alla prima visita, sarà in grado di caricare quelle immagini dalla cache del browser locale nelle visite successive, il che porterà a tempi di caricamento più rapidi.

Come velocizzare il caricamento delle immagini con i plugin di WordPress

Ora, vediamo come implementare le sei tattiche per caricare le immagini più velocemente sul tuo sito WordPress.

Avrai solo bisogno di due plugin per configurare tutto:

• Imagify: lo utilizzerai per ottimizzare i file immagine stessi.
• WP Rocket: lo utilizzerai per ottimizzare il modo in cui il tuo sito Web offre quei file di immagine ai visitatori.

Imagify: comprimi, ridimensiona e converti in WebP

Imagify è un plug-in WordPress facile da usare in grado di gestire i primi tre suggerimenti di ottimizzazione del nostro elenco.

Una volta configurato, ottimizzerà automaticamente tutte le immagini che carichi su WordPress utilizzando le seguenti tattiche:

• Comprimi le immagini utilizzando algoritmi lossless, con perdita moderata o con perdita aggressiva.
• Ridimensiona le immagini a determinate dimensioni massime.
• Converti le immagini in WebP e offrile ai visitatori.

Puoi anche ridimensionare e comprimere in blocco le foto esistenti del tuo sito con un solo clic.

Per iniziare, installa e attiva il plugin gratuito Imagify da WordPress.org. Una volta attivato il plugin, ti verrà chiesto di inserire una chiave API, che ti consente di collegare il tuo sito WordPress al servizio di ottimizzazione Imagify.

Per ottenere la tua chiave API, puoi registrarti per un account Imagify gratuito. Potrai ottimizzare 20 MB di immagini al mese gratuitamente per sempre ( ~200 immagini al mese ).

Se è necessario superare tali limiti, il piano a pagamento costa $ 4,99 al mese per 500 MB (~ 5.000 immagini) o $ 9,99 al mese per un utilizzo illimitato. Puoi utilizzare i piani a pagamento su un numero illimitato di siti WordPress.

Una volta che hai la tua chiave API, puoi incollarla nella casella e fare clic su Connettimi :

Quindi, vai su Impostazioni → Immagina per configurare le impostazioni di ottimizzazione dell'immagine.

Nella parte superiore, puoi scegliere il livello di compressione desiderato . C'è anche un confronto visivo per aiutarti a testare diversi livelli:

Se scorri verso il basso, puoi fare in modo che Imagify converta automaticamente le immagini in WebP e le mostri ai visitatori. Per le immagini WebP, si consiglia di utilizzare il metodo dei tag <immagine>:

Di seguito, puoi dire a Imagify di ridimensionare le immagini di grandi dimensioni a una determinata dimensione massima (in base alla larghezza). Ancora una volta, ti consigliamo di impostarlo sulla larghezza dell'area dei contenuti del tuo sito (o forse il doppio se desideri offrire immagini a risoluzione più elevata per gli schermi Retina):

E questo è tutto! Imagify ora ottimizzerà automaticamente tutte le nuove immagini che carichi su WordPress .

Se hai molte immagini esistenti sul tuo sito, puoi fare in modo che Imagify le ottimizzi in blocco andando su Media → Ottimizzazione in blocco:

WP Rocket: memorizzazione nella cache del browser, caricamento lento e CDN

WP Rocket è un plug-in completo per le prestazioni di WordPress che può velocizzare l'intero sito e implementare le altre tattiche di ottimizzazione delle foto di cui abbiamo discusso. Ciò comprende:

• Implementazione della memorizzazione nella cache del browser.
• Immagini a caricamento lento.
• Collegamento a una CDN.

Oltre a ciò, può anche aiutare con miglioramenti delle prestazioni non di immagine come la memorizzazione nella cache della pagina, l'ottimizzazione del codice e molto altro.

Per configurarlo, dovrai prima acquistare e installare WP Rocket.

Non appena lo attivi, abiliterà automaticamente la memorizzazione nella cache della pagina e la memorizzazione nella cache del browser . Per accedere alle altre impostazioni, vai su Impostazioni → WP Rocket nella tua dashboard.

Per abilitare il caricamento lento , puoi andare alla scheda Media e selezionare la casella per caricare le immagini (e i video, se lo desideri). Puoi anche fare in modo che WP Rocket aggiunga le dimensioni dell'immagine mancanti, che è un altro utile suggerimento per l'ottimizzazione:

Per configurare una CDN , puoi andare alla scheda CDN. Il modo più semplice per iniziare è utilizzare il servizio RocketCDN, che costa solo $ 7,99 al mese per una larghezza di banda illimitata. Oppure, WP Rocket può anche aiutarti a integrarti con altri servizi come Bunny CDN, KeyCDN o StackPath.

Se utilizzi una CDN e hai configurato Imagify per servire immagini WebP utilizzando il metodo dei tag <picture>, dovrai tornare alle impostazioni di Imagify (Impostazioni → Imagify) e inserire anche l'URL della tua CDN nella casella delle impostazioni WebP.

Fai in modo che le tue immagini si carichino più velocemente oggi

Se utilizzi molte foto sul tuo sito web, è importante ottimizzarle in modo che il tuo sito si carichi velocemente.

In questo post, abbiamo trattato una serie di modi per caricare più velocemente le foto.

Per iniziare, dovresti ottimizzare i file immagine stessi. Con Imagify, puoi comprimere, ridimensionare e convertire in WebP per assicurarti che le dimensioni del tuo file immagine siano le più ridotte possibile.

Quindi, puoi anche utilizzare WP Rocket per ottimizzare il modo in cui usi e carichi le immagini sul tuo sito con tattiche come CDN, memorizzazione nella cache del browser e caricamento lento.

Hai ancora domande su come velocizzare il caricamento delle immagini per il tuo sito WordPress? Fateci sapere nei commenti!