Come velocizzare il caricamento delle immagini sul tuo sito WordPress

04.06.2020
WordPress 'Come velocizzare il caricamento delle immagini sul tuo sito WordPress
0 10 мин.

Quindi vuoi che le tue immagini vengano caricate più velocemente?


Beh, non mi diletterò diligentemente. Tuffiamoci nelle cose buone!

Esistono tre modi per velocizzare il caricamento delle immagini in WordPress:

  • Ridimensiona
  • Comprimere
  • Carico pigro

In questo post, spiegherò come ognuna di queste tecniche funziona e perché accelereranno il caricamento del tuo sito. Ti mostrerò anche come implementare ogni tattica con entrambe le soluzioni manuali e i consigli sui plugin.

Questa prima tecnica è estremamente semplice ma spesso trascurata dai neofiti di WordPress.

Come ottimizzare le immagini in WordPress

Ridimensiona le tue immagini

Il modo più semplice per velocizzare il caricamento delle immagini è ridimensionarle. Lasciatemi spiegare.

Cosa sta ridimensionando?

Quando dico “ridimensiona” intendo cambiare le dimensioni di un’immagine e, in questo caso, vuoi ridurre le dimensioni di immagini troppo grandi.

Ad esempio, i blogger a volte scattano fotografie sui loro telefoni o sulla fotocamera digitale e le caricano sui loro blog. Le copie inedite delle foto potrebbero avere una larghezza di 5.000 pixel. Ora pensa a questo …

La larghezza della sezione post sul tuo sito non è probabilmente più ampia di 800 px. Il testo che stai leggendo in questo momento si estende su circa 700 px in tutta la pagina, quindi immagina di aggiungere un’immagine larga 5.000 px qui. Sarebbe molto più grande di quanto deve essere e mentre sarebbe ridimensionato per adattarsi alla pagina, il file di immagine caricato è ancora enorme ed estremamente dispendioso. E questo perché …

Le immagini con dimensioni maggiori hanno anche file di dimensioni maggiori.

Quando si tratta di prestazioni e di rendere più veloce il caricamento delle immagini, ridurre le dimensioni dell’immagine è un ottimo modo per ridurre drasticamente le dimensioni del file e questo rende il caricamento dell’immagine più veloce.

Torniamo al mio esempio e supponiamo che l’immagine sia larga e alta 5.000 px. Se lo riducessi da 5.000 px a soli 700 px, l’immagine userebbe effettivamente il 99% di pixel in meno. In altre parole, la dimensione del file diminuirebbe di circa il 99%. Se l’immagine fosse 5 MB, finirebbe per solo 50 kb e si caricerebbe più velocemente del 99% sul tuo sito.

Ridimensiona le immagini

Se non intendi ridimensionare attentamente le tue immagini, ci sono quasi sicuramente dei guadagni da fare.

Ci sono alcuni modi in cui puoi ridimensionare le tue immagini per adattarle perfettamente al sito.

Ridimensiona manualmente le tue immagini

Prima di caricare una nuova immagine sul tuo sito, ridimensionala manualmente utilizzando gli strumenti di modifica delle immagini integrati sul tuo computer.

Se hai un’immagine estremamente grande come nel mio esempio, questo farà immediatamente una grande differenza. Dopo aver ridimensionato l’immagine, è possibile caricarla nel Catalogo multimediale.

Anche se hai intenzione di utilizzare l’immagine in una lightbox o in un dispositivo di scorrimento, di solito non vi è alcun motivo per essere maggiore di 2.000 px. Se l’immagine si troverà in un’area di contenuto di un post o di una pagina, probabilmente puoi fare bene con l’immagine con una larghezza di 800 px.

Questo metodo di ridimensionamento delle immagini funziona correttamente, ma non aiuta con le immagini già caricate sul tuo sito. Una tecnica semplice per le immagini esistenti è semplicemente scegliere una dimensione diversa.

Usa taglie più piccole

Quando carichi un’immagine nel tuo Catalogo multimediale, WordPress crea fino a 3 versioni aggiuntive: Miniatura, Media e Grande.

Se visiti la tua pagina delle impostazioni multimediali, vedrai che puoi scegliere quelle dimensioni qui:

Impostazioni multimediali di WordPress

