Ciao a tutti e benvenuti a questo workshop.

Siamo live.

Mi dicono che siamo live e aspettiamo qualche minuto che si colleghino altre persone.

Ciao, Francesca.

Ciao, Ragusa Legal Tech.

Ciao, Emanuele.

Ciao, Giulio.

Ciao Laura.

Piacere di rivederti qua.

Insomma, dai, vedo che già si sta collegando un bel po' di gente.

E da dove da dove scrivete se intanto vogliamo interagire un po' da dove da dove vi collegate voi? Ok, io direi che possiamo iniziare.

Se la regia mi supporta, iniziamo condividendo già le slide.

Così intraprendiamo questo viaggio nell'ottimizzazione delle performance di un sito web e che appunto il l'argomento principale di questo workshop di questa di questa sera parleremo di come misurare come ottimizzare le performance di un sito web e perché le per prestazioni sono così importanti.

Prima di iniziare, faccio una panoramica su di me.

Io sono Andrea Sacca, sono il fondatore di buste hosting un'azienda di hosting ad alte prestazioni per piattaforme e-commerce e piattaforme open-source, tra cui Magento principalmente presto shop, V commerce, quindi WordPress e chop é Tutto nasce dalla mia esperienza nel ramo e-commerce, principalmente nello sviluppo di piattaforme e-commerce con l'argento è diciamo nel settore ho lavorato tantissimo nel settore magento anche fondato il blog ma sentiamo punto it dove per anni, insomma mi sono dedicato e mi dedico tuttora la formazione di per questa piattaforma e l'hosting è nato come estensione naturale dei servizi che offriva.

Essendo uno sviluppatore mi sono sempre appassionato del discorso delle prestazioni e della velocità e da qui un po', il core business di questa azienda e del di quello di cui parleremo stasera.

Quindi le prestazioni di un sito web cosa vedremo in questa oretta, oretta e mezzo? Vedremo che cosa sono le prestazioni, quindi che cos'è la velocità e che cosa sono le prestazioni perché le prestazioni sono importanti per un sito web.

Vedremo poi come misurare le prestazioni con i vari tool che ci offre il mercato.

Faremo un'analisi una distinzione tra quelli che sono i live data verso i field per poi passare agli ingredienti della ricetta perfetta per un sito veloce, ma infine vedremo come creare un piano di ottimizzazione delle performance che molto spesso viene sottovalutato e concluderemo dopo.

Diciamo le domande che che che mi farete eh vedremo live come ottimizzare le prestazioni, come analizzare i siti web attraverso degli strumenti? Lo strumento principale google Pittsfield e il tool integrato all'interno del browser Google Chrome.

Quindi sarà un bel bel workshop.

Spero è quindi iniziamo, iniziamo, aspettiamo un attimo qua.

Vedo che c' è un problema sul caricamento.

Vedo che si sta scaricando la no, non è vero, la tranquillizzo, la la regia.

Questo non era previsto, è pensare a uno scherzo.

Effettivamente questo piccolo momento, soprattutto per la regia e anche forse per voi è stato un po' imbarazzante, un po' stressante.

E vi siete mai chiesti quanto è stressante per un utente aspettare che si carichi un sito web, soprattutto da mobile? Ma se non ve lo siete mai chiesto per voi, per noi insomma, l'ha fatto Ericsson Consumer Lab in uno studio addirittura nel duemila quindici, dove è emerso che i livelli di stress causati da un ritardo di caricamento nel mobile dei dispositivi mobile era equiparabile allo stress causato dal guardare un film horror.

Pensate e questo ci fa capire che è super importante dover ottimizzare un sito web non tanto per le metriche, per i punteggi per le mani di Matrix, bensì per gli utenti.

Il settanta tre percento dei consumatori sono ormai mobile first e questo è un dato veramente veramente importante.

Ed è da capire quindi che la maggior parte delle visite delle ricerche, delle navigazioni, degli acquisti online vengono fatti da dispositivi mobili.

Quindi é super importante dare credito, dare retta ai propri utenti e ottimizzare principalmente per loro le prestazioni del proprio sito web.

Ma cosa sono le prestazioni? Ma non so se avete visto la serie che C' è su Netflix è che parla della di Spotify che si chiama The Playlist e quindi è venuto in mente un momento, insomma, della serie molto carino che ho pensato di collegare qua su questa presentazione in cui il sì il founder di Spotify diciamo parla con gli sviluppatori e vuole pretende a tutti i costi che il tempo di caricamento di una canzone o del download di una canzone sia sotto zero punto due secondi.

Quindi è due decimi di secondo.

Quindi perché? Perché secondo tutta una serie di studi che aveva trovato, il cervello umano concepiva come lento tutto quello che era superiore a zero punto due secondi.

E qui, ripeto, è sempre importante mettere l'utente al centro.

Quindi capiamo che il problema principale delle prestazioni alla velocità, però la velocità, come invece poteva essere in passato, ma una sola metrica ad oggi non è misurabile.

Non è un solo un singolo momento misurabile nel tempo, bensì un'esperienza che non può essere misurata da una singola metrica.

In passato le metriche, soprattutto quando insomma è nato internet e i tempi di caricamento anche dovuti alla banda, erano molto lenti.

Si misurava il tempo di connessione di caricamento in base al tempo di risposta del server e dalla connessione, quindi la metrica principalmente era era una o due.

Ad oggi le metriche sono veramente tante e da qui introduco quello che è un po', il core l'argomento principale di questo workshop.

Il perché le prestazioni sono importanti, bisogna sempre farsi domande e capire il perché delle cose.

E io oggi voglio spiegarvi perché le prestazioni sono così importanti.

Tra i sei motivi che ho raccolto ci sono la user experience, il bounce rate, la CEO, quindi l'ottimizzazione per i motori di ricerca, le performance delle delle asl delle pubblicità, il tasso di conversione conversion rate e la sostenibilità è Partiamo dalla user experience l'aiuterà experience.

Quindi l'esperienza dell'utente è importantissima l'ho detto all'inizio.

Continuerò a ripeterlo durante tutto il workshop.

È quello che noi dobbiamo tenere conto è l' ottimizzazione per i nostri utenti.

Cioè noi dobbiamo mettere al centro di ogni strategia di marketing, di sviluppo di qualsiasi altra cosa i nostri utenti al centro.

Ok, quindi dobbiamo fare delle ottimizzazioni anche delle prestazioni utente eccentriche se mi passate il termine.

Okay, Perché? Perché effettivamente l'utente nel momento in cui apre un sito web da mobile home si trova davanti ad uno scenario come questo che vedete in questa slide e che praticamente parte dal momento in cui apre il sito web, apre il sito web.

Che cosa succede? Viene caricato il primo contenuto che Google con le sue metriche chiama il slight, quindi il primo byte caricato all'interno della pagina.

Passando al secondo momento nel tempo di caricamento viene disegnato qualcosa sul sito, quindi il spent viene disegnato qualcosa e se quel qualcosa non viene disegnato entro pochissimi millisecondi già lì si abbassano le metriche che vedremo tra poco e le spiegherò, ve le spiegherò poi nel dettaglio così a seguire cosa succede, Quindi bisogna rispondere a queste domande Sta succedendo qualcosa nel momento in cui apro un sito web e questo possiamo misurare con due o tre metri che successivamente, nel momento in cui si è caricato qualcosa è utile quello che si è caricato da qui altre tre metri, che quindi il contenuto più grande caricato.

Se l'utente clicca sul contenuto e si è caricato, succede qualcosa, quindi è è è utilizzabile.

É successo successivamente l'utente può interagire e può navigare correttamente.

Quindi dal momento in cui apre il sito all'interazione finale, il cambio di pagina si è caricato tutto bene.

Quanto tempo ci è voluto per caricare tutto questo? Quindi questo deve soddisfare le esigenze del cliente, altrimenti si creano tutti i problemi che vedremo a seguire, quindi il tasso, il rimbalzo, la mercati, conversioni, eccetera eccetera.

Ho parlato di metriche.

Le metriche cosa sono? Sono degli strumenti, diciamo per misurare appunto questi lassi di tempo che intercorrono dal caricamento del primo byte all'intera attività dell'utente le metriche inizialmente, come mi dicevano una due negli anni sono aumentate tantissimo se voi cercate all'interno su Google.

Insomma gli articoli relativi alle metriche, principalmente relative ai corvi Beatles, argomento di cui vi parlerò.

Ovviamente all'interno di questo workshop si parla solo ed esclusivamente di tre metri che quando invece le metriche utilizzate per ricordo i Beatles sono già sei e altre metriche.

Insomma, sono sono molte di più, però di base, e queste sono quelle che noi dobbiamo che voi dovete un po'.

Tutti noi dobbiamo tenere in considerazione per ottimizzare le performance del proprio sito web a partire insomma, dal a finire al Time Life Bright.

Vediamole nel dettaglio una ad una Ho l'aria scontenta full payn che tradotto in italiano significa il contenuto visivo più grande, quindi large, il più grande, ma il contenuto più grande pitturato, diciamo dipinto stampato sulla pagina come lo vogliamo chiamare, indica appunto il tempo di caricamento che intercorre dal momento.

Nel momento in cui, diciamo, nel momento in cui l'utente richiede una pagina, apre un sito web e si apre il primo contenuto.

Quindi, affinché questa metrica sia considerata buona per Google, il tempo di caricamento deve essere veramente, veramente basso sotto i due punto cinque secondi.

Se già quel caricare la prima immagine, in questo caso il sito di Instagram, se questa si caricasse già dai due punto cinque secondi ai quattro secondi, gia' avrebbe bisogno di miglioramenti.

Se invece il tempo di caricamento di questo contenuto, quindi il contenuto più grande deve essere caricato, si carica oltre i quattro secondi, viene considerato come il povero.

Diciamo che ha bisogno di ottimizzazione.

Questa è una delle sei metri che bisogna tenere in considerazione e che poi vedremo come andarla ad identificare, perché possiamo dare per scontato che sia l'immagine, ma potrebbe essere un video, potrebbe essere la barra di ricerca.

Vediamo poi come scovarla all'interno della pagina e bisogna identificarla e ottimizzare la perché? Perché oltre a questa bisogna andare a ottimizzare tutte le altre.

Quindi avere questa perfetta e le altre non perfette non significa avere è un sito veloce, quindi dobbiamo andare ad ottimizzare tutte le singole metriche una per una e passiamo alla seconda metrica da tenere in considerazione.

Ma il ftse che significa first input di lei? Questa metrica che cosa indica? Indica principalmente il tempo in cui viene effettuato il primo input.

Ok da parte dell'utente, ovvero nel momento in cui si è caricato qualcosa all'interno della pagina.

Quanto tempo ci vuole affinché l'utente possa interagire sulla pagina stessa? Perché io potrei avere una situazione molto veloce in cui si carica il primo contenuto l'immagine il logo, però poi non si carica, ad esempio il javascript che comanda il menu a discesa e a quel punto lì bisogna aspettare che si carica che si carichi quel Java script e finché quello non viene caricato Google attraverso cromo attraverso i dati di navigazione reali si rende conto che ci vuol ci vogliono x secondi per poterlo caricare e quindi mette una metrica anche su quello.

