Come velocizzare il sito web Tilda

Il caricamento dei siti web è oggetto di particolare attenzione su Internet. Ecco perché lavorare sulla velocità di caricamento delle pagine web è diventata una routine per noi. Implementiamo nuove tecnologie e ottimizziamo i processi tecnici. Alcuni aggiornamenti sono visibili agli utenti, altri no. È un processo continuo e siamo già orgogliosi dei progressi compiuti.

In questo articolo vi forniremo una breve lista di controllo su come aumentare la velocità di caricamento del vostro sito web utilizzando gli strumenti esistenti di Tilda e modificando le impostazioni. Analizzeremo ogni punto in dettaglio, in modo che possiate regolare da soli le impostazioni del vostro sito web e renderlo ancora più veloce.

Prima di analizzare ciascun punto, vediamo come valutare la velocità di caricamento della pagina.

Molti utenti di Tilda controllano la velocità di caricamento delle pagine dei loro siti web utilizzando PageSpeed Insights di Google. Questo servizio simula il caricamento dei siti web su dispositivi mobili e desktop, assegnando loro un punteggio di efficienza.

Si tratta di uno strumento tecnico convenzionale che non sempre riflette la reale velocità di caricamento. Secondo la nostra esperienza, i dati che Chrome raccoglie e mostra nel pannello degli sviluppatori sono molto migliori di quelli ottenuti attraverso la simulazione di PageSpeed Insights. Per questo motivo non consigliamo di affidarsi completamente a PSI, ma di considerarlo come uno strumento di analisi supplementare o indiretto.

Il monitoraggio dell'effettiva velocità di caricamento delle pagine del sito web è un'opzione migliore. È possibile farlo negli Strumenti per gli sviluppatori di Chrome: aprire la console (Opzione + Ctrl + I / Alt + Cmd + I) e andare alla barra degli strumenti Dispositivo alternativo → scheda Rete → ricaricare la pagina che si desidera valutare. I parametri più importanti sono DOMContentLoaded, che indica il tempo di caricamento della struttura della pagina, e Load, che indica il tempo di caricamento della pagina con tutte le tabelle e gli stili.

Anche questo metodo non è perfetto: la simulazione 3G veloce della barra degli strumenti non simula in modo chiaro e corretto il caricamento dei siti web sui dispositivi mobili, quindi è necessario verificare la velocità di caricamento sui dispositivi reali e trarre conclusioni in base ai dati.

Tilda ha un gran numero di ottimizzazioni implementate per velocizzare il caricamento delle pagine. I siti web di base senza codice o script di terze parti si caricano rapidamente. Potete verificarlo voi stessi: scegliete un modelloTilda e verificate la velocità di caricamento della pagina con PageSpeed Insights.

Verifichiamo su un sito web reale: Abbiamo scelto uno dei template della libreria di templateTilda e abbiamo creato un sito web per una personal stylist Annie a partire dal template. Valutiamo la sua velocità di caricamento utilizzando PageSpeed Insights.

Naturalmente, la velocità di caricamento dipende dalla complessità del sito web, dalla presenza di blocchi specifici e dall'eventuale collegamento di widget, contatori, statistiche e altri componenti aggiuntivi di terze parti che possono rallentare il caricamento del sito.

Abbiamo scritto questo articolo affinché possiate comprendere il problema e imparare a individuare le impostazioni che vi aiuteranno a creare un sito web a caricamento rapido. Ma dovete prendere una decisione importante: l'applicazione di tutti i suggerimenti della lista di controllo influirà non solo sulla velocità di caricamento del sito, ma anche sul suo design.

Lazy Load consente di caricare le immagini gradualmente, man mano che lo spettatore scorre la pagina, e non tutte insieme. Questa impostazione è attiva per impostazione predefinita e influisce direttamente sulle prestazioni del sito web.

Spesso i progettisti che creano siti web personalizzati disattivano il Lazy Load per qualche motivo: non è consigliabile farlo, perché rallenta il sito.

