Il mondo si muove sempre più velocemente.
Appena esce il nuovo iPhone, tutti si affrettano ad essere i primi a prenderlo.
Quando ci sono le ultime notizie, le persone sono incollate ai loro schermi TV in attesa di aggiornamenti mentre i cronisti si affrettano a essere i primi a dare aggiornamenti . Non ci sorprende che le persone si aspettino questo stesso tipo di agilità e velocità quando navigano sul Web.
Vogliono che la loro esperienza sia senza ostacoli, in modo che possano ricevere con il minimo sforzo le informazioni che stanno cercando.
L’importanza del tempo di caricamento del sito Web
Oggi gli utenti appena trovano siti Web con velocità di caricamento insufficienti o prestazioni inadeguate, lasciano subito un sito.
Circa la metà degli utenti web si aspetta che un sito venga caricato in 2 secondi o meno. Se non viene caricato entro 3 secondi, questi utenti tendono ad abbandonare il sito.
Una statistica ancora più allarmante è che il 64% degli acquirenti che sono insoddisfatti dell’esperienza e dei tempi di caricamento di un negozio online si rivolgeranno altrove.
Ciò significa che non solo perdi i tuoi attuali visitatori e diminuisci i tassi di conversione, ma corri il rischio che il tuo sito perda il traffico da quei clienti che potrebbero aver indirizzato il tuo sito web ad altri.
I secondi fanno quindi la differenza. Non puoi più permettere al tuo sito di essere impantanato da immagini e file non ottimizzati. I tuoi utenti si aspettano che le tue pagine web si carichino velocemente.
Con questo in mente, diamo un’occhiata ai modi per ottimizzare il tuo sito Web per la migliore prestazione possibile.
Riduci al minimo le richieste HTTP
HTTP (Hypertext Transfer Protocol) Le richieste vengono conteggiate ogni volta che un browser recupera un file, una pagina o un’immagine da un server web.
Queste richieste tendono a occupare circa l’80% del tempo di caricamento di una pagina web. Il browser limita anche le richieste tra 4-8 connessioni simultanee per dominio, il che significa che il caricamento di oltre 30 asset contemporaneamente non è un’opzione.
Ciò significa che più richieste HTTP deve caricare, più tempo ci vuole per la pagina e recuperarle tutte, aumentando il tempo di caricamento della tua pagina web.
Come ridurre le richieste HTTP
Anche se l’unica soluzione sembra quella di limitare il design delle tue pagine mantenendole semplici, ci sono diverse tattiche che puoi usare per ridurre le richieste HTTP per alleggerire il tuo browser.
Combinare i file CSS / JS – Piuttosto che forzare il browser a recuperare più file CSS o Javascript da caricare, prova a combinare i file CSS in un file più grande (lo stesso per JS). Questo può essere difficile se i fogli di stile e gli script variano da una pagina all’altra, ma riuscire a unirli alla fine aiuterà i tempi di caricamento a lungo termine.
Usa le query per caricare solo ciò che è necessario – Se devi caricare solo determinate immagini sul desktop o devi eseguire uno script specifico solo su dispositivi mobili, utilizzare istruzioni condizionali per caricarle può essere un ottimo modo per aumentare la velocità. In questo modo, non stai forzando il browser a caricare una varietà di script o immagini che non saranno utili per determinati dispositivi.
Riduci il numero di immagini che usi – Se trovi che alcune delle tue pagine sono piuttosto pesanti, prova a rimuoverne alcune, soprattutto se le dimensioni dei file sono grandi. Ciò potrebbe non solo aiutare a ridurre le richieste HTTP di immagine, ma potrebbe migliorare il tuo UX rimuovendo le immagini che distraggono e che non corrispondono ai tuoi contenuti scritti.
CSS Sprites – Se applicabile , puoi combinare le immagini che si usano abbastanza spesso sul tuo sito web in un cc sprite e accedendo alle immagini usando CSS background-image e background-position impedisce al browser di cercare costantemente di recuperare diverse immagini ogni volta che alcune pagine del tuo sito caricano . In questo modo, il browser recupera solo quello che è possibile utilizzare più volte nella pagina posizionando correttamente l’immagine giusta nella vista per ciascuna area della pagina.
Utilizzare CDN e rimuovere script / file inutilizzati
Più che probabilmente, molti dei tuoi utenti non si troveranno nelle immediate vicinanze del tuo server web.
Ridurre questa distanza diffondendo i tuoi contenuti su una varietà di server dislocati geograficamente non è un’opzione praticabile e sarà un po ‘troppo complicata da implementare.
È qui che entra in gioco una rete di distribuzione dei contenuti (CDN). Un CDN è una raccolta di server Web distribuiti in più sedi in modo che i contenuti possano essere distribuiti in modo più efficiente agli utenti. I CDN vengono in genere utilizzati per contenuti statici o file che devono essere toccati una volta caricati.
I server sono selezionati in base alla misura della prossimità della rete dell’utente. Ad esempio, viene scelto il server con il tempo di risposta più rapido e / o il minor numero di hop di rete.
Le società più piccole possono trovare un CDN non necessario o al di fuori del proprio budget, quindi l’utilizzo di siti Web come CNDjs che dispone di una libreria di file e framework JS e CSS può aiutare a impedire l’hosting di determinati file sui propri server aumentando il tempo di caricamento.
Se ritieni che il sito Web della tua azienda possa trarre vantaggio dall’utilizzo dei CDN, prenditi del tempo per valutare anche il tuo sito per riconoscere se ci sono script inutilizzati o file CSS sul tuo sito.
Mentre la cosa più semplice (ma più dispendiosa in termini di tempo) è che il tuo sviluppatore passi attraverso il tuo sito Web e controlli ogni pagina, ci sono alcuni strumenti come UnCSS che possono rimuovere gli stili inutilizzati dal tuo sito web e ridurre le dimensioni del tuo file CSS.
Caching del browser
Il caching del browser consente di scaricare sul disco rigido le risorse del tuo sito Web una volta in una cache o uno spazio di archiviazione temporaneo. Questi file sono ora memorizzati localmente sul tuo sistema, il che consente a carichi di pagina successivi di aumentare di velocità.
Le risorse statiche hanno una durata memorizzata nella cache di almeno una settimana, mentre gli articoli di terze parti come i widget o gli annunci durano solo un giorno.
CSS, JS e immagini e file multimediali dovrebbero avere una scadenza di una settimana, ma idealmente, un anno, come più lungo saranno le linee guida viola RFC .
Comprimi le immagini e ottimizza i file
Le immagini al momento occupano il 60% dei byte medi caricati per pagina , circa 1504 KB. Rispetto ad altre risorse, ad esempio script (399 KB), CSS (45 KB) e video (294 KB), le immagini richiedono una grande quantità di richieste HTTP inviate.
Come ho accennato in precedenza, rimuovi qualsiasi immagine che ritieni non siano necessaria. Questo significa togliere le librerie di icone che non vengono utilizzate, quei tre tipi di carattere in più che si pensava di poter utilizzare, ma che non potevano essere usati (come sfondi colorati o sfumature).
Dopo aver eliminato tali risorse, dai un’occhiata alle immagini che hai sul tuo sito e controlla le loro dimensioni. Il più delle volte, molte persone tendono a scaricare immagini da siti fotografici di stock e caricarle sul loro server e usarle senza mai preoccuparsi di ottimizzarle per il web.
Se ti ritrovi a utilizzare immagini di grandi dimensioni, soprattutto per le immagini degli eroi, eseguili attraverso un software di ottimizzazione come Compressor.io o Image Optimizer . Mantieni tutte le tue immagini al di sotto dei 150KB, nulla al di sopra di 1920px in larghezza, a un livello di qualità medio / medio / 72 dpi. Più grande è l’immagine più si noterà un caricamento delle immagini molto lento dopo il rendering della pagina, nonché i tempi di risposta lenti al comportamento degli utenti.
Quando si tratta di quali estensioni di file dovresti usare per cosa, usa questa come formula di base:
SVG è adatto per le immagini vettoriali a cui vuoi ricevere una grande quantità di dettagli.
Alcune icone possono utilizzare librerie di font come FontAwesome per rendere alcuni elementi grafici piuttosto che salvare singole immagini.
Il PNG deve essere utilizzato per le immagini che richiedono uno sfondo trasparente dietro, come un’immagine circolare di una persona o il logo “F” di Facebook.
JPG è il migliore per le fotografie o qualsiasi cosa in cui i dettagli fini siano meno importanti.
Mentre le immagini continueranno a occupare la maggior parte delle richieste HTTP, l’ottimizzazione di queste e delle altre risorse alla fine le ridurrà e aumenterà le prestazioni generali del tuo sito web.
