Come ottimizzare le immagini di WordPress e rendere il tuo sito PIÙ VELOCE

Se vuoi offrire un'ottima esperienza utente ai tuoi visitatori, dovrai assicurarti che il tuo sito web si carichi più velocemente, in modo da non frustrarli. In effetti, la velocità del tuo sito web può creare o distruggere il tuo business online. DEVI ottimizzare le immagini di WordPress per rendere il tuo sito più veloce, perché le immagini sono solitamente la parte più pesante dei tuoi contenuti,

Walmart ha trovato un file 2% di aumento del tasso di conversione ogni volta che hanno migliorato la velocità di 1 secondo.

E Amazon ha riscontrato un aumento delle entrate dell'1% ogni 100 millisecondi di miglioramento della velocità del sito. Queste statistiche indicano che rendere veloce il tuo sito web è fondamentale per il tuo sito web. Un modo semplice per rendere più veloce il tuo sito Web è ottimizzare tutte le immagini sul tuo sito Web WordPress.

Contenuti[Mostra]
 

ottimizza le immagini di wordpress per migliorare i tassi di conversione

Se non hai ancora considerato la velocità del tuo sito Web WordPress come una componente fondamentale della tua attività, dovrai ricrederti e iniziare a prendere misure per migliorare la velocità del tuo sito Web WordPress.

Consiglia di leggere: Come ottenere un sito Web WordPress veloce - una guida completa [25 azioni]

Ci sono molti modi per rendere più veloce il tuo sito web. Alcuni di loro sono elencati di seguito.

  • Evita di utilizzare troppi plugin di WordPress
  • Usa i servizi CDN di WordPress
  • Ottimizza la consegna CSS
  • Ottimizza le immagini di WordPress

Le immagini che non sono state ottimizzate per il Web sono generalmente di grandi dimensioni. Il caricamento di queste immagini richiederà più tempo. È importante ottimizzare le immagini rendendole il più piccole possibile. Tuttavia, la maggior parte delle volte, il processo di ottimizzazione delle immagini per WordPress e il tuo sito Web è noioso o ostacola la produzione di contenuti.

In questo post, spiegheremo diversi modi per ottimizzare le tue immagini WordPress e quindi velocizzare il caricamento del tuo sito.

Comprimi le immagini o salvale per il web

È un gioco da ragazzi che le dimensioni della tua immagine possono influenzare il tempo di caricamento del tuo sito Web WordPress. Poiché le immagini ad alta risoluzione avranno un file di dimensioni maggiori, è sempre meglio farlo comprimere le immagini prima di caricare.

Ora potresti avere una domanda: cos'è la compressione delle immagini di WordPress e come può ridurre le dimensioni senza influire sulla qualità?

La compressione è il processo di riduzione drastica delle dimensioni dell'immagine rimuovendo algoritmicamente le informazioni sull'immagine che un occhio umano non può percepire. Questo è un modo molto efficace per ottimizzare le immagini di WordPress.

Sebbene la compressione delle immagini sia un metodo infallibile per ridurre le dimensioni dell'immagine, quando si tratta di comprimere file JPEG, a volte il processo perde il contenuto effettivo delle immagini durante il processo. Questo è l'unico aspetto negativo di questo approccio. Ricordati di controllare attentamente i risultati di post-compressione, per assicurarti di essere soddisfatto dei risultati della compressione.

WP Smush è un popolare plugin per WordPress che ti consente di ridurre facilmente le dimensioni del file immagine scansionando ogni immagine che carichi e rimuovendo le informazioni sui dati non necessarie. La versione gratuita di questo plugin ti consente di comprimere immagini fino a 1 MB di dimensione mentre, con la versione pro, puoi comprimere immagini fino a 32 MB.

È possibile scaricare WP Smush

wp smush per ottimizzare le immagini wordpress