Questo, ehm questo questa metrica ha un valore molto, molto più ristretto.

Quindi, affinché la pagina diventi interattiva per essere considerato buono deve essere sotto i cento millisecondi e sopra questo già va ottimizzato.

Ok, quindi bisogna tenere in considerazione anche l'ottimizzazione già scritta affinché gli utenti, insomma, siano soddisfatti.

Scusate, sono andato troppo troppo veloce.

È Mme.

Ok, eravamo qua.

Ok, andiamo avanti.

È qui altra metrica da tenere in considerazione il fax content volpe hint, ovvero il primo contenuto visivo che viene caricato che, a differenza del large discontent volpe int largest indica CP indica il contenuto più più grande, più largo cp indica il con il primo contenuto.

Quindi ci sono due metri che diverse più o meno.

Non dico per la stessa cosa, però che indicano due cose diverse.

Quindi dobbiamo assicurarci che il primo contenuto visivo che sia caricato, sia caricato velocemente e assicurarci che poi il contenuto più grande che viene caricato sulla pagina, anche esso sia caricato molto velocemente.

Altra metrica molto importante che in realtà in via sperimentale e che da quanto ho letto negli ultimi comunicati, verrà rilasciata poi ufficialmente prossimamente nei prossimi mesi e questa è la MP, quindi l'inter action jack spent questa metrica in misura anch'essa l'interattività della pagina su questa immagine che potete vedere qui a destra.

Vi spiego meglio visivamente cosa significa significa che nel momento in cui la pagina viene caricata, in questo caso possiamo vedere qui al centro l'immagine di una potenziale scheda prodotto quanto impiega l'utente a visualizzare il contenuto successivo dopo che ha fatto click su un elemento.

Ok, quindi non si parla piu' solo di tempo di caricamento del sito web degli elementi, ma viviamo in un'epoca in cui la tecnologia misura anche quello che succede dopo.

Non dico che fa una previsione, ma quasi.

Perché? Perché secondo l'esperienza degli utenti che hanno già visitato la pagina secondo delle simulazioni di laboratorio è il motore di ricerca.

Il tool riesce a capire se cliccando su quel pulsante l'utente visualizza immediatamente dopo il contenuto o se ci vuole troppo tempo e anche qui l'interattività deve essere molto molto veloce e vediamo che per essere buono dev'essere sotto i duecento millisecondi.

Ok, passiamo all'ultima metrica che il TTF B, ovvero il Times of byte.

Questa forse è la metrica più antica, la prima che misura il tempo necessario ad un server per rispondere alla tua richiesta.

Quindi questo che significa? Che deve essere molto veloce il tuo server a rispondere all'apertura di una pagina internet funziona in questo modo.

Ci sono dei file allocati all'interno dei computer chiamati server che praticamente in altre parole sarebbe l'hosting.

E nel momento in cui noi con il nostro telefono con il nostro computer effettuiamo una richiesta, apriamo una pagina, inviamo una richiesta a quel server e quel server poi ci risponde.

Questa metrica misura quel tempo di risposta, quindi deve essere molto veloce e questo lo possiamo velocizzare, ovviamente avendo dei server veloci, una connettività di banda veloce, una CDN ed altre cose che vedremo a brevissimo.

Il secondo motivo per cui quindi, giusto per chiudere il discorso, è importantissimo avere un sito veloce principe per un motivo principale per gli utenti per soddisfare le esigenze dei nostri clienti.

Ok, passiamo al secondo motivo ehm che si collega ovviamente al primo è il down straight, il tasso di rimbalzo.

Secondo questa statistica di Google una ricerca di google duemila diciassette le probabilità che un utente abbandoni il sito dopo averlo visitato aumentano del trentadue percento quando il tempo di caricamento va da uno a tre secondi.

Ok, questo ovviamente indica che se l'utente insoddisfatto, poi che cosa succede? Abbandona il sito e da qui aumenta e ovviamente questa metrica chiamata bounds.

Questo peggiora addirittura e aumenta il centro trentadue percento quando un sito impiega più di dieci secondi nel caricarsi e voi mi direte ma ammazza tanto dieci secondi per per caricarsi per un sito web ed effettivamente lo è, ma tuttora esistono tanti siti che impiegano tanto tempo a caricarsi.

Quindi, parlando di e-commerce parlando di siti che vendono info prodotti o un sito anche di qualsiasi altra cosa, se carica lentamente, aumentate la frustrazione dell'utente e aumentate la possibilità di rimbalzo che l'utente.

Quindi arrivi sul sito e salti via e se ne vada e cerchi qualcos'altro.

Quindi questo si collega al primo punto ed è importante ridurre al massimo, anzi ridurre al minimo questa metrica.

Quindi il bus terzo motivo per cui le prestazioni sono importanti.

La servo quindi l'ottimizzazione per i motori di ricerca che è stato constatato secondo gli ultimi comunicati rilasciati insomma da Google.

E infatti poi del discorso dei colpi Weathers ne parlano tanto soprattutto Iseo e poco i tecnici.

La velocità è diventato un fattore di ranking per le ricerche da desktop e mobile.

È questo che cosa significa? Che un sito veloce garantisce al cento per cento posizionamento migliore? Lo garantisce? Lo garantisce se a parità di siti diciamo che hanno gli stessi contenuti, che se un sito è più veloce rispetto a un altro, Google dà priorità ai siti con un'esperienza di Naeem, una landing page experience, così la chiama Google.

Insomma, nelle sue guide maggiore.

Ok, quindi sì, se dobbiamo rispondere a questa domanda, è importante avere un sito veloce affinché migliori anche il posizionamento SEO.

Quindi nella strategia, nella strategia è importante tenere in considerazione anche questo.

Lo vediamo anche più tardi all'interno della search console, dove i corvi Sweets sono diventati insomma un fattore determinante.

Sono stati inseriti anche all'interno appunto, della Search console, questo strumento che offre Google per vedere tutta una serie di cose importanti per inviare la salma e per analizzare alcune informazioni importanti per la serie Ok, scusate, sono andato troppo troppo veloce in qui.

Approfondiamo un attimo.

Il discorso dei corvi web Beatles, corvo e Beatles è un concetto di cui insomma si parla già da un paio d'anni dal duemila venti e che secondo me ancora non ha avuto una rilevanza così importante di cui insomma mi piace parlare perché mi introduce poi all'argomento successivo, quello della differenza tra i dati di laboratorio, i dati sul campo, i corvi e i Beatles sono i segnali.

Tradotto in italiano è segnali web essenziali.

Sono delle metriche che ha creato Google per definire per creare uno standard qualitativo di navigazione sul web.

Questo perché sempre collegato a al punto principale, alla soddisfazione degli utenti.

Ok quindi affinché questi utenti siano sempre più soddisfatti, come facciamo a capire se lo sono o meno? Li dobbiamo misurare, lo misuriamo con delle metriche che sono quelle che abbiamo visto prima, che possono essere utilizzate.

Che Google utilizza sia per questi gol web, Beatles sia per Lighthouse, per altri strumenti, insomma che utilizza.

Quindi è importante avere un'esperienza di navigazione ottima per gli utenti, per tutti i motivi.

Insomma, che stiamo elencando? Come vi dicevo, vi anticipato prima vi ho spoilerato primo corner with als li possiamo vedere anche nella search console.

Poi più tardi lo vedremo anche live su uno dei miei siti e all'interno di questa pagina voi potete vedere qual è.

Si è effettivamente ehm quali sono i problemi sulle varie pagine e quali devono essere risolti e in piu' potete inviare ovviamente anche la convalida nel momento in cui avete fatto le varie lavorazioni e le ottimizzazioni di performance che anche questo vediamo veramente tra poco.

Altro motivo per cui le prestazioni sono importanti l'impatto sul budget pubblicitario.

Questo perché perché Google ha introdotto quello che chiama il quality Score? Ok, qua lo vedete all'interno della tabella di Google, il quale ti scorre praticamente è un punteggio ok che va da uno a dieci che praticamente indica l'esperienza qualitativa appunto delle tue campagne.

Questo come viene calcolato.

Il trentanove percento di questo quality score è relativo all'esperienza sulla pagina di atterraggio, quindi sulla landing page che può essere una scheda prodotto, una categoria qualsiasi altra cosa.

Ok, quindi è il ventidue percento del quale disco viene calcolato sulla rilevanza della pubblicità e l'altro trentanove percento viene calcolato su sul ctr che uno si aspetta però parliamo di quel trentanove percento relativo alle alla landing page experience, parte della landing page experience.

Quindi dell'esperienza sulla landing page.

Ovviamente è la velocità, quindi migliore è l'esperienza più alto il quale discorre meno caro sarà il traffico.

Questo ha un impatto veramente diretto sul tuo budget pubblicitario.

Quindi traduciamo.

In altre parole se sulla tua landing page è migliore è più veloce anche rispetto ad altri competitor ti aumenta il quality score, quindi a parità poi di budget pubblicitario paghi il tra potresti pagare il traffico meno rispetto anche ad altri competitor.

Quindi bisogna ottimizzare le performance anche per fare budget su sul budget pubblicitario e aumentare poi le conversioni.

Conversioni che poi uno degli ultimi punti per cui la velocità sono importanti e secondo sempre studi walt l'aumento la riduzione scusate anche di un decimo di secondo del caricamento di una pagina secondo proprio uno studio che è pubblico aumenta le pagine viste per sessione può aumentare le pagine viste per sessione del cinque virgola due per cento aumentare il tasso di conversione dell'otto punto quattro percento e aumentare anche l' ordine ilva il valore dell' ordine medio.

Quindi per fare un po' un recap dall'inizio di perché le prestazioni sono importanti.

Le prestazioni sono importanti per i nostri utenti.

Ok, perché i nostri utenti devono sentirsi comodi nel navigare un sito web si devono sentire sicuri e non devono abbandonare il sito web.

Questo che che cosa si traduce? Che se uno trova all'interno del sito web quello che vuole e inoltre anche il sito è veloce e gli da piacere è fluida la negazione.

Questo si traduce in piu' conversioni conversioni che impattano ovviamente direttamente sul tuo portfolio.

Se tu portfolio no sul tuo portafogli, scusatemi tutto portafogli se tu vendi online, ma di base tutti quelli che hanno un sito web, che sia e-commerce o non e-commerce hanno un sito per promuoversi per vendere dei servizi dei servizi online, quindi soddisfazione degli utenti al massimo maggiori conversioni.

Qui abbiamo sviluppato noi internamente un un impatto, un calcolatore di impatto che è fatto su queste analisi euristiche, quindi basate su degli studi che sono stati fatti principalmente da Google, da Deloitte ad altri è Mme é praticamente che cosa abbiamo fatto.

Abbiamo fatto un calcolo basato sul miglioramento di un secondo di miglioramento che può aumentare secondo questi studi dell'otto percento.

