Una guida per principianti all'ottimizzazione del sito web

Immagine gentilmente concessa da Pexels.

Sono un principiante e sono riuscito a raggiungere il 99/100 nella classifica di ottimizzazione di Google. Se posso farcela, anche tu puoi.

Se sei come me, ti piacciono le prove. Ecco quindi i risultati di PageSpeed ​​Insights di Google per hasslefreebeats, un sito Web che mantengo e di recente ho trascorso un po 'di tempo a ottimizzare:

Uno screenshot del mio punteggio PageSpeed ​​Insights.

Sono abbastanza orgoglioso di questi risultati, ma voglio sottolineare che non avevo idea di come ottimizzare un sito Web solo un paio di settimane fa. Quello che ho da condividere con te oggi è semplicemente il risultato di un sacco di ricerche su google e risoluzione dei problemi, dolori che desidero risparmiarti.

Questo articolo è suddiviso in sottosezioni per ogni ottimizzazione, nel caso in cui si desideri saltare.

Non sono affatto un esperto, ma sono sicuro che se implementerai le tecniche di seguito, vedrai i risultati!

immagini

Immagine gentilmente concessa da Pexels (e sicuramente ottimizzata da Medium).

Come sviluppatore web principiante, le immagini non erano qualcosa a cui ho mai prestato molta attenzione. Sapevo che l'aggiunta di immagini di alta qualità al mio sito Web l'avrebbe reso più professionale, ma non ho mai smesso di considerare gli effetti che avrebbero sul tempo di caricamento della mia pagina.

La cosa principale che ho fatto per ottimizzare le mie immagini è stata comprimerle.

Guardando indietro, questo avrebbe dovuto essere abbastanza intuitivo sin dall'inizio, ma non era per me, quindi forse non è nemmeno per te.

Il servizio che ho usato per comprimere le mie immagini era Optimizilla, un sito Web di facile utilizzo in cui caricare le immagini, selezionare il livello di compressione desiderato e quindi scaricare l'immagine compressa. Ho visto che le dimensioni diminuiscono del 70% verso l'alto per alcune delle mie risorse, il che va LUNGO verso tempi di caricamento più rapidi.

Optimizilla non è certo l'unica scelta per le esigenze di compressione delle immagini. Alcuni software standalone e open source che puoi usare sono ImageOptim per Mac o FileOptimizer per Windows. Se preferisci comprimere utilizzando gli strumenti di compilazione, ci sono plugin Gulp e WebPack che dovrebbero fare il trucco. Non importa tanto come fai, purché lo faccia. I guadagni in termini di prestazioni valgono il minimo sforzo.

A seconda del tuo caso d'uso, potrebbe anche valere la pena esaminare il formato dei tuoi file. In generale, jpg sarà più piccolo di png. La differenza principale nel fatto che io usi l'uno o l'altro è se ho bisogno di trasparenza dietro l'immagine: se ho bisogno di trasparenza, uso png, altrimenti uso jpg. Puoi approfondire i pro ei contro di entrambi qui.

Inoltre, Google è uscito con un formato webp piuttosto dolce, ma dal momento che non è ancora supportato su tutti i browser, sono titubante a usarlo. Tieni d'occhio per ulteriore supporto in futuro!

Non ho fatto altro che comprimere le mie immagini per ottenere i risultati che ti ho mostrato sopra, ma se vuoi ottimizzare ulteriormente qui è un ottimo articolo.

video

Foto di Terje Sollie di Pexels.

Non ho usato video in nessuno dei miei progetti attuali, quindi mi limiterò a toccarlo brevemente poiché non mi sento la migliore risorsa per questo, in particolare.

Questa è una di quelle situazioni in cui probabilmente lascerei che i professionisti facciano il lavoro pesante. Vimeo offre un'eccellente piattaforma per l'hosting di video in cui degraderanno la qualità video per connessioni più lente e comprimeranno i tuoi video per ottimizzare le prestazioni.

Puoi anche ospitare i tuoi video su Youtube e quindi utilizzare questo strumento youtube-dl per scaricarli da Youtube durante la configurazione dei video in base alle esigenze del tuo sito Web.

Per altre possibili soluzioni, controlla Brightcove, Sprout o Wistia.

gzip

Prendilo? Cerniera lampo? Immagine gentilmente concessa da Pexels.

Non avevo idea di cosa fosse il gzipping quando inizialmente ho distribuito il mio sito web.

Per farla breve, gzip è un formato di compressione dei file che la maggior parte dei browser comprende e che può essere eseguito dietro le quinte senza che l'utente debba nemmeno sapere che sta accadendo.

A seconda di dove stai ospitando la tua applicazione, gzipping può essere semplice come lanciare un interruttore di configurazione per specificare che vuoi che il tuo server gzip i file quando li invii. Nel mio caso, il mio sito Web è ospitato su Heroku, che non fornisce questa opzione.

A quanto pare, ci sono pacchetti per aggiungere esplicitamente la compressione nel codice del server, il che consente di raccogliere i benefici del gzipping in cambio di poche righe di codice. Usando questo middleware di compressione, sono stato in grado di ridurre le dimensioni dei miei bundle Javascript e CSS del 75%.

Vale la pena verificare se il servizio di hosting fornisce un'opzione gzip. In caso contrario, guarda come aggiungere gzipping al tuo codice lato server.

