Prestazioni del sito: progettare un sito web incentrato sulle prestazioni
4 min
In questo articolo:
- Ottimizzare l'ordine di caricamento degli elementi
- Progettare una sezione above the fold ad alte prestazioni
- Usare pagine dedicate
- Ottimizzare immagini e video
- Caricamento lento
- Gestire gli elementi aggiuntivi
- FAQ
Crea un sito web veloce e coinvolgente facendo scelte di design che diano la priorità alle prestazioni. Quando scegli cosa mostrare per primo, dove posizionare immagini e video e come organizzare i tuoi contenuti, aiuti le tue pagine a caricarsi rapidamente e rendi più facile per le persone trovare ciò di cui hanno bisogno. Usa questi suggerimenti incentrati sulle prestazioni per migliorare la velocità del tuo sito, mantenere l'interesse dei visitatori e offrire un'esperienza fluida e professionale su qualsiasi dispositivo.
Ottimizzare l'ordine di caricamento degli elementi
Gli elementi sul tuo sito vengono caricati in un ordine specifico in base al tipo e alle dimensioni. Comprendere questo ordine ti aiuta a dare la priorità a ciò che appare per primo e a garantire un'esperienza fluida.
- Elementi statici: includono il testo e le forme base che si caricano più velocemente. Aggiungili above the fold (nella parte superiore della home page) per garantire una rapida visibilità
- Elementi fluidi: immagini e video rientrano in questa categoria. Anche se danno vivacità al tuo sito, possono rallentarne le prestazioni. Posizionali below the fold quando possibile
- Elementi interattivi: elementi come iFrame, animazioni e app di terze parti si caricano per ultimi. Usali con parsimonia e in modo strategico per evitare tempi di caricamento lunghi
Suggerimento:
Ti consigliamo di prestare particolare attenzione alla home page, poiché di solito questa è la prima pagina che i tuoi visitatori vedranno.
Progettare una sezione above the fold ad alte prestazioni
La sezione above the fold si riferisce all'area della tua pagina web visibile prima che l'utente inizi a scorrere. Poiché viene caricata per prima, è fondamentale che sia leggera e ben studiata.
Elementi consigliati:
- Testo: utilizza testi sintetici e incisivi che comunichino chiaramente lo scopo della pagina. Prediligi i caratteri di sistema ed evita l’uso eccessivo di famiglie e pesi di carattere
- Chiamate all'azione (CTA): includi tasti o link chiari per guidare le azioni degli utenti, come "Acquista ora" o "Scopri di più". Evita di posizionare elementi di disturbo vicino alle chiamate all'azione
Elementi da ridurre a icona:
- Immagini o video di grandi dimensioni
- Animazioni
- Uso eccessivo di immagini ad alta risoluzione
Suggerimento:
Usa strumenti come Google PageSpeed Insights o il pannello Velocità del sito di Wix per assicurarti che i contenuti above the fold siano ottimizzati per un caricamento rapido.
Usare pagine dedicate
Sovraccaricare le pagine con troppi elementi influisce sulle prestazioni, in particolare sulla home page. Crea invece pagine dedicate per funzionalità o app specifiche del sito.
Aggiungi pagine per funzionalità come Stores, Blog o Video e collegale ad esse dalla home page con tasti o elementi del menu. Mantieni la lunghezza della pagina al di sotto delle otto schermate distribuendo i contenuti sulle pagine del tuo sito e limitando gli elementi non necessari.
Ottimizzare immagini e video
I media spesso rallentano i siti web a causa delle elevate dimensioni e risoluzioni. Ecco come gestirli in modo efficace:
Immagini:
- Usa formati leggeri come WebP o JPEG
- Comprimi i file prima di caricarli su Wix
- Mostra le immagini in una Pro Gallery per l'ottimizzazione integrata
Video:
- Ospita video su Wix Video, YouTube o Vimeo per ottimizzare le prestazioni
- Evita di posizionare video above the fold per far caricare più rapidamente la pagina iniziale
Caricamento lento
Il caricamento differito ritarda il caricamento di immagini e video fino a quando non compaiono nel viewport dell'utente, migliorando i tempi di caricamento iniziale della pagina. Questa funzionalità viene abilitata automaticamente su Wix, ma funziona al meglio quando immagini e video vengono inseriti all'interno degli elementi supportati, come gallerie o strisce, e i contenuti above the fold sono ridotti al minimo per una maggiore visibilità.
Gestire gli elementi aggiuntivi
Anche altre decisioni di design possono influire sulla velocità e sulle prestazioni del tuo sito:
- Tasti: crea tasti chiari e concisi che rimandano a contenuti pertinenti altrove sul tuo sito. Ad esempio, puoi utilizzare "Esplora il catalogo" o "Visualizza altri progetti"
- Codice personalizzato: assicurati che eventuale codice personalizzato sia ottimizzato e usi attributi come "defer" o "async" per ridurre il ritardo
- Impaginazione o tasto "Carica altro": soprattutto per i siti ricchi di prodotti, evita di mostrare tutti i prodotti contemporaneamente su un'unica pagina. Implementa le funzionalità di impaginazione o caricamento su richiesta per mantenere il caricamento efficiente
Suggerimenti:
- Testa regolarmente: usa Google PageSpeed Insights e il pannello Velocità del sito di Wix per monitorare e migliorare le prestazioni
- Dai la priorità ai contenuti above the fold: assicurati che i contenuti chiave vengano caricati rapidamente aggiungendo elementi statici e leggeri
- Riduci a icona le app di terze parti: usa solo le app o i widget essenziali per evitare rallentamenti inutili
FAQ
Clicca su una delle seguenti domande per scoprire di più.
Perché il mio sito Wix è lento da caricare e come posso migliorarne la velocità?
Perché il mio sito mobile è più lento del mio sito desktop?
Come faccio a migliorare il punteggio LCP (Largest Contentful Paint)?
Qual è il modo migliore per mostrare un gran numero di prodotti senza rallentare il mio negozio?