Le conversioni, quindi in base al tempo di allo speed speed index del sito attuale, le visite mensili, loro il valore dell' ordine medio e il tasso di conversione.

Noi sappiamo più o meno quanto fatturato generi durante l'anno e andando a proporti un miglioramento di ottimizzazione, ovviamente di velocità.

Possiamo dirti che ottimizzando queste metriche, migliorando la velocità e tutte le prestazioni del sito, potresti fatturare x in più e questo lo calcoliamo attraverso questo roy impact calculator che poi se siete interessati insomma, potete scrivermi e lo valutiamo anche insieme.

Quindi in casi di commercio grandi anche l'aumento di uno due secondi di tempi di caricamento può aumentare veramente tanto l'impatto sul sul fatturato perché effettivamente moltissimi commerci stanno lasciando sul piatto tantissimi soldi.

Perché? Perché aumenta il tasso rimbalzo, diminuisce il tasso di conversione, gli utenti non sono soddisfatti e quindi vanno potenzialmente da competitor.

Ultimo punto per cui le prestazioni sono importanti su cui mi piace moltissimo soffermarmi sempre è il discorso della sostenibilità secondo uno studio fatto da Sustainable web manifesto se Internet inquina tantissimo, per chi non lo sapesse, Internet inquina non inquina solo gli allevamenti intensivi, lo smog, eccetera, le batterie, eccetera eccetera.

Internet è una delle cose che inquina di più al mondo.

Secondo questo studio, se Internet fosse una nazione si posizione rebbe al settimo posto tra le più inquinanti.

In pratica Internet inquina quanto tutto il Regno Unito messo insieme.

Ok, come fa ad inquinare? Vi chiederete inquina.

Perché? Perché di base noi per navigare i social media che mandare i siti web acquistare online, abbiamo bisogno di server l'ho.

Detto prima il server che cos'è è un computer, ma più o meno come quello che utilizzate voi adesso per vedere questo webinar anche noi stiamo consumando.

Se i server di di questo software di streaming Jared non è su una Austin Green, quindi inquina.

Perché? Perché per mandare i server per mandare tutte queste informazioni bisogna dare energia ai computer allocati all'interno dei data center.

Ok, quindi i server hanno bisogno di energia.

Questa energia come viene prodotta? Viene prodotta con i soliti sistemi fossili, però da anni.

Insomma, si utilizza l'energia green, quindi l'energia rinnovabile per creare per inviare energia per alimentare questi server.

Inoltre c' è da dire anche che anche il problema del raffreddamento crea consumo di energia eccessivo.

Ok, infatti leggevo da qualche parte che molte delle big company hanno addirittura i server tipo in Islanda o comunque nei paesi molto al Polo Nord, dove fa molto freddo.

Perché? Perché in questo modo si riduce tantissimo il costo di raffreddamento.

Quindi Internet inquina perché serve tanta energia per mandare, per far girare tutte queste informazioni.

Che cosa possiamo fare noi e come è collegata a questa cosa al discorso della velocità è collegata.

Perché? Perché più un seder veloce meno pesa una pagina web, ok? E é diretto e l'impatto sulla velo sulla sostenibilità perché meno dati ho bisogno da scaricare dal server.

Ok, quindi più il sito è sostenibile, più veloce.

Un utente nel trovare le proprie informazioni all'interno di un sito più il sito è sostenibile.

Quindi è nato anche un manifesto chiamato Sustainable Web manifesto che si lega poi ha dei principi del Sustainable Web design che si, se vi interessa l'argomento poi anche qui scrivetemi perché mi piace moltissimo parlare di questo argomento che si basano poi su questi quattro principi di base per avere un sito web sostenibile.

Se ci tenete insomma, a questo argomento bisogna avere un sito veloce.

Ok, perché? Perché vi ripeto, scaricate meno dati più velocemente e quindi consumate meno banda, meno traffico, meno impatto sul server.

Ok, consideriamo che siamo miliardi e ogni giorno ogni minuto consumiamo veramente tanto materiale online.

Quindi anche il minimo miglioramento può avere un grande impatto secondo il content inability.

Quello che vi dicevo prima, più un utente trova velocemente quello di cui ha bisogno, meno tempo sarà sul sito.

Okay, quindi se ci devo stare dieci secondi per aprire l'homepage e poi altri dieci per comprare per finalizzare l'acquisto impiego tanto tempo, quindi dobbiamo ottimizzare lo anche per questo motivo.

Terzo motivo l'usabilità che si collega molto al primo.

Quindi io devo essere comodo nel navigare.

Il sito web e ultimo ultimo principio del sistema web design e del manifesto è appunto utilizzare hosting green, quindi hosting che appoggiato su dei data center che utilizzano il cento per cento di energia rinnovabile.

Io con la mia azienda mi sono impegnato affinché tutti i server che utilizziamo siano green, ma inoltre, come potete fare per sapere se il vostro sito è green o meno, potete andare su The Green Web Foundation.

Eccolo qua.

Il sito é qui.

Questa è una directory dove sono, dove voi potrete mettere il vostro sito web e vi dice se il vostro sito è ospitato su un data center green o meno.

Ok, abbiamo finito il discorso di perché le prestazioni sono importanti e adesso andiamo a vedere adesso che abbiamo la consapevolezza, la consapevolezza che ovviamente, al primo posto di qualsiasi cosa della della conoscenza andiamo a vedere come misurare le prestazioni.

Ok, quindi sappiamo adesso che cos'è la velocità.

Sappiamo perché è importante.

Andiamo a vedere come misurarla.

La possiamo misurare attraverso una serie di tool, ok principalmente Google Page Speed Insight.

Poi ci sono anche altri tool come Kingdom GT, Matrix, webpage test, eccetera.

Avevo fatto un sondaggio su LinkedIn l'anno scorso.

Il tool insomma, che che ha vinto o che probabilmente conoscevano di più gli utenti che ho intervistato.

Intervistato che hanno partecipato al sondaggio è risultato GT Metrics, anche se io ovviamente preferisco sempre i tool di Google, però insomma ci sono tanti altri tool che possiamo utilizzare.

Facciamo una panoramica veloce su questi tool.

Find them è un tool abbastanza basico, vi dà delle informazioni di base sul peso della pagina, vi dà uno scorcio da un punteggio, da un accento, é gia' qua vi dà un'indicazione se il vostro sito web veloce o meno, vi fa testare la velocità da un punto specifico del mondo.

Quindi ho dalla Germania, in Europa o da altri posti.

Insomma, in giro per il mondo un altro tool è quello, poi è stato più votato in assoluto.

E gt matrix questo è molto interessante perché ti dà un parametro che nomina con una lettera a, b, c, d e f.

Quindi ha il tuo sito è veramente performante.

F è veramente poco performante.

In questo caso questo è un sito di insomma di un di un cliente che che seguo e sfuggiti matrix da un rating bbb le performance da ottanta tre percento la struttura al novantaquattro e ci indica anche qua il web Beatles quindi ci indica le tre metri che principali quindi il t, il tbt e il comune di chief, anche se insomma vanno aggiornate perché come vi dicevo sono aumentate adesso sono sei le metriche, ma vi da' comunque una panoramica carina interessante e molti utilizzano questi perché non si fidano di google, ma anche io io mi fido principalmente poi del tour di google che è quello che poi utilizzeremo a breve per analizzare un paio di city life che è questo Google Page Speed Insight, questo tool per chi già lo conosce se utilizzate io utilizzo.

Spesso mi sveglio la mattina, prendo il caffè e apro Google Page Speed Insight.

Perché? Perché ogni ogni tot cambia viene aggiornato, vengono integrate delle metriche nuove fanno degli aggiornamenti, adesso hanno integrato tutte le metriche di Lighthouse, adesso hanno integrato pure i colpi.

Sweets quindi è veramente un tool interessante c'è una base di partenza ottima per una base di partenza ottima per analizzare insomma la situazione attuale.

Situazione che però va presa a volte con le pinze.

Perché? Perché questo tool ci indica una serie di parametri dati di laboratorio che vi spiego tra poco e dati sul campo pero' basati appunto su sul tool appunto di Google.

Quindi i dati di navigazione reali come li chiama Google ok, si basano su dati di navigazione reali, fatti e raccolti attraverso Google Chrome.

Quindi se un utente non usa Google Chrome, questi dati qui non li calcola.

Okay, da qui l'importanza di utilizzare anche altri tool che che si chiamano RAM room, ok chetoni italiano, rom, Real user monitoring, software che si installano attraverso uno script di monitoraggio perché effettivamente ti tracciano tutto il traffico che il tuo sito riceve.

Okay lo tutto il traffico che riceve il tuo sito viene salvato, viene analizzato e quindi ti da' l'esperienza reale di navigazione di tutti gli utenti.

Uno dei turchi Utilizzo principalmente per questi analisi Si chiama RAM Vision di un amico e collega olandese e che vi consiglio di vedere perché è veramente interessante.

Perché? Perché Google Page Speed Insight si basa, basa i suoi studi, le sue metriche, i dati di navigazione reali sull'esperienza reale degli utente su Google Chrome e secondo uno studio Google Chrome viene utilizzato dal sessantacinque punto sette per cento degli utenti.

Questo velo spoilerato l'ho messo anche in una slide.

Dopo vi ho anticipato il discorso dei Lab D'età e Phil Data e questo è super importante da capire come differenza di dati di navigazione.

Ok, è importante.

Perché? Perché quando facciamo le analisi di velocità, bisogna distinguere questi dati.

Bisogna distinguere i dati dl Lab, quindi di laboratorio o dati sintetici sintetica, data che non sono altro che delle simulazioni.

Ok, Infatti, se tu giri, fai il test su Google Page Speed Insight.

I dati che tu vedi qua sono frutto di simulazioni.

Lo vedete qua sotto, in basso piccolino è con quelle scritti ne' nel fondo grigio.

Poi dopo lo vediamo live lo zoom un pochino così lo vedete queste simulazioni spesso vengono fatte in automatico dal tool.

Poi se lo fate tramite la console di Google Chrome, potete decidere quali sono i parametri e vengono prese in considerazione.

Che cosa la banda, il tipo di connessione.

Il dispositivo, quindi molto spesso viene fatto anche vengono fatti i test di laboratorio automatizzati con delle, come dire delle tecnologie, anche un po' obsolete.

Esempio tre g chi ad oggi usa altre G? Oppure non lo so, un dispositivo, una connessione di bande ancora più lenta.

Però questi dati vengono effettuati perché molto spesso, ovviamente, ci sono utenti che utilizzano anche questi dispositivi.

Anche loro hanno diritto di poter navigare correttamente il tuo sito web.

Quindi questi sono dati di laboratorio.

Quindi quel punteggio che tu vedi è di laboratorio e potrebbe non corrispondere alla reale esperienza di navigazione del tuo utente.

Perché? Perché effettivamente se il tool mi fa fare un test su un tre G su un dispositivo vecchio di tre a dieci anni su una connessione lentissima e i dati di navigazione reale invece dicono che tutti gli utenti utilizzano l'iphone in cinque g o il Wi fi non ha senso.

