In questo articolo andremo a vedere i principali aspetti legati al miglioramento delle performance in termini di velocità per il vostro sito web.
Indice
- Rendere più veloce un sito web curando le Immagini
- Caricamento dei Video
- Usare la compressione Gzip
- Minimizzazione
- Cache del browser
- CDN
1. Rendere più veloce un sito web curando le Immagini
Sono in molti a pensare che l’aggiunta di immagini di alta qualità al proprio sito web lo renda più professionale, senza considerare gli effetti negativi che hanno queste immagini sul tempo di caricamento della pagina web.
La cosa principale da fare per rendere più veloce un sito web è comprimere le immagini.
Un servizio che vi viene incontro per la compressione delle immagini è Optimizilla, un sito web di facile utilizzo in cui si caricano le immagini, si seleziona il livello di compressione desiderato e quindi si scarica l’immagine compressa. Le dimensioni possono diminuire fino al 70% per alcune immagini, il che porta verso tempi di caricamento più rapidi.
Optimizilla non è certo l’unico strumento disponibile per la compressione delle immagini. Alcuni software indipendenti e open source che si possono utilizzare per tale scopo sono ImageOptim per Mac o FileOptimizer per Windows.
Se si preferisce comprimere usando strumenti di compilazione, ci sono plugin come Gulp e WebPack.
A seconda del caso d’uso, potrebbe anche valere la pena guardare il formato dei file. In generale, jpg sarà più piccolo di png. La differenza principale risiede nel fatto che l’utilizzo dell’uno o dell’altro è se bisogna aggiungere della trasparenza all’immagine: se si ha bisogno della trasparenza, si dovrà utilizzare png, altrimenti è sempre consigliato l’utilizzo dell’estensione jpg nel salvataggio delle immagini.
Si possono approfondire i pro e i contro di entrambi da qui.
Inoltre, Google ha creato il formato webp ottimizzato per la compressione.
Ma poiché non è ancora supportato su tutti i browser, sconsigliamo per il momento l’utilizzo su tutte le immagini del sito.
2. Caricamento dei Video
In molti per non avere le pubblicità di YouTube o di altri servizi sui propri video, caricano direttamente i file sui propri server e utilizzano dei player nativi del proprio CMS o in HTML.
Questa è una di quelle situazioni in cui probabilmente bisognerebbe solamente affidarsi a questi servizi ottimizzati per il caricamento dei video. Vimeo offre un’eccellente piattaforma per l’hosting di video in cui spicca la qualità dei video con connessioni più lente e la loro compressione che ottimizza al massimo le prestazioni.
Si possono anche ospitare i video su YouTube e quindi utilizzare questo strumento youtube-dl per scaricarli da YouTube mentre si configurano i video in base alle esigenze del vostro sito web.
3. Usare la compressione Gzip
Gzip è un formato di compressione file che la maggior parte dei browser comprende e che può essere eseguito dietro le quinte senza che l’utente se ne accorga.
A seconda di dove viene ospitato il sito web, la compressione può essere semplice basterà specificare al server di eseguire il gzip dei file quando li invia.
Noi di PixelHub diamo la possibilità con i nostri server di avere questa opzione, contattaci per scoprire di più.
Esistono anche pacchetti per aggiungere la compressione in modo esplicito nel codice del server, il che consente di raccogliere i vantaggi della compressione gzip in cambio solo di poche righe di codice. Utilizzando questo middleware di compressione, si è in grado di comprimere i file Javascript e CSS fino al 75%.
4. Minimizzazione
La minimizzazione (o in inglese Minification) è il processo di rimozione di caratteri non necessari dal codice senza influire sulla sua funzionalità (spazi bianchi, caratteri di nuova riga e così via).
Ciò consente di ridurre le dimensioni del file.
La minification viene solitamente eseguita come parte del processo di compilazione con Webpack o Gulp. Questi strumenti di costruzione possono avere una curva di apprendimento notevole, tuttavia, quindi se si cercano alternative più semplici, Google consiglia Minificatore HTML per HTML, CSSNano per CSS, e UglifyJS per Javascript.
5. Cache del browser
La memorizzazione di file statici nella cache del browser è un modo molto efficiente per aumentare la velocità del sito web, soprattutto nelle visite di ritorno dallo stesso client.
6. CDN
Rendere più veloce un sito web usando una CDN o rete di distribuzione dei contenuti, è un meccanismo che consente agli utenti di tutto il mondo di essere geograficamente più vicini ai contenuti. Se un utente deve caricare un’immagine di grandi dimensioni dal Giappone, ma il server è negli Stati Uniti, questo richiederà più tempo rispetto alle richieste fatte ai server situati a Tokyo.
Una CDN consente di sfruttare una serie di server proxy situati in tutto il mondo, riuscendo a caricare i contenuti del sito web più rapidamente indipendentemente da dove si trova l’utente finale.
Alcuni CDN popolari sono CloudFront e CloudFlare .
Conclusione
Questa è solo la punta dell’iceberg quando si tratta di rendere più veloce un sito web. A seconda della quantità di traffico che sta ricevendo e del servizio fornito, si possono avere colli di bottiglia nelle prestazioni in molte aree diverse.
Non esiste una soluzione valida per tutti quando si tratta di velocizzare un sito web e alla fine si devono sempre prendere le decisioni migliori in base alle esigenze.
