Come progettare un'interfaccia costruita per la velocità

Il tuo sito web è lento? Essere onesti. Potrebbe essere più veloce? Gli utenti richiedono siti Web che si caricano rapidamente e continuano a fornire contenuti senza ritardi. Se il tuo sito Web è meno arretrato nel soddisfare questa richiesta, gli utenti potrebbero abbandonare il tuo sito (e potrebbero non tornare mai più).

Oggi esamineremo i modi per assicurarci che l'interfaccia del tuo sito web sia costruita per la velocità, quindi non dovrai più preoccuparti dei tempi di caricamento della pagina.

Prova il tuo sito web

Prima di fermarti a? Non c'è modo il mio sito è lento ,? provalo. Google ha un ottimo strumento che chiunque può utilizzare per testare qualsiasi sito web inserendo l'URL.

Ottieni un rapporto elegante che ti dice quanto velocemente il tuo sito si sta muovendo e dove potrebbe essere migliorato. È consigliabile eseguire periodicamente il test per assicurarsi che tutto funzioni correttamente. (Inoltre, riduce le prestazioni sui dispositivi mobili e desktop e offre suggerimenti per il miglioramento.)

Il report contiene tre consigli: dovrebbe risolvere, considerare la correzione e passare - per i seguenti elementi:

  • Memorizzazione nella cache del browser
  • Ottimizzazione dell'immagine
  • Risposta del server
  • Script e CSS above the fold
  • Compressione
  • redirect
  • Minificazione di CSS, HTML e JavaScript
  • Prioritizzazione del contenuto visibile

Scarica i plugin non necessari

Stai tenendo in considerazione plug-in o aggiunte che semplicemente non usi? È ora di scaricarli.

Anche gli elementi non in uso stanno allontanando la velocità dal tuo sito. (Questo è particolarmente vero se stai lavorando su un sistema come WordPress.)

Entra in modalità di pulizia e rimuovi tutti i plugin non utilizzati. Dovresti considerare di pensare anche ai plugin in uso e assicurarti che li stai effettivamente utilizzando o che contribuiscono all'esperienza complessiva dell'utente, se non trovi un'opzione migliore.

Oltre al numero di plug-in, la qualità è anche una preoccupazione. Non aggiungere solo vecchi plug-in al tuo sito web. Prova a trovare elementi che forniscano un valore reale e ricevano un punteggio elevato. Gli elementi vecchi e non aggiornati possono anche trascinare il tuo sito verso il basso.

Condividi solo come necessario

Mentre stiamo pensando ai plugin, quanti pulsanti di condivisione dei social media hai sul tuo sito web? Ora rispondi onestamente: quanti ne hai effettivamente bisogno?

Troppi di questi pulsanti possono essere fonte di confusione per gli utenti: quanti ne condivideranno effettivamente su più piattaforme, e impoveriranno velocità e tempo di caricamento. (Questo è particolarmente vero per quelli che stanno cercando di capire quanti like, o condivide un post già con query in esecuzione in entrambe le direzioni.)

Scegli una o due reti in cui sei attivo e in cui gli utenti si connettono regolarmente al tuo sito web e includono quei pulsanti. Lascia perdere il resto. Stanno solo intralciando.

Diffida del sovraccarico delle immagini

Video, illustrazioni, foto e animazioni? Oh mio! Tutti questi fantastici elementi visivi possono aumentare i tempi di caricamento. Scegliere saggiamente.

Prima di aggiungere elementi visivi al design del tuo sito web, valuta il suo valore rispetto ad altri elementi. Fornisce qualcosa per gli utenti? Se è così, procedere. In caso contrario, perché stai usando questo elemento di design?

Dovresti ottimizzare tutte le immagini in modo appropriato per il web. Come regola generale, le immagini dovrebbero essere grandi solo quanto necessario. Non esagerare e caricare foto a grandezza naturale. Ci vuole un po 'di lavoro sul front end, ma sarai contento di averlo fatto in seguito (in particolare se il tuo sito web continua a crescere).

