Google PageSpeed

Panoramica

I siti Web pubblicati sulla piattaforma vengono ottimizzati per ottenere punteggi molto elevati nel test Google PageSpeed. Questo test esamina molti dettagli tecnici della costruzione delle pagine Web e verifica che soddisfino le best practice che consentono un caricamento veloce dei siti Web. Il controllo più importante nel test PageSpeed riguarda la struttura del codice del sito Web. Google si assicura che il codice sia strutturato in modo tale da consentire al browser di caricare il contenuto velocemente.

Motivi alla base dell'ottimizzazione

Crediamo che la velocità del sito sia una delle questioni più importanti al giorno d'oggi nel mondo del Web. I siti Web che si caricano lentamente vengono ignorati a favore di altri, coinvolgono meno gli utenti e conferiscono all'intero Web una reputazione negativa di lentezza. Sappiamo che i siti Web che rispondono più velocemente offrono un grande valore ai visitatori, fornendo a ogni persona un'esperienza di navigazione migliore.

Motivi per cui Google ha realizzato questo strumento

Google ha realizzato lo strumento PageSpeed perché ha ritenuto che molti siti Web si caricano troppo lentamente e non forniscono i contenuti agli utenti con la velocità desiderata. Google sa che gli utenti preferiscono i siti Web che presentano più rapidamente i contenuti, permettendo sia a Google sia al sito Web di assicurare un'esperienza complessiva migliore. Di solito, questo significa che un sito Web deve caricarsi in meno di tre secondi. Poiché il prodotto principale di Google (la ricerca) si basa sui siti Web di altre persone, Google vuole assicurarsi che i webmaster, i designer e gli sviluppatori creino siti Web che si caricano rapidamente. 

Controlli effettuati da Google

Google dispone di un elenco di 10 ottimizzazioni da valutare nelle versioni del sito Web per desktop e dispositivi mobili. Esamina quindi l'ottimizzazione del sito in base a ciascuno di questi controlli fino a ottenere un punteggio complessivo (da 1 a 100) relativo alla velocità del sito Web. Ecco i controlli effettuati da Google:

  • Evitare i reindirizzamenti della pagina di destinazione: gli utenti non dovrebbero essere reindirizzati a un'altra pagina del sito Web durante il caricamento. Ad esempio, non è opportuno reindirizzare tutti i visitatori alla seconda versione della home page. 

  • Eliminare i codici JavaScript e CSS che bloccano il rendering del contenuto iniziale: questo è di gran lunga il controllo più importante svolto da Google. Il codice del sito Web viene esaminato per assicurare che sia data priorità al contenuto piuttosto che al codice. Spesso gli sviluppatori di siti Web collocano script e file CSS pesanti all'inizio di un file HTML. Il browser elabora e carica prima queste risorse, anziché il contenuto. Questo controllo assicura che il contenuto iniziale abbia la priorità. Nota: per "contenuto iniziale" si intende il primo contenuto mostrato a un utente durante il caricamento di una pagina Web. Di solito è costituito dall'intestazione, dalla struttura di navigazione e dal contenuto più in alto nel corpo della pagina.

  • Abilitare la compressione: questo controllo si assicura che il server Web comprima (ossia renda più piccoli) i dati non elaborati (HTML, CSS e JavaScript) prima di trasmetterli via Internet al browser. Si ottengono notevoli diminuzioni della dimensione totale del sito Web.

  • Sfruttare la cache del browser: il controllo della cache assicura che il browser salvi il contenuto in locale, invece di ricaricarlo al successivo accesso al sito. Questo consente di risparmiare tempo prezioso, spesso perso per il collegamento e il download di contenuti a seguito del ricaricamento della pagina.

  • Minimizzare il codice CSS: significa rendere il più piccolo possibile il file CSS rimuovendo spazi aggiuntivi, interruzioni di riga e altri formati. È un po' come comprimere il file per ridurne la dimensione totale.

  • Minimizzare il codice JavaScript: come per la minimizzazione del codice CSS, l'operazione di minimizzazione del codice JavaScript può ridurre notevolmente le dimensioni del singolo file che viene scaricato dal browser.

  • Minimizzare il codice HTML: simile ai due casi precedenti, questa operazione rimuove gli spazi in eccesso dal codice HTML del sito Web.

  • Ottimizzare le immagini: il secondo controllo più importante tra quelli svolti da Google assicura che le immagini inviate al browser siano ottimizzate, compresse e non troppo grandi. Le immagini rappresentano circa il 65-70% della dimensione totale (o peso) di un sito Web. L'ottimizzazione delle immagini consente di comprimere le immagini e renderle il più piccole possibile prima che il browser le scarichi. Le operazioni importanti da svolgere sono due: (1) Assicurarsi che le immagini siano compresse. È necessario utilizzare strumenti di compressione per rendere le immagini più piccole senza ridurne la qualità. (2) Ridimensionare le immagini. Non è necessario fornire un'immagine molto grande (ad esempio 5000 pixel) a un browser per dispositivi mobili, caso in cui è consigliabile ridimensionare l'immagine.

  • Dare priorità ai contenuti visibili: assicura che il contenuto sia inserito all'inizio del codice HTML del sito Web. È opportuno evitare di caricare contenuti aggiuntivi che non sono rilevanti per il primo caricamento del sito Web.

  • Ridurre il tempo di risposta del server: questo controllo esamina il server per assicurarsi che risponda molto rapidamente ai visitatori del sito Web. Google richiede che l'utente non debba attendere più di 200 ms (1/5 di secondo) per ottenere il contenuto o il codice HTML dal server.

