Avete mai visitato un sito che ci mette una vita a caricarsi? E quanti di voi hanno abbandonato quel sito prima ancora che la pagina si aprisse completamente? Si, lo ammetto, sono colpevole pure io!
Purtroppo, se il tuo sito Webflow è troppo lento, i tuoi visitatori potrebbero fare lo stesso, portando a una diminuzione del traffico e delle conversioni. Ma non preoccuparti, in questo post ti daremo 10 consigli semplici per dare il turbo al tuo sito e migliorare l'esperienza dei vostri utenti.
Ma come sapere se il tuo sito è veramente lento? Ci sono molte statistiche che dimostrano che il tempo di caricamento ha un impatto enorme sulle tue metriche di business. Ad esempio, uno studio ha mostrato che il 50% degli utenti abbandona un sito web se ci mette più di 6/8 secondi a caricarsi.
Per verificarne la velocità puoi utilizzare questo strumento messo a disposizione da google: https://pagespeed.web.dev/, inserire il tuo URL, e testare la velocità sia su desktop che su mobile.
Anche se non è al 100% preciso per vari motivi (specialmente su mobile), questo strumento ti darà un'idea generale di come il tuo sito si comporta. In ogni caso, non preoccuparti, perché in questo post ti mostreremo come dare un boost rendendo la tua piattaforma piú fluida e veloce. Ma ora vediamo cosa possiamo fare all’interno di Webflow per migliorarne le prestazioni, ottimizzandone la velocitá in modo che nessun altro scappi piu via!
1. Comprimi le immagini
Le immagini possono spesso rappresentare uno dei principali colpevoli quando si tratta di siti web lenti. Ecco alcuni punti chiave da considerare:
Compressione delle immagini:
Ridurre la dimensione dei file delle immagini è fondamentale per accelerare il caricamento del sito web. La compressione delle immagini implica la rimozione di dati non necessari dai file, senza comprometterne in modo significativo la qualità visiva. Puoi farlo utilizzando strumenti di compressione come TinyPNG o addirittura la funzionalità di compressione di Webflow. Inoltre, il formato WebP è una scelta eccellente poiché offre una buona qualità a dimensioni di file molto ridotte.
Ridimensionamento delle immagini:
Assicurati che le immagini siano dimensionate correttamente per il loro utilizzo sul sito web. Ogni immagine dovrebbe avere una dimensione che habbia un senso logico e che non appesantisca di troppo la pagina.
Per esempio dovete utilizzare un'immagine sul vostro sito che andrá massimo ad accopare uno spazionio di 200*200px, non ha nessun senso usare un'immagine 10 volte piu grande.
Formati delle immagini:
Scegli il formato di immagine più adatto alle tue esigenze.
Il formato JPEG è ottimo per le fotografie e non occupa poco troppo spazio, mentre il formato PNG è ideale per immagini con trasparenza. Come già menzionato, il formato WebP offre un buon equilibrio tra qualità e dimensioni del file.
2. Utilizza il "lazy loading"
Il "lazy loading" è una tecnica che ritarda il caricamento delle immagini e degli asset fino a quando l'utente non scorre verso il basso esattamente nel punto dove l'immagina si trova. Per esempio se avessi un’immagine a metá homepage ha totalmente senso fare caricare tutto il sito prima e far caricare l’immagine da Webflow solo quando si raggiunge quel punto della homepage e ti serve far visualizzare quella specifica immagine.
Ciò può contribuire a velocizzare il tempo di caricamento iniziale del sito e migliorare l'esperienza dell'utente. In Webflow, puoi attivare il "lazy loading" per le immagini e gli asset nelle impostazioni di caricamento delle immagini.
3. Usa poche immagini e video
L'uso di immagini e video sul tuo sito web è fondamentale per catturare l'attenzione dei visitatori e comunicare il tuo messaggio in modo efficace. Tuttavia, è importante trovare un equilibrio tra il contenuto visivo e le prestazioni del sito. Ecco alcune considerazioni su come farlo:
Valuta la necessità:
Prima di aggiungere qualsiasi immagine o video a una pagina, chiediti se siano veramente necessari per trasmettere il tuo messaggio o migliorare l'esperienza dell'utente e quindi valuta l'eliminazione di qualsiasi elemento visivo superfluo.
Più immagini e video hai sulla tua pagina, più tempo impiegherà il sito per caricarle. Cerca di mantenere una quantità ragionevole e di usare immagini e video solo se sono strettamente necessari. Ricorda che il contenuto visivo è importante, ma non a discapito della velocità del sito.
Compatta informazioni:
Quando utilizzi immagini o video, cerca di incorporare il massimo di informazioni in un singolo elemento. Ad esempio, utilizza immagini composite che racchiudono più concetti o informazioni in una sola immagine, riducendo così la necessità di aggiungere più elementi visivi.
Pagine dedicate:
Se hai una grande quantità di contenuto multimediale, considera la possibilità di creare pagine dedicate per questi elementi invece di sovraccaricare una pagina. Puoi utilizzare link o anteprime per guidare gli utenti a queste pagine quando desiderano esplorare ulteriormente i tuoi contenuti multimediali.
Tutto sta nel bilanciamento tra contenuto visivo e velocità del sito, e rimane cruciale mantenere gli utenti impegnati senza sacrificare le prestazioni. Continua a valutare attentamente quale contenuto multimediale è essenziale per il tuo messaggio e ottimizzalo in modo da offrire un'esperienza utente fluida e veloce.
4. Limita l'uso di Google Fonts
Probabilmente un altro motivo per cui il tuo sito web é piu lento del dovuto, potrebbe essere legato all’uso improprio di fonts. Se stai utilizzando troppe fonts diverse sul tuo sito questo si ripercuoterá a tuo svantaggio.
Innanzitutto Il mio consiglio principale sarebbe di non caricare nessuna google font dal pannello di controllo, ma semmai di caricarle manualmente una per una, facendo attenzione di usare solo quelle necessarie allo sviluppo del tuo sito web.
Quindi se hai bisogno di un Futura 400 ed un Futura 800 per esempio, carica solo quelle due e avrai risolto gia metá dei problemi.
La fregatura sta nel fatto che se per sbaglio utilizzi una font anche solo per un paragrafo sul tuo sito, e questa font arriva da google, webflow manderá continuamente richieste tramite API per avere quella font specifica, e questa richiesta si traduce in google che manda l’intero pacchetto di quella famiglia di font costantemente sul tuo sito.
Puó essere complicato a capire nel dettaglio, specialmente se sei alle prime armi, per questo ti rimando a questa guida dove spiego piu nel dettaglio come ottimizzare le fonts in modo professionale. Fidati, ne vale la pena!
5. Riduci al minimo l'uso di integrazioni di terze parti
Le integrazioni di terze parti come Google Analytics, i widget dei social media e i chatbot sono importanti, e possono aggiungere funzionalità extra al tuo sito, ma posso anche avere la peculiaritá di appesantirlo di molto.
Assicurati di utilizzare solo le integrazioni di cui hai assolutamente bisogno e tienile il più leggere possibile. In Webflow, puoi minimizzare l'uso di integrazioni di terze parti utilizzando gli strumenti interni di Webflow invece di app o plugin esterni.
6. Riduci o ottimizza le animazioni
Un'altro danno che si puó andare a creare é l'uso indiscriminato delle animazioni.
Le animazioni possono rendere il tuo sito Webflow più interessante e coinvolgente e su questo non c'é dubbio, ma possono anche rallentare il caricamento delle pagine. Per ridurre il carico, puoi limitare il numero di animazioni o utilizzare quelle più semplici e leggere. In alternativa, puoi ottimizzare le animazioni esistenti in modo da ridurre il loro peso. Webflow dispone di strumenti integrati per la creazione e l'ottimizzazione delle animazioni utilizzando l’editor nel pannello sulla destra.
Un'altra cosa da non dimenticare, specialmente quando il sito si ingigantisce aumentando di complessitá, é di controllare che non ci sia nessuna animazione attiva inutilizzata, e fare una bella pulizia (la trovate nelle opzioni delle animazioni cliccando "clean up"
7. Usa un Preloader
Se la tua homepage è particolarmente ricca di contenuti e richiede un certo tempo per caricarsi completamente, una tecnica efficace è l'utilizzo di un "preloader" integrato.
Questo consiste in un'animazione che si avvia automaticamente a schermo intero quando gli utenti arrivano sul vostro sito, magari mostrando un'animazione con il vostro logo o utilizzando un conto alla rovescia. L'obiettivo è quello di intrattenere i visitatori durante il caricamento della pagina, evitando che si trovino di fronte a una schermata vuota e bianca. In questo modo, offriamo loro l'impressione che il sito sia attivo e in fase di caricamento, migliorando l'esperienza utente complessiva.
8. Minimizza l'uso del codice personalizzato come CSS e javascript
Anche se il codice personalizzato può essere utile per aggiungere funzionalità extra al tuo sito, può diventare un’arma a doppio taglio e rallentarlo. Assicurati di utilizzare solo il codice di cui hai bisogno e mantienilo pulito e ottimizzato.
Ad esempio, invece di utilizzare un sacco di codice personalizzato per creare un effetto hover su una sezione del tuo sito, puoi utilizzare l'interattività di Webflow per creare lo stesso effetto con meno codice e quindi migliorare la velocità del tuo sito.
9. Nomenclatura delle Classi CSS per Coerenza e Efficienza:
Assegnare nomi coerenti alle classi CSS è fondamentale per garantire l'efficienza e la manutenibilità del tuo sito web. Ecco perché è importante:
- Coerenza nella Nomenclatura: Mantieni una nomenclatura coerente per le tue classi CSS in tutto il sito. In questo modo, quando crei un nuovo elemento o stile, puoi riutilizzare classi esistenti anziché aggiungerne di nuove, evitando l'ingombro di innumerevoli classi diverse.
- Facilità di Utilizzo Futuro: Quando le classi sono denominate in modo chiaro e descrittivo, diventa più facile capire il loro scopo anche in futuro. Questo semplifica la manutenzione del sito e la collaborazione con altri sviluppatori.
- Riduzione del Codice Ridondante: Una nomenclatura coerente riduce la probabilità di creare classi CSS ridondanti o simili. Ciò aiuta a mantenere il codice più pulito e a evitare confusione.
In breve, una nomenclatura coerente delle classi CSS è una pratica essenziale per mantenere un sito web pulito, efficiente e facilmente manutenibile. Consente di sfruttare al massimo le risorse disponibili e semplifica il lavoro di sviluppo continuativo.
10. Pulire il codice dalle classi e animazioni inutilizzate
Come abbiamo detto, più classi CSS e animazioni hai sul tuo sito, più pesante diventerà. Per evitare questo, è importante pulire il codice regolarmente e rimuovere tutte le classi CSS e animazioni che non stai utilizzando. Per farlo, basta aprire la Style Manager, e con un semplice click si possono eliminare tutte le classi superflue create e tutte le animazioni (dall'opzione "clear up")
In conclusione: In conclusione, l'importanza di un'attenta pianificazione e di una rigorosa verifica durante il processo di sviluppo del vostro sito web non può essere sottolineata abbastanza. Creare una checklist completa con tutti gli aspetti da controllare prima di pubblicare il vostro sito è un passo fondamentale per garantire un risultato di alta qualità e per evitare inconvenienti una volta online.
Inoltre, una checklist ben strutturata e attentamente seguita contribuirà a ridurre al minimo gli errori e le lacune, garantendo che il vostro sito web sia veloce, fluido e pronto per impressionare i visitatori. In breve, investire il tempo necessario nella creazione di una checklist dettagliata rappresenta una precauzione saggia che porterà a un sito web di successo e di alta qualità.
