Velocità di caricamento delle pagine di Google

Guesty ha ottimizzato i siti web pubblicati sulla piattaforma per punteggi elevati nel test Google PageSpeed. Questo test analizza numerosi dettagli tecnici relativi alla struttura delle pagine web e verifica che rispettino le migliori pratiche per un caricamento rapido. Il controllo più importante del test PageSpeed esamina la struttura del codice dei siti web. Google verifica che il codice sia strutturato in modo da consentire al browser di caricare i contenuti il più velocemente possibile.

Perché Guesty è ottimizzato per questo

Noi di Guesty crediamo che la velocità dei siti web sia uno dei maggiori problemi che affliggono il web odierno. I siti web lenti presentano tassi di abbandono più elevati, un minore coinvolgimento degli utenti e conferiscono all'intero web una reputazione negativa, venendo percepito come lento. Sappiamo che i siti web con tempi di risposta rapidi offrono un grande valore ai visitatori, garantendo a ciascuno un'esperienza di navigazione migliore.

Perché Google ha creato questo strumento

Google ha creato lo strumento PageSpeed perché riteneva che molti siti web si caricassero troppo lentamente e non fornissero i contenuti agli utenti abbastanza velocemente. Google sa che gli utenti sono più propensi a interagire con i siti web che offrono contenuti visibili più rapidamente, consentendo sia a Google che al sito web di fornire un'esperienza complessiva migliore. In genere, 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 altrui, l'azienda vuole assicurarsi che webmaster, designer e sviluppatori creino siti web che si carichino velocemente.

Cosa controlla Google

Google ha un elenco di ottimizzazioni che verifica sia sulla versione desktop che su quella mobile del tuo sito web. Utilizza quindi il livello di ottimizzazione raggiunto per ciascuna di queste ottimizzazioni per calcolare un punteggio complessivo (su 100) che indica la velocità del tuo sito web. Ecco cosa verifica Google:

• Evita i reindirizzamenti delle landing page. Ciò significa che non dovresti reindirizzare gli utenti a un'altra pagina del tuo sito web quando la caricano. Ad esempio, non dovresti reindirizzare tutti i visitatori a una seconda versione della tua homepage.
• Elimina gli script JavaScript e CSS che bloccano il rendering nella parte visibile della pagina (above-the-fold). Questo è di gran lunga il controllo più importante effettuato da Google. Analizza il codice del tuo sito web e si assicura che tu stia dando priorità al contenuto rispetto ad altro codice. Spesso, gli sviluppatori web inseriscono script e file CSS pesanti all'inizio di un file HTML. Questo fa sì che il browser elabori/carichi prima queste risorse, invece di caricare prima il contenuto. Questo controllo garantisce che tu stia dando priorità al contenuto visibile nella parte visibile della pagina (above-the-fold). (Nota: per "above-the-fold" si intende il primo contenuto che un utente vede quando carica una pagina web. Di solito si tratta dell'intestazione, della navigazione e del contenuto più in alto del corpo della pagina).
• Abilita la compressione. Questa opzione verifica che il tuo server web comprima (riduca le dimensioni) i dati grezzi (HTML, CSS e JavaScript) prima di trasmetterli via internet al tuo browser. Ciò si traduce in un notevole risparmio in termini di dimensioni complessive del tuo sito web.
• Sfrutta la cache del browser. Il controllo della cache garantisce che il browser salvi localmente il contenuto, anziché scaricarlo nuovamente la prossima volta che ne avrai bisogno. Questo consente di risparmiare tempo prezioso che spesso viene impiegato per la connessione e il download dei contenuti a ogni ricaricamento della pagina.
  Minimizzare il CSS. Minimizzare il CSS significa rendere il file CSS il più piccolo possibile rimuovendo spazi superflui, interruzioni di riga e altri elementi di formattazione. Pensala come una sorta di compressione del file per ridurne le dimensioni complessive.
