Miglioramento Performance Sito Web

Il tuo sito web è lento e non sai cosa fare per poter dargli un’accelerata. Hai sentito qui e là i pareri di qualche esperto e c’è chi ti dice che c’è da rifare tutto o che bisogna migrare tutto verso un’altro hosting (magari di sua proprietà o con la quale è affiliato)?. Tutto questo magari senza aver fatto uno straccio di analisi a posteriori. Non sei solo. Anzi, capita più spesso di quello che si possa immaginare.

Lascia che ti spieghi come funziona qui in Web Tea e perché è importante che il tuo sito sia veloce e performante.

L’importanza della velocità

Se stai leggendo queste righe, probabilmente qualche domanda te la sei fatta. I tuoi clienti per primi, molto probabilmente, si sono lamentati della lentezza del tuo sito web e che compiere anche le azioni più semplici è quasi impossibile, soprattutto da mobile.

Non è una novità che uno dei principali punti critici della navigazione di un sito web sia racchiuso nei primi secondi. Funziona un po’ come per le persone, bastano pochi secondi per farti un idea.

Fonte: ThinkWithGoogle

Maggiore è il tempo di attesa, maggiore è la percentuale di utenti che getta la spugna e torna da dove è venuto piuttosto che continuare una navigazione che in alcuni casi non è nemmeno cominciata.

Dove vanno questi utenti? Probabilmente dal competitor. Non vuoi questo, giusto? La cosa che potrebbe farti tirare un mezzo sospiro di sollievo è che anche il competitor potrebbe essere nella stessa situazione.

I dati parlano chiaro, il tempo ideale di caricamento di una pagina web dovrebbe essere sotto i 3 secondi, ma la media globale è di 8.875 secondi da desktop e 23.608 da mobile. In moltissimi business, soprattutto quelli B2C, il mobile è il dispositivo di riferimento, eppure il tempo di caricamento medio è di circa 7 volte più lungo.

Come mai? Le motivazioni possono essere tantissime, ma solitamente quelle con la quale abbiamo quasi sempre a che fare sono:

  • Chi gestisce il sito non è mai stato formato adeguatamente nell’ottimizzazione dei file multimediali. Le immagini giocano sempre un ruolo cruciale.
  • Chi ha sviluppato il sito, per ragioni tutte sue, non ha ragionato con le performance in mente e ha fornito al cliente un sito web con un codice poco pulito, ricco di dipendenze di terze parti.

La prima si può risolvere con un bel lavoro di ottimizzazione dei materiali multimediali e una formazione adeguata del personale incaricato. La seconda invece è decisamente più complicata.

Per poter scoprire cosa c’è da fare e non disperdere tempo e risorse in Web Tea partiamo sempre da un’audit.

Audit del sito web

In fase di audit il sito web verrà esaminato da cima a fondo. Verrà quindi scansionato con una serie di tool, ma per quanto amiamo gli automatismi le pagine critiche per il percorso di conversione dell’utente verranno anche scansionate manualmente per individuare ciò che magari un tool automatico potrebbe non rilevare.

Al termine dell’audit ci saremo fatti un’idea di quelle che sono le criticità. Tutti i test, i rilevamenti, le ipotesi e le priorità d’intervento verranno raccolte in un documento, il quale verrà ampiamente discusso per poter rispondere a tutti quelli che potrebbero essere i dubbi che ti potrebbero venire.

L’audit, per quanto sia un documento operativo, è un documento che rimane a te. Se ci saranno dei lavori da svolgere, documento alla mano, noi sapremo formularti un’offerta specifica per intervenire. Se l’offerta non dovesse farti impazzire, sei liberissimo di rivolgerti a qualcun altro, audit alla mano, e farti fare un’offerta mirata su interventi specifici e non un generalissimo ¯\_(ツ)_/¯.

Pianificazione degli interventi

L’offerta che ti abbiamo fatto dopo l’audit ti è piaciuta e hai deciso di lavorare con noi. Molto bene. Come si procede da qui in poi? Nell’analisi che abbiamo condotto sono riportate tutte le criticità (non le principali, tutte), ordinate per priorità d’intervento. Quella sarà la nostra scaletta di lavoro.