Il test di laboratorio però ha sempre senso, perché fa bene confrontare le due cose dati reali di navigazione con dati di laboratorio.

Quindi i dati reali di navigazione chiamati fil, data o dati sul campo, proprio perché vengono presi sul campo, sul, sulla reale esperienza dell'utente, sono metriche appunto basate su questa esperienza di navigazione.

Come vi dicevo prima, prima Google come raccoglie questi dati, li raccoglie tramite il pro, il suo browser che è Google Chrome ok e ha creato un data set.

Quindi, nel momento in cui voi aprite qualsiasi sito Google si salva attraverso Google Chrome in questo data sette chiamato Cruz detto in italiano si era Hux è Mme salva tutti i dati di navigazione e utilizza poi questi dati per riportarci l'esperienza di corvo Sweets e anche per mandare questi dati al per informare il fattore di ranking.

Ok, quindi Google sa tutto non sfuggite, quindi se il tuo talento Google lo sa e che fa, ti penalizza anche lato serio.

Ok, quindi è molto importante ottimizzare il sito web.

Come vi dicevo, il sessantacinque virgola sette per cento solo tra virgolette.

Il degli utenti utilizza Google Crom, il restante lo dobbiamo monitorare con altri tool.

Ok, ve li ho scritti qua in questa slide ambition the barber, edgar speed curva ce ne sono tanti altri.

Questi ovviamente tracciano tutto il traffico perché gli inietti una scritte nel sito e ti da' tutte le informazioni relative.

Ok, sono tutti un po' cari, però se uno vuole ottimizzare il proprio sito web vuole aumentare le conversioni, ha bisogno di fare questo, quindi non è un costo, bensì un investimento.

Quello che vi dicevo prima i dati possono essere diversi.

Ok, quindi i dati che voi vedete nel tour di Google Print Speed Insight possono differire le metriche, ok, perché come vi dicevo prima, alcuni sono dati di laboratorio fatti con delle tecnologie, magari anche a volte obsolete.

Gli altri sono dati esperienze reali.

Ok, quindi, ad esempio l'esperienza reale di navigazione potrebbe dir dire che il fax content volpe int anzi, vediamo qua il large scontenti tulpen.

Quindi il contenuto visivo più grande caricato della pagina è di media l'uno punto otto secondi come esperienza reale di negazione, mentre come dato di laboratorio ci dice che ci mette tre secondi perché hai fatto il test su un dispositivo in tre G, eccetera.

Quindi qual è che ha ragione? Mi base Ray principalmente sui dati di navigazione reali.

Però, in mancanza di questi dati, mi devo basare per forza sui dati di laboratorio.

Immaginiamo un sito che è appena lanciato.

Non ho dati di navigazione reali, quindi per forza devo basarmi su quello.

L'obiettivo è comunque raggiungere sempre il meglio.

Ok, quinto punto Ok, sono sette.

Sono andato abbastanza veloce perché ovviamente parliamo di velocità.

Non potevo andare lento.

No, gli ingredienti della ricetta perfetta per un sito veloce.

Come dicevo io, un background da grafico, dal designer, da sviluppatori e era un web designer all'epoca e adesso ho un'azienda di hosting.

Negli anni ho capito che é anche in questa continua lotta tra web, designer, sviluppatori e e e sistemista non c' è mai chi ha ragione al cento per cento.

Ok, io mi trovo nel mezzo e sono super partes e posso dire effettivamente che la ricetta perfetta per la velocità include queste tre figure.

Include queste tre cose, quindi seguire sicuramente le ultime tecnologie, utilizzare le best practices per il design, per il front end e avere un hosting veloce.

Stop facile e veloce Miss.

Mischiate questi ingredienti avete un sito veloce, quindi se un sito è lento non potete dare colpa al sistemista o allo Sting, così come un sistemista un po' dare colpa solo al front end.

Bisogna saper far comunicare il software con l'hardware con un pizzico una spolveratina di best practice di front-end che vediamo adesso.

Ok, quindi parliamo delle ultime tecnologie.

Sicuramente utilizzare protocollo http due http tre qui magari vado troppo sul tecnico.

Se è troppo tecnico, scrivetelo in chat.

Utilizzare sempre le versioni di PHP di tecnologie che utilizzate sotto se utilizzate in un software PHP.

Insomma, dovete sempre assicurarvi che sia aggiornato sia per questioni di sicurezza che di performance.

Se utilizzate un e-commerce, un compose bo l'e-commerce eccetera potete considerare la possibilità di utilizzare una speedway e poi utilizzare le ultime tecnologie come i priori ti ins lato front-end gli ins e ottimizzare il codice CSS, la sua Delhi del delivery.

Ok, il lato front-end possiamo utilizzare delle best practices.

Ok, quindi sicuramente dobbiamo andare ad ottimizzare le immagini molto spesso che succede soprattutto chi usa WordPress si fa uno screenshot di un sito, si scarica l'immagine si prende, si carica, pesa cinque mega e bella li' fatta caricato e abbiamo magari il sito velocissimo.

E a quel punto che succede? Mi ritrovo un articolo di blog un'immagine presa cinque mega ok, quello non va fatto, quindi dobbiamo sicuramente andare a lavorare a monte sulle immagini.

Una volta lavorato sulle immagini possiamo utilizzare un tool.

Per esempio a me piace molto time i png che se scarichi una foto, per esempio da splash o altri siti che ti danno le foto stock gratuite, magari pesano già un pochino.

Vai lì, la carichi tela ottimizza la discarica oppure ottimizzare in formato moderno che webb e le più moderne cdn, come ad esempio quel fertile ottimizzato in automatico su wordpress con plachino vi rocket, cioè un altro sistema da comprare che ti ottimizza le immagini wep.

Quindi è molto importante andare ad ottimizzare le immagini perché vi ripeto, noi possiamo avere il sito più bello del mondo.

L'agenzia vi ha sviluppato il sito più veloce del mondo, però poi se noi non siamo coscienti di quello che facciamo, carichiamo delle immagini pesanti, andiamo a rovinare tutto il lavoro fatto in precedenza.

Okay, quindi é super importante ottimizzare le immagini lesi, lodging, un'altra best practice da utilizzare il lato frontale Che cosa significa l'esile in inglese significa pigro.

Il che l'isil o ding che cosa fa? Ti carica? È una pratica che va messa adesso è anche supportata nativamente da browser, quindi una riga di codice all'interno dell'immagine.

Noi gli diciamo questa carica in modalità lesi, quindi carica l'immagine sul sito sul solo quando l'utente arriva a quell'immagine.

Ok, quindi immaginiamo noi di navigare un sito.

Scorriamo la pagina.

A volte vediamo che l'immagine compare dopo quello il caricamento lesi.

Perché se io cento immagini sul sito non ha senso caricarle tutte le carico solo quando la devo visualizzare.

E questo ovviamente so cento immagini da omega il sito se dovesse caricare tutte insieme cariche rebbe cento mega di immagini.

Invece in questo modo scaricherebbe solo le prime qui un piccolo accorgimento è super importante non mettere inglese loading sull'immagine principale.

Ok, perché? Perché quello sarebbe o il fresco youthful penne o il l'agence content volpe in sé lo devo far caricare soltanto.

Si è bloccato il video.

Mi vedete? Datemi conferma tutti.

Susan mi dice che si vede, quindi continuo.

Quindi è importante andare a con tim.

Scusate mi sono bloccato io.

Adesso è importante non mettere inglesi loading sull'immagine principale ok sul contenuto visivo principale viene caricato dalla pagina perché questo andrebbe a creare un conflitto e ti sballa le metriche e quindi si creerebbe un problema.

Quindi importante utilizzare lesi loading ma non sull'immagine principale viene caricata in alto.

Grazie per il feedback a tutti.

Ottimo poi altri best practice piu' di sviluppo.

Magnificare il css javascript ottimizzare i font, quindi i font color font qui se c' è qualche grafico non mi non mi uccidete ho fatto un'accademia di grafica nel duemila sei nel duemila sette è piccolo piccola parentesi font deriva dal francese, quindi è femminile.

Quindi però in italiano si usa i font, quindi ottimizzate Web fonts super importante anche il caricamento dei font da Google font quello pure potrebbe creare un di lei.

Quindi adesso non so nemmeno se per privacy Gdpr si possono caricare ancora o meno, però anche questi vanno ottimizzati precari ai contenuti principali Questa è un'altra be best practice che si può utilizzare per il primo contenuto.

Quindi se noi per esempio vogliamo dire a Google ai sistemi di che l'immagine principale che deve essere caricata per prima è il logo.

Possiamo aggiungere una regina nel codice e dirgli prefect, questo è contenuto perché magari che cosa fai? Kim? Il sito carica principalmente l'immagine una quando noi vogliamo che carichi come immagine principale il logo.

Quindi con questa practice best practice chiamata prefect possiamo migliorare questa cosa e con i priori ti ins noi possiamo andare a dare delle priorità ai contenuti che devono essere caricati sul sito.

Ultimo ingrediente segreto non tanto segreto della ricetta avere un hosting veloce performante perché è importante avere un hosting veloce, performante, soprattutto per tutti i siti, non solo gli e-commerce anche chi vende info prodotti eccetera è perché l'hosting si occupa di fare tutto il lavoro sporco dietro quindi un cattivo software, quindi un software sviluppato male su un hosting che che ha fatto bene.

Magari gira anche bene, però un software scritto male su un hosting che è lento e non funziona bene crea dei problemi, quindi non dico che bisogna sviluppare software fatti male e gran e avere un hosting veloce che fa il lavoro sporco, ma bisogna unire tutti gli ingredienti della ricetta e l'hosting effettivamente perché è importante perché vi regge il traffico del sito che permette a tanti visitatori.

Quindi di navigare il vostro sito deve eseguire tante guerre difficili.

All'interno del database deve fare tante cose, quindi ricordiamoci che l'hosting è un computer, ok, quindi così come il vostro computer, magari a volte lento e avete bisogno di più ram, dovete capire che la stessa cosa vale per i server.

Quindi bisogna avere dei server potenti, ottimizzati e in alcune situazioni anche auto scalabili, affinché che in casi di picchi di traffico non ci siano problemi di down caratteristiche non hosting veloce sicuramente la ram, poi qui bisogna fare poi un discorso più complesso hosting, condiviso, delicato in cloud, eccetera.

Però di base bisogna avere queste caratteristiche che vedete qui, molte alcune tecniche e qui però voglio soffermarmi sul discorso della CDN cdn è importante per chi non conoscesse cos'è una cdn cdn sta per content delivery network, quindi una rete di consegna di contenuti.

Okay in che senso all'interno del mondo stanno server distribuiti ovunque e affinché l'utente carichi più velocemente il contenuto tramite la CDN.

Ad esempio se mi trovo in Australia e ho una cdn attiva, ma il server si trova in Italia, la che fa impedisce all'utente di scaricare il contenuto dall'italia, ma lo scarica dall'australia direttamente.

