TechBlogSD - Tutto per WordPress e sviluppo WEB
Istruzioni WEB e WordPress, notizie, recensioni di temi e plugin

7 modi per ottimizzare le immagini in WordPress per migliorare la velocità di caricamento della pagina

21

Le immagini sono una parte inevitabile di qualsiasi sito web. Come dice la citazione popolare: "Un’immagine vale più di mille parole". Le immagini sono molto utili per esprimere il pensiero, specialmente per tutorial, fotografia e siti di istruzioni. Con i social media in fermento, è necessario che tu abbia un’immagine in primo piano per ogni singolo post per condividerlo in modo attraente Ora la domanda potrebbe saltarti fuori dalla mente: sto usando molte immagini sul mio sito WordPress e quale ottimizzazione dovrei fare?

La semplice risposta è che ogni immagine sulla tua pagina influisce sulla velocità di caricamento che a sua volta ha un impatto diretto sull’esperienza dell’utente. A nessuno piacciono i siti a caricamento lento e quindi è necessario trattare i problemi di ottimizzazione delle immagini con la massima priorità.

Come faccio a conoscere i problemi di ottimizzazione delle immagini?

È molto semplice e ci sono molti strumenti gratuiti per controllare la velocità di caricamento della pagina. Google ha uno strumento PageSpeed ​​Insights dedicato per misurare i problemi sulla pagina che influiscono sulla velocità di caricamento. Inserisci l’URL della tua pagina sullo strumento per vedere i risultati come di seguito:

7 modi per ottimizzare le immagini in WordPress per migliorare la velocità di caricamento della pagina

Ottimizza le immagini in Google PageSpeed ​​Insights

Dovresti vedere "Ottimizza immagini" come un problema di massima priorità quando le tue immagini non sono compresse. La compressione delle immagini è uno dei problemi principali che vedrai sullo strumento Google PageSpeed ​​Insights. Ma ci sono molti altri problemi che puoi riscontrare quando usi strumenti come pingdom e GTmetrix come di seguito.

  • Parallelizza i download tra i nomi host
  • Offri contenuto statico da un dominio senza cookie
  • Specifica le dimensioni dell’immagine
  • Servi immagini ridimensionate

Tutti questi problemi possono essere risolti facilmente con i plugin e seguendo semplici linee guida.

Come ottimizzare le immagini in WordPress per migliorare la velocità di caricamento della pagina?

Ecco il riepilogo delle tecniche di ottimizzazione per migliorare la velocità di caricamento della pagina:

  1. Riduci il numero di immagini sul server
  2. Usa il plugin per comprimere le immagini per salvare le dimensioni
  3. Servire immagini dal sottodominio
  4. Usa la dimensione dell’immagine corretta
  5. Evita il ridimensionamento all’interno di HTML/CSS
  6. Usa le icone vettoriali ove possibile
  7. Seleziona il formato immagine appropriato

1 Riduci il numero di immagini

Ogni singola immagine su una pagina invierà una richiesta HTTP separata al tuo server e richiederà tempo per il download. Il proverbio "Un’immagine vale più di mille parole" può sembrare buono ma in realtà usa le immagini solo quando richiesto. Meno immagini significano meno richieste del server e pagina di caricamento veloce.

D’altra parte, le immagini occupano spazio sul tuo server e aumentano l’hosting dell’host. Soprattutto WordPress genera un numero enorme di miniature a seconda del tema e dei plugin installati. Consulta l’articolo su come ridurre le miniature sul sito WordPress.

2 Comprimi le immagini per salvare le dimensioni

Il browser deve scaricare le immagini dal tuo server quando la pagina viene caricata. La riduzione di ogni KB di dimensione farà affidamento sulle prestazioni; quindi assicurati di servire le immagini dopo un’adeguata compressione. Ad esempio, le immagini hanno metadati come posizione, dettagli della fotocamera, ecc. A meno che non sia necessario esplicitamente, eliminare quei dati utilizzando i plug-in per ridurre le dimensioni delle immagini.

Le immagini possono essere compresse in due modi: lossy e lossless. In parole semplici, la compressione con perdita è un modo irreversibile e rimuove alcuni pixel di dati dall’immagine. E la compressione senza perdita di dati è un modo reversibile che comprime l’immagine senza rimuovere i pixel. In base al formato dell’immagine (PNG / JPEG / GIF), alla qualità e alla compressione richiesta, potresti dover provare con diversi plugin per vedere cosa funziona per te.

Se hai poche pagine web o poche immagini da ottimizzare, ti consigliamo di farlo tramite strumenti di compressione delle immagini. Di seguito sono riportati alcuni degli strumenti di compressione delle immagini che è possibile utilizzare:

  • gifsicle – per creare e ottimizzare le immagini GIF
  • optipng – usa la compressione senza perdita di dati per ridurre la dimensione dell’immagine PNG
  • pngquant: usa la compressione con perdita di dati per ridurre le dimensioni dell’immagine PNG
  • jpegtran – comprime immagini JPEG

