Ottimizzazione delle immagini in WordPress con caricamento pigro e formato Webp

L'ottimizzazione delle immagini in WordPress si riferisce al processo di ottimizzazione delle immagini per migliorarne le prestazioni e ridurne le dimensioni dei file senza comprometterne significativamente la qualità visiva.

Vediamo alcune tecniche e pratiche volte a migliorare la velocità di caricamento delle immagini su un sito WordPress. Questo di solito si traduce in una migliore esperienza utente e in un migliore posizionamento nei motori di ricerca (perché i motori di ricerca non amano i siti web che si caricano lentamente).

Vediamo alcune tecniche comuni per ottimizzare le immagini in WordPress.

Si tratta di ridurre le dimensioni del file di un'immagine senza perdere troppa qualità visiva. È possibile comprimere le immagini con vari metodi e utilizzando strumenti di compressione delle immagini online, plugin per WordPress o software di ottimizzazione delle immagini.

Le immagini dovrebbero essere ridimensionate in base alle dimensioni di visualizzazione sul sito web, per evitare un inutile utilizzo della larghezza di banda. Detto questo, cercate comunque di mantenere la quantità di dimensioni di ritaglio al minimo, altri plugin e persino temi possono registrare dimensioni di ritaglio aggiuntive per il vostro WordPress; fortunatamente è possibile disabilitarli, quindi fate attenzione.

Il ritaglio consente di rimuovere le parti indesiderate di un'immagine che non sono essenziali per il contenuto. WordPress ha 3 dimensioni di ritaglio incorporate: miniatura, media e grande. Solo la dimensione della miniatura ha una casella di controllo che consente di ritagliare alle dimensioni esatte; le altre dimensioni vengono infatti ridimensionate in proporzione. È possibile modificare le dimensioni dalla schermata di amministrazione. Visitare Impostazioni > Media per modificarle.

Suggerimento: è necessario rigenerare le miniature (cioè tutte le dimensioni più piccole dell'originale) affinché le immagini esistenti vengano ritagliate in base alle dimensioni impostate per i media. Per saperne di più su controllare le dimensioni delle immagini in WordPress.

Nota: se volete avere immagini ad alta risoluzione sul vostro sito, per qualsiasi motivo, cercate di mantenere le dimensioni al massimo della larghezza o dell'altezza del vostro formato più grande.

La scelta del giusto formato di file per le immagini può avere un impatto significativo sulle dimensioni del file e sulla velocità di caricamento. Il formato JPEG è generalmente adatto a fotografie e immagini complesse, mentre il formato PNG è migliore per immagini con sfondi trasparenti o grafica semplice. Con WebP è possibile avere il meglio di entrambi i mondi, con file di dimensioni ridotte e una perdita minima di qualità visiva.

Con il caricamento pigro, le immagini vengono caricate solo quando diventano visibili nel punto di vista del visitatore, anziché tutte insieme. Questa tecnica riduce il tempo di caricamento iniziale della pagina, soprattutto per le pagine con molte immagini. Da WordPress 5.5 il caricamento pigro è ora una caratteristica predefinita.

Il caching consiste nel memorizzare le immagini sul browser del visitatore, consentendo ai successivi caricamenti della pagina di recuperare le immagini localmente anziché scaricarle nuovamente. Questo riduce il carico del server e velocizza il caricamento delle pagine. Utilizzate plugin come WP Super Cache (che è quello che usiamo su wplake.org), W3 Total Cache o LiteSpeed Cache per attivare la cache del vostro sito web.

Queste tecniche non sono poi così complesse, richiedono solo qualche passaggio in più. Ma se le utilizzate, probabilmente otterrete anche altri vantaggi collaterali. Diamo un'occhiata.

L'utilizzo di un CDN aiuta a fornire immagini in modo più efficiente. Naturalmente, un CDN è molto più di un semplice servizio di consegna delle immagini. In breve, accelera il vostro sito memorizzando copie su server distribuiti in diverse località geografiche. Questo riduce la distanza e la latenza tra il browser dell'utente e il server delle immagini.

Esistono diversi plugin per WordPress, come Smush, Imagify e EWWW Image Optimizer, che automatizzano i processi di ottimizzazione delle immagini. Consiglio sempre di provarli prima su un ambiente di prova, finché non si sa cosa fanno. Perché se non si è sicuri di ciò che fa, potrebbe ad esempio cancellare le immagini originali (significa che quando si prova un'altra cosa, le nuove immagini non vengono ritagliate dalle originali, ma piuttosto da una versione più piccola dell'immagine). Inoltre, questi plugin possono gestire compiti come la compressione, il ridimensionamento, il caricamento pigro e la cache, semplificando il flusso di lavoro di ottimizzazione.

Suggerimento: Ricordate di non sovrascrivere o duplicare i passaggi. Per esempio, se avete il plugin Image Optimizing che offre anche la cache, non attivatelo se avete già un plugin Cache in uso.

Molto spesso si tratta di uno scenario di tentativi ed errori quando si ottimizza la velocità della pagina e le immagini, ma sappiate che se il vostro sito non contiene molte immagini, l'impatto non sarà così grande come se fosse il contrario.

Implementando queste tecniche, potete migliorare significativamente la velocità di caricamento e le prestazioni delle immagini sul vostro sito web WordPress, ottenendo una migliore esperienza utente e potenzialmente un posizionamento più elevato nei motori di ricerca. Ci sono molte altre tecniche che potete utilizzare per ottimizzare il vostro sito WordPress perché, in definitiva, un sito web veloce migliora l'UX e, come ormai dovreste sapere, i motori di ricerca lo adorano.

Spero che questo articolo vi sia stato utile.

Buona ottimizzazione!