Qual è il punteggio calcolato da Google Pagespeed Insights o GTMetrix?

Strumenti come Google Pagespeed Insights o GTMetrix calcolano una percentuale che consente di valutare le prestazioni dei siti web. Questo punteggio non è direttamente correlato al tempo di caricamento della pagina web, ma principalmente alla qualità del suo design. In altre parole, il punteggio Pagespeed indica se la pagina è stata progettata per essere visualizzata molto rapidamente o meno.

Perché il punteggio mobile è diverso da quello desktop? Semplicemente perché lo strumento terrà conto della velocità di connessione che è più lenta su un cellulare. Alcuni elementi come le dimensioni delle immagini, il numero di richieste, ecc. avranno maggiore importanza. Si considera inoltre che i cellulari sono meno efficienti di un computer, quindi il carico della CPU (esecuzione di javascript) avrà un ruolo più importante nel calcolo del punteggio.

Come raggiungere il punteggio Pagespeed di 100/100?

Con il CMS Prestashop posso dire che è quasi impossibile su un sito web reale. Perché? Semplicemente perché ci saranno sempre regole CSS e codice Javascript non utilizzati dalla pagina web visualizzata, aggiunti dai moduli o dal tema, ma per altre pagine. In genere le seguenti opportunità non possono essere risolte:

  • Ridurre le risorse JS inutilizzate
  • Ridurre le risorse CSS inutilizzate

Tuttavia, vi sono diversi problemi segnalati da Pagespeed Insights che possono essere corretti per avvicinarsi il più possibile al punteggio di 100/100.

Ecco l'elenco dei problemi più frequenti e come risolverli o ottimizzarli

Ottimizzazione delle prestazioni del server

Ottimizzazione delle immagini

  • Ritardare il caricamento di immagini fuori dallo schermo: Google consiglia di impostare il caricamento ritardato di immagini o video, ossia di non visualizzare immediatamente i contenuti non visibili sullo schermo. Questo è particolarmente importante per i telefoni cellulari, che hanno schermi piccoli e il visitatore non scorrerà necessariamente fino in fondo, quindi non è necessario caricare foto o video che non vedranno mai. I temi spesso offrono questa funzione di "caricamento pigro", altrimenti si può utilizzare un modulo come Speed Pack (Page Cache Ultimate + WEBP + SQL Profiling + Database cleaning) .
  • Distribuire le immagini in formati di nuova generazione: Google ha creato il formato di immagine ottimizzato WEBP che riduce le dimensioni dei file mantenendo un'ottima qualità delle immagini. Per comprimere le immagini in formato WEBP, è necessario un modulo come Compressione WEBP , che, a differenza di altri moduli, comprime tutte le immagini del negozio, non solo quelle dei prodotti e delle categorie.
  • Codifica le immagini in modo efficiente: indica che le immagini potrebbero essere più compresse. Se si utilizza il formato WEBP, anche questo problema sarà risolto.
  • Glielementi immagine non hanno una larghezza e un'altezza esplicite: quando il browser inizia a visualizzare la pagina web non ha ancora scaricato le immagini, ma ne riserva la posizione utilizzando gli attributi di larghezza e altezza contenuti nell'HTML (template del tema o del modulo). Se questi attributi mancano, il browser non può riservare lo spazio necessario e ogni volta che viene scaricata un'immagine il contenuto della pagina si sposta, il che è molto spiacevole per il visitatore (causa CLS). È quindi necessario modificare i modelli per aggiungere questi attributi.

Ottimizzazione legata alla configurazione del server

  • Attivare la compressione del testo: in Apache è necessario attivare mod_deflate che comprime tutti i contenuti testuali come CSS, JS, HTML, ecc. Ad esempio, potete aggiungere il seguente codice al file .htaccess nella root del vostro negozio:
<IfModule mod_deflate.c>

   SetOutputFilter DEFLATE

   <IfModule mod_filter.c>

       AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css

       AddOutputFilterByType DEFLATE application/x-javascript application/javascript application/ecmascript

       AddOutputFilterByType DEFLATE application/rss+xml

       AddOutputFilterByType DEFLATE application/xml

       AddOutputFilterByType DEFLATE application/json

   </IfModule>

</IfModule>
  • Distribuire gli elementi statici grazie a regole di caching efficienti: in Prestashop, nella pagina Prestazioni, è necessario attivare l'opzione "Ottimizzazioni Apache". Tenete presente che non sarà possibile correggere questo problema per i file che non sono ospitati sul vostro server (Google Analytics, Facebook, ecc.)

Ottimizzazione relativa al tema Prestashop

  • Assicurateviche il testo rimanga visibile durante il caricamento dei font web: sul vostro negozio utilizzate un font che il browser deve scaricare. Durante questo periodo è necessario indicare al browser di utilizzare un font di sistema, come ad esempio Arial, altrimenti non può visualizzare nulla e questo è un blocco. Per farlo, aggiungere l'opzione "font-display: swap;" alla regola CSS che definisce il carattere (@font-face).
  • Ridurre le risorse JavaScript inutilizzate: impossibile da ottimizzare a causa del design di Prestashop
  • Ridurre le risorse CSS inutilizzate: impossibile da ottimizzare con il design di Prestashop
  • Eliminare le risorse che bloccano il rendering: impossibile da ottimizzare, perché deve essere fatto fin dall'inizio nel tema
  • Riduzione delle dimensioni delle risorse CSS: normalmente corretta attivando l'opzione "Smart Cache CSS" nella pagina delle prestazioni e attivando il mod_deflate di Apache
  • Riduzione delle dimensioni delle risorse JavaScript: normalmente si risolve attivando l'opzione "Smart Cache CSS" nella pagina Prestazioni e attivando Apache mod_deflate
  • Evitare una dimensione eccessiva del DOM: indica che ci sono troppe informazioni nella pagina, in particolare che l'HTML è troppo grande. Questo problema è spesso legato al numero eccessivo di prodotti presenti nella pagina; è possibile ridurne il numero o attivare un'opzione di scorrimento infinito che consenta di scaricare i prodotti quando il visitatore scorre fino in fondo all'elenco.
  • La pagina non utilizza ascoltatori di eventi passivi per migliorare le prestazioni di scorrimento: si tratta di un problema Javascript fornito dal tema o da un modulo. Sarà difficile per voi identificarlo.
  • Evitare di creare stringhe di richiesta critiche: ciò significa che i file fanno riferimento ad altri file, quindi il browser può iniziare a scaricarli solo dopo aver scaricato e letto i file padre. Per ridurre questa perdita di tempo, questi file dovrebbero essere referenziati direttamente nell'HTML usando l'attributo "preload".

Il punteggio ha un impatto sulla SEO?

Google non dice che utilizza questo punteggio per classificare i risultati di ricerca, ma credo che ci sia un effetto indiretto.

Google misura il cosiddetto "Dwell Time", ovvero il tempo trascorso tra due clic in un elenco di risultati. Questo indica se il visitatore è rimasto lì per molto tempo o se non vi è rimasto affatto. Ad esempio, se il tempo di permanenza è inferiore a 3 secondi, possiamo pensare che non sia interessante e che rischi di essere retrocesso.

Per concludere

Ovviamente è molto complicato implementare tutte queste ottimizzazioni! L'ideale è tenerne conto durante lo sviluppo del tema e dei moduli, per questo ho creato il tema Prestashop JPresta Origin e i moduli che lo accompagnano

Un'ottima velocità di caricamento delle pagine del vostro negozio non vi farà vendere di più, ma un sito web lento vi farà sicuramente perdere clienti!