Google PageSpeed

Guesty ha ottimizzato i siti web pubblicati sulla piattaforma per ottenere punteggi elevati nel test PageSpeed di Google. Questo test esamina molti dettagli tecnici su come sono strutturate le pagine web e verifica che rispettino le best practice che consentono ai siti web di caricarsi rapidamente. Il controllo più importante del test PageSpeed esamina la struttura del codice del sito web. Google verifica che il codice sia strutturato in modo da consentire al browser di caricare i contenuti più velocemente.

Perché Guesty è ottimizzato per questo

Noi di Guesty crediamo che la velocità dei siti web sia uno dei maggiori problemi che il web deve affrontare oggi. I siti web lenti a caricarsi hanno tassi di rimbalzo più elevati, un coinvolgimento inferiore e danno all'intero web una reputazione negativa di lentezza. Sappiamo che i siti web più veloci offrono un valore aggiunto ai visitatori, offrendo 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 contenuti agli utenti con sufficiente rapidità. Google sa che gli utenti sono più propensi a interagire con siti web che forniscono contenuti visibili più velocemente, consentendo sia a Google che al sito web di offrire un'esperienza complessiva migliore. Di solito, questo significa che un sito web si carica in meno di tre secondi. Poiché il prodotto principale di Google (la ricerca) si basa sui siti web di terze parti, Google vuole assicurarsi che webmaster, designer e sviluppatori realizzino siti web che si carichino rapidamente.

Cosa controlla Google