In alcuni casi la cdn è superflua perché se io al server in italia mi collego dall'italia non ci ho bisogno di una cdn perché a quel punto potrei aumentare il tempo di ritardo di connessione.

Quindi anche lì va ponderato bene l'utilizzo di un cdm intesa come tale.

Adesso le cdn fanno tanti altri lavori aggiungono il firewall ottimizzano le immagini, quindi bisogna capire bene che cosa fargli fare questa cdn.

Però è importante capire anche che potrebbe esserci questo problema e soprattutto un hosting veloce performante ti riduce il team per sbaglio.

Ok quindi il tempo di caricamento la prima metrica abbiamo visto all'inizio dipende principalmente dal server, dal tempo di connessione di risposta di questo server.

Ok, quindi é super importante avere nella ricetta della velocità un hosting veloce e performante.

Domanda me la faccio da solo, ve lo anticipo perché sicuramente me la volete fare e e tra poco vi lascio spazio per le domande.

Posso usare dei plague magici per mandare il mio sito? Accento su google maps feed? La risposta è sì.

Però questi svaghi non fanno miracoli, ok, quindi vi possono aiutare ad ottimizzare delle cosine per esempio vi possono aiutare a fare il Marge dei css o dei javascript.

Vi possono fare il deferred javascript, quindi spostarli dall'alto in basso vi possono aiutare a migliorare alcune metriche.

Però il planking non fa delle magie, soprattutto se utilizzate WordPress, magento, preston, sharp le altre piattaforme bisogna sempre andarci coi piedi di piombo perché molto spesso che succede? Si installa, plague, si accende a figo, va tutto bene.

Poi però magari non ti compare il forum, è un'altra pagina, non si carica oppure abilitati illesi Lod e non funziona.

Quindi anche il planking bisogna installarlo, ma con coscienza e soprattutto mai in produzione.

Ok, consiglio sempre a tutti di avere più ambienti di server, uno di sviluppo, non di stage in uno di produzione non installate mai le cose in produzione perché poi chiamatelo sviluppatori chiamate l'agenzia non funziona, eccetera.

Quindi è super importante avere più ambienti di sviluppo ultimo punto di oggi prima di vedere un'analisi live di alcuni siti.

Ma adesso che abbiamo visto cos'è la velocità che cosa sono le prestazioni? Perché sono importanti? Come misurarle? Ok, andiamo a vedere come creare un piano di ottimizzazione di performance.

Questo è importante.

Perché perché l'abbiamo visto prima.

La velocità è importante per soddisfare gli utenti per aumentare le conversioni.

Soprattutto.

Ok, però ovviamente, se abbiamo una situazione drammatica tra virgolette abbiamo un punteggio di laboratorio di dieci su cento.

Ehi, Gorgon Vitas, non superati.

Non possiamo pretendere con un clic con un plugin arriviamo a cento e miglioriamo il tutto.

Quindi dobbiamo fare un piano di ottimizzazione.

Questo lo chiamo performance optimization.

Budget.

Ok.

E di base Che cosa? Che cosa si ottimizza? Che cosa si va ad ottimizzare? É un che cosa si va a ottimizzare, si vada a ottimizzare delle metriche di timing ok di temporali, poi delle metriche di basate sulla quantità, quindi magari sul peso delle immagini eccetera e delle metriche basate su delle regole.

Ok, magari sul punteggio di Lighthouse, quindi spacchiamo gli obiettivi.

Io sono un super in fissa con gli obiettivi crescita personale e divido tutto in trimestri per dirvi a livello di ottimizzazione sia di vita sia di budget sia di altro.

E anche su questo punto mi piace molto dividere il tutto in in pezzettini, perché poi se un obiettivo è grande, più difficile raggiungerlo.

Quando invece iniziamo a spacchettare lo in piccoli pezzetti, vediamo chi è più raggiungibile.

Ok, quindi dobbiamo ottimizzare le performance del nostro sito web.

Ok? Come la spacchiamo? La dividiamo gia' in tre.

Facciamo le ottimizzazioni di tempo, di quantità e basate su delle regole.

Come lo facciamo? Utilizziamo gli obiettivi smart.

Questo concetto probabilmente anche è già stato trattato qui.

All'interno di Lerner é però è un concetto che mi piace molto ed è un metodo di utilizzo, un po' per tutto, sia obiettivi di vita personali, finanziari, economici.

E lo utilizzò anche qua per ottimizzare le prestazioni dei siti web.

Gli smart gol brevemente sono degli obiettivi specifici.

Quindi affinché un obiettivo sia smart deve essere specifico.

Quindi dev'essere veramente chiaro quando lo determini lo scrivi, deve essere misurabile.

Ok? Deve essere raggiungibile, realistico e basato su un arco temporale.

Un esempio di obiettivi smart che possiamo applicare alla ottimizzazione delle performance.

Qui sono gli stessi tre.

Abbiamo visto prima messi in verticale.

Ok.

Se dobbiamo fare una ottimizzazione basata sul tempo di caricamento, un obiettivo smart deve essere chiaro.

Non posso dire sì.

Voglio il sito più veloce.

Questo non è un obiettivo Smart l'obiettivo smart deve essere chiaro, specifico, misurabile, raggiungibile.

É basato su un arco temporale quindi potrei dire voglio ridurre il tempo di caricamento della home page, quindi super specifico, non del sito di home page da dieci a sette secondi entro la fine del Qe due.

Quindi entro la fine del secondo trimestre, poi basato ad esempio sulla quantità potrei dire voglio ridurre il peso della home page da cinque mega a un mega entro fine aprile duemila ventitre é invece un obiettivo smart basato su delle regole.

Voglio migliorare il punteggio GT metrics, passare da e a B entro fine maggio.

Duemila ventitré.

Questi sono obiettivi smart.

Non posso dire a voglio il sito veloce adesso.

Ah, voglio il punteggio GT Matrix a hanno GT Matrix meglio di Google.

Quindi ottimizza gt Matrix no, bisogna prendere iscriversi gli obiettivi, cioè analizzarli prima con i Thule che vi ho mostrato definire con gli obiettivi in questo modo questo è quello che faccio io che vi suggerisco di farlo.

Prendo un attimo area Scusate, è una cosa importante che potete trovare anche all'interno del tool Google PGP di Insight e lo Speed Pack calculator.

Questo che cosa indica? Indica soprattutto in fase di ottimizzazione di budget, di di obiettivi di performance con tutte quelle belle metriche che vi ho raccontato prima.

Ogni metrica ha un impatto sul su questo sulle regole, quindi sul punteggio di Lighthouse in particolare, quindi il punteggio di Lighthouse va da uno da zero a cento.

Ok, ogni metrica vi ho raccontato prima ha un impatto, ha un peso, ha un valore.

Quindi noi sapendo che per esempio il fax content bull pit a un impatto del dieci percento tutto il peso, possiamo dire che se questa America è così bassa, se io l'aumento posso giocando con questo tool che vi faccio vedere anche live posso dire ok aumento questo e aumenta il punteggio e posso determinare nel tempo facendo una programmazione ben definita che cosa andare a migliorare e come farlo? Parlando con gli sviluppatori parlando con il designer parlando con il team Ok quindi se voglio ottimizzare il questo, quindi il punteggio digiti metrics o di lighthouse da zero a cento entro fine maggio posso dire di iniziare a spacchettare quello obiettivo andando ad ottimizzare prima f C p, poi lo speed index, poi il chip e così via.

Ok, è super importante per raggiungere gli obiettivi, avere la consapevolezza iniziale, quindi la wellness, sapere che abbiamo un problema accettarlo, ammetterlo e poi definire un piano per raggiungere quell'obiettivo e per risolverlo.

La perfezione non esiste, però ovviamente dobbiamo puntare a quella.

Possiamo arrivare a novanta, è un ottimo risultato.

È difficile, lo so, lo ammetto.

Però ci si può arrivare qui.

Ho finito la presentazione è facciamo un breve recap.

Che cosa abbiamo visto? Che cosa sono le prestazioni? Perché sono importanti? Il perché è fondamentale come le misuriamo la differenza tra i dati di laboratorio e i dati sul campo? Gli ingredienti della ricetta perfetta per un sito veloce e come creare un piano di ottimizzazione di performance.

Adesso vi lascio un po' di minuti per delle domande e vi lascio insomma qui il mio riferimento LinkedIn, dove potete contattare Ehmm e a seguire dopo le domande che vi invito a insomma a scrivere qui in chat vediamo live un'ottimizzazione un'analisi non un'ottimizzazione un'analisi di alcuni siti, tra cui anche questo di di lernia é un sito mio, un sito di un di un cliente.

Così vi faccio vedere tre casistiche diverse sui problemi attuali.

Come si possono risolvere e invece le cose che ho già risolto in passato? Quindi intanto vi ringrazio moltissimo per l' attenzione E se avete qualche domanda, insomma, sono qui a disposizione.

Ok? Non so se ci sono domande.

Chiedo alla regia.

Forse non le vedo io o non ci sono.

Nel caso in cui non ci fossero, procedo direttamente all'analisi live, quindi avro' poi bisogno dello switch dello dello schermo.

Okay.

Ok, Fantastico.

Vediamo qui.

Adesso vediamo se riesco a fare così.

Siete un po' più grande.

Ok, la faccio così.

Scusate un secondo.

Metto la chat di lato.

Ok.

Ok.

Questo è il tool che andiamo ad analizzare adesso.

Ok, Quindi Google Page Speed Insight Lo trovate su Page speed punto web punto Deb.

Eccole qua, eh? Ah, ok.

Rispondo intanto alle domande.

Ok, quindi vediamo Crea il tuo video.

Ciao, Andrea.

Mi piacerebbe conoscere la differenza tra hosting gestito e gli altri sullo Sting ci sono tre principali differenze.

Scusatemi un secondo, Ok, perfetto.

Hosting gestito, condiviso, VPS, eccetera.

Ma partiamo dal hosting condiviso l'hosting condiviso è un hosting che, come dice la parola è condiviso per fare l'esempio dell' hosting.

Utilizzo sempre l'esempio del delle case, degli appartamenti, un hosting condiviso è come andare a vivere con altre persone.

Quindi il vantaggio qual è condividi le spese Condividi le risorse, la cucina, eccetera.

Nel caso dell' hosting, condividi la ram cpu lo spazio e sei a casa con altre persone, quindi di fatto non è una soluzione.

A te dedicata il vantaggio qual è? Che hai delle buone performance, spendi meno, però sei a casa con altre persone, ok, quindi se poi in quella casa ci sono persone che utilizzano piu' risorse, eccetera, tu comunque hai dei limiti e poi se il tuo sito cresce, il provider ti può aumentare un po' le risorse però non potrai mai scalare come si usa il termine tecnico, quindi l'obiettivo è poi a lungo termine nella strategia, soprattutto se fai il commercio è quello di avere una soluzione dedicata o un gps club.

Quindi questa è la parte di hosting condiviso l'hosting dedicato per come si usava.

Insomma, il termine vecchio è un hosting proprio di ferro fisico, un computer a te dedicato all'interno di un data center che adesso non si usa più più di tanto, perché adesso si usa l'hosting cloud VPS, quindi delle virtual private server che comunque è sempre un dedicato a livello di gestito o non gestito.