WordPress ha molti plugin di compressione delle immagini gratuiti e premium. Due di questi plugin popolari sono: EWWW Image Optimizer e WP-Smushit. EWWW Image Optimizer ha molte impostazioni e esegue la compressione sul tuo server di hosting. Sebbene WP-Smushit sia semplice e diretto, comprime le immagini su un server esterno. Una volta installati e attivati, questi plugin aiuteranno a comprimere automaticamente le immagini quando vengono caricate. Ecco il tutorial completo su come utilizzare il plugin WP-Smushit.

7 modi per ottimizzare le immagini in WordPress per migliorare la velocità di caricamento della pagina

Plugin WordPress WP Smush

Ricorda che i plug-in di compressione delle immagini consumeranno elevate risorse del server. Non comprimere centinaia di immagini contemporaneamente, il che porterebbe alla violazione dei termini della tua società di hosting. Comprimi meno immagini con un intervallo sufficiente per evitare un carico elevato sul server.

3 Servire immagini dal sottodominio

Si consiglia di ospitare le immagini su un sottodominio separato. Questo aiuterà a caricare le immagini in parallelo al contenuto dal dominio principale. Il contenuto della tua pagina verrà caricato più velocemente poiché le immagini vengono caricate da un luogo diverso.

7 modi per ottimizzare le immagini in WordPress per migliorare la velocità di caricamento della pagina

Servire contenuti da server diversi

Dai un’occhiata al nostro articolo su come spostare la cartella delle immagini di WordPress nel sottodominio.

4 Usa dimensione immagine corretta

Prepara le immagini esattamente con le dimensioni con cui verranno visualizzate sul sito. Quando hai bisogno di un’immagine 600×350, non preparare la dimensione 1200×700. Il browser richiede molto tempo per scaricare file di immagine più grandi a causa delle dimensioni. Il plugin WP-Smushit ha anche un’opzione per impostare la dimensione massima per le immagini caricate. Ciò contribuirà a ridimensionare le immagini caricate al limite di dimensione massima e a ridurre le dimensioni dell’immagine.

5 Evita il ridimensionamento all’interno di HTML/CSS

Le persone usano HTML e CSS per ridimensionare l’immagine dopo che è stata scaricata nel browser. Questo aggiungerà solo un po’ più di tempo nel caricamento, poiché il browser ha bisogno di più tempo per rendere l’immagine alla dimensione richiesta.

Ad esempio, non è una buona pratica caricare un’immagine 90×90 pixel e cercare di ridurne le dimensioni con il codice HTML sottostante.

<img src="your image URL" height=45 width=45>

6 Usa icone vettoriali

Le immagini normali (chiamate immagini raster) sono disponibili in un formato diverso e non verranno visualizzati correttamente quando si esegue lo zoom a dimensioni maggiori. Il modo migliore è utilizzare le icone dei caratteri scalabili SVG come le icone fantastiche dei caratteri invece delle immagini. Ad esempio, le icone nel menu di navigazione dovrebbero utilizzare le icone dei caratteri SVG. L’uso di immagini per icone così piccole non solo distorcerà l’aspetto, ma aumenterà anche il tempo di caricamento della pagina. Di seguito è riportato un esempio di utilizzo dell’icona del carattere:

Sono un’icona di carattere, usami al posto dell’immagine.

Assicurati di abilitare la compressione GZIP sul server per ridurre le dimensioni del file delle immagini SVG e di altri contenuti.

7 Seleziona il formato immagine appropriato

Esistono tre formati di immagine universalmente supportati: GIF, PNG e JPEG. Ognuno ha i suoi pro e contro.

  • Usa GIF quando hai bisogno di animazione
  • PNG può essere utilizzato per immagini ad alta risoluzione e di alta qualità come le immagini fotografiche. Ma le immagini PNG saranno di dimensioni maggiori.
  • JPEG è più adatto per schermate normali e immagini Web con dimensioni dell’immagine inferiori e qualità inferiore (rispetto a PNG).

Scegli il formato immagine richiesto e comprimilo con i plugin prima di servire agli utenti.

Conclusione

Quando avvii un sito Web, ti consigliamo di provare con più combinazioni e verificare quale funziona per te. Se hai già un sito in esecuzione con un numero elevato di immagini, utilizza i plug-in per comprimere tutte le immagini esistenti. Utilizza lo strumento Google PageSpeed ​​Insight per verificare se il problema "Ottimizza immagini" è stato rimosso e il punteggio della velocità della pagina è migliorato. Seguendo tutte le tecniche di ottimizzazione sopra elencate contribuirai a migliorare drasticamente il punteggio di caricamento della pagina fino alla zona verde.

Fonte di registrazione: www.webnots.com
Lascia una risposta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More