Tutti amano una piccola animazione di caricamento, giusto? Ma se questo divot dura più di un secondo o due, porta solo l'attenzione sul fatto che il sito sta caricando lentamente. E questo è un killer del sito web.
Gli utenti si aspettano che i siti Web vengano caricati in modo rapido ed efficiente. Il tuo compito è garantire che il design non sia solo visivamente piacevole ma anche funzionale al 100%. Se il tuo sito sta trascinando un po ', puoi smettere di preoccuparti adesso perché abbiamo sette suggerimenti per aiutarti a velocizzare il tuo sito web con piccole modifiche al design. (Assicurati di visitare ciascuno dei siti web esposti nel post, sono belli e caricano rapidamente alla velocità.)
1. Prenditi cura delle animazioni
L'animazione nel design del sito Web è uno dei? tendenze del 2015. Non lasciarti indietro creando enormi file che non verranno caricati. Inizia con piccoli tocchi animati mentre inizi a lavorare con questo tipo di effetto e passa a animazioni più grandi dopo aver avuto un'idea di come funzionano e lavorare con il tuo framework generale del sito web.
La chiave per le animazioni non sta caricando un gruppo di file video sul tuo sito web. Più piccola è l'animazione, più facile è creare qualcosa con un ingombro minimo. Allora, da dove inizi?
Fai qualcosa di semplice e divertente come creare uno stato di hover animato. Avere un pulsante per cambiare colore o espandere è un effetto elegante che ti aiuterà a padroneggiare i CSS e ad avere un buon feeling con l'animazione di base prima di passare a elementi più grandi. Potresti anche considerare le animazioni di caricamento AJAX o parallasse. La cosa bella di queste opzioni è che ti dà il tempo di caricare gli elementi senza che l'utente se ne accorga. Poiché gli elementi vengono caricati mentre gli utenti scorrono, guadagnerai alcuni secondi preziosi per avere tutto pronto.
2. Ottimizza le immagini
Con il numero di display HD e retina disponibili per gli utenti, potresti essere tentato di caricare tutte le immagini a grandezza intera ad alta risoluzione quando crei il tuo sito web. Non cadere in questa trappola. La maggior parte di queste immagini è probabilmente troppo grande per il tuo sito da gestire in modo efficiente.
Conosci i tuoi tipi di file. I formati di file più comuni per le immagini sul web sono JPG, PNG, GIF e SVG.
- JPG: Più adatto per le foto, i file JPG possono avere dimensioni variabili da piccole a enormi. Quando si salvano i file JPG per l'utilizzo del sito Web, assicurarsi di salvare un file ottimizzato. (In Adobe Photoshop, è possibile ottimizzare le immagini per il Web utilizzando le impostazioni di esportazione in File> Esporta> Esporta come.)
- PNG: Usa questo formato file per le immagini che includono il testo, in modo che i caratteri vengano visualizzati correttamente. Questo è in genere un file piuttosto piccolo.
- GIF: Il formato di file preferito per gli elementi animati più piccoli, come l'immagine in stile meme animata mai popolare. Ma attenzione, questo formato di file può diventare pesante se non si presta attenzione.
- SVG: Se hai bisogno di un'immagine vettoriale per il web, questa è l'opzione migliore. Può essere usato per qualsiasi cosa, dalle icone ai loghi.
3. Usa il codice dove possibile
Potresti essere tentato di creare un bel po 'di icone e immagini per il tuo sito Web e caricarle come un singolo elemento. Questo può causare alcuni problemi. Invece, usa il codice per chiamare questi elementi quando possibile.
Usa i CSS per caricare anche le immagini di sfondo. Questo? Forza? il tuo sito per caricare tutto il resto sullo sfondo, in modo che gli utenti possano iniziare a vedere subito altri elementi e testo sul sito. W3Schools ha un tutorial fantastico e semplice su come farlo.
Ci sono molti strumenti, dalle icone di Font Awesome a tantissime altre librerie CSS e JavaScript che puoi usare per creare fantastici elementi con effetti divertenti e leggeri. (CSS Design Awards ha una collezione particolarmente bella di 30 pulsanti e elementi di forma da provare).
4. Mantenere i video brevi
Un altro elemento di design web di tendenza è l'uso di video a schermo intero sulla tua home page. Questa può essere un'altra trappola del tempo di caricamento. Ti troverai intrappolato tra qualità video, contenuti video e velocità e dovrai sacrificare da qualche parte.
I video migliori sono molto brevi - solo un paio di secondi - e si collegano in modo che l'azione non si fermi. Non è necessario includere suoni o altri effetti.
Puoi provare qualche altro trucco per ridurre il più possibile le dimensioni del tuo file.
- Pensa a una sovrapposizione o sfocatura del colore su un video con una risoluzione inferiore. Può ancora sembrare pulito, ma non richiederà la stessa larghezza di banda.
- Considera un video di dimensioni inferiori a quelle dello schermo intero.
- Abbandonare la riproduzione automatica, che può essere un trucco? gli utenti a pensare che il tuo sito si carichi più velocemente di quanto non sia.
- Non rimanere bloccato con video lunghi. Se vuoi mostrare più video clip, considera un video? elemento o modifica manualmente i video su una pianificazione in modo che gli utenti vedano qualcosa di nuovo ogni volta che visitano il sito. (Non importa quanto sia buona la tua clip, pochi utenti guarderanno più di qualche secondo, quindi non sacrificare il tempo di caricamento per i clip più lunghi.)
5. Pensa al tema
Se stai usando WordPress o un altro sistema di gestione dei contenuti con un tema, ricorda che non tutti i temi sono costruiti allo stesso modo. Mentre probabilmente avrai più fortuna con un'opzione premium - alcuni dei quali ti permettono di disattivare? elementi non utilizzati: dai un'occhiata al codice e costruisci per assicurarti che non sia la cosa che fa impantanare il tuo sito.
6. Guarda i tuoi plugin
Hai un sacco di plugin o applicazioni di terze parti legate al tuo sito? Li stai utilizzando tutti attivamente? Assicurati di disattivare i plugin non utilizzati per ottimizzare l'efficienza.
Gli utenti di WordPress possono sfruttare il Plugin Performance Profiler per vedere quali plugin sono attivi e come funzionano. Questo può aiutare a risolvere e identificare problemi e rimuovere o riconfigurare quei plugin. (Un'area problematica comune è spesso plug-in di condivisione sociale.)
7. Comprimi, comprimi, comprimi
Non solo i singoli componenti del tuo sito web possono essere compressi, ma puoi anche comprimere il sito nel suo insieme per mantenerlo attivo e funzionante rapidamente. Tra gli elementi che possono essere compressi ci sono i file CSS e JavaScript, le immagini e i video (ridimensionando) e il sito per un po 'usando uno strumento come GZIP.
I file minimizzati sono la soluzione migliore quando si tratta di plug-in e si creano file più piccoli. Volete anche verificare come è progettato il codice all'interno del sito. Per la massima velocità, tutto il codice JavaScript deve essere contenuto in un unico file e tutti i CSS dovrebbero essere contenuti in un altro file. (Un'altra nota: dove si colloca anche questo codice, collega CSS alla parte superiore della pagina e JavaScript nella parte inferiore per aumentare la velocità del sito.)
Conclusione
Il tuo sito si sta caricando abbastanza velocemente? In caso contrario, è il momento di modificarlo per rispettare i tempi di caricamento ottimali. (Se devi pensare a questa domanda, allora il tuo sito probabilmente non è abbastanza veloce.)
I siti web devono essere veloci in modo che gli utenti possano interagire immediatamente. Maggiore è il tempo di caricamento della pagina, indipendentemente dal dispositivo, più è probabile che gli utenti abbandonino del tutto il sito. Quindi prenditi qualche minuto oggi o questa settimana e consulta questo elenco per assicurarti che il tuo sito funzioni a un livello ottimale.
Fonte immagine: Mohammed Al-Sultan.