Prestazioni del sito web e PageSpeed ​​di Google

I siti web realizzati su Local Site sono ottimizzati per ottenere buoni punteggi nel test Google PageSpeed. Questo test controlla alcuni dettagli tecnici di un sito web per assicurarsi che soddisfino le migliori pratiche per tempi di caricamento rapidi.

Sommario

• Perché è importante ottimizzare il tuo sito web?
• Cosa controlla Google
• Cosa fa Local Site
• Cosa fare se il tuo sito ha un punteggio basso
• Casi in cui Local Site non ottimizza il sito

Perché è importante ottimizzare il tuo sito web?

La prima cosa che un visitatore noterà è il tempo di caricamento del tuo sito web. Se il tuo sito web si carica lentamente, capita spesso che i visitatori abbandonino la pagina e non abbiano un’esperienza utente positiva. Quindi esattamente l’opposto di ciò che vuoi ottenere. Il tempo medio di caricamento di un sito web oggi è compreso tra uno e tre secondi. Puoi misurare questo valore con uno strumento e quindi ottimizzarlo. Questa ottimizzazione non solo ti aiuta a migliorare l’esperienza dei visitatori sul tuo sito web, ma può anche essere un fattore di posizionamento nei risultati di ricerca.

Lo strumento Pagespeed di Google è progettato per analizzare e valutare il tuo sito. L’analisi può aiutarti a identificare possibili punti deboli nella performance. Ti fornisce suggerimenti per miglioramenti e tiene conto non solo della struttura dei file JavaScript, HTML e CSS, ma anche dell’integrazione di immagini o delle specifiche della cache del sito web.

Tuttavia, tieni presente che il tempo di caricamento è solo uno dei tanti fattori per un buon posizionamento. Google Pagespeed viene spesso pubblicizzato come uno strumento per l’ottimizzazione dei tempi di caricamento e spesso viene frainteso. Lo strumento stesso è un valore pari a 100 o vicino ad esso non sono cruciali per il posizionamento, poiché l’algoritmo del motore di ricerca tiene conto di molti altri fattori di posizionamento. La domanda che devi porti è: dovresti accontentare Google o l’esperienza dell’utente è fondamentale?

Dopotutto, un altro fattore di ranking su Google è quanto tempo l’utente rimane sul tuo sito. Vuoi mantenere il visitatore sul tuo sito il più a lungo possibile. Più importante di un eccellente punteggio PageSpeed ​​è un sito web con testo intelligente, immagini belle e ritagliate in modo appropriato e un design coerente e accattivante che sia facile da usare. Un sito veloce non vale molto se l’utente non si sente coinvolto o non riesce a orientarsi.

Pertanto consigliamo Google PageSpeed ​​per avere una buona panoramica. Tuttavia, aiuta sempre a mettere in discussione criticamente gli strumenti e i suggerimenti di tali strumenti. Un buon risultato in Google PageSpeed ​​non è tutto.

Nota: per ulteriori suggerimenti e strumenti, ti consigliamo di leggere il nostro articolo sulle domande frequenti sull’ottimizzazione dei motori di ricerca. Tieni presente che né la strategia SEO né i problemi con l’invio del file Robots.txt ai motori di ricerca rientrano nella nostra sfera di responsabilità. Per questo consigliamo la nostra community, dove potrai scambiare idee con altri professionisti.

Cosa controlla Google

Google ha un elenco di ottimizzazioni che controlla sia sulla versione desktop che su quella mobile di un sito web. Quindi somma i risultati di quanto bene il tuo sito è ottimizzato per ciascuno di questi controlli per ottenere un punteggio complessivo (su 100) per la velocità del tuo sito.

Ecco cosa controlla Google:

• Evita reindirizzamenti della pagina di destinazione: ciò significa che non dovresti reindirizzare gli utenti a un’altra pagina del tuo sito web quando lo caricano. Ad esempio, non dovresti reindirizzare tutti i visitatori a una seconda versione della tua home page.
• Elimina JavaScript e CSS che bloccano la visualizzazione nei contenuti Above The Fold: questo è di gran lunga il controllo più importante eseguito da Google. Questo esamina il codice sul tuo sito web e assicura che tu stia dando la priorità ai contenuti rispetto ad altro codice. Spesso, gli sviluppatori di siti inseriscono script pesanti e file CSS nella parte superiore di un file HTML. Ciò fa sì che il browser elabori/carichi prima queste risorse, invece di caricare prima il contenuto. Questo controllo ti assicura di dare priorità ai contenuti Above The Fold. (Nota: “Above-the-fold” indica il primo contenuto che un utente vede quando carica una pagina web prima di scorrerla verso il basso. Di solito si tratta dell’intestazione, della navigazione e del contenuto più in alto del corpo della pagina.)
• Abilita compressione: controlla che il tuo server web comprima i dati grezzi (HTML, CSS e Javascript) per ridurli prima di trasmetterli su Internet al tuo browser. Ciò si traduce in una significativa riduzione della dimensione totale del tuo sito web.
• Sfrutta la memorizzazione nella cache del browser: il controllo della memorizzazione nella cache assicura che tu dica al browser di salvare questo contenuto localmente, invece di scaricarlo nuovamente la prossima volta che devi accedervi. Ciò consente di risparmiare tempo prezioso che spesso viene speso per connettere e scaricare contenuti durante i ricaricamenti della pagina.
• Minimizza CSS: minimizzare i CSS significa rendere il file CSS il più piccolo possibile rimuovendo spazi aggiuntivi, interruzioni di riga e altra formattazione. Consideralo simile alla compressione del file per salvare la dimensione totale.
• Minimizza JavaScript: simile ai CSS, minimizzare JS può far risparmiare molte dimensioni sul singolo file che viene scaricato dal browser.
• Minimizza HTML: simile ai due precedenti, ma rimuove la spaziatura extra dall’HTML principale del sito web.
• Ottimizza immagini: il secondo controllo più importante eseguito da Google, garantisce che le immagini inviate al browser siano ottimizzate, compresse e non troppo grandi. Le immagini rappresentano circa il 65-70% del peso totale di un sito web. Ottimizzare le immagini significa comprimere le immagini e ridurle il più possibile nelle dimensioni del file prima che il browser le scarichi. Ci sono due elementi importanti da fare qui: (1) Assicurarsi che le immagini siano compresse. Ciò richiede di eseguirli attraverso strumenti di compressione per renderli più piccoli, senza ridurre la qualità delle immagini. (2) Ridimensionamento delle immagini. Non c’è motivo di fornire un’immagine molto grande (5.000 pixel, ad esempio) a un browser mobile, quindi dovresti ridimensionare l’immagine.
• Dai priorità ai contenuti visibili: assicura di posizionare i contenuti nella parte superiore dell’HTML del sito web. Cerca di non caricare contenuti aggiuntivi che non siano rilevanti per il primo caricamento del sito.
• Riduci i tempi di risposta del server: esamina il tuo server per assicurarsi che risponda molto rapidamente ai visitatori che arrivano al tuo sito web. Google richiede che l’utente attenda non più di 200 ms (1/5 di secondo) per recuperare contenuto/HTML dal tuo server.

Con l’introduzione del progetto open source Lighthouse nel novembre 2018, la velocità della pagina di Google ora esamina un’ampia gamma di proprietà del sito web oltre alla velocità (come SEO, accessibilità, PWA e best practice). Oltre ai test di cui sopra, Lighthouse ora controlla:

• First Contentful Paint: è una metrica che proviene da un browser reale che carica un sito web. Quando esegui un test Lighthouse, un vero browser andrà a visitare il tuo sito web, lo caricherà e monitorerà le prestazioni. La metrica First Contentful Paint riporta il tempo necessario per visualizzare qualsiasi tipo di contenuto dopo che una pagina ha iniziato a caricarsi. Può trattarsi di un’immagine, di un colore di sfondo, ecc., e il tempo necessario per la prima verniciatura del contenuto viene misurato in secondi. Il motivo per cui si tratta di una metrica preziosa è che è la prima volta che un utente sa che qualcosa sul sito web verrà caricato: è la prima indicazione che un sito si sta caricando.
• Indice di velocità: è una metrica che deriva da un vecchio strumento di prestazioni web chiamato WebPageTest . Esiste dal 2012 ed è abbastanza efficace nel determinare la velocità con cui un sito web carica i suoi contenuti. Funziona catturando screenshot di un sito ogni 0,5 secondi durante il caricamento. Utilizzando questi screenshot, calcola la percentuale di contenuto caricato sulla pagina web con incrementi di 0,5 secondi e fornisce un punteggio di velocità complessivo. Più basso è il numero, più veloce sarà il caricamento del sito per l’utente. L’obiettivo di questo test è capire veramente quanto velocemente l’utente vede i contenuti e se c’è qualcosa che impedisce al sito web di visualizzare i contenuti il ​​più velocemente possibile.
• Time to Interactive: un’altra metrica importante è la velocità con cui l’utente può interagire con la pagina. Ad esempio, l’utente potrebbe voler fare clic su un pulsante o scorrere la pagina. Ciò è particolarmente importante sui dispositivi mobili, dove l’utente toccherà direttamente lo schermo per interagire con la pagina. L’obiettivo per gli sviluppatori web dovrebbe sempre essere quello di garantire che una pagina sia interattiva ogni volta che è presente del contenuto. Questa è una sfida molto difficile a causa del modo in cui funzionano i browser.
• Prima CPU inattiva: è strettamente correlata al tempo di interattività, poiché è un indicatore della velocità con cui tutti i contenuti/risorse iniziali all’interno del sito vengono caricati e la CPU del dispositivo entra in uno stato inattivo (senza fare nulla). Il motivo per cui questo viene segnalato è che gli sviluppatori dovrebbero concentrarsi prima sul caricamento della quantità minima di contenuti. Inviando una piccola quantità, la CPU del dispositivo elaborerà tutto il codice e passerà più velocemente allo stato di inattività.
• Latenza di input stimata: non ha nulla a che fare con le prestazioni del primo caricamento del tuo sito web. Invece, tenta di darti un numero (in millisecondi) in cui il tuo sito web risponde ai tocchi/clic. L’idea è che più velocemente il tuo sito web risponde, più gli utenti lo considereranno veloce e avranno meno probabilità di abbandonare il sito.

Dopo aver eseguito questi test, Lighthouse fornirà anche consigli prioritari su come puoi contribuire a migliorare il punteggio di velocità complessivo. Appare nella seconda metà della pagina e fornisce dettagli molto tecnici su cosa puoi fare e sui vantaggi che queste modifiche potrebbero offrire.

Cosa fa Local Site

Local Site ha ottimizzato i siti web realizzati sulla nostra piattaforma per ottenere un punteggio elevato in particolare nel test Google PageSpeed. Ciò significa che abbiamo studiato i test sopra elencati e ottimizzato i nostri siti per ciascuno di essi. Ecco un riepilogo di come abbiamo gestito ciascuno di questi controlli:

• Evita reindirizzamenti delle pagine di destinazione: per la maggior parte dei siti web Local Site, superiamo questo controllo al 100%. Anche se ciò non è completamente sotto il controllo di Local Site, poiché consentiamo agli utenti di impostare i propri reindirizzamenti. La raccomandazione è di assicurarti di non inviare link ai tuoi clienti, partner, ecc., che non siano pagine reali del tuo sito web.
• Elimina JavaScript e CSS che bloccano la visualizzazione nei contenuti Above The Fold: Local Site ottimizza la struttura dei siti web per conformarsi a questa raccomandazione. Ad esempio, tutti gli script si trovano nella parte inferiore del sito, in modo che il contenuto venga caricato per primo.
• Abilita compressione: Local Site abilita la compressione gzip per le connessioni a tutti i siti web. Ciò garantisce che il file venga compresso, trasferito su Internet e quindi decompresso dal browser.
• Sfrutta la memorizzazione nella cache del browser: Local Site imposta le intestazioni della cache su tutti i file caricati. Ciò garantisce che i browser che scaricano questi file (CSS, JS e immagini) sappiano come archiviare temporaneamente il file nella cache del browser, in modo che la prossima volta che il browser dovrà accedere a quel file, verrà archiviato localmente, invece di doverlo scaricare nuovamente dal sito.
• Minimizza CSS, JS e HTML: risorse come CSS, JS e HTML vengono minimizzate automaticamente. Ciò garantisce che siano il più piccoli possibile una volta scaricati.
• Ottimizza le immagini: ti offriamo un ampio processo di compressione e ridimensionamento delle immagini per le immagini caricate. Ogni immagine verrà poi ridotta ad una risoluzione quanto più vicina possibile alle reali dimensioni visualizzate: anche delle immagini ritagliate verrà scaricata solo la parte ritagliata. Durante il ridimensionamento, le immagini vengono eseguite attraverso un algoritmo di compressione, assicurandosi di ridurre il più possibile le dimensioni dell’immagine, pur mantenendo una qualità dell’immagine nitida.
• Dare priorità ai contenuti visibili: Local Site crea ogni sito in modo che si adatti a 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 mira più a garantire che il tuo sito web non sia troppo lento, piuttosto che abbastanza veloce. Poiché Local Site ospita tutti i siti web sulla piattaforma, possiamo garantire che tutti i siti che ospitiamo rispondano rapidamente.

