MegaMarketing
No Result
View All Result
venerdì, marzo 5, 2021
  • Home
  • Marketing
  • Social Media
  • Copywriting
  • Ecommerce
MegaMarketing
  • Home
  • Marketing
  • Social Media
  • Copywriting
  • Ecommerce
No Result
View All Result
MegaMarketing
No Result
View All Result
Home Marketing

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

by megamarketing
aprile 2, 2020
in Marketing
0
Come ridurre il peso della pagina sul tuo sito web [Quick Guide]
12
SHARES
303
VIEWS
Condividi su FacebookTwitta su Twitter

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.

Quanto è forte il tuo sito Web? Classificalo usando il Website Grader gratuito di HubSpot.

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:

size-web-page "width =" 2074 "style =" width: 2074px; "srcset =" https://blog.hubspot.com/hs-fs/hubfs/Screen%20Shot%202020-03-26%20at% 202.18.02% 20 PM.png? Width = 1037 & name = Screen% 20Shot% 202020-03-26% 20at% 202.18.02% 20 PM.png 1037w, https://blog.hubspot.com/hs-fs/hubfs/Screen % 20Shot% 202020-03-26% 20at% 202.18.02% 20 PM.png? Larghezza = 2074 e nome = Schermo% 20Shot% 202020-03-26% 20at% 202.18.02% 20 PM.png 2074w, https: // blog. hubspot.com/hs-fs/hubfs/Screen%20Shot%202020-03-26%20at%202.18.02%20PM.png?width=3111&name=Screen%20Shot%202020-03-26%20at%202.18.02% 20 PM.png 3111w, https://blog.hubspot.com/hs-fs/hubfs/Screen%20Shot%202020-03-26%20at%202.18.02%20PM.png?width=4148&name=Screen%20Shot%202020 -03-26% 20at% 202.18.02% 20 PM.png 4148w, https://blog.hubspot.com/hs-fs/hubfs/Screen%20Shot%202020-03-26%20at%202.18.02%20PM. png? width = 5185 & name = Screen% 20Shot% 202020-03-26% 20at% 202.18.02% 20 PM.png 5185w, https://blog.hubspot.com/hs-fs/hubfs/Screen%20Shot%202020-03 -26% 20at% 202.18.02% 20 PM.png? width = 6222 & name = schermo% 20Shot% 202020-03-26% 20at% 202.18.02% 20 PM.png 6222w "size =" (larghezza massima: 2074px) 100vw, 2074pxDimensione 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:

page-weight-amazon "larghezza =" 2098 "style =" larghezza: 2098px; "srcset =" https://blog.hubspot.com/hs-fs/hubfs/Screen%20Shot%202020-03-26%20at% 202.28.00% 20 PM.png? Larghezza = 1049 e nome = Schermo% 20Shot% 202020-03-26% 20at% 202.28.00% 20 PM.png 1049w, https://blog.hubspot.com/hs-fs/hubfs/Screen % 20Shot% 202020-03-26% 20at% 202.28.00% 20 PM.png? Larghezza = 2098 e nome = Schermo% 20Shot% 202020-03-26% 20at% 202.28.00% 20 PM.png 2098w, https: // blog. hubspot.com/hs-fs/hubfs/Screen%20Shot%202020-03-26%20at%202.28.00%20PM.png?width=3147&name=Screen%20Shot%202020-03-26%20at%202.28.00% 20 PM.png 3147w, https://blog.hubspot.com/hs-fs/hubfs/Screen%20Shot%202020-03-26%20at%202.28.00%20PM.png?width=4196&name=Screen%20Shot%202020 -03-26% 20at% 202.28.00% 20 PM.png 4196w, https://blog.hubspot.com/hs-fs/hubfs/Screen%20Shot%202020-03-26%20at%202.28.00%20PM. png? width = 5245 & name = Screen% 20Shot% 202020-03-26% 20at% 202.28.00% 20 PM.png 5245w, https://blog.hubspot.com/hs-fs/hubfs/Screen%20Shot%202020-03 -26% 20at% 202.28.00% 20 PM.png? width = 6294 & name = schermo% 20Shot% 202.020-0 3-26% 20at% 202.28.00% 20 PM.png 6294w "size =" (larghezza massima: 2098px) 100vw, 2098pxNaturalmente, 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.