Per rispondere alla tua domanda l'hosting gestito che cos'è un hosting dove tu si chiama White Klaus.

Quindi a guanti bianchi tu compri il servizio e il tuo provider fa tutto ok, quindi non hai un pannello di controllo.

Non hai niente.

Hai un ticket system, noi offriamo anche questo servizio é praticamente noi facciamo tutto il tuo provider fa tutto quindi ti fa il set-up, ti fa la migrazione, ti monitora proattivamente.

Se il tuo sito va offline, non va offline.

Ok a dei sistemi automatizzati che se cade un servizio come lasik, search php eccetera si riattiva in automatico e tu non devi fare niente.

Questo l'hosting gestito un hosting non gestito è un hosting che potrebbe essere anche dedicato dove però tu fai tutto.

Quindi tu compri Lamar é il provider che infatti può mettere un pannello di controllo come ci panel, pesche o altro e tu all'interno poi a crearti il tuo database.

Puoi fare le tue cosine, poi però devi puoi mettere tu un tuo tool di monitoraggio e farti degli alert che se cade un servizio poi lo devi riattivare, eccetera.

Quindi la differenza è sostanziale.

L'hosting gestito ovviamente costa di più perché è un servizio completamente dedicato che che è dove hai un servizio più più potente? No, migliore.

Poi ci sono gli hosting con il cloud pubblico, così chiamato come Amazon ed Apple, iOS, Google Cloud, Microsoft Azure, eccetera.

Però li andiamo su altri altri discorsi.

Sono sistemi auto scalabili più complessi e io insomma, gestisco un po' Tutte queste tre situazioni Spero di aver risposto alla tua domanda, poi Laura Laura, grazie per essere qua.

Sono felicissimo che tu sia qui.

Ci conosciamo dai tempi di quando eravamo web designer, quindi o parliamo di quindici sedici anni fa, quindi tantissimo secondo te in quanto tempo si può riprendere una buona posizione? SEO Cambiando server, il sito è diventato lentissimo e ci siamo persi.

Gnam A livello di Corbett Vitas si prende in considerazione una trentina di giorni.

Ok, quindi il tool che fatti da un'analisi di trenta giorni, piu' o meno e nel momento in cui tu fai l'ottimizzazione del tuo sito web, poi che fai? Mangi impasto tramite la console, le ottimizzazioni che hai fatto e a quel punto già ti può migliorare.

Però secondo me i risultati li ottieni già dopo due tre mesi, ok di miglioramento.

Molti clienti mi hanno contattato ultimamente dicendomi ho diminuito il posizionamento SEO, ma sicuramente il problema non dipende solo dalla velocità.

Però la velocità è importantissima perché dal duemila venti sono usciti proprio comunicati ufficiali di Google, quindi non va più trascurata.

Quindi magari prima avevi un sito bellissimo, ma che funzionava.

Aveva tante visite e poi ha iniziato a notare un calo di visite.

E non hai mai tenuto conto della velocità.

Questo è importantissimo.

Un cliente che seguo.

Eccolo qua.

Vediamo a tutto yoga.

Adesso guardate, ve lo ve lo apro qua su Un'altra Paginetta Effettivamente ha migliorato il posizionamento SEO a tutto lo yoga un tweet e lui aveva un sito abbastanza usabile che funzionava bene.

Il problema principale era velocità, quindi l'abbiamo ottimizzato WordPress e come vedete qua.

Insomma, ci dà anche l'ottimizzazione dei corpi del superati sia da desktop che mobile.

Ok, no, da desktop invece ha perso la settimana scorsa.

Ce li aveva, quindi qui che cosa dobbiamo andare a fare? Dobbiamo andare ad o ad ottimizzare questa modifica, una volta fatta sempre.

Per rispondere alla domanda di Laura, la dobbiamo andare in surf console e convalidare una volta fatta, poi in uno o due mesi, sicuramente insieme a vedere i risultati.

Ok, Poi Angelica è possibile ottimizzare anche i siti costruiti con team builder tipo elemento Si è possibile ma è più complicato.

Ok, io preferisco sempre il custom perché il custom è un po' come l'hosting dedicato non scusate è un po' come l'hosting gestito e dicevo prima è dedicato è sviluppato ad hoc per te, non usi builder.

Il problema dei builder come elemento qual è è che molto spesso utilizzano tantissimo codice, anche inutile e appesantiscono la pagina.

Poi andarci a mettere sopra un blog o altre cose di ottimizzazione potrebbe creare dei problemi.

Quindi io ultimamente per i siti wordpress ho iniziato a vedere anche lei ritorna tivo gutemberg che funziona molto bene, veramente figo a tutta una serie di blocchi con un che si chiama astra mi trovo molto bene, funziona veloce e ottimizzato, insomma vari siti e funzionano bene e ho fatto anche un test che poi vi faccio vedere.

Anzi, se volete lo analizziamo perché non lo tocco da un po' di tempo che corpo web sweets punto it il sito è prestante, quindi vi consiglio veramente di utilizzare teem template utilizzi poi l'editor nativo di wordpress ok intanto che si carica qui il test di velocità così nel frattempo facciamo due cose e vediamo che è appena comparso il report questo questo sito l'ho fatto io corvo guidance punto it per parlare appunto with als come vedete da mobile una bomba novantanove punteggio lighthouse da test top cento ok sono stupito adesso insieme a voi e questo è wordpress senza editor elemento ma con editor nativo temple astra quindi questo ve lo consiglio perché è veramente una figata sui nostri server ottimizzati e veloci.

G t matrix quindi scusa angelica si si può fare, però rimane sempre un po' più complicato okay maddalena gt metrics m' maddalena gt matrix da rating b invece su google sfida ai valori sono molto peggiori.

Cambiando serve si potrebbe risolvere qualcosa la metrica peggiore f cambiando server puoi migliorare alcune metriche, però in questa occasione sicuramente bisogna andare un po' più a fondo.

Okay, perché se tu ti basi legittime matrix di cibi che bello, sono felice ma non è così effettivamente, perché se poi lo analizzi suspected insight dice tutta un'altra serie di cose e notando il cambio server spesso noto un miglioramento già di base.

Io faccio sempre i test prima e dopo però in questo caso specifico se l'america peggiore.

Quindi il Feathers Content full pint.

Bisogna andare a lavorare su quella.

Ok, il fax content Bull pit è la metrica.

Appunto.

Che indica qua? Intanto che parlo, vi faccio vedere anche il tool così ci giocate.

È la metrica che indica appunto il momento in cui vengono visualizzati il primo testo.

La prima immagine, come vi ho detto prima.

Ok, questo adesso vi faccio vedere anche qual è il press contact point, come si vede, perché voi da qui non lo vedete.

Quindi se questa metrica è la peggiore, tu devi andare ad ottimizzare solo questa metrica.

Okay.

In che senso? Devi andare a migliorare il tempo di caricamento di questo primo elemento.

Come si risolve con un cambio server? Potrebbe, perché effettivamente è il primo contenuto che viene rilasciato dal server.

Quando tu contatti, apri la pagina.

Ok, quindi quella è la prima prova che potresti fare.

Che se fosse stato invece avevo letto male.

Infatti, prima a quel punto ti avrei dato un altro consiglio.

Era quello di andare a migliorare il peso dell'immagine altre cose.

Quindi sì, il cambio server potrebbe aiutarti in questo caso.

Ok, Poi Volodymyr, cosa pensi in generale di WordPress come velocità tra i vari CMS.

Quali consigli? Ogni CMS è diverso WordPress.

Sicuramente il più diffuso non è tanto il CMS veloce o meno, perché per esempio anche l'argento è lento.

Tutti dicono che è lento.

Magento Ok, ma il problema non è tanto del software.

Il problema è come viene configurato e come quel software quel CMS comunica con l'hardware.

Il problema spesso è proprio di comunicazione tra queste due cose.

Per questo vi ho creato quella ricetta.

I software di per sé nascono veloci, ok, sono ottimizzati.

Però se tu per esempio utilizza WordPress, lo metti su un server che ha che cinque punto sei che già è deprecato, ha problemi di sicurezza e di velocità.

Lee, tu dici ma wordpress lento ma non ha senso questa affermazione.

Quindi li bisogna andare a vedere perché è lento o è lento perché il server ha delle tecnologie vecchie o è lento perché usa elemento o altri sistemi o perché è carico discreet.

Quindi il cms di base appena turista le veloci.

Questo è WordPress.

Questo che stai vedendo qui è veloce.

L'altro sito a tutto yoga, anche fatto su WordPress.

Funziona bene.

Eccolo qua.

Scusami.

No, l'avevo aperto dove non è questa la sentiamo.

Vabbè, cogliona.

Scusatemi, sono verso gli srl.

Ehm vabbeh, poi lo ricerco però per dire wordpress di base è veloce, ok, quindi si ottimizza anche abbastanza facilmente.

Magento è un'altra piattaforma che però viene utilizzata per e-commerce principalmente ok.

E anche l'argento.

Chi sta nel settore commercio da anni lo sa Magento sinonimo di lento.

Avevo fatto pure una campagna pubblicitaria su questo.

Se il tuo agente è lento é però di base perché è lento? Perché viene caricato discreet non viene abilitato alla cash.

Non vengono applicati i requisiti di sistema che ti dà il fornitore.

Quindi la gente in questo caso WordPress in questo caso questo è un altro sito che stiamo che abbiamo gestito noi che ha fatto un'altra agenzia.

Noi lo gestiamo lato serve è un Magento due, quindi ultima tecnologia velocissimo.

Novantuno mobile centro su desktop quindi.

Ma il problema non è mai imputabile o al cms o al server o allo sviluppatori o al sistemista bisogna andare ad analizzare sempre tutte le varie questioni.

Ok, quindi tra i vari CMS quali consigli dipende? Quindi? Dipende se devi fare il commercio, ma anche lì dipende dal tuo modello di business potrei consigliarti Magento presto shop commerce, quindi non sono super partes che sono super partes nel senso ho lavorato per anni con Magento m'ha fatto tantissimi sei WordPress.

Ok, quindi dipende dalle tue esigenze.

Devi fare un sito veloce, vetrina e WordPress lo installi.

É veramente in mezz'ora in un sito online, ok? Anzi farò anche un esempio di questo in futuro, quindi spero di averti risposto.

Grazie per la domanda, Marika.

Consigli per green per ridurre il css già scritto o risorse che bloccano la visualizzazione allora su WordPress utilizzato tanto lupi Rocket che ti migliora, ti comprime il css.

E se se se il problema su WordPress quindi principalmente quello utilizzato è però anche lì bisogna andare a vedere.

Poi sul discorso critica al css lì si apre un altro mondo, ci sono alcuni tunnel si che ti ottimizzano, ti tagliano i css.

Però anche lì se tu usi un builder è è difficile e il rischio poi è quello di rompere qualcosina.