Google ha un elenco di ottimizzazioni che verifica sia per la versione desktop che per quella mobile dei siti web. Quindi, in base al livello di ottimizzazione del sito per ciascuno di questi controlli, calcola un punteggio complessivo (su 100) per la velocità del 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 JavaScript e CSS che bloccano la visualizzazione nei contenuti above-the-fold. Questo è di gran lunga il controllo più importante eseguito da Google. Esamina il codice del tuo sito web e si assicura che tu stia dando priorità ai contenuti rispetto ad altro codice. Spesso, gli sviluppatori di siti web posizionano 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 i contenuti. Questo controllo assicura che tu dia priorità ai contenuti above-the-fold. (Nota: above-the-fold significa il primo contenuto che un utente vede quando carica una pagina web. Di solito si tratta dell'intestazione, della barra di navigazione e del contenuto più in alto nel corpo della pagina.)
• Abilita compressione. Questa opzione verifica che il tuo server web comprima (riducendo le dimensioni) i dati grezzi (HTML, CSS e Javascript) prima di trasmetterli al tuo browser tramite Internet. Questo si traduce in un notevole risparmio sulle dimensioni totali del tuo sito web.
• Sfrutta la memorizzazione nella cache del browser. Il controllo della cache assicura che il browser salvi i contenuti localmente, anziché scaricarli nuovamente la prossima volta che devi accedervi. Questo ti fa risparmiare tempo prezioso, spesso sprecato a connetterti e a scaricare contenuti ogni volta che la pagina viene ricaricata.
  Minimizzare il CSS. Minimizzare il CSS significa ridurre al minimo le dimensioni del file CSS, rimuovendo spazi, interruzioni di riga e altri formati. È un po' come comprimere il file per ridurre le dimensioni totali.
• Minimizza JavaScript. Simile alla minimizzazione del CSS, la minimizzazione del JS può far risparmiare molto spazio sul singolo file che viene scaricato dal browser.
• Minimizza HTML. Simile ai due metodi precedenti, ma rimuove la spaziatura in eccesso dall'HTML principale del sito web.

Con l'introduzione del progetto open source Lighthouse nel novembre 2018, Google prende ora in considerazione un'ampia gamma di proprietà del sito web oltre alla velocità (come SEO, Accessibilità, PWA e Best Practice). Oltre ai test sopra menzionati, Lighthouse ora verifica:

• First Contentful Paint. Questa è una metrica che deriva da un browser reale che carica un sito web. Quando esegui un test Lighthouse, un browser reale visiterà il tuo sito web, lo caricherà e ne monitorerà le prestazioni. La metrica First Contentful Paint indica quanto tempo impiega qualsiasi tipo di contenuto a essere visualizzato dopo l'inizio del caricamento di una pagina. Può trattarsi di un'immagine, un colore di sfondo, ecc., e il tempo di First Contentful Paint è misurato in secondi. Il motivo per cui questa metrica è preziosa è che essa rappresenta la prima volta in cui un utente sa che qualcosa sul sito web verrà caricato: è la prima indicazione che un sito web si sta caricando.
• Indice di velocità. Si tratta di una metrica derivata da un vecchio strumento di performance web chiamato WebPageTest. È disponibile dal 2012 ed è piuttosto efficace nel determinare la velocità di caricamento dei contenuti di un sito web. Funziona acquisendo screenshot di un 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 appare il caricamento del sito web all'utente. L'obiettivo di questo test è capire realmente la velocità con cui l'utente visualizza i contenuti e se c'è qualcosa che impedisce al sito web di visualizzarli il più velocemente possibile.
• Tempo di interattività. Un'altra metrica importante è la velocità con cui l'utente interagisce 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 uno schermo per interagire con la pagina. L'obiettivo degli sviluppatori web dovrebbe sempre essere quello di garantire che una pagina sia interattiva ogni volta che contiene contenuti. Questa è una sfida molto ardua a causa del funzionamento dei browser.
• Prima CPU inattiva. Questa metrica è strettamente correlata al tempo di interattività, in quanto indica la velocità con cui tutti i contenuti e le risorse iniziali del sito web vengono caricati e la CPU del dispositivo entra in uno stato di inattività (senza fare nulla). Il motivo per cui questo dato viene segnalato è che gli sviluppatori dovrebbero concentrarsi sul caricare per prima la quantità minima di contenuti. Inviando una piccola quantità, la CPU del dispositivo elaborerà tutto il codice e raggiungerà uno stato di inattività più velocemente.

Dopo aver eseguito questi test, Lighthouse fornirà anche consigli prioritari su come migliorare il punteggio di velocità complessivo. Questi suggerimenti appaiono nella seconda metà della pagina e forniscono dettagli molto tecnici su cosa è possibile fare e sui vantaggi che queste 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 esaminato i test pubblicati sopra e ottimizzato i nostri siti web per ciascuno di essi. Ecco un riepilogo di come abbiamo gestito ciascuno di questi controlli:

• Evita i reindirizzamenti delle landing page. Per la maggior parte dei siti web Guesty, superiamo questo controllo al 100%. Questo non è completamente sotto il controllo di Guesty, poiché consentiamo agli utenti di reindirizzare ad altre pagine tramite il nostro URL di reindirizzamento. Il consiglio è di assicurarti di non inviare link ai tuoi clienti, partner, ecc., che non siano una pagina reale del tuo sito web.
• Eliminare JavaScript e CSS che bloccano la visualizzazione dei contenuti above-the-fold. Come parte della pubblicazione di siti web, Guesty ottimizza la struttura dei siti web per conformarsi a questa raccomandazione. Lo facciamo: (1) Calcolando quello che chiamiamo CSS "critico". Ciò significa che esaminiamo il sito web e vediamo quali stili CSS sono necessari per visualizzarlo. Quindi inseriamo questo contenuto inline 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.
• Abilita la compressione. Guesty abilita la compressione gzip per le connessioni al nostro sito web. Questo garantisce che il file venga compresso, trasferito su Internet e quindi decompresso dal browser.
• Sfrutta la memorizzazione nella cache del browser. Guesty imposta le intestazioni della cache su tutti i file che carichiamo. 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 dovrà accedervi, questi vengano memorizzati localmente sul computer, invece di doverli scaricare nuovamente dal sito web.
• Minimizzazione di CSS, JS e HTML. Come parte del processo di pubblicazione di Guesty, minifichiamo la stragrande maggioranza delle risorse CSS. Questo garantisce che siano il più piccole possibile una volta scaricate. È importante notare che le risorse esterne, sebbene in genere trasferite tramite proxy tramite la nostra CDN, potrebbero non essere sottoposte a minificazione.
• Ottimizzazione delle immagini. Ogni immagine JPG o PNG caricata su Guesty viene sottoposta a un ampio processo di compressione e ridimensionamento per ottenere la migliore ottimizzazione possibile. Eseguiamo i seguenti processi:
  
  • Per prima cosa, eseguiamo l'immagine tramite un algoritmo di compressione lossless e la salviamo nella nostra CDN. Questo riduce le dimensioni di base dell'immagine.
  • Quindi ridimensioniamo l'immagine in cinque versioni diverse.
  • Dopo il ridimensionamento, tutte le immagini vengono sottoposte a un algoritmo di compressione con perdita di dati. Questo riduce leggermente la qualità dell'immagine, ma comporta un notevole risparmio di spazio. Nella stragrande maggioranza dei casi, la perdita di qualità non è visibile all'occhio umano.

Cosa fare se il tuo sito ha un punteggio scadente

Sebbene Guesty desideri che ogni sito web che gestiamo ottenga sempre un posizionamento elevato, non possiamo prometterlo. Questo perché i nostri clienti possono aggiungere codice, contenuti e design al sito web, quindi non abbiamo il pieno controllo su ciò che possono o non possono aggiungere. Per questo motivo, ci sono alcuni scenari in cui i siti web Guesty non raggiungeranno un punteggio di 90. Ecco un elenco di errori/problemi che Google PageSpeed ​​ci segnala, in base al modo in cui è stato creato il sito web:

• Elimina JavaScript e CSS che bloccano la visualizzazione nei contenuti above-the-fold:
  • Elemento mappa sopra la piega . Se posizioni un elemento mappa nella parte superiore del tuo sito web, questo spesso inciderà negativamente sul tuo posizionamento in PageSpeed. Per risolvere questo problema, sposta l'elemento mappa in fondo alla pagina.
  • Vetrina del negozio sopra la piega. Posizionare un negozio in alto può spesso causare la visualizzazione di questo avviso. Guesty sta lavorando a una soluzione, ma al momento l'unica raccomandazione che possiamo dare è di spostare il contenuto più in basso nella pagina. Un modo possibile per farlo è aggiungere un'immagine e un testo utile sopra l'elemento del negozio, in modo che il negozio stesso non si trovi nell'area "sopra la piega" del sito web.
  • Codice/script personalizzato nell'intestazione . Se hai inserito codice personalizzato nella sezione "head" del sito web, spesso Google visualizzerà un errore che rallenta il rendering della pagina. Ci sono due opzioni per risolvere questo problema: (1) Inserire il codice nel file body-end.html del sito web anziché nell'intestazione. Questo sposta il codice in fondo, forzandone il caricamento in un secondo momento. (2) Assicurarsi che lo script incorporato qui 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 l'asincrono sugli script, è necessario 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>
      
      

  • Si noti che il codice sopra indica al browser di caricare questo codice in modalità "asincrona", il che dovrebbe aiutare a superare il test Google PageSpeed.
  • Incorporamento iframe. Se incorpori un iframe personalizzato in un sito web above the fold, molto probabilmente verrà visualizzato questo messaggio di errore. Sposta questo contenuto più in basso nella pagina o rimuovilo completamente.

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'))

o l' API JS:

 dmAPI.runOnReady('codice',funzione(){});

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