• Minimizzare JavaScript. Analogamente alla minimizzazione del CSS, la minimizzazione del JavaScript può ridurre notevolmente le dimensioni del singolo file scaricato dal browser.
• Minimizzare l'HTML. Simile ai due precedenti, ma rimuove gli spazi superflui dal codice HTML principale del sito web.
• Ottimizza le immagini. Il secondo controllo più importante eseguito da Google serve a garantire che le immagini inviate al browser siano ottimizzate, compresse e non troppo grandi. Le immagini rappresentano circa il 65-70% delle dimensioni/del peso totali di un sito web. Ottimizzare le immagini significa comprimerle e ridurne al minimo le dimensioni prima che il browser debba scaricarle. Ci sono due aspetti importanti da considerare: (1) Assicurarsi che le immagini siano compresse. Ciò richiede l'utilizzo di strumenti di compressione per ridurne le dimensioni, senza comprometterne la qualità. (2) Ridimensionare le immagini. Non è necessario inviare un'immagine molto grande (ad esempio 5000 pixel) a un browser mobile, quindi è consigliabile ridimensionarla.
• Dai priorità ai contenuti visibili. In questo modo, i contenuti verranno posizionati nella parte superiore del codice HTML del sito web. Cerca di non caricare contenuti aggiuntivi non pertinenti al primo caricamento del sito.
• Riduci il tempo di risposta del server. Questo controllo verifica che il tuo server risponda molto rapidamente ai visitatori del tuo sito web. Google richiede che l'utente non attenda più di 200 ms (1/5 di secondo) per ricevere contenuti/HTML dal tuo server.

Con l'introduzione del progetto open-source Lighthouse nel novembre 2018, Google Page Insights ora prende in considerazione una vasta gamma di proprietà dei siti web oltre alla velocità (come SEO, accessibilità, PWA e best practice). Oltre ai test sopra menzionati, Lighthouse ora verifica anche:

• First Contentful Paint. Questa metrica deriva dal caricamento di un sito web da parte di un browser reale. Quando si esegue un test Lighthouse, un browser reale visita il sito web, lo carica e ne monitora le prestazioni. La metrica First Contentful Paint indica quanto tempo impiega un qualsiasi tipo di contenuto ad essere visualizzato dopo l'inizio del caricamento di una pagina. Può trattarsi di un'immagine, di un colore di sfondo, ecc., e il tempo di First Contentful Paint viene misurato in secondi. Il motivo per cui questa metrica è preziosa è che rappresenta la prima indicazione per l'utente che qualcosa sul sito web sta per essere caricato: è la prima indicazione che il sito web si sta caricando.
• Indice di velocità. Questa metrica proviene da un vecchio strumento di analisi delle prestazioni web chiamato WebPageTest. Esiste dal 2012 ed è piuttosto efficace nel determinare la velocità di caricamento dei contenuti di un sito web. Funziona acquisendo screenshot del sito web ogni 0,5 secondi durante il caricamento. Utilizzando questi screenshot, calcola la percentuale di contenuto caricato sulla pagina web a intervalli di 0,5 secondi e fornisce un punteggio di velocità complessivo. Più basso è il numero, più velocemente il sito web appare caricato all'utente. L'obiettivo di questo test è comprendere realmente la velocità con cui l'utente visualizza i contenuti e se ci sono elementi che impediscono al sito web di visualizzare i contenuti il più velocemente possibile.
• Tempo di interazione. Un'altra metrica importante è la velocità con cui l'utente può interagire con la pagina. Ad esempio, l'utente potrebbe voler cliccare su un pulsante o scorrere la pagina. Questo è particolarmente importante sui dispositivi mobili, dove l'utente tocca direttamente lo schermo per interagire con la pagina. L'obiettivo per gli sviluppatori web dovrebbe essere sempre quello di garantire che una pagina sia interattiva ogni volta che contiene del contenuto. Questa è una sfida molto difficile a causa del funzionamento dei browser.
• Tempo di inattività della CPU. Questa metrica è strettamente correlata al tempo di interazione, in quanto indica la velocità con cui vengono caricati tutti i contenuti/risorse iniziali del sito web e la CPU del dispositivo entra in uno stato di inattività (non fa nulla). Il motivo per cui viene riportata è che gli sviluppatori dovrebbero concentrarsi sul caricamento della quantità minima di contenuto. Inviando una piccola quantità di dati, la CPU del dispositivo elaborerà tutto il codice e raggiungerà uno stato di inattività più rapidamente.
• Latenza di input stimata. L'ultima metrica riportata da Lighthouse non ha nulla a che vedere con le prestazioni di caricamento iniziale del tuo sito web. Piuttosto, cerca di fornirti un valore numerico (in millisecondi) in base al tempo di risposta del tuo sito web ai tocchi/clic. L'idea è che più velocemente risponde il tuo sito web, più gli utenti lo considereranno veloce e saranno meno propensi ad abbandonarlo.

