6 motivi per cui le tue immagini stanno rallentando il tuo sito Web (e come risolverlo)
Pubblicato: 2021-09-23Ti stai chiedendo perché le immagini si caricano lentamente sul tuo sito o impiegano un'eternità a caricarsi? Stai leggendo l'articolo giusto. Iniziamo con due cose importanti da sapere: le immagini costituiscono una grande percentuale del traffico del sito Web, quindi l'ottimizzazione delle immagini può aiutare a ridurre il tempo necessario per il caricamento. Allo stesso tempo, le immagini sono spesso colpevoli di problemi di prestazioni: occupano le risorse di caricamento, ed è per questo che rallentano il tuo sito WordPress.
Il fatto è che è difficile immaginare un sito Web senza immagini o immagini. L'utilizzo di immagini ottimizzate per la SEO può persino aumentare il traffico sul tuo sito web. Non possiamo fare affari senza di loro!
In questo post del blog, abbiamo delineato sei motivi per cui le immagini stanno rallentando il tuo sito. Inoltre, imparerai come caricare più velocemente le foto sul tuo sito (anche sui dispositivi mobili).
Perché le tue immagini si caricano lentamente su WordPress (o impiegano un'eternità a caricarsi)
1. Le immagini sono troppo grandi (e potresti usarne troppe)
Quando si tratta di velocità della pagina web, la prima cosa che dovresti fare è ottimizzare le tue immagini pesanti. Elevate risoluzioni di dimensioni maggiori possono richiedere molta larghezza di banda e rallentare i tempi di caricamento dei visitatori sul tuo sito, quindi perché non caricarli in una dimensione più piccola? Ma anche, non lasciare che la qualità delle tue immagini ne risenta! Utilizza applicazioni affidabili ed efficaci per la compressione delle immagini. Ciò assicurerà che mentre riduci le loro dimensioni, vengono comunque mantenute in fedeltà visiva con poca perdita di qualità.
2. Le immagini hanno dimensioni non specificate
Ridimensionare le immagini in modo appropriato è importante per evitare che le immagini del sito Web richiedano troppo tempo per essere caricate. Non lasciare che il browser ridimensioni le immagini al posto tuo, ciò gli darebbe più dati da caricare. In altre parole, il browser caricherà comunque l'intera immagine. Se hai un'immagine di 2000 x 2000 pixel, ma l'hai ridotta a 200 x 200 pixel, il tuo browser dovrà caricare dieci volte più del necessario.
3. Le immagini non sono ottimizzate in base al dispositivo
Per evitare che le immagini vengano caricate lentamente, la tua pagina non dovrebbe mai eseguire il rendering di immagini più grandi della versione visualizzata sullo schermo dell'utente. In parole semplici, qualsiasi cosa più grande del dispositivo si traduce in byte sprecati e rallenta la tua pagina.
4. Il browser inizia a caricare le immagini tutte in una volta
Per impostazione predefinita, il tuo browser tenta di caricare tutto contemporaneamente. Se non dai la priorità alle immagini che devono essere caricate prima, il browser sarà impegnato a renderle tutte in una volta. Concentrati invece sulle immagini più importanti che devono essere caricate nel viewport del visitatore.
5. Utilizzi formati pesanti
La dimensione delle tue immagini è solo una parte del problema. I tipi di file che usi possono anche occupare spazio prezioso. Stai usando un formato come .TIFF o BMP? In tal caso, ricorda che TIFF è un formato non compresso che rende un'immagine più dettagliata e contiene più dati... Ciò creerà file più grandi e finirà per occupare molto spazio di archiviazione. Se non stai usando .TIFF ma JPEG e PNG, dovresti sapere che potresti usare formati ancora più leggeri, come scoprirai nella prossima sezione. Una semplice conversione può dare una piccola spinta alla tua immagine!
6. La tua cache non memorizza le immagini
Il vantaggio principale della memorizzazione nella cache di un'immagine è migliorare le prestazioni del tuo sito WordPress. L'utente deve visualizzare le immagini oi file Javascript e CSS direttamente dal proprio sistema invece di attendere che vengano scaricati tramite una connessione di rete. In altre parole, le tue immagini dovrebbero essere memorizzate nella cache in una cartella locale temporanea per evitare ping non necessari al database.
Come correggere le immagini che si caricano lentamente sul tuo sito
Le immagini sono fondamentali per la strategia dei contenuti, ma non vogliamo che impieghino troppo tempo per caricarsi. La chiave è usarli correttamente per evitare di rallentare il tuo sito WordPress. Vediamo le sei tecniche che puoi utilizzare per migliorare il caricamento delle immagini sul tuo sito WordPress.
1. Ridimensiona e comprimi le immagini
Se vuoi velocizzare le tue immagini, dovresti sempre ottimizzare le tue foto ridimensionandole e comprimendole. La compressione con perdita e senza perdita di dati sono due metodi comunemente utilizzati per ottimizzare il tuo sito Web per tempi di caricamento più rapidi, accelerando in definitiva il caricamento della pagina. Queste due tattiche di alto livello sono ben spiegate nella nostra guida su come ridurre le dimensioni dell'immagine senza perdere qualità.
- Lossy = un filtro che elimina alcuni dati. La qualità dell'immagine è influenzata.
- Lossless = un filtro che comprime i dati senza intaccare la qualità dell'immagine.
Con i plugin giusti, puoi fare in modo che WordPress esegua automaticamente alcune delle formattazioni delle tue immagini per te.
Il problema: le immagini sono troppo grandi (e troppe).
La soluzione: plug-in di ottimizzazione delle immagini che puoi utilizzare per velocizzare il caricamento delle tue immagini:
- Immagina
- Ottimizzatore di immagini Ewww
- Optimole (ottimizzazione dell'immagine e carico pigro di Optimole)
- Ottimizzatore di immagini ShortPixel
- reSmush.it
- Comprimi immagini JPEG e PNG
2. Imposta le dimensioni dell'immagine
Per correggere un caricamento lento dell'immagine sul tuo sito web, ricorda di impostare le dimensioni dell'immagine corrette. Imposta la larghezza e l'altezza per tutte le immagini per salvare i dati e migliorare il tempo di caricamento della pagina. Come funziona? L'aggiunta di attributi di larghezza e altezza al markup <img> indicherà al browser di risparmiare spazio per l'immagine. Se non lo fai, questo creerà uno spostamento del contenuto e il tuo punteggio di spostamento cumulativo del layout ne risentirà. Di conseguenza, Lighthouse darà al tuo Core Web Vital un punteggio piuttosto negativo, danneggiando SEO e prestazioni.
Vediamo un esempio di seguito per comprendere meglio l'impatto dello spostamento dell'immagine sull'esperienza dell'utente.
- Il testo si sposterà se le dimensioni dell'immagine non vengono fornite al browser.
2. Il testo non si sposterà (CLS non interessato) se le dimensioni dell'immagine sono fornite in modo da poter allocare lo spazio appropriato.
Il problema: le immagini hanno dimensioni non specificate.
La soluzione: aggiungere le dimensioni e gli attributi dell'immagine mancanti utilizzando WP Rocket. Questo è un potente plugin che eseguirà anche la memorizzazione nella cache, l'ottimizzazione del codice, il caricamento lento e molto altro per aumentare la velocità del tuo sito WordPress.
3. Offri immagini ottimizzate per ogni dispositivo
"Immagini reattive" è la strategia utilizzata per offrire immagini di dimensioni adeguate in base al dispositivo (tablet, mobile e desktop). In altre parole, crei più versioni di ogni immagine e definisci quale usare nel tuo codice usando media query, dimensioni viewport, ecc.
Web.dev afferma anche che "la pubblicazione di immagini di dimensioni desktop su dispositivi mobili può utilizzare da 2 a 4 volte più dati del necessario".
Il problema: le immagini non sono ottimizzate in base al dispositivo.
La soluzione:
- Usa un generatore di pagine WordPress per aiutarti.
- Utilizzare un CDN di immagini per fornire immagini della giusta dimensione in base al dispositivo.
- Fallo manualmente usando CSS e usa Lighthouse per identificare immagini di dimensioni errate. Esegui il controllo delle prestazioni andando su Lighthouse > Opzioni > Prestazioni .
4. Carica pigramente le tue immagini
Le tue immagini di WordPress si caricano lentamente? È ora di visualizzare le immagini solo quando i visitatori le vedono. Questa tecnica per risparmiare larghezza di banda e dare priorità al contenuto da visualizzare è chiamata "Caricamento pigro". Dovresti implementare il caricamento lento sulle tue immagini below the fold , quelle che non vengono ancora visualizzate dal tuo visitatore.
Il problema: il browser inizia a caricare le immagini tutte in una volta.
La soluzione: implementare il caricamento lento utilizzando un plugin per WordPress.
- Lazy Loading di WP Rocket è un plugin gratuito che implementa lo script di lazy load sulle immagini.
- Dai un'occhiata a questa interessante guida se vuoi confrontare i migliori plugin di lazy load disponibili sul mercato.
- Implementazione manuale del caricamento lento: segui questa guida di CodeInWP che spiega i due modi per implementare manualmente il caricamento lento (non così facile da seguire per i principianti, però).
5. Converti le tue immagini in WebP
WebP fornisce una compressione lossless e lossy alle immagini sul Web, che consentirà loro di caricarsi più velocemente. Secondo Google, le immagini senza perdita di dati WebP sono di dimensioni inferiori del 26% rispetto ai PNG. E le immagini con perdita di dati WebP sono del 25-34% più piccole delle immagini JPEG con qualità equivalente.
Il problema: usi formati pesanti.
La soluzione: converti le tue immagini in JPG, PNG o WebP utilizzando un plugin per WordPress.
- Imagify: converte automaticamente le tue immagini in formato WebP nella dashboard di WordPress.
- Convertitore WebP per media: converte le tue immagini in WebP.
6. Utilizzare un plug-in di memorizzazione nella cache
I plug-in di memorizzazione nella cache indicano al server di archiviare i file su disco o RAM. Di conseguenza, le tue pagine web (e le tue immagini) si caricano più velocemente, poiché vengono "salvate" direttamente dalla cache. Ciò include la memorizzazione nella cache delle pagine e del browser, in cui l'idea è di archiviare le immagini a cui si accede di frequente nella memoria locale del dispositivo di navigazione.
Il problema: la tua cache non memorizza le immagini.
La soluzione: utilizzare un plug-in di WordPress per memorizzare nella cache le immagini.
- WP Rocket applica automaticamente l'80% delle migliori pratiche per le prestazioni web, inclusi la memorizzazione nella cache e il caricamento lento delle immagini, la pulizia del codice che consente la compressione Gzip e molto altro.
Ora che abbiamo visto le tecniche che puoi applicare per offrire immagini migliori, vediamo come un plugin come Imagify può aiutare.
Come far caricare le tue immagini più velocemente con Imagify
A mio parere, un buon plugin per l'ottimizzazione delle immagini dovrebbe ridurre le dimensioni dell'immagine mantenendo la qualità visiva. Deve essere facile da usare e comprimere le immagini del mio sito e di quelle future (al volo). Imagify corrisponde alla mia descrizione e ti mostrerò come Imagify mi ha aiutato a velocizzare il mio sito.
Pronto?
È ora di dire addio alle immagini del sito Web che richiedono troppo tempo per essere caricate.
Per questo case study, utilizziamo GTmetrix e misureremo i seguenti KPI:
- Grado di prestazione complessivo
- Spostamento cumulativo del layout (spostamento improvviso del contenuto)
- Tempo a pieno carico
- Dimensione pagina e % della dimensione occupata dalle immagini
- Numero di richieste HTTP e % della dimensione occupata dalle immagini
- Dimensioni del file immagine prima e dopo l'ottimizzazione con Imagify
Iniziamo l'audit utilizzando un sito di prova realizzato con Divi contenente 10 immagini.
Scenario 1: il mio sito web realizzato con Divi – No Imagify
Mettiamo semplicemente l'URL della nostra pagina in GTmetrix e diamo un'occhiata alle diverse sezioni. I risultati non sono male, ma uno dei miei Core Web Vital è in arancione e ho ottenuto un punteggio B.
| KPI | Punteggi (senza Imagify) |
| Grado di prestazione complessivo | B – 87% |
| CLS | 0,17s (in arancione) |
| Tempo a pieno carico | 2.6s |
| Dimensione pagina – % della dimensione occupata dalle immagini | Totale: 2,44 MB – Immagini: 1,31 MB (54%) |
| Numero di richieste HTTP – % della dimensione occupata dalle immagini | Totale: 75 – Immagini: 41 (55%) |
 | Dimensione JPG: 160 KB 117 KB 27 KB 103 KB 91 KB 195 KB 74 KB 75 KB 164 KB 13 KB |
Inoltre, le immagini occupano 1,31 MB su 2,44 MB della mia dimensione totale della pagina , il 54% della dimensione totale della pagina. Su 75 richieste, 41 sono fatte dalle immagini, costituendo il 55% delle richieste.
Ora è il momento di vedere come vengono caricate le mie immagini, grazie a Imagify.
Scenario 2: controllo dello stesso sito Web e delle stesse immagini – Con Imagify
Ottimizziamo le mie immagini usando Imagify. Per farlo, è sufficiente attivare il plugin e avviare l'“ottimizzazione in blocco” da Impostazioni → Imagify .
Lì puoi decidere di ottimizzare le tue immagini su tre livelli, ovvero Normale, Aggressivo e Ultra. Ho scelto la modalità Ultra per mostrarti il miglior livello di ottimizzazione.
Nota interessante : se non vuoi ottimizzare tutte le tue immagini contemporaneamente, puoi selezionarle dalla libreria, proprio come ho fatto per il mio negozio di fiori:
In media, Imagify ha salvato il 50% delle dimensioni del mio file e le ha convertite tutte nel formato WebP:
Infine, è il momento di confrontare le prestazioni dei miei KPI prima e dopo l'attivazione di Imagify . I risultati sono molto incoraggianti!
| KPI | Punteggi (senza Imagify) | Punteggi (con Imagify) |
| Grado di prestazione complessivo | B – 87% | A – 91 % |
| CLS | 0,17s (in arancione) | 0.1s (ora in verde) |
| Tempo a pieno carico | 2.6s | 2.6s |
| Dimensione pagina – % della dimensione occupata dalle immagini | Totale: 2,44 MB – Immagini: 1,31 MB (54%) | Totale: 1,78 MB -Immagini: 658 KB (36%) |
| Numero di richieste HTTP – % della dimensione occupata dalle immagini | Totale: 75 – Immagini: 41 (55%) | Totale: 72 – Immagini: 38 (52%) |
| Dimensione JPG: 160 KB 117 KB 27 KB 103 KB 91 KB 195 KB 74 KB 75 KB 164 KB 13 KB | Dimensioni JPG (risparmio del -50%): 82 KB 60 KB 13 KB 56 KB 42 KB 98 KB 37 KB 41 KB 90 KB 6 KB |
Possiamo vedere che Imagify ha reso la mia pagina più leggera comprimendo le immagini, ridimensionandole e convertendole nel formato WebP . Abbiamo anche ottenuto una A su GTmetrix!
Inoltre, abbiamo notato che lo spazio occupato dalle immagini era inferiore quando si utilizza Imagify. E, ultimo ma non meno importante, il mio sito web ha ancora un bell'aspetto e non ho immagini sfocate.
Avvolgendo
Non è sempre facile identificare cosa sta causando un rallentamento della velocità di caricamento della pagina di un sito web. Ci sono molti fattori responsabili come immagini non ottimizzate, un numero elevato di richieste HTTP, codici voluminosi e problemi con JavaScript, ad esempio. Potrebbe valere la pena dedicare del tempo a capire cosa sta succedendo perché se non risolvi questo problema abbastanza presto, potrebbe portare a una perdita di entrate.
Nella nostra verifica, abbiamo salvato fino al 50% della dimensione del file in un solo clic , utilizzando Imagify:
L'ottimizzazione delle immagini dovrebbe essere in cima alla tua lista e guarda quanto Imagify ti rende conveniente! Prova a ottimizzare le immagini sul tuo sito WordPress utilizzando la prova gratuita di Imagify e dicci quanti dati hai salvato.