Come ridurre il peso della pagina sul tuo sito web [Quick Guide]

Quando si tratta di pagine del tuo sito Web, le dimensioni contano. Minore è la dimensione del file di una pagina, più veloce verrà caricata per chiunque lo richieda.

E le persone fare nota quanto tempo impiega una pagina a caricarsi. Infatti, secondo i dati di Pingdom, il 24% degli utenti abbandonerà un sito che impiega quattro secondi per caricarsi e il 38% degli utenti lascerà la pagina se impiegherà cinque secondi.

Per non parlare, Google ha ammesso di utilizzare la velocità del sito nel ranking della ricerca Web, poiché i siti più veloci tendono a creare utenti più felici.

Inoltre, al giorno d'oggi, molti utenti utilizzano i loro telefoni cellulari per trovare ed esplorare siti Web:dove le connessioni a Internet imprevedibili e la bassa velocità dei dati rendono ancora più difficile caricare pagine di grandi dimensioni.

In definitiva, al fine di mantenere un buon posizionamento della pagina, la tua azienda deve concentrarsi sulla fornitura di un'esperienza del sito Web veloce e ottimizzata su tutti i dispositivi. Per garantire che il tuo sito Web non subisca un colpo nel traffico, questo post spiega tutto ciò che devi sapere sulla dimensione della pagina e su come ridurla.

Qual è la dimensione della pagina?

"Dimensione della pagina" – chiamata anche grammatura della pagina – si riferisce alla dimensione complessiva di una determinata pagina Web.

Le dimensioni di una pagina includono tutti i file utilizzati per creare la pagina Web, incluso il documento HTML, eventuali immagini, script e altri supporti inclusi.

Qual è una buona dimensione per una pagina web?

Per aiutarti a valutare il peso della tua pagina, abbiamo esaminato la dimensione media di una pagina Web (sia desktop che mobile) tra il 1 ° febbraio 2020 e il 1 ° marzo 2020:

Dimensione dell'immagine

Nel 2020, la pagina Web desktop media pesa 2080 KB, mentre pesa la pagina Web mobile media 1885 KB – questa è una netta differenza rispetto al 2017, quando una pagina Web desktop media pesa 1532 KB e la pagina Web mobile media pesa 1354 KB.

Naturalmente, è importante notare, i dati sopra visualizzatimediadimensione di una tipica pagina Web, il che significa che molti siti Web probabilmente scendono molto al di sotto di questa dimensione, mentre altri più pesanti potrebbero inclinare i dati nella direzione opposta.

In definitiva, dipende dal sito. Mentre alcuni siti potrebbero incorporare caratteri personalizzati, video a schermo intero e altri elementi di design che "appesantiscono" la pagina, altri siti probabilmente adottano un approccio minimalista e si limitano a un testo semplice e uno sfondo bianco.

Tieni presente che il peso delle tue pagine varierà a seconda della tua azienda o settore. Se hai un sito di e-commerce con una grande varietà di foto, è probabile che tu possa anticipare un peso della pagina maggiore.

Ma, in generale, dovresti mirare a esserlo a o sotto la media.

Naturalmente, è altrettanto importante tenere a mente: il peso della pagina non è sempre la metrica più importante da considerare.

Prendi Amazon come esempio: usando PageSpeed ​​Insights di Google, ho cercato su Amazon.com e ho visto che ottengono un misero 51% su 100% per le prestazioni della pagina:

Naturalmente, per Amazon, questo probabilmente non importa: hanno bisogno di pagine più pesanti, ovviamente, per visualizzare immagini di tutte le migliaia di prodotti e servizi che vendono e agli utenti non importa il tempo di caricamento perché sanno cosa aspettarsi.

Tuttavia, se non sei sicuro che il peso della tua pagina possa abbassare in modo sproporzionato la qualità generale della pagina, prova a inserire il tuo sito web in Page Speed ​​Insights di Google per valutare il rendimento complessivo.

Se non sei soddisfatto della velocità corrente della tua pagina o pensi che il peso della tua pagina dovrebbe essere inferiore, esploriamo come puoi ridurlo in questo momento.

5 suggerimenti per ridurre le dimensioni della pagina

1. Ridimensiona e comprimi le tue immagini

Quando si tratta del peso della pagina, le immagini sono uno dei maggiori contribuenti. Se stai cercando di ridimensionare, ti consigliamo di iniziare ridimensionando tutte le immagini inutilmente grandi.

Quando si caricano foto, tenere presente che le dimensioni dell'immagine non devono mai essere superiori alle dimensioni del contenitore. Se il contenitore ha una larghezza massima di 500 pixel, di solito non è possibile caricare nuovamente un'immagine con una larghezza di 1.000 pixel.

Ma supponiamo che desideri offrire un'immagine ad alta risoluzione che le persone possano condividere e scaricare: cosa dovresti fare? Ti consigliamo di caricare un'immagine esattamente della larghezza del contenitore in cui si trova e di collegarla alla versione ad alta risoluzione per evitare di appesantire la tua pagina.

A parte le dimensioni dell'immagine, è possibile ridurre ulteriormente la dimensione di un'immagine comprimendola. La compressione di un'immagine aiuta a ridurne le dimensioni, il che alla fine aiuta a ridurre il tempo necessario per caricare una pagina.

Se stai cercando uno strumento di compressione, questi sono alcuni dei nostri preferiti:

Se sei un utente HubSpot, sei fortunato: HubSpot COS offre il ridimensionamento e la compressione automatici delle immagini.

