Da tempo si parla della velocità del sito web e di quanto questa impatti sull’esperienza utente, sulla SEO e, quindi, sul raggiungimento dei risultati!
Da anni Google invita gli utenti a tenere in considerazione anche il fattore performance e, nel tempo, ha dimostrato di andare sempre più in questa direzione fornendoci strumenti, guide e tutorial, e aggiornando man mano le linee guida sulle performance da applicare sui siti. Nel 2015/2016 ci fu la comparsa del Progetto AMP1 finalizzato a velocizzare la fruizione di notizie da dispositivi Mobili. Abbiamo affrontato una particolare casistica di AMP in questo articolo.
A seguire ci sono stati gli strumenti di misurazione performance Pagespeed Insights2 e Google Lighthouse3.
È proprio per via di questi due strumenti che siamo qui a scrivere questo articolo! Lo scorso anno i parametri per avere un sito “veloce” (dove per “veloce” si intende che lo score di Pagespeed sia nella zona verde) erano più permissivi e con le giuste implementazioni si riuscivano ad ottenere risultati più che soddisfacenti. Nel 2018 le soglie per la verifica della velocità sono state rivisitate e in molti si son ritrovati ad avere siti etichettati come “lenti” con un poco soddisfacente score in rosso.
Tra le modifiche apportate per la verifica delle performance di un sito web ce n’è una che ha creato diversi grattacapi e “paure” ai webmaster: Serve Images in Next-Gen Formats (Servire immagini nel formato Next-Gen).
Qualsiasi sito, anche quelli che erano ottimizzati a dovere, dopo l’aggiornamento di Lighthouse ha visto apparire la fatidica riga indicante che l’uso dei vecchi formati immagine impattava sui tempi di caricamento per 1 o più secondi. Anche noi, dopo la messa online del nostro nuovo sito, ci siamo scontrati con questa problematica e in questo articolo vi spieghiamo come abbiamo superato il problema delle immagini fino a raggiungere delle ottime performance di velocità!
Cos’è il formato Next-Gen?
Con Next-Gen4 si indicano dei formati immagine (JPEG 2000, JPEG XR, WebP) che pur mantenendo la stessa qualità dei formati precedenti (jpg e png) risultano di dimensioni ridotte e quindi più veloci da caricare.
Tra i formati Next-Gen il WebP è considerato il più performante ma, al momento, non è supportato da tutti i browser.
Cos’è il formato WebP?
Il formato WebP5 è un recente formato di immagini che garantisce una più alta compressione delle immagini pur preservando una qualità analoga. Inoltre, tra le caratteristiche che li rendono particolarmente apprezzati, c’è il supporto alle trasparenze che permette di ottenere un file 3 volte più piccolo del corrispondente PNG.
Dato che si tratta di un formato non supportato da tutti i browser, l’implementazione delle immagini in formato WebP è più difficoltoso in quanto per ogni immagine, a livello di codice, andrà indicato sia il formato WebP per i browser più moderni, sia il formato originale (JPG o PNG) per chi naviga con browser che non supportano questi nuovi formati.
Quanto sono importanti le immagini per la velocità del sito?
Tanto!
Per il nostro sito wpseo.it, il mancato utilizzo delle immagini Next-Gen impatta sui tempi di caricamento per 1,05 s (oltre un secondo). Considerato che da una recente ricerca emerge che il 53% dei visitatori mobile abbandona un sito che impiega più di 3 secondi a caricare, quel secondo di “ritardo” ci potrebbe far perdere molte opportunità. Per approfondire la tematica su come e quanto i tempi di caricamento impattano sulle visite e sull’esperienza utente, vi rimando al recente articolo di Neil Patel.
Come implementare i formati Next-Gen su WordPress?
Per implementare nel proprio sito le immagini nel formato Next-Gen ci sono varie metodologie che comportano più o meno lavoro per raggiungere il risultato voluto.
In questo articolo vi parleremo di come integrare le immagini in formato WebP su WordPress utilizzando un plugin dedicato, più alcuni accorgimenti che vi illustreremo.
WebP Express – Plugin per WordPress
Bjørn Rosell, l’autore di questo plugin, doveva essere stanco di vedere segnalato in rosso su Lighthouse il mancato utilizzo delle immagini Next-Gen, così ha deciso di scrivere un plugin che risolvesse questo problema. E l’ha fatto molto bene.
WebP Express ha sostanzialmente 2 features fondamentali:
- uno strumento che utilizza le più comuni librerie di elaborazioni immagini per convertire le immagini WordPress passate e future nel corrispondente WebP
- un sistema per sostituire nel template il codice corretto per mostrare l’immagine nel formato adatto, a seconda del Browser utilizzato dall’utente
Come configurare WebP Express
Una volta installato il plugin troveremo il suo pannello di configurazione sotto “Impostazioni -> WebP Express” da cui potremo impostare diversi aspetti che vediamo di seguito.
- Operation Mode – Permette di scegliere come gestire le immagini in formato Next-Gen ossia se tramite CDN, se convertendole al volo, se inviando direttamente l’immagine webp, etc;
- General – Permette di indicare a quale formato immagine applicare la sostituzione con le WebP e se salvare le immagini convertite in una cartella separata;
- Redirection Rule – Permette di impostare le regole di redirect per decidere se, quando non abbiamo l’immagine in WebP, mostriamo il vecchio formato o la convertiamo al volo;
- Conversion – Permette di indicare quale libreria grafica utilizzare per la conversione, la qualità dell’immagine e se mantenere i Metadata. Inoltre permette di impostare la conversione in automatico delle nuove immagini caricate in WordPress, mentre tramite la funzione Bulk Convert si possono trasfromare in WebP tutte le immagini pregresse;
- Alter HTML – Permette di indicare quale metodo vogliamo utilizzare per sostituire le immagini nel nostro WordPress. A seconda della scelta ci sono alcuni vantaggi e svantaggi riassunti in questa tabella:
Per comodità, vi lasciamo di seguito gli screenshot dell’attuale configurazione utilizzata nel nostro sito.
 |
 |