Ok, quindi io preferisco sempre il custom per chi non può usare il custom, utilizzato un plugin in ambiente di sviluppo e fate dei test.

Quindi testate, testate, testate e poi e il mal pertugio Hart, che ne pensi di Oxy Gen Wilder? Non lo conosco, quindi mi dispiace, Non so darti una risposta.

Me lo cerchero' e poi eventualmente ti darò un feedback se mi scrivi su LinkedIn.

Grazie per la domanda, Paolo.

Ciao Andrea.

Di solito testi sempre e solo la home page di un sito.

Anche alcune pagine target che pensa Gold in homepage Cento in maniera pagina trenta.

Bellissima domanda.

Grazie Paolo.

Allora io lavoro principalmente un sito e-commerce è quello che analizzo principalmente sono tre pagine, ok con i tool, quindi un page categoria landing page, categoria e scheda prodotto.

Ok su Cash Se la cash abilitata è Mme, perché queste pagine? Perché sono le pagine dove effettivamente poi il traffico viene mandato.

Viene sono le pagine che principalmente vengono posizionate.

Sono le pagine dove arriva il traffico dalle Hazem sono le pagine principali, quindi analizzo principalmente queste ehmm.

Consiglio poi di analizzare tutte le altre pagine anche con l'ex console, perché sul set console Google ti analizza tutto perché tu li carichi da Salem e dalla salma per utilizza tutte le pagine.

Che cosa pensa Google se una pagina e cento e le altre sono male? Non penso la pensi bene, perché bisogna vedere qual è la palla.

Ma quali sono le pagine che hanno piu' visite? Quindi se le visite arrivano principalmente sui prodotti o sulle categorie e li hai delle performance veramente basse? Mallon Page è performante.

Quelle pagine this indicizzato meno ti si posizionano meno, quindi bisogna avere un globale interessante a livello di prestazioni.

Ok, quindi a livello di commercializza più pagine a livello di sito, vetrina o sito E-commerce analizza le pagine effettivamente dove investe i soldi in pubblicità dove c'è più traffico e che sono insomma le più le più visitate.

Ok, allora, detto questo, sono finite le domande.

Eccole qua.

No, ce n'è Un'altra.

Non so se ce ne sono altre.

Vediamo.

Andiamo, andiamo, andiamo.

No, Eccolo qua.

Altre due.

Ok, quindi immagini pesanti.

Sempre.

Paolo, A che ti riferisci? Centocinquanta k.

Cinquecento K.

Un mega è Allora con web si è ridotto drasticamente il peso delle immagini.

Adesso non so dirti nello specifico quale deve essere il peso perfetto di un'immagine, però.

Già, se supera i cento duecento K è tanto Ok, vediamo in questo caso questo sito weekends.

Vediamo se qua mi dice qualche problema sulle immagini.

Vedi qua mi dice che queste immagini che sono jpeg potrebbero già essere ottimizzate in web.

Vedete, questo è lo script tino che mette il giugno un po'.

Ok, quindi questo vuol dire che queste immagini si carica con il payload.

Andiamo su questa per esempio perché qua cielo schettino di cookie bot che impedisce la visualizzazione ma vedi questa immagine caricata con inglese loading, quindi ottimo però ti dice non è utilizzata in formato moderno.

Questa pesa trentanove k quaranta kilobyte potrebbe essere ottimizzata e pesare molto meno, non molto meno però al venti per cento in meno, quindi si può ottimizzare tanto vi consiglio di dare un'occhiata al formato web p che è quello utilizzato che comprime tantissimo le immagini senza perdere la qualità.

Poi con altre metodologie all'interno del codice html dell'immagine si può dire che per alcune dispositivi dobbiamo mostrare un'immagine per altri dispositivi, altre immagini, quindi potremmo fare anche più versioni di una stessa immagine più o meno pesante.

Ok, perché se io sono il wi fi e dal computer di casa dall'iraq non ho problemi a visualizzare un'immagine anche pesa un mega però ovviamente il tempo di caricamento aumenta è mme.

Comunque vi faccio vedere questo png mi piace molto, lo uso spesso che potete fare? L'abbonamento costa relativamente poco.

Ci potete caricare venti immagini gratuite le caricate guarda per esempio se io faccio uno screenshot di questo ok, questo aprendo la carico mi dice questa solo la screenshot pesa un mega e tre ok già con questo tool mela riduce del settantasei percento.

Ok, quindi da un mega ed è diventata trecento k e con un altro tool online la potrei modificare il web e ottimizzare ulteriormente.

Quindi la posso ridurre veramente, veramente tanto.

Andrea, qualche consiglio per deb, magari ottimizzare city james tech le metriche lighthouse sono molte difficili da interpretare su questo anche qua non posso darti un consiglio non sono molto ferrato su questa cosa.

Però mi informo e ti darò un feedback su linkedin se mi scrivi magari oppure non so come possiamo trovare contatti, poi magari chiedo chiedo a agli organizzatori Lerner ha benedetta insomma se mi dà una mano a reperirli così vi rispondo meglio a tutte le domande.

Il commercio per i consigli di ottimizzazione velocità bellissima domanda Piergiorgio perché l'ottimizzazione ovviamente non va fatta solo su cms opensource.

Si può fare anche su altri cms c' è uno studio fatto da shopping che parla proprio di ottimizzazione delle performance li'.

A volte siamo un po' limitati.

Perché? Perché anche lì viene utilizzata un'infrastruttura condivisa.

Si puo' fare qualcosina, soprattutto sulle immagini, sulle metriche.

Perché vi ricordo qua noi dobbiamo andare ad dobbiamo andare ad ottimizzare le metriche.

Ok, quindi le metriche spesso non deve.

Alcune metriche dipendono dal se diciamo dividiamo la ricetta in trenta, trenta quaranta, ok, quelle che dipendono dal server li' su show che non possiamo fare niente se non andare a scopi plus.

Ok, perché sul plus hai tutta una serie di vantaggi che non hai sul sul free.

Ok.

E anche la velocità ha un impatto su quello è anche perché hai bisogno di più visite di più carico sul server.

Quindi paghi il plus per questi motivi, ma per tutte le metriche che non impattano direttamente sul server tu puoi fare tanto.

Quindi analizzare con questo tool le metriche ti aiuta a a capire.

Per esempio se l'immagine pesa troppo lì non dipende da chop, non dipende dal server, dipende dall'immagine è troppo pesante.

Quindi questa metrica dipende da quanto tempo ci impiega il sistema a caricare l'immagine.

Quindi la riduci e hai potenzialmente risolto cumulativi layout.

Questo dipende dal dal tuo layout.

Ok, non dipende dal CMS, quindi questo è misura lo spostamento visivo del tuo sito.

Molti siti tu li apri e fanno uno scavalcamento.

Ok, è il momento in cui scavallare questa metrica aumenta in questo caso in questo sito non c' è questa America non scavalca, quindi non ho questo problema che non dipende dal server.

Dipende dal fronte nda Come fatto.

Ok, sicuramente ci sono dei template più o meno ottimizzati per shop, quindi vi consiglio eventualmente di dare un'occhiata a quelli e di andare prima, ma a fare i test di velocità con il test Tu puoi veramente vedere tutto, quindi vediamo se c' è altro.

Ok, grazie.

Grazie.

Grazie a voi.

Io Wicks mi sembra veloce.

Fantastico.

Mi sembra veloce.

Questa affermazione è mi sembra non corretta, quindi sarà Ti consiglio di andare su Super Speed Insight, mettere il sito qua sopra e farti dire dal Tulse veloce o meno Ok, vediamo se c' è altro.

No, per adesso non c' è altro.

Quindi accordi con l'ernia Facciamo un'analisi live anche di la per vedere effettivamente perché questo vi ho fatto vedere.

Sono tutti siti.

Le eccezioni diciamo però nella vita reale, ma anche su siti miei personali.

Non è sempre così.

Prima di passare alle armi o vi faccio vedere un sito mio che Emma gettiamo punto it Questo è il sito dell'azienda mia di hosting, che ovviamente è veloce perché vediamo velocità, Quindi principalmente deve essere veloce.

Andiamo su.

Sentiamo che è uno dei miei siti.

La community italiana, insomma, in argento.

E qui vediamo se lo trovo.

Eccolo qua.

Qui i corvi e Vidal se li superiamo.

Ok.

No, scusami.

Questo era tutto io'.

Analizziamo Gen gentile.

Come vedete, il tool ci mette un po' ricordo.

I Beatles non sono superati.

Ok, quindi partiamo da questo box del tool.

Non li superiamo.

Perché? Perché non superiamo solo una metrica? Ok, Che significa noi per superare i segnali web essenziali che, ripeto, SIM, non non simulano.

Riguardano l'esperienza reale degli utenti che visitano questo sito.

Non sono superati.

Perché? Perché non viene superata questa metrica? Quindi anche se tu hai fatto un lavoro perfetto, impeccabile, ma una metrica non la superi, Ma il corpo e Vidal se non sono superati.

Quindi anche se ho fatto un ottimo lavoro qui sopra, questo lo devo andare ad ottimizzare ok, lato destro stop idem.

Stessa identica cosa, quindi potenzialmente con un'ottimizzazione del comune di playout, quindi dello scavalcamento, lo sbilanciamento visivo potrei andare ad ottimizzare questo andiamo a vedere invece qua sotto dalle metriche di lighthouse.

Quindi dati di laboratorio vedete che il dato è diverso rispetto a quello che mi dà i corvo e vitas perché questi vengono presi con uno storico di trenta giorni, quindi io potenzialmente potrei aver gia' risolto questo problema, ma qui non me lo vede, ok perché ho fatto dei lavori settimana scorsa li ho mandati in convalida, ma ancora non li vede google nei segnali web essenziali però il dato di laboratorio che cosa mi dice? Mi dice che va bene da desktop e mobile pure, però è cambiato qualcosa al contrario quindi il large scontenti fulbright sembra piu' pesante, mentre invece da corvo e beatles va meglio, quindi devo andare a capire e ottimizzare il tutto affinché sia sempre tutto ben ottimizzato.

Vi apro anche la search console che l'aveva aperta qui.

Eccola qua segnali web essenziali di questo sito la trovate all'interno della console qui esperienza sulle pagine ok qua vi dà un po', una panoramica.

Ok? É qua dentro.

Vi da Vida? I segnali web essenziali, le pagine che hanno problemi.

Ok, quindi ci sono trecento ottanta cinque pagine con problemi.

Il problema principale è solo quello che vi ho segnalato prima, Quindi il CSS.

Okay, quindi che faccio? Apro e da qua dentro? Vedo problema CLS piu' di zero virgola uno.

Ok, quindi qua qua dentro Che cosa succede qui? Mi dice che esempio pagina, ad esempio.

Ma gentile punto Slash D'argento.

Scusate.

Quindi in questo caso vede tutte le pagine.

Quindi io secondo me sistemando un problemino lo vado gia' a risolvere.

Okay.

Come posso andare a capire meglio qual è questo problema? Vado sul sito.

Okay, apro la pagina in questione.

Apro, faccio chiudo, chiudo qua.