"Se un utente carica un'immagine che ha dimensioni di 5.000 x 5.000 ma la sta visualizzando sul sito Web come 500 x 500, l'utilizzo del ridimensionamento automatico delle immagini contribuirà a ridurre il tempo di caricamento del browser. La compressione delle immagini, d'altro canto, diminuisce la dimensione del file mantenendo la qualità dell'immagine caricata ", spiega Maggie Himba di HubSpot.

Ovviamente, il modo più semplice per ridurre il peso della pagina è eliminare quante più immagini non necessarie possibile. Ma per quelli che devono rimanere, i suggerimenti sopra menzionati dovrebbero fare il trucco.

2. Usa CSS Sprites

Quindi ora sappiamo che avere una tonnellata di immagini – specialmente quelle grandi – su una data pagina aumenterà il peso della pagina e rallenterà il tempo di caricamento, giusto?

Questo perché ogni immagine genera una richiesta del server, che rallenta l'intero processo.

Inserisci gli sprite CSS.

Uno sprite CSS si riferisce a una raccolta di immagini che vengono combinate per creare un file di immagine, secondo W3School. Quindi, si utilizza CSS per visualizzare solo la parte dell'immagine combinata che si desidera visualizzare, riducendo così il numero di richieste del server necessarie per il caricamento della pagina.

Per chiarire, di seguito è una spiegazione più visiva. L'esempio A include file di immagini separati per ciascuna delle icone del browser, per un totale di 70,7 KB. L'esempio B usa gli sprite CSS – un'immagine che usa CSS per visualizzare porzioni di quell'immagine – per mostrare le stesse informazioni esatte. La dimensione totale di quelle immagini è inferiore alla metà dell'esempio A.

Fonte: Tutorial Republic

3. Rimuovere i caratteri personalizzati non necessari

I caratteri personalizzati sono divertenti.

Aggiungono personalità alle tue pagine e aiutano a differenziare la tua attività da tutti gli altri. Tuttavia, il problema con i caratteri personalizzati è che possono avere un certo peso.

Fortunatamente, esiste una soluzione se ritieni che siano necessari caratteri personalizzati per la progettazione del tuo sito Web: creare un file WOFF2.

Come scrive Joshua Stopper, Lead Developer di Wholegrain Digital: "Probabilmente il cambiamento più semplice che può essere fatto, che non ha aspetti negativi, è la conversione del [custom] font nel formato più moderno ed efficiente disponibile nei browser, WOFF2 … nel nostro caso, abbiamo ottenuto una riduzione del 60% semplicemente caricando un file WOFF2 su un TTF. "

Tuttavia, se stai cercando un modo semplice per eliminare un po 'di peso dalla tua pagina, potresti voler rivalutare il numero di caratteri personalizzati che stai utilizzando. Mentre una coppia non farà male, usarli in eccesso potrebbe comunque danneggiare la velocità della tua pagina.

4. Ridurre al minimo le risorse

Una delle tue risorse potrebbe essere ridotta tramite la minificazione?

"La minificazione si riferisce al processo di rimozione di dati non necessari o ridondanti senza influire sul modo in cui la risorsa viene elaborata dal browser, ad esempio commenti e formattazione del codice, rimozione di codice inutilizzato, utilizzo di nomi di funzioni e variabili più brevi e così via", spiegano gli sviluppatori di Google.

Secondo Google, ecco come dovresti avvicinarti a minimizzare le tue risorse:

HTML

Genera una versione ottimizzata del tuo codice HTML usando il PageSpeed ​​Insightstool. Utilizza questa analisi per eseguire la tua pagina HTML e sfogliare la regola "Minimizza HTML". Infine, fai clic su "Visualizza contenuto ottimizzato" per accedere al codice HTML minimizzato.

CSS

Dai un'occhiata ai seguenti strumenti:

JavaScript

Dai un'occhiata ai seguenti strumenti:

5. Utilizzare una rete di distribuzione di contenuti (CDN)

Una rete di distribuzione di contenuti si riferisce a "un sistema interconnesso di server cache che utilizza la prossimità geografica come criterio per la consegna di contenuti Web", secondo TechTarget.

Cosa significa? E perché dovresti preoccupartene?

Supponiamo che tutti gli elementi del tuo sito Web siano archiviati a Boston, nel Massachusetts. Questa è una grande notizia per i Bostoniani – o per chiunque negli Stati Uniti – che stanno cercando di accedere alle pagine del tuo sito. Ma che dire di quel fedele visitatore fino a Londra? È probabile che impiegheranno notevolmente più tempo a caricare le tue pagine solo a causa della posizione del tuo server.

Una CDN ha lo scopo di risolvere questo problema memorizzando gli elementi del tuo sito Web in più posizioni in tutto il mondo per garantire che tutti abbiano una buona visione in un tempo di caricamento rapido.

Nota: sebbene questo passaggio non riduca necessariamente il peso della tua pagina, contribuirà a migliorarne la velocità, che è ciò che stiamo cercando dopo, giusto?

Pronto a pesare?

Prima di poter applicare questi suggerimenti, è meglio iniziare facendo un'idea di ciò con cui stai lavorando. Per verificare la velocità e le dimensioni del tuo sito Web, controlla Web Page Analyzer da WebsiteOptimization.com.

E se desideri un rapporto più dettagliato sulle prestazioni complessive del tuo sito Web, dai un'occhiata al selezionatore di siti Web recentemente riprogettato da HubSpot. Riceverai gratuitamente prapporto personalizzato che classifica le metriche chiave del tuo sito tra cui prestazioni, disponibilità mobile, SEO e sicurezza.