Uno dei fattori che potrebbero rallentare il tuo sito web è l'utilizzo di foto di grandi dimensioni non ottimizzate per il web.
A volte, quando le persone cercano di pubblicare qualcosa velocemente, caricano foto direttamente dalla loro macchina fotografica, ad altissima risoluzione, immagini che pesano fino a 4-5 MB.
Un'immagine ottimizzata ha meno kilobyte senza alcuna perdita visibile di qualità e dovresti sempre ottimizzare le immagini senza perdere qualità prima o durante il caricamento sul tuo sito.
Non importa se il tuo sito è WordPress o un'altra piattaforma, puoi ottimizzare le immagini per il web e velocizzare il caricamento del tuo sito web.
Un vantaggio dell'utilizzo di WordPress è che disponi di plug-in in grado di ottimizzare le immagini mentre le carichi sul tuo sito e anche di ottimizzare in blocco le immagini esistenti.
Quindi, quali sono le migliori pratiche per quanto riguarda le foto?
Non perdere la qualità
Segui gli obiettivi del tuo sito web. Non ottimizzare alla cieca solo perché uno strumento ti ha dato un punteggio negativo. Gli strumenti non conoscono gli obiettivi del tuo sito.
Se avessi un blog di moda o un negozio, mostrerei bellissime immagini; Non mi interessa cosa mi hanno valutato YSlow o Pagespeed Insights.
Non rimanere bloccato su voti e punteggi, fai ciò che è meglio per te e i tuoi visitatori. È meglio spendere di più sulla CDN per offrire immagini più grandi e migliori, piuttosto che ottimizzare eccessivamente le immagini e avere un sito Web brutto.
Potrebbe costarti visitatori e denaro.
Non caricare immagini più grandi del necessario
Se la larghezza del tuo contenuto è 620 px, dovresti ridimensionare le immagini alla larghezza di 620 px prima di caricarle sul tuo sito web.
Se desideri che i visitatori vedano un'immagine più grande quando fanno clic su di essa, puoi utilizzare una larghezza di 1024 px. Imposta una delle miniature di WordPress su una larghezza di 620 px e utilizza quella miniatura sulla tua pagina e collegala all'immagine più grande.
Probabilmente non hai bisogno di immagini superiori a 1024px (che dovrebbero essere sufficienti per la maggior parte dei blog), ma cosa succede se ne hai bisogno?
In tal caso, potresti prendere in considerazione il caricamento di immagini a risoluzioni maggiori e utilizzare una CDN.
Entreremo più nel dettaglio sulla CDN tra un minuto.
Ottimizza le immagini prima di caricarle
Puoi ottimizzare le tue immagini sul tuo computer con Photoshop. Alcune persone consigliano di rendere la tua immagine un po' più nitida con Smart Sharpen, Maschera di contrasto, Filtro passa alto o qualunque strumento tu voglia; Photoshop ha più opzioni.
Non ho visto molta differenza (in KB) dopo la nitidezza, ma non sono un esperto di Photoshop.
Ridimensiona la foto alla risoluzione necessaria sul tuo sito web, utilizza Salva per il Web, scegli JPG, Qualità tra 60-80%, seleziona Progressivo quindi Salva.
Ti consiglio di utilizzare JPG a meno che tu non abbia bisogno di trasparenza e non sia necessario utilizzare PNG.
Se non hai Photoshop puoi utilizzare questi strumenti per l'ottimizzazione:
- Riot (Windows)
- Ottimizzazione immagine (Mac)
- Jpegmini (online, Mac e Windows)
- Kraken (in linea)
- Compressor.io (on-line)
Io stesso uso Jpegmini; Posso ancora eliminare un altro 5-10% anche dopo aver prima ottimizzato con Photoshop.
Oppure ottimizza durante il caricamento
Non credo che esista un modo migliore per ottimizzare le immagini, se non vuoi perdere tempo a ottimizzare le tue foto sul tuo computer prima di caricarle, puoi scegliere di lasciare che un plugin WordPress faccia tutto il lavoro per te.
Esistono molti plugin WordPress che puoi utilizzare:
- WP Smush – Ottimizzazione delle immagini
- Ottimizzatore di immagini ShortPixel
- Kraken.io Ottimizzatore di immagini
- Optimus: ottimizzatore di immagini per WordPress
- EWWW Image Optimizer Cloud
- Immagina l'ottimizzatore di immagini
Con questi plugin puoi ottimizzare le immagini durante il caricamento e anche ottimizzare quelle che hai già caricato.
Non li ho usati tutti, solo WP Smush e ShortPixel, e ho trovato ShortPixel eccellente. Può togliere qualche KB anche per immagini precedentemente ottimizzate con Photoshop e Jpegmini.
Un altro plugin utile è Imsanity .
Se disponi di un sito con più autori, devi controllare quali immagini caricano le persone. Imposta larghezza, altezza e qualità massime. Quando un utente carica un'immagine più grande, il plug-in la ridimensionerà automaticamente alla dimensione configurata.
Anche WP Smush Pro fa lo stesso.
Visualizzazione delle immagini
Ora che hai ottimizzato le immagini puoi anche migliorare il modo in cui le presenti sul tuo sito web.
Se hai molte foto su una pagina, come ad esempio su un blog di moda, puoi sfruttare il caricamento lento.
Ciò significa che le tue immagini verranno caricate solo quando saranno visibili, mentre il visitatore scorre verso il basso.
A questo scopo puoi utilizzare uno dei seguenti plugin WordPress:
- Carico pigro
- Bocchino carico pigro
- Carico pigro del razzo
- Caricamento lento dell'immagine
- Caricamento lento di WPParse
Non posso dirti quale plugin sia migliore. Devi testare perché potrebbero esserci incompatibilità con il tuo tema. Ad esempio, il caricamento lento non funziona per le immagini in primo piano se disponi di un tema Genesis Framework.
Inoltre, mentre stavo testando il caricamento lento, sembrava strano sui dispositivi mobili. C'erano spazi vuoti al posto delle foto perché le immagini non si caricavano così velocemente come nella visualizzazione desktop.
Un'altra cosa che puoi fare per accelerare i tempi di caricamento è fornire immagini da un sottodominio, come images.domain.com.
Devi creare un sottodominio da cPanel o qualunque pannello di controllo offra la tua società di hosting e quindi configurare WordPress per caricare contenuti multimediali da quel sottodominio utilizzando il WP Original Media Path .
Posso scrivere un post dettagliato sul blog per le persone che vogliono farlo (se qualcuno lo richiede), ma il mio consiglio è di utilizzare invece un CDN. È una soluzione molto più semplice.
Utilizza una rete CDN
Cloudflare è semplicissimo e gratuito. Basta cambiare i server dei nomi di dominio in Cloudflare e attivarli (selezionare la nuvola arancione per le voci DNS), e il gioco è fatto. I tuoi file statici (immagini, CSS, JS) verranno caricati dal CDN Cloudflare.
Esistono altre società CDN che puoi utilizzare, elencate di seguito. Ma penso che Cloudflare sia il più semplice da implementare:
Pulisci te stesso
Ogni volta che cambi tema lasci dietro di te una scia di miniature inutilizzate e voci di database relative a quelle immagini.
Quando cambi tema, puoi utilizzare il AJAX Thumbnail Rebuild per ricostruire le miniature per adattarle al nuovo tema.
Le vecchie miniature possono essere eliminate dal server utilizzando uno dei seguenti plugin:
Raccomando Thumbnail Cleaner perché è veloce. Ma rimuove tutte le tue miniature, non solo quelle inutilizzate. Dopo l'eliminazione, devi utilizzare il AJAX Thumbnail Rebuild per ricostruire le miniature di cui hai bisogno.
Le miniature inutilizzate non influiscono sulle prestazioni del tuo sito web. Occupano semplicemente spazio sul tuo server. Tuttavia, ci sono voci del database relative a tali miniature ed è buona norma mantenere il database il più pulito possibile.
Questo è ciò che faremo nel passaggio successivo: ripulire il database WordPress.
Lascia un commento