Ok, Clicco con il destro su Google Chrome, Ok? E apro questo pannelli Noh Performance Insight.

Ok, quindi le analisi sulle performance Questo adesso ci mette un po'.

Credo si sia anche bloccato Google Chrome.

Proviamo un attimo ad aprirla in un'altra scheda Ok, che come vedete, sembra veloce.

Pero' effettivamente l'esperienza che hanno gli utenti reali.

Magari non è sempre così e andiamo qua su performance insight.

Qua clicchiamo semplicemente misura il carico della pagina Il tempo di caricamento.

Qua vedete che inizia a fare delle cose, ok? Quindi inizia a fare tutta l'analisi del sito di questa pagina in particolare eccolo qua E mi dà proprio una linea temporale.

Una timeline di quello che succede.

Quindi è un po' come questo che abbiamo visto qua All'inizio.

Ok, mi sposto di qua.

Bellissima scheda.

È un po' questa timeline che mi da qui.

Ma è interattiva.

In che senso? Io qua ci posso lavorare e posso vedere effettivamente anche cosa succede realmente.

Vedete, io qua posso spostarmi.

La barretta nella linea temporale é qui.

Effettivamente posso anche mettere play.

Gli posso anche dire di farmi vedere il replay del caricamento a zero cinque vedete? E qui é dove succede quel problema che lui mi segnala.

Come vedete il discontent volpe int qua lo carica bene sotto i due secondi, quindi fantastico! L'agence content fulbright pure.

Ottimo.

Infatti lo vediamo pure dalle altre metriche.

Guardate.

Ok, poi cumulati il layout shift.

Effettivamente qua non mi da' il problema, quindi potenzialmente io questo problema l'ho già risolto.

Quindi che faccio? Vado sulla mia search console.

Però questa era per farvi vedere qui, dove ti segnala qual è il problema.

Ok, In questo caso il layout shift Vedi, lo fa.

Lo fa qui però dura veramente poco impercettibile.

Quindi lui lo accetta come buono.

Quindi che cosa succede? Io adesso vado, eh? Vado sulla search console.

Ok, Eccolo qua.

Gli dico convalida, Correzione perché l'ho già fatta.

Ok, é qua, mi dice Convalida iniziata.

Ventinove marzo, Termine previsto ventotto giorni.

Quindi, tornando alla domanda, mi ha fatto Laura prima.

Quanto ci vuole dopo che ho fatto le modifiche, eccetera? Almeno ventotto giorni per vederla reale sul campo.

Infatti.

Quando poi faccio le ottimizzazioni di performance nel budget chiamato Bella Performance Optimization budget, ci metto sempre una review mensile.

È trimestrale semestrale annuale della velocità.

Perché la velocità non è che la ottimizzi oggi E va bene per tutto L'anno.

Perché, ripeto, le metriche si aggiornano.

Cambiano in continuazione.

Ok, quindi questo era un esempio.

Andiamo su.

Un altro esempio.

Ho analizzato velocemente il sito di lancio e qui ci sono varie cose che si possono ottimizzare.

Allora, di base le prestazioni che ci dà Lighthouse sono sotto il punteggio minimo.

Quindi qua il primo consiglio che darei agli sviluppatori qual è? È quello di andare ad ottimizzare queste due metri che quindi l'argus content Colpe it's content volpe.

Perché? Perché sono quelle che hanno un peso.

Prima vi facevo vedere il calcolatore, quindi clicchiamo qua.

Vai al calcolatore.

Quindi se noi dovessimo ottimizzare questo sito che cosa? Dove che cosa fare? Che cosa farei? Direi Ok, andiamo a ottimizzare queste due metri.

Quindi questa che è un peso del dieci percento.

Questo è fantastico.

Vedete, CLS non c' è nessuno Sbalzo.

Ottimo.

Quindi ottimizzare questa che ha un peso del trenta percento, questa che ha un peso.

Il venticinque.

Ok, perché già ottimizzando questa che l'argus content volpe int potrei aumentare il punteggio di tanti punti.

Quindi riduciamo questo.

Vedete come aumenta il punteggio? Già.

Entro nella fascia gialla.

Okay, quindi già qui.

Già, ottimizzando solo una metrica aumenta il punteggio di Lighthouse e questo è ottimo.

Perché poi, quando ci saranno i corvi with Als, vedo che adesso non ci sono ancora.

Già, sarà sistemata.

Quindi ottimizza Ray questa metrica Ottimizzare pure questa, che forse sono le cose più facili.

Ok, quindi il primo contenuto viene caricato sulla pagina e il contenuto più largo.

Quindi come farei l'analisi? Andrai qua sulla Ok.

Già.

L'ho fatto prima per velocizzare il processo.

Qui vado su Performance Insight.

A questo punto vedo il replay della navigazione.

Ok, quindi nel momento in cui apro il sito, che cosa succede? C' è un un lasso di tempo importante che passano due secondi prima che venga caricato il contenuto.

E qui a questo punto, forse per questo video che che C' è qui o forse per altri iscritti e poi li va analizzato meglio.

Quindi qui vediamo che questi sono i due problemi.

Perché queste due metri che devono essere caricate molto prima.

Ok, quindi che cosa si fa in questo caso qui noi possiamo giocare.

Vedete, possiamo allungare o diminuire la linea temporale, quindi che cosa possiamo fare? Andiamo, Clicchiamo qua.

Quindi fare sconti sul pene qual'è il fax content sul pene.

Ok, eccoci qua.

Ok, è questo qui.

Principalmente.

Ok, questo testo non è un'immagine, ma è un testo, quindi dobbiamo fare in modo tale che questo testo si carichi più velocemente.

Quindi di base é un po' tutto l'inizio di essere carico più velocemente e il large discontent Volpe int Idem.

Ok, dovrebbe essere dovrebbe corrispondere allo stesso identico.

Ok, quindi noi andando ad ottimizzare il tempo di caricamento e questi contenuti più larghi principali vengono caricati sulla pagina.

Già potremmo ottimizzare è il tempo di caricamento di questo sito.

Ok, dove l'avevo messo? Non mi ricordo.

Eccolo qua e aumentare il punteggio di lighthouse già di diversi punti.

Ok, aumentando questi migliora anche in automatico lo speed index, che è un indice di velocità globale della pagina.

Ok, quindi già migliorando questi questo già migliora, quindi gia' con un po' di ottimizzazione home page.

Andiamo a migliorare tanto ok e poi voi mi direte sì, ma siedi come questo come Ikea come altri lavorano tanto di brand, quindi chi compra online? Se io devo comprare una cosa da Ikea vado da Ikea, poi se Ikea ci mette un secondo ci mette dieci secondi.

A me non importa, perché quel mobile lo trovo solo su Ikea, ok, però diminuisce sicuramente la frustrazione dell'utente un sito veloce e miglioro.

La mia esperienza nel caso di Ikea potrà aumentare il fatturato o no? Perché effettivamente un utente se vuole quella cosa va sul sito di cielo comprarli.

Che ci metta uno che ci metta tre o che ci metta cinque su un sito e-commerce normale bisogna stare attenti se non sei un brand.

Ok? E altre cosine da analizzare.

Vediamo andiamo qui, qui, qui vedete qua la timeline.

Comunque la stampa e qua ci dà altre altre informazioni, quindi riduce il tempo iniziale del server.

Ma vediamo che è un sito che è la tecnologia che c' è di base WordPress, quindi ci si possono fare belle cosine qui ci dice che si possono Vedi, si può attivare lesi Lod, quindi queste immagini potrebbero essere caricate inglesi ridurrebbe il tempo di caricamento.

Poi questo riduci già scritto inutilizzato è una delle cose un po' piu' difficili da fare.

Però ti dice effettivamente che se usi vi rocket puoi abilitare queste cose sempre, ovviamente in ambiente di sviluppo e pubblica immagini informati più recenti.

Per esempio, questa immagine qua è m'.

Potrebbe essere ridotta un po'.

Ok in PNG.

Vediamo, per esempio se la scarichiamo.

Okay, prendiamola direttamente e vediamo se mi la carica.

Okay, scarichiamo la la utilizziamo direttamente su Time PNG, quindi torniamo sul fantastico amico Panda.

Richiamo.

Ok, fantastico.

Quindi da due settantasette kilobyte si riduce il settantuno percento Già così, senza essere informato wep.

Quindi se la trasformiamo pure in formato web, questa immagine veramente potrebbe essere meglio quindi ci sono tante cose che si possono fare.

Poi insomma, tramite questo tool potete vedere tante, tante cose.

Vi invito ad utilizzarlo a farlo.

Poi se avete dubbi domande, contattatemi e insomma ne parliamo.

Mi trovate su linkedin, mi trovate su instagram, su facebook, dove preferite.

Sicuramente mi contattate su linkedin, poi vi condivido.

Contatti e ne parliamo meglio.

Detto questo, se non ci sono altre domande vedo l'ultima vedo che ne pensi.

In generale il press non lo conosco.

Come vi dicevo ho utilizzato io.

Ho sempre fatto city custom, soprattutto su wordpress, sviluppato, personalizzato e builder.

Personalmente non li ho mai accettati come designer grafico eccetera.

Pero' ho iniziato ad accettare nella mia vita astra come template.

Non ho nessuna affiliazione, nessuna cosa però mi piace e mi piace perché utilizza anche l'editor nativo di wordpress nuovo che gutemberg gira benissimo su php otto Fantastico veramente i siti che ci sviluppo miei personali di altri sono veloci e performanti.

Quindi um, proverei ad iniziare ad utilizzare le cose native dei software che anche se all'inizio possono sembrare anche un po' più difficile utilizzare poi a lungo termine hanno secondo me un beneficio, perché se son native significa che ci sarà poi un long time support e e sicuramente sarà sarà meglio.

Vediamo se c è qualcos Ltro, eh? Okay, l'ultimissima domanda.

Enzo M'.

Ciao, Andrea.

Commercio per Se volessi ottimizzare le immagini, perderei la CEO che ho acquisito nel tempo.

Oppure no.

Ovviamente cariche, Ray.

La stessa immagine ottimizzata? No, non credo.

Penso proprio di no.

Anzi, meglio.

Perché se tu carichi la stessa immagine ottimizzata, gli dica non gli cambi il nome.

Ok, a quel punto hai solo un beneficio.

Ok? Quindi, ehm fallo e poi svuota la cash.

Ok? Ok.

Grazie.

Grazie a te, TM.

Vi ringrazio tantissimo e spero di non avervi annoiato in quest'ora e quaranta minuti sono andato un po' lungo rispetto al previsto e spero vivamente che, insomma, queste informazioni vi siano d'aiuto per per migliorare, insomma, la velocità ai vostri siti web, soddisfare al meglio i vostri clienti, i vostri utenti e aumentare le conversioni.

Se avete qualche domanda, io sono sempre a disposizione.

Mi trovate E ancora Grazie, grazie, grazie.

Grazie anche alle urne per avermi dato questa splendida opportunità e sono davvero, davvero felice di aver condiviso con noi queste informazioni