Assicuratevi che Lazy Load sia abilitato per il vostro sito web. Per farlo, andate in Impostazioni del sito → Altro, quindi assicuratevi che la casella "Disabilita caricamento pigro per le immagini" sia deselezionata. Inoltre, verificare che la funzione non sia disabilitata nelle impostazioni delle immagini e delle forme in Zero Block.

Il caricamento pigro e l'ottimizzazione manuale delle immagini sono le due cose più importanti da ottimizzare. Le immagini sono l'elemento più pesante del sito web, quindi il 70% della velocità di caricamento della pagina dipende da esse.

Tilda ha una caratteristica esclusiva: ilcaricamento adattativodelle immagini. Si tratta di una speciale tecnologia di elaborazione delle immagini che le ridimensiona in base alle dimensioni del contenitore del sito web, a seconda del dispositivo dell'utente. Inoltre, converte le immagini in WebP, il formato di nuova generazione che comprime l'immagine senza perdita di qualità, in modo che il sito web si carichi più velocemente. La conversione avviene automaticamente senza la necessità di eseguire ulteriori azioni.

In alcuni casi, l'ottimizzazione automatica "al volo" non è paragonabile alla compressione manuale delle immagini. Se la velocità di caricamento delle pagine è fondamentale per voi, vi consigliamo di ottimizzare le immagini utilizzando TinyPNG, un servizio online gratuito che utilizza una tecnologia di compressione dei dati senza perdita di qualità.

Un'altra soluzione è quella di aggiungere blocchi diversi per le versioni desktop e mobile del sito e caricare immagini di dimensioni e peso diversi. Ad esempio, è possibile farlo per la copertina del sito web.

L'algoritmo di Tilda sarà il seguente: quando la pagina viene caricata, ottimizza l'immagine "al volo" e se l'immagine ottimizzata occupa meno spazio dell'immagine originale, la visualizza automaticamente. Questo può accadere quando la cache si sta riscaldando e il sistema sta ancora raccogliendo le statistiche sul traffico per preparare in anticipo le immagini con la risoluzione necessaria. L'ottimizzazione manuale non è dannosa e, in alcuni casi, può addirittura contribuire a ottimizzare le immagini e ad aumentare la velocità di caricamento della pagina.

Questa categoria di ottimizzazioni è la seconda in termini di peso e importanza. I font di sistema, come Arial o Georgia, sono disponibili su qualsiasi computer. Esistono anche font collegabili, come Ubuntu e Roboto.

Se volete velocizzare il più possibile il vostro sito web, non vi consigliamo di utilizzare font personalizzati, ma di scegliere uno di quelli di sistema. In questo modo, è possibile risparmiare 100-400KB, il che è significativo quando si tratta di caricare le pagine.

Se avete bisogno di utilizzare un marchio o un'identità aziendale, potete utilizzare la nostra nuova funzione: il rendering istantaneo dei contenuti. Questa impostazione consente di mostrare il contenuto del sito web indipendentemente dal caricamento del font del marchio. Il sito web visualizzerà dapprima il font di sistema e dopo qualche secondo, una volta caricato il font, il testo verrà nuovamente renderizzato, questa volta nel font di marca.

Questa funzione non è abilitata per impostazione predefinita. Se la velocità di caricamento è più importante della fluidità di caricamento o dell'aspetto visivo, si consiglia di attivare questa funzione in Impostazioni del sito → Caratteri e colori → Avanzate.

Verificare se sono collegati script o codici di terze parti, come le chat o un contatore. Su Tilda, è possibile collegarli tramite il blocco T123. Pertanto, verificate se questo blocco è presente nella pagina o nell'intestazione del vostro sito web.

Secondo le nostre osservazioni, nel 95% dei casi il codice aggiunto al sito web non è ottimizzato per la strategia di caricamento e può rallentare notevolmente il rendering della pagina. Per questo motivo vi consigliamo di evitare l'uso di script di terze parti o di utilizzarli con una connessione corretta.

Se non si può fare a meno del codice di terze parti, ritardare il caricamento e l'inizializzazione degli script. I primi secondi di rendering della pagina sono molto importanti, quindi sarebbe meglio non caricare nulla di inutile. Ad esempio, si supponga di aggiungere un widget Intercom. In questo caso, si potrebbe collegare e inizializzare lo script 3 secondi dopo che il contenuto principale è stato reso (gli eventi "DOMContentLoaded" o "document ready"). Questo passo aiuterà a non bloccare il flusso di caricamento principale, in modo che la pagina venga resa più velocemente.

