Il corso completo sulla velocità del sito web

Capitolo 4: Video e animazioni

CAPRA solare - Mockup

Aumenta il coinvolgimento e attira l'attenzione

Video e animazioni possono essere un ottimo modo per aumentare il coinvolgimento e mantenere l'attenzione sul tuo sito web. Ma ciò non avrà importanza se la pagina non viene caricata prima che l'utente faccia clic.

Il segreto è utilizzare i formati di file corretti e assicurarsi di non esagerare con le animazioni. Non è necessario animare ogni elemento del sito web.

Video

I video sono ottimi se utilizzati per dimostrare un prodotto o se desideri mostrare una testimonianza più credibile del tuo cliente. Ma devi stare attento a come li aggiungi.

Migliore pratica: carica i tuoi video su YouTube o Vimeo, quindi incorporali nel tuo sito web

I video di solito hanno dimensioni di file piuttosto grandi, ti consigliamo di evitare di ospitare video sui server del tuo sito web.

Screenshot della pagina del convertitore da MP4 a WEBM di CloudConvert con un'intestazione scura, un pulsante rosso Seleziona file e opzioni per regolare la risoluzione e le proporzioni per la conversione video.

Non riesci a caricare su YouTube? Utilizza WebM

Se, per qualche motivo, non puoi incorporare il video e devi caricarlo direttamente sul tuo sito web, assicurati di utilizzare il formato file corretto. Utilizza il formato file WebM e assicurati di comprimere i video prima di caricarli.

Se il tuo video non è attualmente in formato WebM, puoi convertirlo in un formato di file diverso utilizzando Cloudconvert.

animazioni

Le animazioni sono un ottimo modo per indirizzare l'attenzione dell'utente sulle aree più importanti del tuo sito web o incoraggiarlo a continuare a scorrere una lunga pagina verso il basso. Tuttavia, ogni animazione che aggiungi aggiungerà ulteriore tempo di caricamento alla tua pagina.

Quando utilizzare le animazioni

  • Attira l'attenzione su un elemento specifico.
  • Dimostrare come viene utilizzato un prodotto.

Quando non utilizzare le animazioni

  • Su ogni singolo elemento di una pagina.
  • Sui dispositivi mobili.

Tipi di animazioni

CSS/Javascript

Le animazioni CSS e JavaScript possono essere utilizzate per movimenti semplici, come far "saltare" un elemento o un pulsante. Puoi trovare maggiori informazioni su questi tipi di animazioni qui.

GIF

Le GIF possono essere utilizzate per mostrare personaggi animati, ma possono caricarsi lentamente. Si consiglia di utilizzare MP4 o WebM anziché GIF.