Dopo aver eseguito questi test, Lighthouse fornirà anche raccomandazioni prioritarie su come migliorare il punteggio di velocità complessivo. Queste raccomandazioni compaiono nella seconda metà della pagina e forniscono dettagli molto tecnici su cosa è possibile fare e i vantaggi che tali modifiche possono apportare.

Cosa fa Guesty

Guesty ha ottimizzato i siti web creati sulla nostra piattaforma per punteggi elevati, in particolare nel test Google PageSpeed. Ciò significa che abbiamo analizzato i test sopra pubblicati e ottimizzato i nostri siti web per ognuno di essi. Ecco una descrizione di come abbiamo gestito ciascuno di questi controlli:

• Evitate i reindirizzamenti alle landing page. Per la maggior parte dei siti web di Guesty, superiamo questo controllo al 100%. Questo aspetto non è completamente sotto il controllo di Guesty, poiché consentiamo agli utenti di essere reindirizzati ad altre pagine tramite il nostro servizio di reindirizzamento URL. Il consiglio è di assicurarvi di non inviare ai vostri clienti, partner, ecc., link che non rimandino a pagine reali del vostro sito web.
• Eliminare JavaScript e CSS che bloccano il rendering dei contenuti above the fold. Nell'ambito della pubblicazione dei siti web, Guesty ottimizza la struttura dei siti web per conformarsi a questa raccomandazione. Lo facciamo in questo modo: (1) Calcolando quello che definiamo CSS "critico". Ciò significa che analizziamo il sito web e vediamo quali stili CSS sono necessari per visualizzarlo. Quindi inseriamo questo contenuto in linea all'interno del sito web in modo che venga caricato per primo. (2) Quindi spostiamo tutti gli script in fondo al sito web, in modo che il contenuto venga caricato per primo.
• Abilitare la compressione. Guesty abilita la compressione gzip per le connessioni al nostro sito web. Ciò garantisce che il file venga compresso, trasferito su Internet e quindi decompresso dal browser.
• Sfruttare la cache del browser. Guesty imposta le intestazioni della cache su tutti i file che carica. Questo garantisce che i browser che scaricano questi file (CSS, JS, immagini) sappiano come memorizzarli temporaneamente nella cache del browser, in modo che la prossima volta che il browser deve accedere a quel file, questo sia memorizzato localmente sul computer invece di doverlo scaricare nuovamente dal sito web.
• Minimizzazione di CSS, JS e HTML. Nell'ambito del processo di pubblicazione di Guesty, minimizziamo la maggior parte delle risorse CSS. Questo garantisce che siano il più piccole possibile una volta scaricate. È importante notare che le risorse esterne, sebbene in genere siano instradate tramite il nostro CDN, potrebbero non essere sottoposte a minimizzazione.
• Ottimizzazione delle immagini. Ogni immagine JPG o PNG caricata su Guesty viene sottoposta a un processo completo di compressione e ridimensionamento per garantire la migliore gestione possibile delle immagini. I processi eseguiti sono i seguenti:
  
  • Innanzitutto, applichiamo un algoritmo di compressione senza perdita di dati all'immagine e la salviamo nella nostra CDN. Questo riduce le dimensioni di base dell'immagine.
  • Successivamente, ridimensioniamo l'immagine in cinque versioni diverse.
  • Dopo il ridimensionamento, tutte le immagini vengono compresse con un algoritmo di compressione con perdita di dati. Questo riduce leggermente la qualità dell'immagine, ma consente un notevole risparmio in termini di dimensioni. Nella stragrande maggioranza dei casi, la perdita di qualità non è percepibile dall'occhio umano.
  • Dopo la compressione con perdita di dati, applichiamo un'ulteriore compressione senza perdita di dati all'immagine per garantire che raggiunga le dimensioni più ridotte possibili.