Screen_Shot_2015-07-22_at_2.17.55_PM.png "title =" Screen_Shot_2015-07-22_at_2.17.55_PM.png "width =" 580 "style =" display: block; margine sinistro: auto; margin-right: auto; "srcset =" https://blog.hubspot.com/hs-fs/hubfs/00-Blog-Related_Images/Screen_Shot_2015-07-22_at_2.17.55_PM.png?width=290&name=Screen_Shot_2015-07 -22_at_2.17.55_PM.png 290w, https://blog.hubspot.com/hs-fs/hubfs/00-Blog-Related_Images/Screen_Shot_2015-07-22_at_2.17.55_PM.png?width=580&name=Screen_Shot_2015-07- 22_at_2.17.55_PM.png 580w, https://blog.hubspot.com/hs-fs/hubfs/00-Blog-Related_Images/Screen_Shot_2015-07-22_at_2.17.55_PM.png?width=870&name=Screen_Shot_2015-07-22_at .17.55_PM.png 870w, https://blog.hubspot.com/hs-fs/hubfs/00-Blog-Related_Images/Screen_Shot_2015-07-22_at_2.17.55_PM.png?width=1160&name=Screen_Shot_2015-07-22_at_2. 17.55_PM.png 1160w, https://blog.hubspot.com/hs-fs/hubfs/00-Blog-Related_Images/Screen_Shot_2015-07-22_at_2.17.55_PM.png?width=1450&name=Screen_Shot_2015-07-22_at_2.17.5 _PM.png 1450w, https://blog.hubspot.com/hs-fs/hubfs/00-Blog-Related_Images/Screen_Shot_2015-07-22_at_2.17.55_PM.png?width=1740&name=Screen_Shot_2015-07-22_at_2.17.55_P M.png 1740w "dimensioni =" (larghezza massima: 580px) 100vw, 580px

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.

miti seo

  • Trending
  • Comments
  • Latest
8 dei migliori esempi di bio professionali che abbiamo mai visto [+ Bio Templates]

8 dei migliori esempi di bio professionali che abbiamo mai visto [+ Bio Templates]

dicembre 5, 2018
I 7 migliori account e provider di servizi di posta elettronica gratuiti per il 2019

I 7 migliori account e provider di servizi di posta elettronica gratuiti per il 2019

novembre 5, 2018
27 Divertenti attività di team aziendale e idee da fare per tutti

27 Divertenti attività di team aziendale e idee da fare per tutti

agosto 30, 2018
Un modello di lettera di rifiuto professionale ma gentile

Un modello di lettera di rifiuto professionale ma gentile

ottobre 13, 2018
La guida definitiva alle pubbliche relazioni nel 2018

La guida definitiva alle pubbliche relazioni nel 2018

0
3 aree di interesse per contenuti costantemente di alta qualità

3 aree di interesse per contenuti costantemente di alta qualità

0
Affrontare le sfide di gestione delle informazioni sui prodotti

Affrontare le sfide di gestione delle informazioni sui prodotti

0
4 passaggi per rianimare un account di social media abbandonato

4 passaggi per rianimare un account di social media abbandonato

0
Raggiungi e delizia i clienti con il marketing cooperativo

Raggiungi e delizia i clienti con il marketing cooperativo

agosto 4, 2020
Percentuale di clic (CTR) della pubblicità display media – compilazione 2020

Percentuale di clic (CTR) della pubblicità display media – compilazione 2020

maggio 11, 2020
9 modi in cui puoi migliorare il design del tuo sito web e-commerce

9 modi in cui puoi migliorare il design del tuo sito web e-commerce

maggio 11, 2020
Frankie Quiroz suggerisce 4 trucchi per rendere più piccante la tua storia su Instagram

Frankie Quiroz suggerisce 4 trucchi per rendere più piccante la tua storia su Instagram

maggio 11, 2020

Ultime News

Raggiungi e delizia i clienti con il marketing cooperativo

Raggiungi e delizia i clienti con il marketing cooperativo

agosto 4, 2020
Percentuale di clic (CTR) della pubblicità display media – compilazione 2020

Percentuale di clic (CTR) della pubblicità display media – compilazione 2020

maggio 11, 2020

Categorie

  • Copywriting
  • Ecommerce
  • Marketing
  • Social Media

Info e Contatti

  • Home
  • Advertisement
  • Contact Us
  • Privacy & Policy
  • Other Links
MegaMarketing

News, guide, info su marketing, copywriting, psicologia applicata, business

© 2018 megamarketing.it

No Result
View All Result
  • Home
  • Marketing
  • Social Media
  • Copywriting
  • Ecommerce

© 2018 megamarketing.it

Utilizziamo i cookie per offrirti la migliore esperienza online. Cliccando su Accetto, accetti la nostra politica sui cookie.

Accetto Rifiuto
Centro privacy IMPOSTAZIONI DELLA PRIVACY Ulteriori info sulla Cookie Policy