La maggior parte dei proprietari di siti WordPress sa quanto possa essere frustrante un sito web lento. Hai fatto le basi: compresso le immagini, impostato la cache e seguito i suggerimenti standard per la velocità, ma le tue pagine impiegano ancora troppo tempo a caricarsi.
Abbiamo scoperto che il problema è spesso qualcosa di semplice: i siti web scaricano troppi dati non necessari.
In termini tecnici, questo è chiamato 'payload di rete'. È semplicemente la quantità totale di dati richiesta per caricare una pagina. La dimensione totale del download include testo, immagini, video, CSS, JavaScript, font e altro codice.
In sostanza, meno dati devono essere scaricati, più velocemente si carica la pagina.
Quindi, se stai cercando di migliorare la velocità del tuo sito web, sei nel posto giusto!
In questa guida, ti mostreremo esattamente come ridurre le dimensioni di quei file ed evitare enormi payload di rete in WordPress.
Perché gli enormi payload di rete in WordPress sono un problema?
Hai mai utilizzato uno strumento come Google Lighthouse o PageSpeed Insights per verificare la velocità del tuo sito web?
A volte, potresti vedere un messaggio che dice: 'Evita enormi payload di rete'.
Essenzialmente, questo significa che la tua pagina web è troppo grande, come una valigia troppo pesante da trasportare. Una pagina web grande impiega più tempo a caricarsi, il che può essere frustrante per le persone che visitano il tuo sito.
Il payload di rete di una pagina web è la dimensione totale di tutti i pezzi che compongono quella pagina. Questo include:
- Testo: Le parole che leggi sulla pagina
- Immagini e Media: Immagini e video che vedi
- Codice: I file CSS e JavaScript che rendono la pagina bella e funzionante
- Font: Gli stili speciali per il tuo testo
- Inoltre, qualsiasi altro elemento personalizzato
Quindi, più grandi sono tutti questi elementi combinati, più tempo impiega la tua pagina web ad apparire sullo schermo.
Quanto è troppo grande? Ecco una guida semplice:
- Buono: Se tutte le parti della tua pagina web sommano a meno di 2 MB, è come portare una borsa leggera. È ben ottimizzata e si carica velocemente. Non devi preoccuparti troppo qui.
- Richiede miglioramenti: Se la tua pagina web è tra 2 MB e 4 MB, è come portare uno zaino che sta diventando un po' pesante. Potrebbero esserci delle cose che puoi alleggerire. Google ti darà alcuni suggerimenti su come renderla più veloce.
- Enorme: Se la tua pagina web è superiore a 4 o 5 MB, è come cercare di portare una valigia enorme e traboccante. Questo renderà il tuo sito web lento per i tuoi visitatori, quindi devi dare priorità all'ottimizzazione.
Se vedi il messaggio 'Evita payload di rete enormi', puoi fare clic sulla piccola freccia per vedere un elenco di tutte le risorse che compongono la tua pagina web.
Vedi come i file più grandi sono in cima all'elenco? Se ti concentri sul rendere questi file più piccoli o sulla rimozione di file non necessari, vedrai il più grande miglioramento delle prestazioni di WordPress.
Rendendo questi file più piccoli, userai meno dati per visualizzare la pagina web e si caricherà più velocemente.
Ora che sai perché le pagine web grandi sono un problema, esploriamo come puoi evitarle in WordPress. Ecco gli 8 suggerimenti che tratteremo in questo articolo:
- Rendi le tue immagini più piccole
- Incorpora i video nel modo giusto
- Usa il caricamento pigro (lazy loading) su immagini e video
- Riduci le dimensioni e il numero di file Javascript e CSS
- Comprimi i file con Gzip
- Utilizza la cache del browser per evitare download ripetuti
- Usa meno font o font di sistema
- Evita plugin lenti
- Frequently Asked Questions About Network Payloads in WordPress
Sei pronto? Immergiamoci subito!
1. Rendi le tue immagini più piccole
Una delle maggiori cause di grandi payload di rete sono le immagini di grandi dimensioni.
Gli smartphone e le fotocamere di oggi scattano immagini di alta qualità con dimensioni di file molto grandi. Ma non è necessario mantenerle così grandi quando le mostri su un sito web.
Fortunatamente, puoi ottimizzare le immagini per renderle fino all'80% più piccole senza perdere qualità. Questo ha un impatto maggiore sul payload di rete del tuo sito web rispetto a quasi qualsiasi altra cosa.
Su WPBeginner, ottimizziamo tutte le nostre immagini prima di caricarle. Ridimensioniamo le nostre immagini alle dimensioni corrette e poi riduciamo le loro dimensioni utilizzando vari strumenti.
Abbiamo messo insieme una guida utile basata esattamente su come facciamo questo sul nostro sito web. Puoi seguire il nostro articolo su come ottimizzare le immagini per le prestazioni web senza perdere qualità.
2. Incorpora i video nel modo giusto
Se hai video sul tuo sito web, devi fare attenzione a come li visualizzi.
Caricare video direttamente sul tuo sito web può causare grandi payload di rete e rallentare significativamente il tuo sito web, specialmente se iniziano a riprodursi automaticamente.
Il modo migliore per includere video è incorporarli da piattaforme video come YouTube o Vimeo.
☝ Nota: Utilizziamo YouTube per ospitare e trasmettere i nostri video. Puoi esplorare i nostri tutorial video su WordPress sul canale YouTube di WPBeginner.
Questo approccio ti consente comunque di riprodurre i video sul tuo sito web, ma poiché sono effettivamente archiviati sul server di qualcun altro, non fanno parte del tuo payload di rete.
Questo aiuta molto perché il tuo server non deve gestire il pesante trasferimento dati. Inoltre, queste piattaforme sono progettate per fornire video in modo efficiente, con streaming ottimizzato che si adatta alla connessione Internet del tuo visitatore.
Inoltre, molti lettori video di queste piattaforme inizieranno a caricare il video solo quando l'utente fa clic su riproduci, il che significa che inizialmente vengono trasferiti meno dati.
Puoi facilmente aggiungere i video al tuo sito web utilizzando il codice di incorporamento.
Per saperne di più su questo argomento, consulta la nostra guida su perché non dovresti mai caricare un video su WordPress.
3. Utilizza il caricamento lazy per immagini e video
Il caricamento lazy è un altro ottimo modo per evitare payload di rete di grandi dimensioni, specialmente se il tuo sito web è pieno di immagini o video.
Normalmente, quando una pagina web viene caricata, il browser vuole scaricare immediatamente tutte le immagini e i video, anche se non verranno visti subito.
Immagina se un ristorante ti portasse tutti i tuoi piatti in una volta sola invece che uno alla volta. Sarebbe travolgente!
Questo è ciò che accade su una pagina web se il caricamento lazy non è implementato. Tutto deve essere scaricato in anticipo, anche se l'utente non può ancora vederlo.
Questo ovviamente non è l'ideale, poiché significa che il tuo sito web ha un payload elevato e scarichi molti dati anche se l'utente non visualizza il contenuto in fondo alla pagina.
La soluzione a questo problema si chiama caricamento lazy.
Il caricamento lazy è come quel ristorante che porta ogni portata del tuo pasto man mano che sei pronto per essa.
Con il caricamento pigro (lazy loading), immagini e video non vengono caricati finché non stanno per entrare nella visualizzazione dell'utente sullo schermo. In questo modo, il browser deve caricare solo ciò che è necessario quando è necessario.
Ciò riduce il payload di rete iniziale e la quantità di dati da scaricare.
Ecco alcuni tutorial utili che mostrano come impostare il caricamento pigro in WordPress:
- Come caricare facilmente immagini in modalità lazy in WordPress
- Come aggiungere facilmente il caricamento pigro per i video in WordPress
- Come caricare pigramente i Gravatar nei commenti di WordPress
4. Riduci le dimensioni e il numero di file Javascript e CSS
Uno dei modi migliori per evitare payload di rete di grandi dimensioni sul tuo sito web è ridurre le dimensioni dei tuoi file CSS e JavaScript.
Il tuo sito web utilizza file CSS per lo styling e file JavaScript per le funzionalità interattive.
Tuttavia, questi file spesso contengono spazi extra e commenti al loro interno che non sono necessari per la funzionalità del codice. Puoi rimuovere in sicurezza questi elementi per ridurre le dimensioni dei file.
Ciò significa che questi file funzioneranno ancora allo stesso modo, ma ci saranno meno dati da scaricare per i tuoi utenti, rendendo il caricamento della tua pagina più veloce.
Questo processo è noto come minificazione, e la buona notizia è che puoi utilizzare un plugin WordPress come WP Rocket per minificare automaticamente i tuoi file.
Consulta la nostra guida su come minificare file CSS e JavaScript in WordPress per maggiori informazioni.
Ora, diverse parti del tuo sito web avranno solitamente file CSS o JavaScript diversi. Ad esempio, un file per l'intestazione, un altro per il corpo e forse anche altri per i plugin.
Ma molti file più piccoli possono essere meno efficienti di un file più grande. Quando ci sono molti file da caricare, il browser deve recuperare ciascuno di essi separatamente, il che aumenta la dimensione totale del download. Invece, puoi combinare molti di questi file più piccoli in un unico file.
Plugin popolari come WP Rocket (premium) e Autoptimize (gratuito) possono combinare e ridurre automaticamente i file CSS e JavaScript.
Puoi imparare come usare questi plugin nella nostra guida su come correggere JavaScript e CSS che bloccano il rendering in WordPress.
5. Riduci i file con Gzip
Un altro modo per rendere più piccoli i file del tuo sito web è comprimerli. I file basati su testo come HTML, CSS e JavaScript possono essere significativamente ridotti utilizzando la compressione Gzip.
Infatti, la compressione Gzip può spesso ridurre le dimensioni di questi file fino al 70% prima che vengano inviati al browser dell'utente! Questo è un enorme risparmio sulla quantità di dati che devono essere trasferiti.
Riduce il tempo di download dei file e rende il tuo sito WordPress molto più veloce. Una volta che i dati compressi arrivano sul computer del visitatore, il browser decomprime automaticamente i file e li mostra sullo schermo dell'utente.
Non devi preoccuparti se i browser dei tuoi utenti supportano la compressione Gzip perché funziona in tutti i browser web più diffusi oggi.
Molti eccellenti plugin di caching supportano anche la compressione Gzip. Le opzioni più diffuse includono WP Rocket, WP Super Cache e W3 Total Cache.
In precedenza abbiamo utilizzato WP Rocket sul sito web WPBeginner e abbiamo avuto un'ottima esperienza. Per maggiori informazioni, consulta la nostra recensione completa di WP Rocket.
Con WP Rocket, la compressione Gzip verrà attivata automaticamente se il tuo web host utilizza il server Apache. Per altri plugin di caching, potrebbe essere necessario attivarla nelle impostazioni del plugin.
Per istruzioni dettagliate, consulta la nostra guida su come abilitare la compressione Gzip in WordPress.
6. Utilizza la cache del browser per evitare download ripetuti
Un altro modo per evitare un enorme carico di rete in WordPress, specialmente se il tuo sito ha molti visitatori abituali, è provare la cache del browser.
Immagina se i tuoi visitatori dovessero scaricare tutto sul tuo sito web ogni volta che lo visitano! Sarebbe incredibilmente lento, ed è esattamente quello che succede se non usi una cache adeguata.
Quando qualcuno visita il tuo sito web per la prima volta, il suo browser scarica tutto ciò di cui ha bisogno: le immagini, il CSS, il JavaScript e tutte le altre risorse. Con la cache del browser, il suo browser salva una copia di questi file sul suo computer.
Quindi, la prossima volta che visitano il tuo sito web, il loro browser è intelligente! Controlla i file salvati localmente prima di chiedere di nuovo tutto al tuo server.
Se il browser ha una copia di un file nella sua cache, allora la usa invece di scaricarla di nuovo. Questo fa una grande differenza nel ridurre il carico di rete complessivo e offre ai visitatori abituali un'esperienza più veloce e fluida.
Naturalmente, se il contenuto del tuo sito web cambia frequentemente, come un sito di notizie o un blog aggiornato regolarmente, dovrai dire ai browser quando scaricare nuovamente le versioni più recenti dei tuoi file. Questo garantirà che tutti ricevano i contenuti più aggiornati.
Puoi controllare questo aggiungendo gli header Expires in WordPress. Questi header dicono al browser quando un file salvato deve essere considerato obsoleto e necessita di essere aggiornato.
7. Usa meno font o font di sistema
I font possono rendere il tuo sito web eccezionale e migliorarne la leggibilità. L'utilizzo di font personalizzati può rendere il tuo sito web unico e incoraggiare i tuoi visitatori a trascorrere più tempo navigando.
Ma immagina se dovessi scaricare molti font diversi ogni volta che visiti un sito web. Ci vorrebbe un po' di tempo per mostrare tutto sulla pagina.
La chiave è utilizzare un piccolo numero di font sul tuo sito web. Ti consigliamo di attenerti a soli due font principali e di utilizzarli su tutto il tuo sito. Questo riduce il numero totale di file che i tuoi visitatori devono scaricare.
Ancora meglio, puoi utilizzare font di sistema invece di font personalizzati.
I font di sistema sono font già installati sui computer delle persone. Pensala come l'utilizzo dei font standard sul tuo computer, come Arial o Times New Roman.
Se scegli i font di sistema per il tuo sito web, i tuoi utenti non dovranno scaricare alcun file aggiuntivo! Questo riduce significativamente le dimensioni del tuo payload di rete e rende il tuo sito web più veloce per i visitatori.
Per maggiori informazioni, consulta la nostra guida su come disabilitare i Google Font sul tuo sito WordPress.
8. Evita plugin lenti
Infine, parliamo dei plugin. A volte, i plugin possono rallentare il tuo sito web e aumentare le dimensioni del tuo payload di rete caricando molti file JavaScript e CSS aggiuntivi.
Dovresti pensare ai plugin come a strumenti aggiuntivi che aggiungi al tuo sito web. Alcuni sono ottimi e leggeri, mentre altri possono essere piuttosto pesanti. L'utilizzo di troppi plugin pesanti può aumentare le dimensioni di download del tuo sito web.
È difficile capire a colpo d'occhio quali plugin siano lenti, quindi dovrai fare qualche ricerca. Per maggiori informazioni, puoi consultare la nostra guida su quali plugin di WordPress stanno rallentando il tuo sito.
Una volta trovati i plugin che aumentano le dimensioni di download della tua pagina, hai alcune opzioni.
Innanzitutto, puoi contattare lo sviluppatore del plugin e vedere se c'è qualcosa che puoi fare per rendere il plugin più efficiente. Oppure potresti anche cercare un plugin più veloce che faccia la stessa cosa.
Per raccomandazioni, consulta la nostra guida su come scegliere i migliori plugin di WordPress.
👉 Articolo correlato: Sei un po' nervoso all'idea di contattare uno sviluppatore di plugin? Dai un'occhiata alla nostra guida su come chiedere correttamente supporto per WordPress (e ottenerlo).
A volte, scoprirai che alcuni dei plugin più pesanti sono essenziali per il tuo sito web. In tal caso, puoi comunque rendere il tuo sito web più veloce caricando quel plugin solo nelle pagine che ne hanno bisogno invece di caricarlo ovunque.
Puoi utilizzare un plugin gratuito chiamato Plugin Organizer per disabilitare i plugin nelle pagine in cui non sono necessari. Ciò diminuirà il carico di rete su tali pagine.
Domande frequenti sui carichi di rete in WordPress
Ecco alcune delle domande più comuni che le persone pongono sulla riduzione dei carichi di rete in WordPress. Queste risposte ti aiuteranno a comprendere meglio gli aspetti tecnici e i dettagli di implementazione.
1. Cos'è esattamente un carico di rete e perché è importante per il mio sito WordPress?
Un carico di rete è la quantità totale di dati (immagini, CSS, JavaScript, HTML, ecc.) che il tuo sito web invia al browser di un visitatore quando carica una pagina. Carichi di rete elevati rallentano il tuo sito perché i visitatori devono scaricare più dati, il che è particolarmente problematico per gli utenti mobili o per coloro che hanno connessioni Internet più lente. Google considera anche la dimensione del carico di rete quando classifica i siti web, quindi ottimizzarla può migliorare la tua SEO.
2. Come posso controllare la dimensione attuale del mio carico di rete?
Puoi controllare il tuo payload di rete utilizzando Google PageSpeed Insights, GTmetrix, o gli strumenti per sviluppatori del tuo browser. In Chrome, premi F12, vai alla scheda Network e ricarica la tua pagina. La dimensione totale apparirà in basso. In generale, dovresti mantenere il tuo payload totale sotto 1-2 MB per prestazioni ottimali.
3. La riduzione dei payload di rete influenzerà la funzionalità o il design del mio sito web?
Non se fatto correttamente. Le tecniche si concentrano sull'ottimizzazione e la compressione dei contenuti esistenti piuttosto che sulla rimozione di funzionalità. Manterrai la stessa funzionalità e l'aspetto visivo, offrendo al contempo i contenuti in modo più efficiente. Tuttavia, testa sempre le modifiche prima su un sito di staging per assicurarti che tutto funzioni correttamente.
4. Ogni quanto tempo dovrei ottimizzare i miei payload di rete?
Dovresti monitorare i tuoi payload mensilmente e ottimizzare ogni volta che aggiungi nuovi contenuti, plugin o temi. Imposta audit regolari utilizzando strumenti come Google Search Console per monitorare i tuoi Core Web Vitals. Potrebbero essere necessarie ottimizzazioni importanti trimestralmente, ma la manutenzione continua dovrebbe far parte della tua normale routine di manutenzione di WordPress.
5. Posso ridurre i payload di rete senza conoscenze tecniche?
Sì, molte tecniche di ottimizzazione possono essere implementate utilizzando plugin user-friendly come WP Rocket, Smush o Autoptimize. Questi strumenti gestiscono automaticamente la compressione delle immagini, la minificazione dei file e la cache. Tuttavia, per ottimizzazioni avanzate, potresti aver bisogno dell'aiuto di uno sviluppatore o di un esperto di WordPress.
Bonus: Guide Esperte Relative alle Prestazioni di WordPress
Speriamo che questo tutorial ti abbia aiutato a imparare come evitare enormi payload di rete in WordPress. Potresti anche voler consultare alcune guide su altri modi per migliorare le prestazioni di WordPress:
- La guida definitiva per aumentare la velocità e le prestazioni di WordPress
- Perché WordPress è Lento? Impara Come Risolverlo
- Come Accelerare il Tuo Sito Web di eCommerce
- Come Abbiamo Aumentato la Velocità di Caricamento delle Pagine su WPBeginner
- Come Eseguire Correttamente un Test di Velocità del Sito Web
- I migliori plugin di caching per WordPress per velocizzare il tuo sito web
- Perché Hai Bisogno di una CDN per il Tuo Blog WordPress?
- Come Ridurre le Richieste HTTP in WordPress
- Come scaricare i media di WordPress per migliorare la velocità del sito web
- Manutenzione del database di WordPress: come ottimizzare il tuo database
Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.
Hai una domanda o un suggerimento? Lascia un commento per iniziare la discussione.