I vari punti verranno quindi accuratamente pianificati per poter compiere le varie operazioni, a volte anche abbastanza invasive, senza però inficiare sull’operatività del sito web.

Capita però che un periodo offline potrebbe essere obbligatorio, ma sarai preventivamente avvisato e potremo pianificare con cura.

Fermo restando che ogni sito è a sé, ci sono degli interventi che solitamente non mancano mai.

Ottimizzazione delle immagini

Come già anticipato, le immagini sono uno dei principali problemi legati alle performance. Troppo grandi, troppo pesanti, del formato sbagliato, perfette per desktop, ma pessime per mobile; queste sono solo alcune delle problematiche che potrebbero inficiare negativamente sull’esperienza utente e sulle performance del sito.

L’approccio qui varia di caso in caso, ma ci sono casi in cui abbiamo sostituito a mano tutte le immagini con delle versioni più leggere e ottimizzate. Casi in cui abbiamo lasciato questo compito a script automatici scritti di nostro pugno per potersi adattare il più possibile alle esigenze dei nostri clienti. Casi in cui l’operazione di ottimizzazione non era possibile e abbiamo dovuto optare per altre tecniche di caricamento in differita o attraverso sistemi di CDN.

Per farla breve e non perderci in ulteriori chiacchiere tecniche, in un modo o nell’altro, riusciamo a fare in modo che le immagini non siano più un problema di performance.

Ottimizzazione degli script

Non puoi immaginare quanti script ci siano una pagina web finché non lo vedi con i tuoi occhi, soprattutto in WordPress, di script ce ne sono a badilate. Il nostro compito in questo caso è quello di, dove possibile, ottimizzare questi script, rimuovendo il superfluo, aggiornando quanto c’è di deprecato, unificando ciò che c’è da unificare e richiedere il caricamento in differita quando necessario.

In questo modo gli script daranno un pochino meno fastidio in fase di caricamento. Non sempre questa operazione è fattibile, dipende da quante dipendenze ha il tuo sito e da come è stato scritto il codice sorgente. Ci sono casi in cui siamo riusciti con successo a ottimizzare tutti gli script, altri invece dove, purtroppo, quest’operazione è stata minima e di scarsissimo impatto.

Riduzione delle chiamate client e server

Il client (il tuo PC) e il server (un computer da qualche parte del mondo) si scambiano continuamente risorse. Ogni volta che vuoi vedere una pagina web, la pagina stessa, le immagini, i video, gli script e gli stili sono tutti elementi che fanno parte di questo interscambio di risorse.

Troppe richieste, o chiamate che dir si voglia, non è sempre una buona cosa. L’ideale sarebbe rimanere intorno alle 60 chiamate, ma in alcuni casi è assai improbabile se non addirittura impossibile. Come avrai già immaginato, come abbiamo già detto per le ottimizzazioni precedenti, tutto dipende da come sono stati fatti i lavori prima del nostro intervento.

Nell’audit, quando possibile, cercheremo di fare una stima dell’impatto dell’ottimizzazione. Ci sono casi dove siamo riusciti a raggiungere il grado di ottimizzazione stimato, mentre in altri casi, alcune metriche sono purtroppo cambiate di poco o addirittura rimaste invariate per via del modo in cui tema o plugin sono stati implementati.

Riduzione del tempo di caricamento

Questo è ciò che viene percepito maggiormente, il tempo di caricamento. All’inizio parlavamo che il tempo entro il quale una pagina web dovrebbe caricarsi è di circa 3 secondi o meno. Questo è il nostro obiettivo, che nella maggior parte dei casi centriamo in pieno.

Le operazioni che andiamo a svolgere puntano proprio a questo, a ridurre il tempo di caricamento, conseguenza di un’ottimizzazione degli script, delle immagini della pulizia del codice e di tanti altri fattori.

Nei nostri interventi abbiamo registrato variazioni significative che hanno portato il sito web a caricare in 2.5 secondi al posto di 12. Un vero successo.

Le riduzioni e i miglioramenti saranno tangibili non solo durante la dimostrazione “live”, ma anche grazie alla comparazione dei dati che acquisiremo con i vari tool in uso.

Core Web Vitals