• Dai priorità ai contenuti visibili. Come parte del processo di creazione di ogni sito web, Guesty struttura il sito in modo da rispettare questa raccomandazione per impostazione predefinita. Ciò significa posizionare prima il contenuto dell'intestazione, seguito dal contenuto del corpo della pagina.
• Riduci i tempi di risposta del server . Questo controllo serve principalmente ad assicurarsi che il tuo sito web non sia troppo lento, piuttosto che sufficientemente veloce. Poiché Guesty ospita tutti i siti web sulla nostra piattaforma, possiamo garantire che tutti i siti web che ospitiamo rispondano rapidamente. Utilizziamo Amazon Web Services, leader del settore, che ci aiuta a mantenere questi standard.

Cosa fare se il tuo sito ha un controllo scadente

Sebbene Guesty desideri che ogni sito web che gestiamo ottenga sempre un posizionamento elevato nei risultati di ricerca, non possiamo garantirlo. Questo perché i nostri clienti possono aggiungere codice, contenuti e design personalizzati al sito web, quindi non abbiamo il pieno controllo su ciò che possono o non possono includere. Per questo motivo, in alcuni casi i siti web Guesty potrebbero non ottenere un punteggio superiore a 90. Ecco un elenco di errori/problemi che Google PageSpeed ​​ci segnala, in base a come è stato realizzato il sito web:

• Elimina JavaScript e CSS che bloccano il rendering dei contenuti above-the-fold:
  • Elemento mappa nella parte superiore della pagina. Se posizioni un elemento mappa nella parte superiore del tuo sito web, questo spesso influirà negativamente sul tuo posizionamento in PageSpeed. Per risolvere questo problema, sposta l'elemento mappa in fondo alla pagina.
  • Negozio visibile nella parte superiore della pagina. Se si posiziona un negozio nella parte superiore, spesso questo avviso può comparire. Guesty sta lavorando a una soluzione, ma al momento l'unica raccomandazione è quella di spostare il contenuto più in basso nella pagina. Un possibile modo per farlo è aggiungere un'immagine e un testo esplicativo sopra l'elemento del negozio, in modo che il negozio stesso non si trovi nell'area "above the fold" del sito web.
  • Codice/script personalizzato nell'intestazione. Se hai inserito del codice personalizzato nella sezione <head> del sito web, Google spesso segnala un errore indicando che questo sta rallentando il rendering della pagina. Ci sono due opzioni per risolvere questo problema: (1) Inserisci il codice nel file body-end.html del sito web anziché nell'intestazione. In questo modo il codice viene spostato in fondo alla pagina, forzandone il caricamento in un secondo momento. (2) Assicurati che lo script incorporato venga caricato in modo asincrono. Ciò significa che il browser lo carica in background mentre continua a caricare il resto del contenuto del sito web. Per abilitare il caricamento asincrono degli script, devi modificarlo in questo modo:
    • Vecchio codice:

      <script src=”https://example.com/script.js”></script>
      
      

    • Nuovo asincrono:

      <script src=”https://example.com/script.js” async defer></script>
      
      

  • Nota: il codice qui sopra indica al browser di caricare questo codice in modo "asincrono", il che dovrebbe contribuire a superare il test PageSpeed di Google.
  • Incorporamento iframe. Se incorpori un iframe personalizzato in un sito web nella parte superiore della pagina, molto probabilmente riceverai questo messaggio di errore. Sposta questo contenuto più in basso nella pagina o rimuovilo completamente.