Mentre puoi modificare le impostazioni, la dimensione predefinita predefinita è 1024 px che è abbastanza grande da utilizzare per i post senza essere troppo dispendiosa. Puoi utilizzare questa dimensione per tutte le immagini che includi nei tuoi post.

Per cambiare la dimensione di un’immagine che hai aggiunto a un post, fai clic su di esso nell’editor e vedrai il menu a discesa Dimensione immagine nella barra laterale destra.

Ridimensionamento dell'immagine di WordPress

Seleziona la dimensione “Grande” e aggiorna il post. Se hai immagini di grandi dimensioni, questa tecnica ti consentirà di servire rapidamente una dimensione più appropriata che si caricherà più velocemente senza dover ricaricare e sostituire l’originale.

Detto questo, questo può essere terribilmente noioso se hai dozzine di post con dozzine di immagini. È disponibile un metodo ancora più rapido ed efficace.

Ridimensionamento automatico con un plugin

Invece di ridimensionare le immagini tu stesso, puoi lasciare che un plugin lo faccia automaticamente per te. Quando si tratta di ridimensionamento automatico delle immagini, niente è meglio di Optimole collegare.

Optimole Image Optimizer

Non funziona come ti aspetteresti.

Invece di modificare le immagini nella Libreria multimediale, Optimole conserva le proprie copie delle immagini e le serve da una CDN ad alte prestazioni. In questo modo, gli originali non vengono mai modificati in alcun modo.

Inoltre, non è necessario assegnare a Optimole una sola dimensione da utilizzare per le immagini. Piuttosto, ottiene le dimensioni dello schermo del visitatore e genera al volo una versione di dimensioni ottimali di ogni immagine. Ciò significa che qualcuno su un dispositivo mobile potrebbe caricare una versione di 400 px di un’immagine mentre un altro visitatore su un laptop ottiene una versione di 700 px di quella stessa immagine.

Questo metodo di ridimensionamento è molto più semplice da implementare e più efficace per i dispositivi mobili, il che è particolarmente importante perché i visitatori mobili tendono spesso ad avere connessioni più lente.

Se vuoi imparare come usare Optimole, puoi seguire il mio video completo:

Ho consigliato di ridimensionare prima perché se lo fai manualmente o lo automatizzi con un plugin, è semplice e può offrire enormi guadagni.

Se le tue immagini sono già adeguatamente dimensionate per il tuo sito, puoi ancora migliorare le prestazioni del tuo sito molto di più con la compressione.

Comprimi le tue immagini

La compressione è un modo per ridurre la dimensione del file di un’immagine senza modificarne le dimensioni.

Sono disponibili due tipi di compressione delle immagini.

Il primo tipo di compressione dell’immagine è chiamato compressione “lossless”.

Compressione senza perdita

Con un’ottimizzazione senza perdita di dati, l’immagine stessa non viene in realtà modificata. Piuttosto, questa tecnica rimuove tutti i metadati memorizzati nel file di immagine. Ad esempio, le immagini spesso memorizzano il nome del dispositivo utilizzato per scattare l’immagine, la data in cui è stata scattata la foto e talvolta anche le coordinate GPS dello scatto.

Poiché questi dati sono in genere piuttosto limitati, l’ottimizzazione senza perdita di dati potrebbe ridurre le dimensioni dell’immagine solo dell’1-5%, ma non c’è davvero motivo di non utilizzarlo perché non ha alcun impatto sulla qualità dell’immagine.

I guadagni reali derivano dall’ottimizzazione con perdite.

Compressione in perdita

Come prevedibile, la compressione con perdita di dati ottimizza l’immagine stessa e determina un degrado della qualità. Ma ecco la cosa …

Al giorno d’oggi gli algoritmi di compressione sono così buoni che puoi spesso ridurre le dimensioni del file dell’immagine del 50-70% senza alcuna differenza evidente. A meno che tu non sia un fotografo professionista e non abbia bisogno che le tue immagini siano perfettamente nitide su monitor 4K, non noterai nemmeno la perdita di qualità.

Come comprimere le tue immagini

Puoi comprimere manualmente le tue immagini con uno strumento simile TinyPNG prima di caricarli o utilizzare un plug-in per automatizzare le cose.