Cosa fare se il tuo sito ha un punteggio basso

Anche se Local Site desidera che ogni sito web che gestiamo abbia sempre un posizionamento elevato, non è qualcosa che possiamo promettere. Questo perché i nostri clienti possono aggiungere il proprio codice, contenuto 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 Local Site non raggiungono i 90 punti. Ecco un elenco di errori/problemi che vediamo segnalarci da Google PageSpeed, in base a come è stato creato un sito web:

• Elimina JavaScript e CSS che bloccano la visualizzazione nei contenuti Above The Fold:

    – Elemento mappa Above the Fold: se posizioni un elemento mappa nella parte superiore del tuo sito web Local Site questo spesso si ripercuoterà in modo negativo sulle classifiche di PageSpeed. Per risolvere questo problema, sposta l’elemento della mappa in fondo alla pagina.

    – Vetrina sopra la piega: se posizioni un negozio in alto, spesso può causare la visualizzazione di questo avviso. Local Site sta lavorando a una soluzione a questo problema, ma al momento l’unico consiglio che abbiamo è 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 “above the fold” del sito web.

    – Codice/script personalizzato nell’intestazione: se hai inserito un codice personalizzato nella sezione principale del sito web, spesso verrà visualizzato un errore da Google che indica che questo rallenta il rendering della pagina. Esistono due opzioni per risolvere questo problema: (1) Posizionare il codice nella parte inferiore dell’HTML del sito anziché nell’intestazione. Ciò sposta il codice in fondo, costringendolo così a caricarsi più tardi anziché prima. (2) Assicurati che lo script incorporato qui sia caricato in modo asincrono. Ciò significa che il browser lo carica in background continuando a caricare il resto del contenuto del sito web. Per abilitare l’asincrono sugli 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></script>

Noterai che il codice sopra indica al browser di caricare questo codice “asincrono”, che dovrebbe aiutare a superare questo particolare test di Google PageSpeed.

    – Incorporamento iframe: se incorpori un iframe personalizzato in un sito web Local Site sopra la piega, molto probabilmente verrà restituito questo messaggio di errore. Sposta questo contenuto più in basso nella pagina o rimuovilo completamente.

• Ridimensiona immagini: riduci le dimensioni di visualizzazione delle immagini nel tuo sito web. Ciò porta a una risoluzione inferiore e quindi a download più piccoli.
• Sfrutta la memorizzazione nella cache del browser: se includi del codice personalizzato sul tuo sito web, spesso verrà caricato da un sito web di terze parti. Se il sito non abilita la memorizzazione nella cache, Google lo scoprirà e consiglierà di abilitare la memorizzazione nella cache del browser. Dovresti contattare il servizio di terze parti per chiedere loro di implementare questa modifica sul proprio server.
• La tua pagina potrebbe essere troppo grande: se hai molti contenuti su una singola pagina, la pagina può risultare grande anche dopo che Local Site ha ottimizzato il tuo sito. Prendi in considerazione l’utilizzo di meno immagini o la suddivisione dei contenuti spostandoli su altre pagine.

Casi in cui Local Site non ottimizza il sito

Esistono alcuni casi in cui Local Site non tenta di ottimizzare il sito al momento della pubblicazione. Ad esempio, se hai inserito un codice personalizzato che utilizza jQuery nell’intestazione del sito, Local Site non tenterà di ottimizzarlo quando lo pubblichi. Il motivo per cui lo facciamo è che questo codice spesso richiede l’esistenza di jQuery o delle funzioni dmAPI, ma poiché la nostra ottimizzazione sposterebbe questo codice più in basso nella pagina, interromperebbe il codice che è stato installato e non funzionerebbe più.