Tieni inoltre presente che questo plug-in ti consente di ottimizzare tutte le immagini appena caricate sul tuo sito Web WordPress. Se desideri comprimere le immagini esistenti, puoi utilizzare il collegamento Bulk Smush.it nella scheda della libreria multimediale per ottimizzare le immagini WordPress esistenti.

Caricamento lento: ottimizza il tempo di caricamento delle immagini di WordPress

[AGGIORNARE: WordPress 5.4 ha il caricamento lento integrato nel core, quindi devi eseguire questa azione solo se la tua versione di WordPress è inferiore a questa versione]

Sappiamo tutti che "Un'immagine vale più di mille parole".

Ma l'uso di troppe immagini su una singola pagina può rallentare il caricamento del tuo sito web.

Un modo semplice per migliorare il tempo di caricamento è rimuovere le immagini non necessarie e conservare solo quelle che sono assolutamente necessarie. Tuttavia, non tutti vogliono ridurre il numero di immagini utilizzate su una pagina web, solo per velocizzare il caricamento della pagina.

Come si risolve questo problema?

Potresti averlo già notato: i siti Web che utilizzano molte immagini in ogni pagina risolvono questo problema facendo caricare l'immagine solo quando è visibile all'utente. Questa tattica non solo riduce il tempo di caricamento della pagina, ma risparmia anche la larghezza di banda del server. Questo si chiama caricamento lento. Poiché l'immagine è "pigra", viene fuori solo quando è necessario.

Se sei su WordPress, è più facile caricare l'immagine solo quando è visibile. Tutto quello che devi fare è installare un plug-in di caricamento lento. Ancora una volta questo è un ottimo modo per ottimizzare le immagini di WordPress per una maggiore velocità.

È possibile scaricare il Plugin di caricamento lento

Ottimizza le immagini di wordpress con il caricamento lento

Questo plug-in non necessita di alcuna configurazione aggiuntiva poiché funziona immediatamente al momento dell'installazione e dell'attivazione.

Usa il formato immagine ottimizzato e corretto

JPEG, PNG e GIF sono i formati di immagine più popolari.

Conoscere le differenze tra ciascun formato di immagine ti consente di utilizzare il formato giusto sul tuo sito Web, il che ti aiuta anche quando si tratta di ottimizzazione delle immagini.

Quale formato è migliore per le immagini ottimizzate del sito Web WordPress e quando dovresti usarlo? Di seguito sono riportati alcuni suggerimenti:

  • GIF: Usa GIF quando la tua immagine è troppo piccola e utilizza un numero relativamente inferiore di colori. Ad esempio, GIF è una buona scelta per clip art, elenchi puntati e grafici. D'altra parte, le immagini complesse con miglioramenti come le ombre esterne non potevano essere visualizzate correttamente utilizzando GIF.
  • JPEG / JPG: È adatto per immagini complesse con molte variazioni di colore o se contiene immagini fotografiche.
  • PNG: Il formato PNG è più adatto per immagini trasparenti.
  • WebP: questo è il formato migliore in questi giorni, ma la creazione di queste immagini richiede il supporto del server sul tuo sito web

Tieni presente che queste sono solo raccomandazioni generali. Come tutte le regole, ci sono delle eccezioni e alcune di queste regole devono essere violate.

Fai un uso efficace della cache del browser

Quando carichi immagini su una pagina web, assicurati di caricarle in una singola directory. Il caricamento delle immagini in una singola directory su una pagina Web aiuterà il browser a caricare facilmente quelle immagini utilizzando la cache del browser durante le visite ripetute.

Va bene se stai caricando immagini tramite l'uploader di immagini predefinito di WordPress. Ma ad esempio, se stai creando pagine di destinazione HTML su WordPress, è probabile che non utilizzerai l'uploader di immagini predefinito di WordPress. In questi casi, invece di caricare le immagini di una pagina web in directory diverse, assicurati di caricarle tutte in una singola directory.