Approfitta anche di altri trucchi. Prova i font di icone piuttosto che le icone basate su immagini. Converti elementi in SVG (formato vettoriale ridimensionato) se un carattere di icona non funziona. Usa tanto HTML e CSS? Magia? come è possibile e non impantanare il sito con elementi che vengono caricati come foto come pulsanti, frecce e altri strumenti di interfaccia utente.

Prendi un carico con gli strumenti di restringimento

I file piccoli sono la chiave per la massima velocità. Il bilanciamento è nell'idea che i display ad alta risoluzione ti consentano di condividere e mostrare i contenuti con la massima qualità. Ecco dove arrivano gli strumenti restringenti.

Se non ti senti sicuro della tua capacità di ridimensionare e contrarre - o semplicemente non stai ottenendo il risultato desiderato - prova una di queste opzioni per portare i file alle dimensioni più piccole utilizzabili.

  • WP Smush riduce le immagini per gli utenti di WordPress
  • Kraken comprime le immagini per tutti gli utenti
  • TinyPNG riduce ancora di più le dimensioni del formato comune
  • File di pacchetti Gzip per una compressione ottimale
  • Minimizza Il tuo CSS riduce la dimensione complessiva del codice e include un'API
  • SpriteMe trasforma le immagini di sfondo in uno sprite CSS per salvare le richieste HTTP
  • CSS Compressor riduce la dimensione complessiva del codice

Basta cache

Abilita il caching sul tuo sito web.

Se non lo fai, i tuoi utenti pagano il prezzo. Ci sono ancora alcune persone là fuori che potrebbero obiettare diversamente, ma il valore per gli utenti supera questi argomenti. Il tuo sito web deve essere veloce.

Una cache crea un file temporaneo dalle pagine in modo che il browser? Si ricordi? il sito quando ritorna un utente. Riduce l'utilizzo della larghezza di banda, il carico del server e il tempo di ritardo (effettivo o percepito). Gli utenti ti ringrazieranno, in particolare per quanto riguarda l'accesso a siti Web di grandi dimensioni.

Puliscilo regolarmente

Proprio come è necessario pulire la casa su base regolare, è necessario pulire e mantenere il database del sito Web, collegamenti e file.

Questi sono gli articoli sulla lista di controllo per la pulizia del tuo sito web:

  • Ottimizza il tuo database. Con il passare del tempo il tuo database può essere intasato da revisioni, foto fuori uso e dati salvati. Non devi tenerlo tutto. Elimina gli elementi che non fanno più parte del piano del sito web.
  • Non immagini hotlink. Tirare le immagini dal sito Web di qualcun altro (e dal server) al tuo è solo una cattiva idea. Ed è lento. Lo stesso vale per quasi tutte le altre richieste di file esterni. Usali solo quando necessario.
  • Correggi link I collegamenti interrotti potrebbero non rallentare il tuo sito, ma rallentano la connessione che gli utenti effettuano dal tuo sito ad altri luoghi, il che può essere altrettanto brutto.Prendi l'abitudine di controllare e correggere collegamenti interrotti.
  • Mantieni tutto aggiornato. Se stai utilizzando una piattaforma come WordPress, prendi gli aggiornamenti. Se stai usando un tema o elementi in scatola di qualsiasi tipo, lo stesso è vero. Gli aggiornamenti possono contenere patch che contribuiscono a velocizzare e proteggere il tuo sito Web da potenziali minacce. (E niente è più lento di un sito che è stato violato o infetto da malware.)

Conclusione

Ora consulta l'elenco sopra riportato e torna allo strumento Google Analytics Insights. Eseguilo di nuovo. Noti una differenza?

Nulla renderà un utente più felice e più propenso a tornare sul tuo sito web di una grande e veloce esperienza. Durante tutte le fasi del design visivo, ricorda di pensare anche al design dell'interfaccia in modo che il tuo sito web sia costruito per la velocità.