Che cosa facciamo

Abbiamo ottimizzato i siti Web realizzati sulla nostra piattaforma per ottenere punteggi molto elevati, in particolare nel test Google PageSpeed. Significa che abbiamo esaminato i test sopra elencati e abbiamo ottimizzato i nostri siti Web per ciascuno di essi. Ecco una panoramica delle modalità di gestione di ognuno di questi controlli:

  • Evitare i reindirizzamenti della pagina di destinazione: per la maggior parte dei siti Web, superiamo questo controllo al 100%. La raccomandazione è assicurarsi di non inviare a clienti, partner e così via collegamenti che non corrispondono a una pagina reale del sito Web.

  • Eliminare i codici JavaScript e CSS che bloccano il rendering del contenuto iniziale: durante la pubblicazione dei siti Web, ottimizziamo la loro struttura per conformarci a questa raccomandazione. Le operazioni svolte sono le seguenti: (1) Calcolo di quello che viene definito codice CSS 'critico'. Significa che esaminiamo il sito Web e valutiamo quali stili CSS sono necessari per visualizzare il sito Web. Inseriamo quindi questo contenuto in linea all'interno del sito Web in modo che venga caricato per primo. (2) Spostiamo quindi tutti gli script alla fine del sito Web, in modo che il contenuto sia caricato per primo.

  • Abilitare la compressione: utilizziamo la compressione gzip per le connessioni al nostro sito Web. Assicuriamo così che il file sia compresso, trasferito su Internet e quindi decompresso dal browser.

  • Sfruttare la cache del browser: abbiamo impostato intestazioni di caching su tutti i file caricati. Assicuriamo così che i browser che scaricano questi file (CSS, JS, immagini) sappiano come memorizzare temporaneamente il file nella cache del browser, in modo che al successivo accesso al file il browser possa utilizzare quello memorizzato in locale sulla macchina, senza doverlo scaricare nuovamente dal sito Web.

  • Minimizzare il codice CSS, JS e HTML: come parte del nostro processo di pubblicazione, minimizziamo tutte le risorse CSS. Assicuriamo così che siano le più piccole possibile nella fase di download.

  • Ottimizzare le immagini: elaboriamo ogni immagine .jpg o .png caricata con un processo completo di ridimensionamento e compressione, in modo da assicurare la migliore gestione delle immagini possibile. Utilizziamo i seguenti processi:

    • Per prima cosa, l'immagine viene passata attraverso un algoritmo di compressione senza perdita e salvata nel nostro CDN. Questa operazione riduce le dimensioni di base dell'immagine.

    • Ridimensioniamo quindi l'immagine in cinque diverse versioni. 

    • Dopo il ridimensionamento, passiamo tutte le immagini attraverso un algoritmo di compressione con perdita. Questa operazione riduce leggermente la qualità dell'immagine, ma consente di ottenere grandi risparmi in termini di dimensioni. Nella maggioranza dei casi, la qualità persa non è visibile all'occhio umano.

    • Dopo la compressione con perdita, applichiamo all'immagine un'ulteriore compressione senza perdita per assicurare che le dimensioni siano il più contenute possibile.

  • Dare priorità ai contenuti visibili: come parte del modo in cui realizziamo ogni sito Web, strutturiamo il sito per adattarlo a questa raccomandazione. Significa che il contenuto dell'intestazione viene inserito per primo, seguito dal contenuto del corpo della pagina.

  • Ridurre il tempo di risposta del server: questo controllo serve soprattutto ad assicurare che il sito Web non sia troppo lento, piuttosto che abbastanza veloce. Poiché ospitiamo tutti i siti Web sulla nostra piattaforma, possiamo assicurarci che tutti i siti ospitati rispondano in modo rapido. Utilizziamo Amazon Web Services, leader nel settore, per aiutarci a mantenere questi standard.