ShortPixel è un ottimo plug-in per l’ottimizzazione delle immagini sul tuo sito. Può ottimizzarli immediatamente quando li carichi e ottimizzare in blocco tutte le immagini già presenti nella tua Libreria multimediale.

shortpixel

Ho consigliato Optimole per il ridimensionamento delle immagini e comprime anche le immagini in modo molto efficace. Ancora una volta, non ottimizza gli originali archiviati nella tua Libreria multimediale, ma comprime piuttosto le copie che serve ai tuoi visitatori.

Puoi trovare alcuni plug-in di ottimizzazione delle immagini qui.

Con le immagini ridimensionate e compresse, il tuo sito si caricherà molto più velocemente, ma c’è un’ultima ottimizzazione per le immagini che puoi realizzare.

Implementare il caricamento lento

Il caricamento lento è un modo davvero intelligente per ottimizzare ulteriormente le tue immagini.

Supponiamo che tu abbia un post sul blog con 12 immagini al suo interno. Quando qualcuno visita il tuo sito, non tutte queste immagini saranno immediatamente visibili sul loro schermo. Dovranno scorrere ulteriormente verso il basso affinché la maggior parte di loro si presenti. Quindi perché caricare tutti e 12 subito?

Con il caricamento lento, vengono caricate solo le immagini che appaiono sullo schermo. Invece di caricare 12 immagini, forse ne vengono caricate solo 2-3. Quindi, mentre il visitatore scorre la pagina verso il basso, le immagini rimanenti vengono caricate non appena vengono visualizzate sullo schermo. Ciò significa che il caricamento iniziale è molto più veloce e poiché la maggior parte dei visitatori non scorre fino in fondo alla pagina, molte immagini non vengono mai caricate, il che consente di risparmiare preziose risorse del server.

Questo video ha una visualizzazione che lo spiega meglio se vuoi un’immagine più chiara di come funziona il caricamento lento:

Ora che sei venduto sul concetto, ecco come puoi implementare il caricamento lento sul tuo sito.

Come utilizzare il caricamento lento

Ancora una volta, questa tecnica di ottimizzazione delle prestazioni può essere facilmente aggiunta a WordPress con un plugin.

Se stai cercando un’opzione gratuita, prova Optimole o a3 Carico pigro.

Con Optimole, il caricamento lento viene attivato automaticamente e il plug-in a3 è facile da configurare.

Inoltre, se non ti dispiace pagare, controlla WP Rocket. Ha una cache ad alte prestazioni e una varietà di altri strumenti di velocità.

Per attivare il caricamento lento con WP Rocket, devi solo premere questo interruttore:

WP Rocket Media

Non potrebbe essere più facile!

Goditi le tue immagini con caricamento più veloce

Per riassumere ciò che hai appena imparato …

Le immagini di grandi dimensioni caricate sul tuo sito sono estremamente lente. Solo una di queste immagini può bloccare il tuo sito.

La cosa più importante che puoi fare per velocizzare le tue immagini è ridimensionare le immagini troppo grandi in modo che abbiano le dimensioni appropriate per il tuo sito. Puoi farlo manualmente o automatizzarlo con Optimole.

Successivamente, gli algoritmi di compressione delle immagini hanno fatto molta strada e oggigiorno è possibile ridurre la dimensione del file di un’immagine del 50-70% senza influire in modo evidente sulla qualità. Questo non è un gioco da ragazzi. Utilizza ShortPixel o Optimole per comprimere ogni immagine sul tuo sito.

Infine, il caricamento lento è un ottimo modo per caricare selettivamente le immagini. Puoi utilizzare Optimole, a3 Lazy Load o WP Rocket per implementare immediatamente il caricamento lazy sul tuo sito.

Se non hai utilizzato nessuna di queste tecniche, il tuo sito si caricherà notevolmente più velocemente una volta implementato. Ti spazzerà via.

Hai domande sui concetti e sulle tecniche in questo post? Hai un altro consiglio da condividere? Pubblica nella sezione commenti qui sotto!

Potrebbe piacerti anche,

Come riparare un sito WordPress lento e un pannello di amministrazione (permanentemente)

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Понравилась статья?
    Комментарии (0)
    Комментариев нет, будьте первым кто его оставит

    Комментарии закрыты.

    Adblock
    detector