IONOS ha ottimizzato i siti web pubblicati sulla piattaforma per ottenere un punteggio elevato nel test Google PageSpeed. Questo test esamina molti dettagli tecnici su come vengono create le pagine Web e verifica che soddisfino le best practice che consentono il caricamento rapido dei siti Web. Il controllo più importante nel test PageSpeed esamina come è strutturato il codice del sito web. Google verifica che il codice sia strutturato in modo da consentire al browser di caricare il contenuto più velocemente.
Attenzione
Di recente Google ha implementato una modifica importante al modo in cui sottopone un sito web al test PageSpeed e ne fornisce i risultati. Al momento stiamo lavorando per allineare la nostra piattaforma con i nuovi standard forniti da Google e annunceremo questi aggiornamenti nelle nostre nuove release dei prodotti.
Noi di IONOS crediamo che la velocità del sito web sia uno dei maggiori problemi che il web deve affrontare oggi. I siti Web a caricamento lento hanno una frequenza di rimbalzo più elevata, un coinvolgimento inferiore e danno all'intero Web una reputazione negativa di essere lento. Sappiamo che i siti Web che rispondono più rapidamente offrono molto valore ai visitatori del sito offrendo a ogni persona una migliore esperienza di navigazione.
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à.
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:
-
Evita i reindirizzamenti delle pagine 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 il rendering nei contenuti above the fold. Questo è di gran lunga il controllo più importante che Google esegue. In questo modo si esamina il codice del sito Web e si assicura che si stia dando la priorità ai contenuti rispetto ad altri codici. Spesso, gli sviluppatori di siti Web inseriscono script pesanti e CSS all'inizio di un file HTML. In questo modo il browser elabora/carica prima queste risorse, invece di caricare prima il contenuto. Questo controllo ti assicura di dare la priorità ai contenuti above the fold. (Nota: Above the fold indica 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. Questo verifica che il tuo server web comprima (rimpicciolisca) i dati grezzi (HTML, CSS e Javascript) prima di trasmetterli su Internet al tuo browser. Ciò si traduce in un grande risparmio nelle dimensioni totali 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. In questo modo si risparmia tempo prezioso che spesso viene speso per la connessione e il download di contenuti durante i ricarichi delle pagine.
-
Minimizza CSS. Minimizzare i CSS significa rendere il file CSS il più piccolo possibile rimuovendo spazi extra, interruzioni di riga e altri formati. Pensa a questo come alla compressione del file per risparmiare le dimensioni totali.
-
Minimizza JavaScript. Simile alla minimizzazione dei CSS, la minimizzazione di 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 le immagini. Il secondo controllo più importante che Google esegue, questo assicura che le immagini che invii al browser siano ottimizzate, compresse e non troppo grandi. Le immagini rappresentano circa il 65-70% delle dimensioni/peso totali di un sito web. Ottimizzare le immagini significa comprimere le immagini e renderle il più piccole possibile prima di doverle scaricare dal browser. Ci sono due cose importanti da fare qui: (1) Assicurati che le immagini siano compresse. Ciò richiede l'esecuzione di tool di compressione per renderli più piccoli, senza ridurre la qualità delle immagini. (2) Ridimensionamento delle immagini. Non è necessario inviare un'immagine molto grande (5000 pixel, ad esempio) a un browser mobile, quindi è necessario ridimensionare l'immagine.
-
Dai priorità ai contenuti visibili. In questo modo si garantisce di posizionare il contenuto nella parte superiore dell'HTML del sito Web. Cerca di non caricare contenuti aggiuntivi che non sono rilevanti per il primo caricamento del sito web.
-
Riduci i tempi di risposta del server. Questo controllo esamina il tuo server per assicurarsi che risponda molto rapidamente ai visitatori che arrivano sul tuo sito web. Google richiede che l'utente attenda non più di 200 ms (1/5 di secondo) per ottenere il 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 verifica la presenza di:
-
Prima vernice contenta. Questa è 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 la visualizzazione di qualsiasi tipo di contenuto dopo l'inizio del caricamento di una pagina. Può trattarsi di un'immagine, di un colore di sfondo, ecc., e il tempo per il primo Contentful Paint è misurato in secondi. Il motivo per cui questa è una metrica preziosa è che è la prima volta che 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 che proviene da un vecchio tool delle prestazioni Web chiamato WebPageTest. È in circolazione dal 2012 ed è abbastanza efficace nel determinare la velocità con cui un sito Web carica i suoi contenuti. Funziona acquisendo schermate di un sito Web 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ù velocemente il sito web sembra caricarsi per l'utente. L'obiettivo di questo test è capire davvero quanto velocemente l'utente vede i contenuti e se c'è qualcosa che impedisce al sito web di visualizzare i contenuti il più velocemente possibile.
-
È ora di interagire. 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. Questo è particolarmente importante sui dispositivi mobili, dove l'utente toccherà direttamente uno 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 un contenuto. Questa è una sfida molto difficile a causa del modo in cui funzionano i browser.
-
Prima CPU inattiva. Questa metrica è strettamente correlata al tempo di interattività, in quanto è un indicatore della velocità con cui vengono caricati tutti i contenuti/risorse iniziali all'interno del sito Web e la CPU del dispositivo entra in uno stato di inattività (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 a uno stato di inattività.
-
Latenza di input stimata. L'ultima metrica su cui Lighthouse riporta 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 risponde il tuo sito web, più utenti lo considereranno veloce e saranno meno propensi a lasciare il sito.
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.
IONOS ha ottimizzato i siti web costruiti sulla nostra piattaforma per ottenere un punteggio elevato, in particolare nel test Google PageSpeed. Ciò significa che abbiamo esaminato i test sopra elencati e ottimizzato i nostri siti Web per ciascuno di essi. Ecco una carrellata di come abbiamo gestito ciascuno di questi controlli:
-
Evita i reindirizzamenti delle pagine di destinazione. Per la maggior parte dei siti web IONOS, superiamo questo controllo al 100%. Questo non è completamente sotto il controllo di IONOS, poiché consentiamo agli utenti di reindirizzare ad altre pagine tramite il nostro reindirizzamento URL. La raccomandazione qui è di assicurarsi di non inviare link ai tuoi clienti, partner, ecc., che non sono una vera pagina del tuo sito web.
-
Elimina JavaScript e CSS che bloccano il rendering nei contenuti above the fold. Nell'ambito della pubblicazione di siti web, IONOS ottimizza la struttura dei siti web in modo che siano conformi a questa raccomandazione. Lo facciamo attraverso: (1) Calcolando quello che chiamiamo CSS "critico". Ciò significa che esaminiamo il sito Web e vediamo quali stili CSS sono necessari per visualizzare il sito Web. Quindi inseriamo questo contenuto in linea all'interno del sito Web in modo che venga caricato per primo. (2) Spostiamo quindi tutti gli script nella parte inferiore del sito Web, in modo che il contenuto venga caricato per primo.
-
Abilita la compressione. IONOS 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.
-
Sfrutta la memorizzazione nella cache del browser. IONOS imposta le intestazioni della cache su tutti i file che carichiamo. Ciò garantisce che i browser che scaricano questi file (CSS, JS, Immagini) sappiano come store temporaneamente il file nella cache del browser, in modo che la prossima volta che il browser deve accedere a quel file, venga store sul computer localmente, invece di doverlo scaricare nuovamente dal sito web.
-
Minimizza CSS, JS e HTML. Nell'ambito del processo di pubblicazione di IONOS, minimizziamo la stragrande maggioranza delle risorse CSS. Ciò garantisce che siano il più piccoli possibile una volta scaricati. È importante notare che le risorse esterne, sebbene in genere inviate tramite proxy tramite la nostra CDN, potrebbero non subire la minimizzazione.
-
Ottimizza le immagini. Ogni immagine jpg o png che carichi su IONOS, eseguiamo un'ampia compressione delle immagini e Ridimensiona il processo per eseguire la migliore gestione possibile delle immagini. Eseguiamo i seguenti processi:
-
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.
-
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.
-
-
Dai priorità ai contenuti visibili. Come parte del modo in cui IONOS costruisce ogni sito web, strutturiamo il 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 serve principalmente ad assicurarsi che il tuo sito web non sia troppo lento, piuttosto che abbastanza veloce. Poiché IONOS ospita tutti i siti web sulla nostra piattaforma, possiamo assicurarci che tutti i siti web che ospitiamo rispondano rapidamente. Utilizziamo Amazon Web Services, leader del settore, che ci aiuta a mantenere questi standard.
Anche se IONOS vorrebbe che ogni sito web che gestiamo si posizionasse sempre in alto, 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 di IONOS non otterranno un punteggio di 90 gradi. Ecco un elenco di errori/problemi che vediamo segnalarci da Google PageSpeed, in base a come è stato creato il sito web:
-
Eliminare i codici JavaScript e CSS che bloccano il rendering del contenuto iniziale:
-
Elemento della mappa sopra la piega. Se inserisci un elemento della mappa nella parte superiore del tuo sito web, questo verrà spesso restituito come negativo sul tuo PageSpeed ranking. Per risolvere questo problema, sposta l'elemento della mappa in fondo alla pagina.
-
store davanti sopra la piega. Se si posiziona un store in alto, spesso può causare la visualizzazione di questo avviso. IONOS sta lavorando a una soluzione per questo problema, ma al momento l'unica raccomandazione 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 store , in modo che l' store 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 head del sito web, spesso viene visualizzato un errore da Google che indica che questo sta rallentando il rendering della pagina. Ci sono due opzioni per risolvere questo problema: (1) Inserire il codice nel file body-end.html del sito Web invece dell'intestazione. In questo modo il codice viene spostato in fondo, costringendolo a caricarsi più tardi anziché prima. (2) Assicurarsi 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, è necessario modificarlo in questo modo:
-
Vecchio codice: <script src="https://example.com/script.js"></script>
-
Nuovo async: <script src="https://example.com/script.js" rinvio asincrono></script>
-
Il codice sopra indica al browser di caricare il codice in maniera asincrona, aiutando a superare questo test di Google PageSpeed.
-
Incorporamento iframe. Se incorpori un iframe personalizzato in un sito web above the fold, molto probabilmente tornerà con questo messaggio di errore. Si prega di spostare questo contenuto più in basso nella pagina o di rimuoverlo completamente.
-
-
-
Ottimizza le immagini: oggi l'ottimizzazione delle immagini di IONOS funziona solo su JPG e Immagini PNG. Se stai caricando un TIFF, GIF o altri formati di immagine, IONOS potrebbe non essere in grado di ottimizzarlo e questo potrebbe essere il motivo di questo avviso. Ti consigliamo di eseguire l'immagine tramite un servizio di ottimizzazione delle immagini, come EzGif, Compressor.io o TinyPNG.Un altro controllo eseguito da Google consiste nell'assicurarsi di non avere immagini di grandi dimensioni che si ridimensionano per piccoli punti. IONOS cerca di aiutare in questo, posizionando immagini di dimensioni più piccole in colonne che hanno meno dimensioni, ma questo processo non è perfetto. A volte potrebbe essere necessario scaricare un'immagine, ridimensionarla esattamente in base alle dimensioni della colonna che si desidera utilizzare e ricaricare l'immagine. Questo è un caso abbastanza raro.
-
Ridimensiona le immagini: mentre IONOS ottimizza le immagini per assicurarsi che siano compresse a una dimensione inferiore, IONOS in realtà non ridimensiona la tua immagine per te nella versione desktop del tuo sito. Ad esempio, se utilizzi un'immagine di 3000 x 3000 pixel su una pagina e la ridimensioni utilizzando la funzione di trascinamento per ridimensionare dell'editor a soli 300 px, significa comunque che sta caricando l'intera immagine di 3000 x 3000 px. Questo può influire negativamente sul punteggio di velocità della pagina. Puoi risolverlo ridimensionando l'immagine utilizzando l'editor di immagini integrato o ridimensionandola nel software di fotoritocco e ricaricandola.
-
Sfrutta la memorizzazione nella cache del browser: se includi del codice personalizzato nel tuo sito web, spesso verrà caricato da un sito Web di terze parti. Se questo sito Web non abilita la memorizzazione nella cache, Google lo troverà e consiglierà di abilitare la memorizzazione nella cache del browser. È necessario contattare il servizio di terze parti per convincerlo a implementare questa modifica sul proprio server.
-
La tua pagina potrebbe essere troppo grande: se hai molti contenuti su una pagina, la pagina può diventare grande anche dopo aver eseguito il tool di ottimizzazione sul tuo sito. Prendi in considerazione l'utilizzo di meno immagini o la possibilità di suddividere i contenuti spostandoli su altre pagine.
-
Problemi attuali non risolvibili: Si tratta di problemi di velocità della pagina segnalati da Google che non possono essere risolti da soli e devono essere elaborati come richieste di funzionalità per IONOS:
-
Sfruttare la memorizzazione nella cache del browser
-
Minimizzare i codici HTML/CSS/JS
-
Ottimizzare l'implementazione del CSS
-
Ci sono alcuni casi in cui IONOS 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('code',function(){}); nell'intestazione del sito web. Il motivo per cui lo facciamo è perché questo codice spesso richiede l'esistenza di jQuery o delle funzioni 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.