Velocizzare il sito web con CoreTech Rocketweb e Google PageSpeed Insight
Uno dei fattori più importanti che riguardano l’indicizzazione dei siti Web e, un’ultima analisi del loro posizionamento nei risultati dei motori di ricerca, è il tempo di caricamento delle pagine del sito: più sono veloci a caricare, più sono avvantaggiate nel posizionamento.
Il punto di partenza per un sito veloce e frizzante deve essere costituito da una struttura informatica con buone prestazioni: RocketWeb Hosting, fornito dal provider milanese CoreTech, è un ottimo punto di inizio per avere una piattaforma snella, veloce e con prestazioni garantite.
Un provider inaffidabile, sia che offra servizi di hosting condiviso o gestito, oppure venda VPS da amministrare manualmente, decreta una sconfitta in partenza al di là di ogni possibile ottimizzazione del sito.
Il secondo fattore in ordine di importanza che determina la velocità di caricamento è legato alla struttura della pagina web stessa.
PageSpeed Insights è un utile strumento offerto da Google che permette di controllare il proprio sito ed identificare quali fattori limitano le prestazioni e l’esperienza mobile.
Il test si esegue accedendo a questa pagina: si inserisce l’indirizzo da testare, il sistema esegue i controlli necessari e infine fornisce una pagina con il risultato. Questo è calcolato in centesimi, e più è alto e meglio è secondo gli standard di Google. Non solo: il punteggio è calcolato sia per computer desktop sia per dispositivi mobile, vista la loro crescente diffusione e la sempre maggior percentuale di pagine Web visualizzate da smartphone o tablet.
Inoltre, vengono forniti dei suggerimenti – verranno spiegati nei prossimi paragrafi – su come sistemare eventuali problemi riscontrati.
Prima di addentrarci nello specifico di come ottimizzare il nostro sito web grazie a quanto proposto dal tool, vogliamo ricordare che eseguire una volta sola il test non è sufficiente e l’ideale sarebbe effettuare con regolarità tutti i controlli necessari. Per questo motivo, Plesk ha deciso di creare e di integrare direttamente nella piattaforma la Google PageSpeed Plesk Extension, l’estensione che vi permette di avere questo potentissimo strumento a portata di click, senza dover necessariamente utilizzare pagine esterne al sistema per consultare una reportistica dettagliata e controllare lo stato funzionale del proprio sito.
CoreTech basa la sua offerta RocketWeb Hosting su Plesk proprio perché tale piattaforma consente di centralizzare ed automatizzare tutte quelle operazioni che solitamente bisogna lanciare manualmente e con strumenti diversi, andando incontro ad ingenti perdite di tempo ed energie.
I miglioramenti proposti
Una volta lanciata l’analisi, come abbiamo detto poco sopra, si riceve un punteggio. Il punteggio di PageSpeed Insights porrà il sito in una delle 3 seguenti categorie.
- Good: il sito adotta le best practices in termini di prestazioni e garantisce una buona user experience.
- Needs work: mancano alcune ottimizzazioni che possono migliorare i tempi di caricamento lunghi; si consiglia di investigare ed implementare le soluzioni mancanti.
- Poor: il sito non è ottimizzato del tutto e la user experience è pessima; la priorità ora deve essere applicare i miglioramenti proposti.
Andando nel dettaglio, Google PageSpeed Insight consiglia di apportare le seguenti correzioni per migliorare la velocità di caricamento del sito Web.
I redirect (reindirizzamenti) sono una causa di rallentamenti evidenti. Ogni reindirizzamento infatti richiede un’altra connessione HTTP, magari con annessa risoluzione DNS e hand-shake TCP, che deprime le prestazioni del sito.
Un buon esempio di come evitare i redirect su dispositivi mobile è usare un design moderno e responsive. Un sito che è ottimizzato per device portatili non ha bisogno di un reindirizzamento su dominio dedicato per tablet e smartphone, il famigerato m.example.com.
Una fonte di redirect un po’ più subdola ma che non ha meno impatto si ha quando si sposta la connessione da HTTP ad HTTPS.
Il modo corretto di eseguire un reindirizzamento è con i redirect 301: sono SEO-friendly e facili da implementare, ed evitano ulteriori giri strani e che generano richieste inutili.
Inoltre i motori di ricerca tendono a portare avanti nel ranking i siti protetti da certificato SSL e disponibili solo con HTTPS.
2. Abilitare la compressione
Si consiglia di servire al client un contenuto compresso con Gzip o DEFLATE, e questo criterio controlla se la pagina è servita comprimendo le risorse HTML, JavaScript, CSS e le immagini. La compressione del contenuto può ridurre le dimensioni della pagina, e quindi i byte scambiati via rete, fino al 90%.
È necessario che sia il server sia il client usino lo stesso algoritmo di compressione (il server per comprimere, il client per decomprimere); i campi Header HTTP contengono le informazioni riguardo all’algoritmo usato, e i browser attuali supportano nativamente la compressione.
Lato server occorre usare moduli appositi per Apache (mod_deflate), NGINX (ngx_http_gzip_module e ngx_http_gzip_static_module), IIS (HTTP Compression) o il web server scelto.
Plesk supporta nativamente la compressione: va abilitata per il proprio sito seguendo queste facili istruzioni.
La compressione dinamica del contenuto richiede sostanziali risorse CPU, e un livello particolare di compressione può creare problemi a carico di CPU che si traducono in rallentamenti nel server, i quali sorpassano di gran lunga i benefici portati dalla riduzione della dimensione delle pagine.
3. Sfruttare la cache del browser
Caricare file statici è un processo dispendioso; se il browser ha già visitato il sito, allora ha memorizzati nella cache i file statici, e potrebbe fornirli direttamente ogni volta che si visita di nuovo il sito, migliorando i tempi di caricamento.
Quanto possono stare i file statici nella cache locale dipende strettamente da quanto questi vengono aggiornati: in generale, si consiglia di impostare almeno una settimana, ma il valore può aumentare se siamo certi che i file non cambiano.
Lato server, si può impostare una policy di caching con header specifici nelle richieste HTML; la cache locale fornirà le risorse invece che chiederle nuovamente al server.
I campi header da usare nell’header di risposta sono Cache-Control ed ETag: il primo definisce quanto a lungo il browser può conservare i file individuali, il secondo crea un token di riconvalida con il quale il browser può identificare facilmente le modifiche nei file, così da chiedere una nuova versione del file al browser.
4. Ridurre il tempo di risposta del server
Se il server non risponde entro 200ms, PageSpeed Insight penalizza il punteggio. Significa che il browser deve aggiungere questo tempo a quello necessario per servire la pagina, che aumenta.
I motivi per cui il tempo di risposta è alto sono vari, e non sempre sono facili da individuare senza un’attenta analisi approfondita.
Fattori critici da tener da conto sono CPU satura o memoria esaurita, o problemi a livello di applicazione (application layer dei modelli OSI e TCP/IP) come query sul database ingombranti, logica fallace degli script o troppe librerie.
Ci sono due strumenti che aiutano ad individuare questi colli di bottiglia: l’estensione New Relic per Plesk basata su New Relic oppure il servizio WebPageTest che, attraverso diverse opzioni di fine-tuning, mostra come il browser serve il sito e quali file lo rallentano.
5. Minificare HTML, CSS & JS
La minificazione consiste nell’eliminare nei file di codice quei caratteri, come gli spazi, che rendono comprensibile la lettura da parte delle persone ma perfettamente inutili ai computer ai fini delle loro operazioni. Questi caratteri occupano spazio che può essere dunque recuperato eliminando ad esempio gli spazi, i commenti o parti di codice non usato.
Prima di lavorare sul codice minificato va eseguita l’operazione inversa per poter garantire una maggior leggibilità.
Esistono strumenti dedicati per eseguire la minificazione dei file HTML, JavaScript e CSS, che devono poi sostituire i file originali. Il web server invierà meno byte al browser mantenendo però inalterata la quantità di informazioni. Si riduce quindi il tempo di caricamento delle pagine.
6. Eliminare JavaScript e CSS che bloccano la visualizzazione nei contenuti above-the-fold
Questa è probabilmente l’indicazione che crea più confusione.
In termini semplici, il contenuto above-the-fold è il contenuto della pagina visualizzato per primo, e in ogni caso senza che ci sia interazione da parte dell’utente (ad esempio con il mouse o la barra di scorrimento). Diversi studi indicano che una percentuale rilevante dei visitatori di un sito non scorrono la pagina e guardano solo il contenuto above-the-fold, che quindi assume particolare importanza: deve essere caricato senza indugio.
Se ci sono contenuti JavaScript o CSS richiamati tramite tag link che vengono caricati in questo spazio, ma che non sono richiesti affinché il server serva correttamente il contenuto, allora PageSpeed Insights segnala la situazione visto che il browser non può visualizzare correttamente le risorse HTML fintanto che i file richiesti non sono caricati.
La soluzione proposta da PageSpeed Insights è di dividere il contenuto CSS in due parti: una in-line responsabile dello stile della porzione above-the-fold del sito, e il resto in un file esterno; inoltre è una buona prassi riunire le risorse esterne CSS e JS in soli due file in modo da ridurre il numero di richieste HTTP, e di attivare il nuovo protocollo HTTP/2 se supportato dal web server.
Gli script JavaScript possono essere caricati in maniera asincrona per non interferire con il rendering del contenuto prioritario della pagina, ma se ci sono script che dipendono tra di loro bisogna fare attenzione a far sì che vengano eseguiti nel giusto ordine di dipendenza.
7. Ottimizzare le immagini
Questo punto è potenzialmente il più efficace. È normale avere diverse immagini sul proprio sito, ma queste occupano in genere diverso spazio: se queste vengono ottimizzate senza un impatto sostanziale sulla qualità di visualizzazione, le loro dimensioni possono essere ridotte significativamente migliorando il tempo di download.
Esistono diversi modi per ottimizzare le immagini: risoluzione, formato e impostazioni della qualità. Spesso i webmaster caricano immagini eccessivamente grandi, e quindi con una dimensione eccessiva: PageSpeed Insight identifica queste immagini e indica quanto spazio si può risparmiare in percentuale con le versioni ottimizzate degli stessi file.
I sistemi CDN (Content Delivery Network) come CloudFlare, Amazon Cloudfront o Akamai solitamente ottimizzano automaticamente le immagini, spesso dietro il pagamento di una sottoscrizione mensile o annuale.
Ovviamente si possono ottimizzare le immagini da sé: PageSpeed Insight consiglia di seguire queste linee guida.
Il processo base consiste nell’eliminare i commenti relativi all’immagine e dello spazio superfluo, nel ridurre l’intensità del colore al minimo livello accettabile e l’uso di un formato appropriato per il Web, come PNG o JPG.
Il processo avanzato consiste nell’uso di programmi appositi, come The Gimp o Adobe PhotoShot, per impostare i parametri di salvataggio dei file PNG e JPEG con un’ulteriore compressione. Sono disponibili anche strumenti dedicati come OptiPNG e PNGOUT (PNG) e jpegtran e jpegoptim (JPG).
8. Dare priorità al contenuto visibile
Questo punto è simile al punto 6 (eliminare JS e CSS che bloccano la visualizzazione above-the-field): la penalità nel punteggio scatta quando sono necessarie ulteriori connessioni per recuperare materiale non strettamente necessario prima della visualizzazione del contenuto: il risultato sono latenze e ritardi avvertibili e un degrado della user experience complessiva.
È importante strutturare il codice HTML della pagina in modo che il contenuto più importante sia visualizzato per primo, poi il resto. Ad esempio se la pagina contiene un articolo con una sidebar, questa va inserita nel codice HTML dopo la parte relativa all’articolo. In questo modo il browser serve prima l’articolo (contenuto importante) e poi la sidebar (contenuto non prioritario).
Oltre alla consegna asincrona di JavaScript, si può migliorare la consegna del CSS: le istruzioni relative alla parte prioritaria possono essere inserite inline direttamente nel codice HTML senza richiedere l’ausilio di un file esterno.
Una soluzione più comoda con Plesk
Fortunatamente esiste una soluzione più comoda offerta da Plesk, la piattaforma di hosting scelta anche da RocketWeb Hosting: l’estensione Google PageSpeed Insights.
Questo modulo aggiuntivo permette di sottoporre il sito al test di PageSpeed Insights e avere i risultati direttamente nell’interfaccia di Plesk – non serve aprire un’ulteriore pagina esterna per avere un report.
L’estensione è a disposizione di amministratori e clienti con normali permessi utenti, così da essere usata in qualsiasi momento per misurare le prestazioni del proprio sito.
Ma fin qui non sarebbe una grande vantaggio rispetto ad accedere al sito di Google PageSpeed Insights e ivi eseguire il test: la parte veramente interessante è che se PageSpeed Insights può comprimere i file statici, l’estensione fornirà un link per scaricare un archivio con i file ottimizzati.
Vanno scaricati e caricati su server al posto dei file attuali: i visitatori noteranno senz’altro un tempo di caricamento migliorato!
Naturalmente prima di eseguire questa operazione va eseguito un backup del sito, operazione particolarmente facile ed intuitiva in Plesk.
Riassumendo, l’estensione Google PageSpeed Insights di Plesk:
- Controlla i domini in pochi istanti.
- Fornisce un report dettagliato con suggerimenti per i miglioramenti.
- Offre un bottone personalizzato per eseguire il test e visualizzare direttamente il risultato.
- Rende disponibili per il download le versioni ottimizzate dei file statici.
- Conserva i risultati in una pagina riassuntiva.
Conclusioni
Naturalmente le indicazioni fornite da Google PageSpeed Insights devono essere inquadrate dalla giusta prospettiva: anzitutto puntano sulla velocità di caricamento della pagina, che in genere è un elemento chiave del successo di un sito Web, ma ovviamente non il solo.
E in secondo luogo bisogna sempre mettere su un piatto della bilancia i vantaggi portati dalle ottimizzazioni proposte, sull’altro gli sforzi necessari per attuarle.
RocketWeb Hosting, grazie all’estensione Google PageSpeed Insights di Plesk nativa nella sua offerta, permette di controllare sempre e con pochi click lo stato del proprio sito, verificare se le modifiche apportate sono più o meno invasive in termini di velocità di caricamento e sfruttare le soluzioni di ottimizzazione proposte per migliorare l’esperienza d’uso dei visitatori.
La strada verso siti Web più veloci passa dunque da una loro progettazione che rispetta i parametri descritti in questo articolo, ma non si esaurisce qui: occorre che la struttura sottostante, cioè i web server su cui girano, sia performante e ottimizzata per lo scopo, magari con un sistema di caching, fine-tuning del kernel e controllo dei processi.
La naturale conseguenza è che la scelta del provider a cui affidarsi assume un certo rilievo, superiore alle soluzioni che possono essere adottate in fase di creazione del sito.