Rischi e cosa da sapere su WebP Express
Come tutti i plugin per WordPress, WebP Express prova a fornire una soluzione all’implementazione dei formati immagini Next-Gen ma non è escluso che, in concomitanza di particolari configurazioni o customizzazioni di WordPress, potrebbe incappare in errori.
Questa premessa per ricordarvi di fare un backup Ftp e Database prima di procedere all’implementazione di WebP Express.
L’altra cosa da sapere è che attualmente, nei più diffusi Hosting condivisi, è difficile trovare librerie grafiche che supportino i nuovi formati Next-Gen: pertanto potreste dover fare richiesta all’Hosting provider per l’installazione di una delle librerie supportate dal plugin.
Nel nostro caso giocavamo in casa in quanto siamo anche Hosting Provider e sui nostri piani hosting per WordPress abbiamo già configurato le librerie necessarie alla conversione in WebP.
Inoltre sui nostri Hosting è installato Google Mod_Pagespeed6, un modulo che permette di applicare numerose ottimizzazioni di performance direttamente lato Server. Tra le varie features è possibile impostare che sia direttamente il Server, durante l’elaborazione della pagina, a convertire le immagini JPG e PNG nel nuovo Next-Gen WebP!
Risultati Velocità Sito con Pagespeed e Lighthouse
Dopo tutte queste parole vorrete scoprire qual è stato l’impatto effettivo in termini di performance e di score.
Come potete vedere dall’immagine sottostante, in Lighthouse non abbiamo più alcuna segnalazione di “Serve Images in Next-Gen Formats“.
In Google Pagespeed Insights i valori sono molto diversi tra Mobile (71) e Desktop (99) ma direi che il risultato, per ora, è più che soddisfacente.
Link di Approfondimento
- AMP – Wikipedia AMP
- Google Pagespeed Insights – Strumento per la misurazione della velocità di un sito web
- Google Lighthouse – Strumento per la verifica delle Performance di Siti Web e App
- Next-Gen Image – Pagina della documentazione sulle immagini next-gen
- WebP – Pagina ufficiale del formato immagini WebP
- mod_pagespeed – Sito ufficiale di Mod Pagespeed