• Ottimizzazione delle immagini: Attualmente, l'ottimizzazione delle immagini di Guesty funziona solo con immagini JPG e PNG. Se carichi un'immagine TIFF, GIF o in altri formati, Guesty potrebbe non essere in grado di ottimizzarla e questo potrebbe essere il motivo di questo avviso. Consigliamo di utilizzare un servizio di ottimizzazione delle immagini, come EzGif, Compressor.io o TinyPNG. Google effettua anche un controllo per assicurarsi che non ci siano immagini di grandi dimensioni che vengano ridimensionate per adattarsi a spazi ristretti. Guesty cerca di ovviare a questo problema posizionando immagini di dimensioni inferiori in colonne con meno spazio disponibile, ma questo processo non è perfetto. A volte potrebbe essere necessario scaricare un'immagine, ridimensionarla esattamente alle dimensioni della colonna desiderata e ricaricarla. Si tratta di un caso piuttosto raro.
• Ridimensionamento delle immagini: Sebbene Guesty ottimizzi le immagini per comprimerle a dimensioni inferiori, Guesty le ridimensiona effettivamente nella versione desktop del tuo sito. Ad esempio, se utilizzi un'immagine di 3000 x 3000 pixel su una pagina e la ridimensioni a soli 300 pixel utilizzando la funzione di trascinamento dell'editor, l'immagine completa di 3000 x 3000 pixel verrà comunque caricata. Questo può influire negativamente sul tuo punteggio PageSpeed. Puoi risolvere il problema ridimensionando l'immagine utilizzando l'editor di immagini integrato oppure ridimensionandola con un software di fotoritocco e ricaricandola.
• Sfrutta la cache del browser: Se includi del codice personalizzato nel tuo sito web, questo verrà spesso caricato da un sito web di terze parti. Se questo sito web non abilita la cache, Google lo rileverà e ti consiglierà di abilitarla. Dovresti contattare il servizio di terze parti per chiedere loro di implementare questa modifica sui loro server.
• La tua pagina potrebbe essere troppo grande: Se hai molti contenuti su una singola pagina, la pagina potrebbe risultare troppo grande anche dopo l'utilizzo del nostro strumento di ottimizzazione. Valuta la possibilità di utilizzare meno immagini o di suddividere i contenuti spostandoli su altre pagine.
• Problemi attuali non risolvibili: Si tratta di problemi di velocità di caricamento delle pagine segnalati da Google che non possono essere risolti autonomamente e devono essere gestiti come richieste di funzionalità per Guesty.
  • Sfrutta la cache del browser
  • Minimizza HTML / CSS / JS
  • Ottimizza la distribuzione CSS

Casi in cui Guesty non ottimizza il sito

Ci sono alcuni casi in cui Guesty non tenta di ottimizzare il sito web al momento della pubblicazione. Se hai inserito codice personalizzato che utilizza

 jQuery (($('#ex'))

oppure l'API JS:

 dmAPI.runOnReady('code',function(){});

nell'intestazione del sito web. Il motivo per cui non lo facciamo è che questo codice spesso richiede la presenza di jQuery o delle funzioni dmAPI, ma poiché la nostra ottimizzazione sposta questo codice più in basso nella pagina, non funzionerebbe più e quindi interromperebbe il codice installato.