Oltre a rientrare nei fattori di posizionamento (SEO) i core web vitals misurano la User Experience di un sito web. Nello specifico:

  • Largest Contentful Paint (LCP): misura le performance di caricamento
  • First Input Delay (FID): misura il tempo di interazione di una pagina web
  • Cumulative Layout Shift (CLS): misura lo spostamento inatteso degli elementi in pagina

Quest’ultimo non è mai molto chiaro, e te lo spiegheremo così:

Hai presente quando stai leggendo un articolo su un sito web e di punto in bianco, qualcosa si carica in ritardo (ad esempio un banner pubblicitario) e sposta il contenuto del sito web verso il basso, facendoti perdere il segno? Ecco, quella rottura di scatole viene misurata dal CLS, il cui valore ci fa intendere il grado di fastidiosità.

Queste metriche verranno misurate durante l’audit per poter capire lo stato e verranno portate entro i limiti di accettazione con interventi specifici.

Plugin e Temi WordPress

Nei paragrafi precedenti più e più volte abbiamo citato le dipendenze dei siti web. Cosa si intende però potrebbe non essere ancora del tutto chiaro. Per questo abbiamo previsto quest’ultimo paragrafo.

Quando ti fai fare un sito web in WordPress (a proposito, li facciamo anche noi) il tema potrebbe essere sviluppato da zero, solo per te, oppure potrebbe basarsi su qualcosa di già esistente e che viene personalizzato secondo le tue esigenze.

La differenza abissale tra le due modalità è che la prima soluzione ti da il controllo praticamente assoluto di tutto, mentre nel secondo caso ci potrebbero essere delle limitazioni abbastanza importanti.

In primis, il codice sorgente se si tratta di una personalizzazione, tendenzialmente è scritto da altri e quindi, senza apposite documentazioni è assai difficile fare delle personalizzazioni particolari o che possano soddisfare a pieno le tue aspettative. Seconda cosa, se le personalizzazioni vengono fatte in modo errato il rischio è che il progetto, nel medio-lungo, periodo diventi insostenibile a livello di manutenzione.

Purtroppo questa situazione è molto frequente e ci sono casi in cui il lavoro precedente è stato fatto talmente male da risultare impossibile da sistemare e ci si potrebbe ritrovare a dover buttare quanto sviluppato sino a quel momento. Davvero spiacevole.

In Web Tea cerchiamo sempre di evitare l’abbattimento, a meno che non sia strettamente necessario e inevitabile.

Questo discorso si applica non solo ai temi WordPress, ma anche ai plugin. Con quest’ultimi il problema diventa ancora più grosso dal momento che è super sconsigliato mettere mano ai plugin (rispetto ai temi che si possono personalizzare seguendo le opportune best practice). Quindi niente personalizzazioni, a meno che non sia previsto dalla documentazione del plugin stesso. Infine, il numero di plugin fa davvero la differenza. Più sono i plugin usati, più la vita del progetto è breve. Ci sono capitati casi in cui di plugin ve ne fossero addirittura un centinaio. Inaccettabile. Se ti trovi in una situazione del genere, probabilmente WordPress non fa al caso tuo.

In questo casi comunque provvediamo a fornire una soluzione. In fase di audit facciamo un censimento dei plugin e in base a ciò che vediamo, analizzando il sito, li etichettiamo come:

  • Cancellabile: il plugin non serve a niente, può essere quindi eliminato.
  • Sostituibile: le funzionalità del plugin sono già incluse in un’altro plugin già installato o in una soluzione più popolare e aggiornata. Possiamo quindi procedere con l’eliminazione e la sostituzione.
  • Integrabile: non serve un plugin per fare quello che il plugin dice di fare, lo andiamo quindi ad integrare con soluzioni di prima parte (sviluppate da noi)
  • Da tenere: il plugin è indispensabile per il corretto funzionamento del sito web o c’è una dipendenza particolarmente elevata. Lo teniamo.

Discuteremo di questo censimento e decideremo il da farsi prima di procedere con l’offerta, così che poi, nella nostra scaletta delle priorità, sappiamo già come intervenire.

Se il tuo sito è lento, ingestibile e presumi di perdere un sacco di opportunità dovute alle performance veramente molto scarse, fatti contattare, magari davanti ad un bel tè troveremo la soluzione che fa per te.

Ci prendiamo un tè?