Google PageSpeed

Duda ha ottimizzato i siti web pubblicati sulla piattaforma per ottenere un punteggio elevato nel test Google PageSpeed. Questo test analizza molti dettagli tecnici della costruzione delle pagine web e verifica che soddisfino le best practice per il caricamento veloce dei siti. L'aspetto più importante testato da PageSpeed è la struttura del codice del sito web. Google si assicura che il codice sia strutturato in modo tale da consentire al browser di caricare i contenuti velocemente.

Perché Duda ha ottimizzato questo aspetto

Noi di Duda riteniamo 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 contribuiscono a diffondere l'idea che internet sia lento. Sappiamo che i siti web che rispondono più velocemente offrono un grande valore ai visitatori, fornendo a ogni utente un'esperienza di navigazione migliore.

Motivi per cui Google ha realizzato questo strumento

Google ha realizzato lo strumento PageSpeed dopo aver visto 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 garantire 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 di terzi, Google vuole assicurarsi che i webmaster, i designer e gli sviluppatori creino pagine che si caricano con rapidità.

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 ognuno di questi test fino a ottenere un punteggio complessivo da 1 a 100 relativo alla velocità del sito. Ecco gli aspetti valutati da Google:

• Evitare i reindirizzamenti delle pagine di destinazione: gli utenti non dovrebbero essere reindirizzati a un'altra pagina del sito web durante il caricamento. Ad esempio, non è opportuno reindirizzare 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 test più importante svolto da Google. Il codice del sito web viene esaminato per verificare 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 test verifica 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 dai contenuti più in alto nel corpo della pagina.
• Abilitare la compressione: questo test verifica che il tuo webserver comprima (riduca) i dati grezzi (HTML, CSS e Javascript) prima di trasmetterli via Internet al browser. In questo modo, viene ridotta notevolmente la dimensione totale del sito web.
• Sfruttare la memorizzazione nella cache del browser: il controllo della memorizzazione nella cache verifica che il browser salvi il contenuto localmente, invece di scaricarlo di nuovo la volta successiva che vi si accede. Questo consente di risparmiare tempo prezioso, spesso perso per collegare e scaricare contenuti quando si ricarica una pagina.
• Minimizzare il codice CSS, ovvero 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: simile alla minimizzazione del codice CSS, questa operazione può ridurre notevolmente le dimensioni del singolo file scaricato dal browser.
• Minimizzare il codice HTML: operazione simile alle due precedenti e che rimuove gli spazi in eccesso dal codice HTML principale del sito web.
• Ottimizzare le immagini: il secondo test più importante eseguito da Google verifica 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 comprimerle 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 da 5000 pixel) a un browser per dispositivi mobili, caso in cui è consigliabile ridimensionare l'immagine.
• Assegnare la priorità ai contenuti visibili: questo test verifica che i contenuti vengano posizionati nella parte superiore dell'HTML del sito. È opportuno evitare di caricare contenuti aggiuntivi che non sono rilevanti per il primo caricamento del sito web.
• Riduzione del tempo di risposta del server: questo test verifica che il tuo server risponda molto rapidamente agli utenti che visitano il tuo 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.

Con l'introduzione del progetto open-source Lighthouse a novembre 2018, PageSpeed di Google ora esamina una vasta gamma di proprietà di un sito web, oltre alla velocità (come SEO, Accessibilità, PWA e Best practice). Oltre ai test di cui sopra, Lighthouse ora verifica i seguenti aspetti:

• First Contentful Paint (FCP):questa metrica deriva dal caricamento di un sito web da parte di un browser reale. Quando esegui un test di Lighthouse, un browser reale visiterà il tuo sito web, lo caricherà e ne monitorerà le prestazioni. La metrica First Contentful Paint registra il tempo necessario per la visualizzazione di qualsiasi tipo di contenuto una volta che una pagina ha iniziato a caricarsi. Il contenuto può essere un'immagine, un colore di sfondo, ecc. e misura il tempo in cui viene caricato in secondi. La ragione per cui la FCP è una metrica preziosa è che offre dati sulla prima esperienza di caricamento di un sito offerta all'utente, che sa che qualcosa si sta caricando non appena vi accede.
• Speed Index:questa metrica proviene da un vecchio strumento per la valutazione delle prestazioni sul web chiamato WebPageTest. È in circolazione dal 2012 ed è abbastanza efficace nel determinare la velocità con cui un sito carica i propri contenuti. Per farlo, acquisisce screenshot di un sito web ogni 0,5 secondi mentre si carica. Utilizzando queste acquisizioni, calcola la percentuale di contenuti caricati sulla pagina con incrementi di 0,5 secondi e attribuisce un punteggio complessivo alla velocità del sito. Più basso è il valore, maggiore è la rapidità con cui vengono caricati i contenuti mostrati all'utente. L'obiettivo di questo test è stabilire con quale velocità l'utente vede i contenuti e se c'è qualcosa che impedisce al sito web di mostrarli il più rapidamente possibile.
• Time To Interactive (TTI). Questa metrica importante misura la velocità con cui l'utente riesce a interagire con il sito. Ad esempio, l'utente potrebbe voler fare clic su un pulsante o scorrere la pagina. Si tratta di un aspetto determinante con i dispositivi mobili, perché l'utente tocca direttamente lo schermo per interagire con la pagina. L'obiettivo per gli sviluppatori web dovrebbe sempre essere quello di garantire che sia possibile interagire con una pagina ogni volta che presenta contenuti. Considerato il funzionamento dei browser, si tratta di una sfida davvero difficile.
• First CPU Idle:questa metrica è strettamente connessa alla precedente, in quanto indica con quale velocità vengono caricati tutti i contenuti e le risorse iniziali all'interno del sito web, consentendo alla CPU del dispositivo di entrare in uno stato di inattività. La ragione per cui viene registrata è che gli sviluppatori dovrebbero focalizzarsi sul caricare per primo il minor numero di contenuti possibile. Inviando una quantità di dati ridotta, la CPU del dispositivo elaborerà tutto il codice e diventerà inattiva più rapidamente.
• Estimated Input Latency. L'ultima metrica analizzata da Lighthouse non ha nulla a che vedere con le prestazioni del caricamento del sito web. Piuttosto, cerca di misurare il tempo con cui la pagina risponde ai tocchi e ai clic, calcolato in millisecondi. L'idea è che più il sito risponde velocemente, più gli utenti lo considereranno rapido ed eviteranno di abbandonarlo.

Dopo aver eseguito questi test, Lighthouse fornirà anche suggerimenti in ordine di priorità su come puoi migliorare il punteggio di velocità complessivo del sito. Puoi trovare questi consigli nella seconda metà della pagina, insieme a dettagli molto tecnici su ciò che è possibile fare e sui vantaggi che queste modifiche possono offrire.

Che cosa fa Duda

Duda ha ottimizzato i siti web realizzati sulla nostra piattaforma in modo da ottenere punteggi molto elevati, in particolare nel test Google PageSpeed. Ciò significa che abbiamo ottimizzato i nostri siti web sulla base di ognuno dei test sopra elencati. Il nostro CTO ha scritto un ottimo post nel blog che descrive le operazioni che abbiamo svolto per aumentare la velocità delle pagine. Ecco una panoramica di come abbiamo gestito tutti i test menzionati sopra:

• Evitare i reindirizzamenti delle pagine di destinazione. La maggior parte dei siti Duda supera questo test al 100%. Questo aspetto non si trova totalmente sotto il controllo di Duda, dato che consentiamo agli utenti di reindirizzare l'utente verso altre pagine tramite il nostro reindirizzamento URL. L'importante è 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 di siti web, Duda ne ottimizza la struttura in modo da non bloccare la visualizzazione dei contenuti. Le operazioni svolte sono le seguenti: (1) Calcolo di quello che viene definito codice CSS "critico", durante il quale 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 in modo che venga caricato per primo. (2) Spostiamo quindi tutti gli script alla fine del sito, in modo che il contenuto abbia la priorità nel caricamento.
• Abilitare la compressione. Duda abilita la compressione gzip per le connessioni al nostro sito web. In questo modo il file viene compresso, trasferito su Internet e quindi decompresso dal browser.
• Sfruttare la memorizzazione nella cache del browser. Duda imposta le intestazioni di caching su tutti i file che carichiamo. Così facendo i browser che scaricano questi file (CSS, JS, immagini) sanno 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. Durante la procedura di pubblicazione, Duda minimizza tutte le risorse CSS. in modo da ridurne al minimo le dimensioni nella fase di download.
• Ottimizzare le immagini. Per ogni immagine .jpg o .png caricata su Duda, eseguiamo una procedura completa di ridimensionamento e compressione, in modo da assicurare la migliore gestione delle immagini possibile. La procedura si compone delle seguenti fasi:
  • 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. Ulteriori informazioni su questo argomento sono disponibili qui.
  • 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 ridurne al minimo le dimensioni. Nella maggioranza dei casi, la perdita di qualità 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.

• Assegnare la priorità ai contenuti visibili. Ogni sito web creato con Duda viene strutturato in modo da rispettare questa raccomandazione per impostazione predefinita. Di conseguenza, il contenuto dell'intestazione viene inserito per primo, seguito dal contenuto del corpo della pagina.