Ad esempio, su Tilda, i contatori vengono caricati con un ritardo di 2 secondi per impostazione predefinita. Per saperne di più, si veda il prossimo paragrafo.

L'inizializzazione ritardata del contatore è una nuova funzionalità che è stata recentemente resa disponibile per tutti gli utenti di Tilda . Affinché il contatore della pagina si connetta, il browser deve caricare uno script, analizzare il codice ed eseguirlo. I file di Google Analytics sono piuttosto pesanti, quindi rallentano la velocità di visualizzazione della pagina se vengono caricati tutti insieme. Per questo motivo, per impostazione predefinita, colleghiamo questi contatori 2 secondi dopo il caricamento della pagina.

È possibile verificare che questa impostazione non sia disattivata nelle Impostazioni del sito → Analytics.

Il punto sembra ovvio, ma funziona: meno informazioni ci sono sulla pagina, più veloce sarà il caricamento. Osservate il vostro sito web con occhio critico: è così necessario avere tutte le informazioni e le immagini sulla pagina, o è possibile accorciarle? Ad esempio, se avete una pagina molto lunga (più di 20 schermate), spostate parte del contenuto su un'altra pagina per aumentarne la velocità di caricamento. Questo è un aspetto che potete influenzare e regolare direttamente.

A volte gli utenti inseriscono una foto di copertina grande nella prima schermata e quattro immagini più piccole nel blocco successivo. In questo caso, il browser deve scaricare cinque immagini invece di una. Questo intasa il traffico, soprattutto quando si tratta di Internet mobile, ed è per questo che non consigliamo di inserire troppe immagini nella parte superiore della pagina.

Assicuratevi che il vostro sito web non sia esportato o sincronizzato attraverso un'API; in altre parole, assicuratevi che il vostro sito web si trovi sui server di Tilda. Nel caso in cui venga esportato, assicuratevi che il vostro server web sia configurato in modo ottimale.

Tilda ha costruito un'infrastruttura interna di qualità, che continuiamo a migliorare e sviluppare. Ci siamo occupati di molti aspetti: server affidabili e veloci, CDN per accelerare la consegna delle immagini, protezione contro gli attacchi DDoS e diverse altre modifiche tecniche volte a massimizzare la velocità di caricamento dei siti Tilda .

Per quanto riguarda l'hosting di terze parti, non possiamo controllare la quantità o la qualità del lavoro degli amministratori di sistema. Tuttavia, possiamo dare alcuni suggerimenti su ciò che si può fare per rendere più veloce il caricamento del proprio sito web se è stato esportato:
- Collegare CDN e visualizzare le immagini tramite una rete distribuita di distribuzione dei contenuti.
- Attivare le intestazioni di caching CSS/JS/HTML nelle impostazioni del server web, in modo che il browser non le scarichi ogni volta ma le prenda dalla cache.
- Abilitare la compressione Gzip o Brotli per i file CSS, JS e HTML.
- Nelle impostazioni, abilitare la compressione dei file di testo: CSS, JS, HTML.
- Aggiungete un attributo "async" agli script JS di terze parti, in modo che il loro caricamento non rallenti il caricamento della pagina.
- Aggiungete widget di terze parti solo quando è necessario, prevedendo un ritardo nell'inizializzazione di 2-3 secondi, in modo che il contenuto della pagina abbia tempo sufficiente per il rendering.

Tilda I siti web si caricano abbastanza velocemente per impostazione predefinita. Se volete velocizzare ancora di più il vostro sito web, utilizzate i nostri consigli della lista di controllo. Vi aiuteranno a creare un sito web ultraveloce, ma dovrete scendere a qualche compromesso in termini di design e grafica. Lasciamo sempre queste decisioni e priorità all'utente.

Da parte nostra, lavoriamo costantemente all'ottimizzazione della piattaforma e all'implementazione di nuove soluzioni che renderanno il vostro sito web ancora più veloce.