Che cosa fare se il sito ottiene un punteggio scadente

Anche se vorremmo che ogni sito Web gestito da noi ottenga sempre punteggi altissimi, non è una cosa che possiamo promettere. Questo perché i nostri clienti possono aggiungere codice personale, contenuti e disegni al sito Web: non abbiamo quindi il pieno controllo su ciò che possono o non possono aggiungere. Per questo motivo vi sono alcuni scenari in cui i nostri siti Web non raggiungono punteggi superiori al 90. Ecco un elenco di errori e problemi che ci sono stati segnalati da Google PageSpeed in base al modo in cui è stato creato il sito:

  • Eliminare i codici JavaScript e CSS che bloccano il rendering del contenuto iniziale:

    • Elemento mappa nel contenuto iniziale: se si inserisce un elemento mappa nella parte superiore del sito Web, spesso si otterranno effetti negativi sulla classificazione di PageSpeed. Per risolvere il problema, l'elemento mappa deve essere spostato in fondo alla pagina.

    • Vetrina nel contenuto iniziale: se si inserisce un negozio online nella parte superiore, spesso potrebbe essere visualizzato un avviso. Stiamo lavorando a una soluzione, ma per ora l'unico consiglio è spostare il contenuto nella parte inferiore della pagina. Un modo per eseguire questa operazione è aggiungere un'immagine e un testo utile sopra l'elemento negozio, in modo che il negozio stesso non si trovi nella sezione iniziale del sito Web.

    • Codice/script personalizzati nell'intestazione: se è stato inserito codice personalizzato nella sezione di intestazione del sito Web, spesso Google segnalerà un errore, in quanto tale codice rallenta il rendering della pagina. Esistono due soluzioni al problema: (1) Inserire il codice nel file body-end.html del sito Web, anziché nell'intestazione. Il codice viene spostato verso il basso e viene quindi caricato in un secondo momento. (2) Assicurarsi che lo script incorporato sia caricato in maniera asincrona. Significa che il browser lo carica in background mentre continua a caricare il resto del contenuto del sito. Per abilitare l'asincronia sugli script è necessario modificare il codice in questo modo:

      • Codice precedente: <script src="https://example.com/script.js"></script>

      • Nuovo codice: <script src="https://example.com/script.js" async defer></script>

      • Il codice sopra indica al browser di caricare il codice in maniera asincrona, aiutando a superare questo test di Google PageSpeed.

    • Incorporamento di iframe: se si incorpora un iframe personalizzato nella sezione iniziale di un sito Web, verosimilmente sarà segnalato questo messaggio di errore. Si consiglia di spostare il contenuto nella parte inferiore della pagina o di rimuoverlo completamente.

  • Ottimizzare le immagini: oggi la nostra ottimizzazione delle immagini funziona solo su file JPG e PNG. Se si carica un'immagine TIFF, GIF o in altro formato, potremmo non essere in grado di ottimizzarla; questo potrebbe essere il motivo di questo avviso. Raccomandiamo di far passare l'immagine in un servizio di ottimizzazione delle immagini, ad esempio EzGif, Compressor.io o TinyPNG.

    Un altro controllo eseguito da Google consiste nell'assicurarsi che non vi siano immagini grandi ridimensionate per piccoli spazi. Cerchiamo di aiutare in questa operazione inserendo immagini di piccole dimensioni nelle colonne con dimensioni contenute, ma il processo non è perfetto. A volte potrebbe essere necessario scaricare un'immagine, ridimensionarla esattamente per la dimensione della colonna che si desidera utilizzare e ricaricare l'immagine. Questo caso è comunque piuttosto raro.

  • Sfruttare la cache del browser: se si include un codice personalizzato nel sito Web, spesso sarà caricato da un sito Web di terze parti. Se questo sito Web non consente la memorizzazione nella cache, Google individuerà il problema e consiglia di abilitare la cache del browser. È opportuno contattare il servizio di terze parti per chiedere loro di implementare questa modifica sul server.

Casi in cui non ottimizziamo il sito 

Vi sono alcuni casi in cui non tentiamo di ottimizzare il sito Web durante la pubblicazione. Se è stato inserito codice personalizzato che utilizza jQuery (($(‘#ex’)) nell'intestazione del sito Web. Questo codice spesso richiede l'esistenza di jQuery; tuttavia, visto che la nostra ottimizzazione sposta questo codice nella parte inferiore della pagina, il codice installato non funzionerà più.