• Ridurre il tempo di risposta del server. Questo test verifica che il sito web non sia troppo lento, piuttosto che particolarmente veloce. Poiché Duda ospita tutti i siti web sulla propria piattaforma, possiamo accertarci 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 hanno la facoltà di aggiungere codice personale, contenuti e design al sito web: non abbiamo quindi il pieno controllo su ciò che possono o non possono inserire. Per questo motivo vi sono alcuni casi in cui i siti web Duda non ottengono punteggi superiori a 90. Ecco un elenco di errori e problemi che ci vengono segnalati da Google PageSpeed e che dipendono dal 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: l'inserimento di un elemento mappa nella parte superiore del sito viene considerato come un aspetto negativo nella classificazione di PageSpeed. Per risolvere il problema, l'elemento mappa deve essere spostato in fondo alla pagina.
  • Vetrina nel contenuto iniziale. Se inserisci uno store nella parte superiore del sito, spesso potrebbe essere visualizzato un avviso. Stiamo lavorando ad una soluzione, ma al momento l'unico suggerimento che abbiamo è spostare il contenuto più in basso nella pagina. Un modo per eseguire questa operazione è aggiungere un'immagine e del testo utile sopra l'elemento store, in modo che non si trovi nella sezione iniziale del sito web.
  • Codice/script personalizzati nell'intestazione: se hai inserito del codice personalizzato nella sezione dell'intestazione del sito, Google lo segnala spesso come 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. In questo modo 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 asincrono: <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 incorpori un iframe personalizzato nella sezione iniziale di un sito, molto probabilmente ti verrà restituito un messaggio di errore. Sposta il contenuto nella parte inferiore della pagina o eliminalo del tutto.
• Ottimizzazione immagini. Al momento l'ottimizzazione immagini di Duda funziona sono per le immagini JPG e PNG. Se si scaricano file TIFF, GIF o altri formati di immagine, Duda potrebbe non essere in grado di ottimizzarla e questo determina l'apparizione dell'avviso. Consigliamo di utilizzare un servizio di ottimizzazione delle immagini, come EzGif, Compressor.io o TinyPNG. Un altro test eseguito da Google verifica che non vi siano immagini grandi ridimensionate per spazi piccoli. Duda cerca di dare una mano in questo senso inserendo immagini più piccole 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.
• Ridimensionare le immagini. Anche se Duda ottimizza le immagini per fare in modo che siano compresse a dimensioni ridotte, non ridimensiona effettivamente l'immagine nella versione desktop del tuo sito. Ad esempio, se usi un'immagine da 3000x3000 pixel su una pagina e la ridimensioni ad appena 300 pixel utilizzando la funzione "trascina per ridimensionare" dell'editor, il sito caricherà comunque un'immagine da 3000x3000 pixel. Questo può influire negativamente sul punteggio di PageSpeed. Puoi risolvere il problema ridimensionando l'immagine tramite l'editor integrato o nel software di fotoritocco e caricandola nuovamente.
• Sfruttare la cache del browser: se inserisci un codice personalizzato nel sito web, spesso verrà caricato da un sito web di terzi. Se questo sito web non consente la memorizzazione nella cache, Google individuerà il problema e consiglierà di abilitare la cache del browser. È opportuno contattare il servizio di terze parti per chiedere loro di implementare questa modifica sul server.
• La pagina potrebbe essere troppo grande: se una pagina dispone di molti contenuti, potrebbe avere dimensioni troppo grandi anche una volta applicato lo strumento di ottimizzazione al sito. Prendi in considerazione l'idea di usare meno immagini o distribuire i contenuti su altre pagine.
• Problemi attuali non risolvibili: questo messaggio si riferisce ai problemi di PageSpeed segnalati da Google che non possono essere risolti autonomamente e devono essere elaborati come richieste di funzionalità indirizzate a Duda:
  • Sfruttare la memorizzazione nella cache del browser
  • Minimizzare i codici HTML/CSS/JS
  • Ottimizzare l'implementazione del CSS

Casi in cui Duda non ottimizza il sito

Ci sono alcuni casi in cui Duda non tenta di ottimizzare il sito web al momento della pubblicazione, ad esempio qualora sia stato inserito del codice personalizzato che usa jQuery (($ ('#ex')) o l'API di JS: dmAPI.runOnReady(‘code’,function(){}); nell'intestazione del sito. Il motivo è che questo codice spesso richiede jQuery o le funzionalità dmAPI, ma poiché la nostra ottimizzazione lo sposta nella parte inferiore della pagina, il codice installato non funzionerà più.