Se anche tu navighi da dispositivi mobile con una connessione non sempre stabile avrai notato che molti siti sono incredibilmente lenti, ma questo non significa che deve esserlo anche il tuo.
Si tratta di una situazione a cui dobbiamo porre rimedio, anche perché i dispositivi mobile sono in costante aumento. Come ci dice il rapporto Global Mobile Trends, pubblicato a ottobre da Gsma Intelligence, l’accesso a Internet attraverso questi dispositivi passerà dal 48% nel 2016 (che di per sé è già una bella fetta della popolazione) per arrivare fino al 60% nel 2020 andando a coinvolvere circa 4,7 miliardi persone.
[clickToTweet tweet=”Nel 2020 quasi 5 miliardi di persone useranno #internet su #mobile, meglio ottimizzare il sito!” quote=”Nel 2020 quasi 5 miliardi di persone useranno #internet su #mobile, meglio ottimizzare il sito!”]
In questo articolo introduttivo ti spiego come si valutano le performance e cosa possiamo fare per migliorarle sin da subito. Se questi concetti sono di tuo interesse e ci sarà richiesta all’interno dei commenti tornerò molto presto con nuovi articoli che trattano nello specifico alcuni argomenti ben precisi.
I concetti principali che dovrai tenere a mente per seguirmi in questa primissima fase sono semplicemente due:
- Velocità di caricamento
- Esperienza Utente
La velocità di caricamento conta…
Cerchiamo browser veloci e connessioni prestanti solo per guadagnare una manciata di millisecondi, ma tutto questo ha senso?
Certo! E ora ti spiego anche perché.
Ricordi la dichiarazione di Amazon nell’ormai lontano 2006?
Ogni 100 millisecondi di ritardo comporta una perdita dell’1% delle vendite.
Bing e Google Search hanno condotto esperimenti sugli effetti della velocità di caricamento e hanno deliberatamente rallentato la visualizzazione dei risultati di ricerca per verificare il comportamento degli utenti e quanto le prestazioni incidessero sulle vendite dei propri spazi pubblicitari.
Attenzione, la perdita degli utenti non rimane circoscritta nel mondo online.
Uno studio condotto da Akamai ha dimostrato che il 27% degli utenti insoddisfatti dalle cattive performance online è poco invogliato ad effettuare acquisti nei negozi fisici.
A dimostrazione che la velocità di caricamento di un sito impatta non solo sulla reputazione online, ma anche su quella offline!
Insomma, possiamo riassumere questo primo concetto con la celeberrima frase di Google “Faster sites create happy users”.
… ma anche l’esperienza utente
Attendere tre secondi con una barra di avanzamento animata è diverso rispetto che stare fermi a fissare una pagina vuota.
L’ingegnere di Google Ilya Grigorik in un video spiega bene la “Speed, Performance, and Human Perception”, dove sottolinea che la sola velocità di caricamento non è uguale alla performance percepita dall’utente!
Concetto di fondamentale importanza per capire che non basta ottenere la miglior velocità di caricamento ma bisogna altresì tenere molto in considerazione l’esperienza utente.
Immergiamoci nell’esempio concreto dei preloaders, elementi grafici che accompagnano il caricamento di una pagina avvisando l’utente che dovrà attendere.
Sebbene il preloader sia un elemento grafico che consuma delle risorse è bene inserirlo quando il caricamento richiedere più di due secondi, proprio perché l’esperienza dell’attesa è migliore rispetto alla classica pagina bianca.
Anche il più grande social network del mondo utilizza un preloader che sfrutta il layout stesso della piattaforma anche se i contenuti non sono ancora presenti, una strategia intelligente che ha il duplice compito di rassicurare l’utente sul caricamento della pagina e migliorare la percezione dell’attesa.
Un piccolo esempio che porta a riflettere sul giusto bilanciamento tra un’ottima velocità di caricamento accompagnata da una piacevole esperienza utente.
Strumenti utili per la misurazione
La domanda sorge spontanea, ci sono strumenti per misurare le performance del sito?
Eccoti la buona notizia, ne esistono diversi accompagnati anche da add-on per velocizzare l’analisi, vediamone qualcuno:
PageSpeed Insight
Effettua una misura di rendimento sia per i dispositivi mobili che per desktop e ci assegna un punteggio da 0 a 100 segnalando le eventuali migliorie da effettuare.
A fine test include anche un archivio .zip che contiene il codice minificato e immagini compresse, naturalmente se il sito non è ottimizzato.
Pro
- Immediato, in pochi secondi avrai dei risultati semplici da interpretare con le rispettive soluzioni là dove vi sono dei problemi da risolvere
- è uno strumento completamente gratuito
- offre la possibilità di scaricare i contenuti ottimizzati
Contro
- Per i più esperti risulta poco dettagliato
- Mancanza di Test Format, non puoi decidere dove (Es. emulare una connessione da Londra) e come (Es. con connessione 3G) analizzare la pagina web
GTMetrix
Add-on : firefox, chrome
GTMetrix utilizza YSlow e PageSpeed per valutare la performance del sito, fornendo informazioni molto intuitive. Analizza i dati mostrando grafici, scaricando il video dei test effettuati e in più ha un sistema di monitoraggio che permette di essere avvisati nel caso di calo di prestazioni del proprio sito.
Pro
- Molto dettagliato nei risultati
- Puoi utilizzarlo senza essere registrato
- Registrarsi è un’operazione che richiede pochissimo e offre alcuni vantaggi
- Blog aggiornato con tante news utili a migliorare le performance
- Test Format
Contro
- a volte risulta lento nell’analisi
- la versione free presenta diversi limiti
WebPageTest
Add-on : firefox, chrome
Esegue test di velocità gratuiti su siti web in diversi luoghi del mondo utilizzando browsers (Firefox, IE, Chrome) a velocità di connessione reale dei consumatori. È possibile eseguire semplici test o anche di avanzati, inclusi transazioni a più passaggi, cattura video, blocco dei contenuti e molto altro ancora. I risultati forniranno informazioni dettagliate, tra cui grafici a cascata di caricamento delle risorse, controlli di ottimizzazione della velocità di pagina e suggerimenti per i miglioramenti.
Pro
- Presenti due modalità di analisi: semplice e avanzata
- Dettagliato nei risultati
- Completamente gratuito
- È presente un forum
Contro
- interfaccia a volte poco intuitiva
- lento nell’analisi rispetto PageSpeed Insights
Mettiti alla prova
Dato che non voglio lasciarti senza niente da fare, ecco due semplici e veloci operazioni che si possono provare sin da subito per aumentare la velocità di caricamento del tuo sito web.
Ottimizzare le immagini
TinyPNG utilizza tecniche intelligenti di compressione per ridurre la dimensione dei file PNG, APNG e JPG. La differenza di qualità rispetto all’originale sono impercettibili all’occhio umano! Riesce a comprimere anche gli APNG, ovvero Animated PNG (per intenderci una sorta di GIF in alta qualità).
Minificare il codice
Il codice presente sul tuo sito, se troppo grande, può rallentare la risposta del server. Minificare il codice HTML, CSS e JavaScript significa eliminare le ripetizioni di codice e gli spazi vuoti o troncati. Per minificare possiamo utilizzare degli strumenti online.
Esempio:
Con questa piccola accortezza potrai salvare centinaia di Kilobyte nel tuo codice, cosa che aiuterà ulteriormente l’uso di Gzip comprimendo ulteriormente il codice che verrà scaricato dal tuo sito web.
Minifica HTML
http://www.willpeavy.com/minifier/
Minifica CSS
Minifica JS
Questi sono strumenti online che possono aiutarti velocemente per comprimere piccoli progetti ma il consiglio che ti voglio dare e che andremo ad approfondire in un futuro articolo è: includi la minificazione del tuo codice nel tuo workflow.
Infatti non esistono soltanto degli strumenti online, come quelli che ti ho appena indicato, ma anzi io ti consiglio di avvicinarti a strumenti come Gulp, Grunt o anche Webpack che ti aiutano a impostare un processo di lavoro all’interno del quale includere la minificazione del proprio codice e molte altre interessanti caratteristiche.
Se ti senti confuso non ti preoccupare, torneremo a breve a trattare questo interessante argomento.
Conclusioni
E per concludere: potremmo far altro per migliorare le prestazioni dei propri siti?
Assolutamente sì.
Quanto esposto è solo la punta dell’iceberg, per poter mostrare le diverse altre soluzioni occorrerebbe una vera e propria guida da aggiornare man mano che usciranno delle novità e dato che questo è un bel lavoro voglio sapere da te se sei interessato ad approfondire questo argomento.
Se questo articolo ottiene almeno 10 commenti che richiedono un approfondimento sarò più che contento di aprire una serie qua su SkillsAndMore dove andremo ad approfondire assieme tutti gli aspetti dell’ottimizzazione di un sito web, compresi quelli realizzati con WordPress!
Ciao, bella guida, ottimi consigli. Per chi ha wordpress che consigli daresti per rendere il sito più veloce? Quali sono i principali plug-in?
Ciao Sandro,
grazie mille per i complimenti e rispondendo alla tua domanda torneremo a trattare questo argomento specificatamente per WordPress ma diciamo che (a parte usare temi e plugin scritti bene) le cose che possiamo fare grazie a dei plugin sono le seguenti:
minificazione
concatenazione
cache
Ripeto, molto dipende dalla qualità del tema e dei plugin utilizzati perché in certi casi basta iniziare a fare quache operazione di ottimizzazione per trovarsi il sito che non si comporta come dovrebbe.
Fatte queste promesse, su questo sito utilizziamo molto volentieri Autoptimize che gestisce bene la minificazione, concatenazione e la cache del browser. Per quanto riguarda invece la cache lato server, per il momento noi stiamo utilizzando la cache di SiteGround che non richiede personalizzazioni ma esistono molti plugin validi che ti permetteranno di configurarla ma dato che si parla di server, dovrai essere sicuro che il tuo server abbia tutti i software installati e dovrai configurare per bene questi plugin.
Come primo approccio ti consiglio semplicemente di installare Autoptimize e iniziare a fare i primi test con gli strumenti che ha consigliato Renato, successivamente torneremo a spiegarti anche come fare altre ottimizzazioni.
Grazie per leggere i nostri articoli e a presto,
Andrea
Questo è davvero un bell’articolo e davvero utile. Ma ho una domanda oggi quasi il 60% dei siti Web su Internet utilizza WordPress.
E per WordPress, vorrei chiedere a entrambi
W3 Total Cache e Autoptimize
Quale, preferisci personalmente. il plugin da usare?
Se la scelta è limitata a questi due e non hai un accesso diretto al tuo server il mio consiglio ricade su Autoptimize, semplice da utilizzare e senza troppi fronzoli. In alternativa la mia opzione migliore sarebbe Hummingbird che è forse anche più semplice di Autoptimize ?
Confesso di essere di parte dato che in questi ultimi mesi sto lavorando come sviluppatore frontend proprio per la stessa azienda che lo sviluppa (anche se su un progetto differente) ma proprio perchè lavoro al suo interno riesco a toccare con mano la qualità dei loro plugin e servizi e lasciami dire che si impegnano moltissimo per fare felici i propri clienti. Tra l’altro la versione di Hummingbird che ti ho collegato è gratuita quindi puoi provarlo senza la necessità di pagare niente e iniziare a scoprire i servizi e gli altri plugin offerti da WPMU DEV ?
Ciao, personalmente ottimizzo attraverso il plugin di siteground (SG Optimizer).
Per utlizzare il plugin è necessario ospitare il sito su un host SiteGround.
Per maggiori info contattami pure, mi trovi anche su fb (Renato Giordanelli)