Minimizzando

Ananas minimizzato per gentile concessione di Pexels.

La minimizzazione è 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 che si sta trasportando su Internet. È anche utile per offuscare il codice, il che rende più difficile per gli hacker subdoli rilevare i punti deboli della sicurezza.

In questi giorni, la minimizzazione viene solitamente eseguita come parte del processo di generazione con Webpack o Gulp o qualche alternativa. Questi strumenti di compilazione possono avere un po 'di una curva di apprendimento, quindi, se stai cercando alternative più facili, Google consiglia HTML-Minifier per HTML, CSSNano per CSS e UglifyJS per Javascript.

Browser-Caching

Non abbastanza come il browser memorizza i dati, ma è il più vicino possibile. Per gentile concessione di Pexels.

La memorizzazione di file statici nella cache del browser è un modo molto efficiente per aumentare la velocità del tuo sito Web, in particolare durante le visite di ritorno dallo stesso client. Non sapevo, fino a quando Google non me lo disse, che alcune delle mie risorse non venivano memorizzate nella cache in modo appropriato a causa della mancanza di intestazioni sulla risposta HTTP che stavo inviando dal mio server.

Non appena viene caricata la mia home page, viene inviata una richiesta al mio server per ottenere dati su un mucchio di brani che vengono quindi riprodotti in un lettore musicale. Non aggiorno molto spesso le canzoni su questo sito Web, quindi non mi importa se un utente accede al mio sito Web e vede le stesse canzoni dall'ultima volta che hanno visitato, se questo renderà la mia pagina un po 'più veloce per loro.

Per ottenere un aumento delle prestazioni, ho aggiunto il seguente codice all'oggetto risposta del mio server (server Express / Node):

res.append ("Cache-Control", "max-age = 604800000");
res.status (200) .json (risposta);

Tutto quello che sto facendo qui è di aggiungere un'intestazione di controllo della cache alla mia risposta, che dice che dopo una settimana (in millisecondi), le risorse dovrebbero essere riscaricate. Se aggiorni questi file più spesso, una durata massima più breve potrebbe essere una buona idea.

Rete di distribuzione dei contenuti

Immagine della vita reale di un CDN, per gentile concessione di Pexels.

Una rete di distribuzione di contenuti, o CDN, è una rete che consente agli utenti di tutto il mondo di essere geograficamente più vicini ai tuoi contenuti. Se un utente deve caricare un'immagine di grandi dimensioni dal Giappone, ma il tuo server si trova negli Stati Uniti, ciò richiederà più tempo rispetto a un server a Tokyo.

Una CDN ti consente di sfruttare un gruppo di server proxy situati in tutto il mondo, consentendo di caricare i tuoi contenuti più rapidamente indipendentemente da dove si trova l'utente finale.

Voglio notare che sono stato in grado di ottenere i risultati che hai visto prima di implementare una CDN - volevo semplicemente menzionarli poiché nessun articolo sull'ottimizzazione del sito Web sarebbe completo senza menzionarli. Avere uno di questi cattivi sul tuo sito Web è indispensabile se hai intenzione di avere un pubblico in tutto il mondo.

Alcuni CDN popolari includono CloudFront e CloudFlare.

miscellaneo

Ecco un altro paio di suggerimenti per spremere ancora più succo:

  • Ottimizza il tuo sito Web per caricare prima i contenuti above the fold per aumentare le prestazioni percepite del tuo sito. Un modo comune per farlo è caricare immagini pigre che non vengono visualizzate nella pagina di destinazione.
  • A meno che l'applicazione non dipenda da Javascript per il rendering dell'HTML, come un sito Web creato con Angular o React, è probabilmente sicuro caricare i tag degli script nella parte inferiore della sezione del corpo del file HTML. Ciò potrebbe influire sul tuo tempo di interattività, tuttavia, NON è una tecnica che consiglierei per ogni situazione.

In conclusione

Questa è solo la punta dell'iceberg quando si tratta di ottimizzare il tuo sito web. A seconda della quantità di traffico che stai ricevendo e del servizio che stai fornendo, potresti avere colli di bottiglia nelle prestazioni in molte aree diverse. Forse hai bisogno di più server, forse hai bisogno di un server con più RAM, forse il tuo for-loop triplo annidato potrebbe usare un refactoring - chi lo sa?

Non c'è una soluzione unica per accelerare il tuo sito e alla fine dovrai prendere le decisioni migliori per la tua situazione in base alle misurazioni. Non perdere tempo a ottimizzare qualcosa che non ha bisogno di essere ottimizzato. Analizza le prestazioni del tuo sito per trovare i colli di bottiglia, quindi attacca quelli in particolare.

Spero che tu abbia trovato qualcosa di utile in questo articolo! Come ho già detto, ho ancora molto da imparare in questo dominio. Se hai ulteriori suggerimenti o raccomandazioni, ti preghiamo di lasciarli nei commenti qui sotto!

Se ti è piaciuto questo articolo, dai qualche applauso e dai un'occhiata:

  • Strumenti di cui avrei voluto sapere quando ho iniziato a scrivere codice
  • Strumenti di cui avrei voluto sapere quando ho iniziato a scrivere codice: Revisited

Inoltre, dammi un seguito su Twitter.