Se vuoi saperne di più sulla memorizzazione nella cache del browser e su come sfruttarla, dai un'occhiata al nostro articolo dettagliato qui: Come sfruttare la cache del browser in WordPress con o senza plug-in [5 modi]

 

Usa la stessa immagine più volte

Un altro modo per utilizzare la cache del browser per ridurre la larghezza di banda dell'immagine è utilizzare le stesse immagini più volte in tutto il sito.

Ad esempio, quando utilizzi loghi o voci di menu da una pagina, assicurati di chiamare le stesse immagini in tutto il sito, in modo che gli utenti non debbano scaricarle più volte ma una volta, ei browser possono visualizzare le immagini dal browser cache.

Durante l'utilizzo di uno sfondo con texture, assicurati di utilizzare ripetutamente immagini più piccole invece di utilizzare un'unica immagine grande. Questo può anche aiutare a ridurre il tempo di caricamento.

Per impostazione predefinita, quando carichi immagini utilizzando l'uploader multimediale sulla dashboard di WordPress, queste vanno nella cartella a seconda di quando le carichi. Ciò significa che tutte le immagini caricate in un mese si troveranno in una singola directory.

Ad esempio, se carichi un'immagine nel gennaio 2021, si troverà in questa directory: wp-content / uploads / 2021/01.

Diamo un'occhiata ai vantaggi del caricamento tramite l'uploader multimediale e poi, ti diremo cosa dovresti considerare quando non stai caricando sul tuo caricatore multimediale per velocizzare il tuo sito web.

Media uploader rende il caricamento delle immagini più veloce: Il caricamento sarà più veloce se le immagini vengono memorizzate nella stessa cartella durante la navigazione in una pagina web. Quando le immagini vengono chiamate ripetutamente, il browser può recuperarle facilmente dalla cache del browser se si trovano in una singola cartella.

Spesso, tuttavia, i blogger di WordPress non utilizzano l'uploader multimediale predefinito, soprattutto quando si lavora su una pagina di destinazione personalizzata. Per semplicità, caricano le immagini in una directory separata.

In questi casi, assicurati di caricare tutte le immagini di quella pagina in una singola directory invece di caricarle in più directory. Questa tattica può migliorare il tempo di caricamento poiché la memorizzazione nella cache dei file sarà più facile durante le visite ripetute.

Usa CSS al posto delle immagini

Sai che puoi migliorare il tempo di caricamento non utilizzando alcuna immagine?

Ad esempio, è totalmente possibile generare determinate forme utilizzando semplici CSS invece di immagini come rettangoli arrotondati, gradienti, ombre esterne e immagini trasparenti. Detto questo, assicurati di tenere d'occhio il controllo della compatibilità del browser ogni volta che sostituisci un'immagine con CSS perché non tutti i browser sono in grado di supportare queste tecniche.

L'autore
Shahzad Saeed
Autore: Shahzad SaeedSito web: http://shahzadsaeed.com/
Shahzaad Saaed è stato presentato in un gran numero di siti Web di autorità, come esperto di WordPress. È specializzato in content marketing per aiutare le aziende a far crescere il proprio traffico.

Un'altra cosa... Sapevi che anche le persone che condividono cose utili come questo post sembrano FANTASTICHE? ;-)
Si per favore lasciare un utile commenta con i tuoi pensieri, quindi condividi questo articolo sui tuoi gruppi di Facebook che lo troverebbero utile e raccogliamo insieme i frutti. Grazie per la condivisione e per essere gentile!

Disclosure: Questa pagina può contenere collegamenti a siti esterni per prodotti che amiamo e consigliamo vivamente. Se acquisti prodotti che ti suggeriamo, potremmo guadagnare una commissione per segnalazione. Tali commissioni non influenzano le nostre raccomandazioni e non accettiamo pagamenti per recensioni positive.

Autore / i in primo piano su:  Inc Magazine Logo   Logo di Sitepoint   Logo CSS Tricks    logo webdesignerdepot   Logo WPMU DEV   e molti altri ...