Lezione dal corso SEO Core Web Vitals e ottimizzazione velocità sito web
Buonasera a tutti.
Eccoci.
Mi sentite? Fatemi sapere nei commenti se mi sentite bene.
Intanto aspettiamo che si connettono tutti.
Vi sentite bene? Perfetto.
Perfetto.
Aspettiamo che si connettono un po' anche gli altri.
Intanto, quanti di voi hanno mai sentito parlare di curva? Il bypass? Vediamoci un po' di un po' di ritardo.
Ottimo.
Vedo che qualcuno già già riconosce fondamentale dice Biagio.
Benissimo, verissimo.
Non vi preoccupate per coloro che non ne hanno mai sentito parlare.
Li vedremo nel dettaglio.
Spiegheremo esattamente quali sono, come si monitorano, come si, come si ottimizzano.
Soprattutto questo webinar sarà molto pratico perché vedremo nel dettaglio come si andrà a ottimizzare questo questo aspetto perfetto.
Anche Luca vede, sente Ok, partiamo.
Partiamo con le slide.
Allora Allora se un'esperienza utente è l'argomento di cui parleremo in questo webinar, nello specifico parleremo appunto di quelli che sono i cornflakes.
Intanto mi presento mi chiamo Luca, dovrà sono un consulente SEO da diversi anni e un blogger in quanto gestisco un blog di tecnologia.
Cosa vedremo in questo webinar? Innanzitutto ci sarà l'introduzione curve Beatles quindi come come già accennato, vedremo quali sono nel dettaglio e gli spiegheremo dettagliatamente.
Poi vedremo come monitorarli e come utilizzarli, ci sarà una sessione di ottimizzazione pratica di un sito web.
In questo caso sarà un sito web, sarà il mio sito web personale e un sito web in WordPress.
Però ovviamente tutto quello che vedrete sarà applicabile anche su qualunque altro vostro sito web, indipendentemente dalla piattaforma che avete utilizzato per svilupparlo.
Poi vedremo i risultati dell' ottimizzazione, quindi applicheremo queste ottimizzazioni e vedremo i risultati ottenuti e infine ci sarà una sessione di domande e risposte.
A chi è rivolto questo webinar? Allora sicuramente a chiunque abbia un sito web che sia il vostro sito web sul sito web di un vostro cliente.
Sicuramente vi sarà utile questo webinar perché si soffermerà su quello che è uno degli aspetti fondamentali, ovvero l'esperienza utente all'interno del sito web, ovvero la su quella che è la soddisfazione.
Se così vogliamo dire degli utenti che navigano il vostro sito web, poi a chiunque lavori nel web marketing, indipendentemente dal ruolo del ruolo che occupate all'interno che sia all'interno dell'azienda che siate di freelance, La parte di esperienza utente all'interno del sito web è fondamentale in qualsiasi parte del processo a chi progetta siti web.
Questo è fondamentale perché la parte di performance da parte di di ottimizzazione delle prestazioni dell'esperienza utente parte proprio da qui parte da quello che è la progettazione si dovrebbe nel momento in cui si progetta nel momento in cui si sviluppa, che è un'altra del un'altra, tipologia di pubblico che sicuramente interessata.
È fondamentale che si adottino quelle che sono le linee guida necessaria affinché si dovrebbe possa essere prestante.
E infine, appunto, ci sono gli sviluppatori sistemisti perché sviluppatori sistemisti? Perché entreremo nel dettaglio in alcuni punti, vedendo l'aspetto un po' più tecnico e soprattutto per quanto riguarda i sistemisti.
Entreremo nel dettaglio su su quello che è l'hosting quindi quello che è il servizio di gestione di un sito web, quindi dal dominio al web server che lo ospita.
Vi siete mai preoccupati le prestazioni del vostro sito web? Questo è importante sia per voi che per appunto, come dicevo prima, clienti, se ne avete è importante preoccuparsi di questo perché va a impattare poi anche tutte quelle che sono le fasi successive della conversione.
Se così vogliamo dire l'importanza delle prestazioni c'è stato uno studio.
Questo è uno studio del duemila diciassette di Google che ha preso in considerazione quattro casi rispetto al tempo di caricamento di una pagina internet.
In questo caso è andando ad analizzare la prima casistica, quella nel tempo di caricamento, che va dall'uno ai tre secondi.
Quindi, nel momento in cui un si trovava impiegate all'uno e tre secondi a caricare la probabilità di bounds, ovvero la priorità di abbandono da parte dell'utente sale del trentadue percento, quindi una percentuale relativamente bassa.
Se il sito web impiega dall'uno al cinque secondi a caricare questa, questa percentuale sale al novanta percento, si impiega fino a sei secondi, sale al centosei per cento e si impiega fino a dieci secondi.
Può salire fino al centoventi tre percento.
Questo cosa significa? Innanzitutto una delle domande che ci potremmo porre ok al mio sito web carica relativamente veloce carica in uno o due secondi è il primo modo per analizzare e se è così realmente è quello di aprire all'interno del proprio browser, una scheda in incognito e verificare che effettivamente sia così.
Perché? Perché nel momento in cui navighiamo un sito web abitualmente, prendiamo un sito web famoso come Amazon, sito web che tutti visualizzano, magari giornalmente settimanalmente le risorse di questo sito web vengono archiviate all'interno di una memoria chiamata cash, che fa sì che nel momento in cui l'utente le richiede la successiva volta vengono vengono recapitate all'utente in modo molto più rapido, vengono archiviate in modo complesso in modo tale che l'utente possa possa ottenerle la successiva volta in modo molto più rapido.
Quindi un modo per verificarlo innanzitutto quello di effettuare questo test con il browser in modalità in incognito, in modo tale che andiamo a escludere quella che la memoria cash e carichiamo il sito web come se se fossimo un utente, un utente nuovo per quel sito web.
Poi uno studio successivo di di Google, un po' più recente che ho messo.
La fonte sotto analizza come il cinquantadue percento.
Le visite sono propensa all'abbandono del sito web.
Se viene caricato in piu' di tre secondi e considerate che più di tre secondi è veramente facile, è come risultato ottenerlo per il semplice fatto che oggigiorno tanti siti web, soprattutto se parliamo ad esempio di WordPress, contengono diversi laghi in diverse funzionalità esterne.
Come possiamo pensare a Facebook, al pixel di Facebook, alle al codice di tracciamento delle conversioni di Voulez.
Quindi chiunque faccia pubblicità, chiunque utilizzi strumenti esterni, anche di analisi.
Questi strumenti ovviamente impattano su quelle che sono le prestazioni e il tempo di caricamento del sito web.
Poi una persona su due si aspetta che una pagina venga caricata almeno due secondi e infine il quarantasei percento delle persone afferma che l' attesa di caricamento di una pagina è ciò che odiano di più.
Quindi qua non stiamo andando solamente a discariche l'utente abbandoni, ma anche rischiare che l'utente si infastidisca in un certo senso e quindi che vada a rovinare quella che l'ha l'esperienza utente.
Fattori che influenzano il posizionamento su Google.
Allora qui ci concentriamo su quello che è l'impatto delle prestazioni per Google, o meglio su Google come motore di ricerca.
Quindi anche qui ho inserito le fonti sotto e in questa sequenza temporale vedremo quelli che sono gli angoli.
Gli aggiornamenti algoritmici algoritmici che Google ha effettuato nel corso del tempo è che con questi gli aggiornamenti algoritmici determina il posizionamento di un sito web all'interno del motore del suo motore di ricerca.
Quindi questi aggiornamenti vanno a compromettere quello che è il risultato di un sito web per un per un determinato termine di ricerca, vediamo che nel duemila dieci è stato il primo aggiornamento algoritmico che riguarda le prestazioni sulla velocità di caricamento.
Quindi duemila dieci.
Google ha affermato che la velocità di caricamento è diventata un fattore di posizionamento, quindi un sito web che carica in un tempo inferiore alla media ottiene un posizionamento peggiore.
Poi nel duemila e quindici va introdotto Wilfred Liam Welsh Friendly è l'aggiornamento che che si basa più sull'esperienza utente che sulle prestazioni che riguarda l'adattamento di un sito web su dispositivi mobili e tablet.
Quindi il fatto che un sito web su computer si abbiano dimensioni più grandi e sui vari dispositivi si adatti si adatta alle varie risoluzioni di schermo.
Nel duemila sedici, un anno dopo entro Trump.
Trump sta per Axel right mobile dei jeans e sono appunto delle pagine mobile, quindi per dispositivi mobili accelerate.
Nel senso che è un progetto sviluppato da Google internamente per far sì che gli sviluppatori potessero appoggiarsi a questo questo progetto e rendere il proprio sito web sui dispositivi mobili più facilmente accessibile, più rapidamente accessibile.
Probabilmente non avete mai sentito parlare di app, ma qualche anno fa sicuramente avrete visto l'icona di un fulmine all'interno di dei risultati di ricerca oppure all'interno anche dei social.
Si è social, come ad esempio Facebook, si sono appoggiati.
In un certo senso questa tecnologia quindi è un progetto che al momento è in fase di abbandono, per il semplice fatto che le prestazioni che si possono raggiungere anche senza champagne ormai stanno superando quello che è quello che è il progetto di per sé.
Infine nel Duemila duemila ventuno, quindi l'anno scorso, in circa ottobre Google ha reso reso come fattore di posizionamento come fattore determinante quella che è l'esperienza sulle pagine il colpo e poi tasche.
Tra poco vedremo cosa si intende con esperienza sulle pagine.
Questa è una sorta di infografica da parte di Google che fa vedere quelli che sono i fattori che Google tiene in considerazione per per definire quella che l'esperienza all'interno di una pagina internet.
Vediamo innanzitutto il corpo e bypass, quindi vediamo i tre valori che tra poco andremo ad approfondire, dopodiché vedremo.
È cioè il mobile friendly, quindi quello di cui abbiamo parlato poco fa l'adattamento all'interno di vari dispositivi nel sito web, poi vediamo https che per chi non lo conoscesse il protocollo sicuro che sicuramente avrete visto da qualche da qualche parte su qualche sito internet, magari avete visto sito web non sicuro nel caso in cui sito web non sia sicuro è un protocollo http mentre https quello che rende appunto sicura la lo scambio di dati all'interno di quel sito web.
E poi noi inclusi Inter Striscia, che sono tutte quelle pubblicità intrusive agli occhi di Google.
Quindi, ad esempio quelle pubblicità che ti impediscono di navigare un sito web.
Sicuramente vi sarà capitato su qualche su qualche blog, magari su qualche testata giornalistica, di entrare in un sito web, non riuscire nemmeno a leggere il contenuto da quanta pubblicità.
Quindi questa cosa cura ovviamente non piace come non piace agli utenti e di conseguenza influisce su quella che l'esperienza sulle pagine per Google.
Cosa sono i corvi e Beatles? Eccoci qua con Webb Tal sono tre metriche di riferimento che Google utilizza e che ha creato e sono nell' scontenti, forfeit first in più di lei e cumulativi shift che sono abbreviati nelle c, p f d e C.
L s l'argent content spent semplicemente è un elemento che Google prende di riferimento, che può essere un'immagine può essere una porzione di testo o qualsiasi altra cosa che per Google e la Brea diciamo più impattante della pagina e Google a monitorare quanto tempo impiega il sito web a caricare quel elemento.
Supponiamo appunto che apriamo un semplice un semplice articolo di un blog e ci sia un'immagine in evidenza.
Quindi un'immagine grande prima del testo.
È probabile che Google scelga questo l'argus content Serpent come come appunto come elemento determinante.
Quindi Google aspetta che carica che venga caricata quell'immagine nel momento in cui viene caricata quell'immagine abbiamo il tempo dell'argus content, quindi quello è scontato forse in più di lei, forse in più di lei, come come specificato nell'icona sopra indica l'interattività, ovvero indica il tempo in cui il browser elabora una richiesta.
Una richiesta può essere esempio.
Lo scollo può essere un click sul pulsante qualsiasi tipo di di interazione da parte dell'utente.
Il CNS invece, accumulati gli outfit, fa riferimento alla stabilità visiva.
Fa riferimento al fatto che durante il caricamento soprattutto, ma anche durante la navigazione, alcuni elementi possano spostarsi di posizione senza che l'utente abbia fatto nulla.
Vi sarà sicuramente.
Anche qui è capitato di entrare in qualche sito web, magari essere in procinto di fare clic su un pulsante o di fare clic sull'immagine e quell'immagine quel pulsante si spostano sopra sotto.
In quel caso ci è stato si è verificato del cumulativi shift, una variazione dell'immaginazione, mentre L'utente sta caricando la pagina mentre l'utente la sta navigando.
É questo a cui non piace.
Andiamo più nel dettaglio.
Il rais content Bennett fa riferimento sola.
Prendo quelli che sono dei punti chiave di ogni età, di ogni colpo ebbi tal e in questo caso l'arte scontento serpente fa riferimento al solo caricamento di pagina, quindi non fa riferimento a tutta la sessione di navigazione.
È un elemento che vuol prendere solamente per il caricamento di pagina.
Poi lo determina Google.
Quindi non possiamo in nessun modo dire Google.
Guarda, prendi questo di riferimento piuttosto che quell' Ltro è sicuramente uno degli aspetti che influisce su quella che è la scelta di Google è la grandezza dell'elemento.
Quindi se abbiamo, come dicevamo prima, il caso di un articolo di un blog, la grandezza è l'immagine, più grande sarà l'immagine.
È più facile che Google prenda quell'immagine come elemento per misurarlo.
Infine viene misurato in secondi.
Quindi, come vediamo nell'immagine di sinistra ci sono tre livelli di valutazione da parte di Google il livello buono che è inferiore ai due virgola cinque secondi di tempo di caricamento livello.
Il livello medio meglio richiede miglioramenti che tra i due virgola cinque quattro secondi e poi il livello scadente.
Diciamo che è oltre i quattro secondi.
Poi veniamo al first in piu' di lei questa diciamo che tra i tre corpi bypass la metrica piu' piu' in un certo senso superata nel senso che tutti gli utenti superano questo tu gran parte dei siti web superano questa metrica, poiché è difficile che che venga che passi.
Diciamo che il sito web passi nella fase del del risultato scadente e poi vedremo il perché fa riferimento solamente alla prima dell' interazione dell'utente.
Quindi quindi stiamo facendo riferimento solo al primo click sul pulsante al primo scroll o qualsiasi interazione faccia.
L'utente quindi non ha tutta la sessione di navigazione misura solamente il tempo di risposta al browser, quindi non misura poi il tempo in cui effettivamente il server ci impiega rispondere o il tempo in cui viene elaborata la la pagina e viene misurato in millisecondi.
Infine, ci ha accumulato un lauto shift che fa riferimento all'intera sessione di navigazione, come dicevamo prima, quindi non solo al caricamento della pagina, ma tutta la sessione di navigazione quindi se l'utente sta navigando, alcuni elementi non sono ancora stati caricati.
Può comunque generarsi del cumulative out non cresce se la variazione causata dall'interazione.
Quindi faccio un esempio molto semplice supponiamo che ci sia un pulsante che faccia apparire un modulo.
Se l'utente fa click su questo pulsante con scritto apri il modulo e il modulo viene caricato, chiaramente si sposta, si sposta quella che l'impaginazione di conseguenza c'è stato un cumulativi shift, però l'ha richiesto all'utente.
Di conseguenza il culatello outfit va a prevedere quella che l'interazione dell'utente la riconosce e quindi se c' è stata un' interazione dell'utente quindi ha una richiesta esplicita da parte dell'utente non viene considerata, quindi quella parte non viene considerata, non va a impattare sul.
Infine viene misurato in decimali, quindi non c' è un'unità di misura in seconda in questo caso perché si tratta di spazio che viene occupato da questi elementi.
Poi sui cumuli sui corpi Peters è importante fare due suddivisioni, ovvero i dati laboratorio ai dati degli utenti reali.
E ora vediamo quali sono i dati di laboratorio fanno riferimento a un solo ambiente di test.
Quindi è importante avere questa classificazione perché molto spesso capita di anche anche magari per chi lavora con i clienti.
Il cliente prende valutazione solamente i dati di laboratorio, che sono dati che vengono effettuate effettuati da un test da parte di Google che fa riferimento a una sola versione, il dispositivo che potrebbe essere utilizzata all'interno del sito web.
Ovviamente ogni sito web viene navigato da diversi dispositivi, da diverse connessioni, anche diversi luoghi del mondo, perché cambia anche se la persona si trova negli Stati Uniti o si sarà in Italia e di conseguenza sono non possono essere, diciamo presi in considerazione per tutto.
Quindi fanno riferimento a un solo ambiente di test che è quello che vuoi ci da' a disposizione per fare questi questi esperimenti.
Il tempo di elaborazione dei dati è immediato, quindi il vantaggio che se noi facciamo un'ottimizzazione lo vedremo dopo il risultato che otterremo lo vedremo subito, perché Google è un questo testo lo fa quando glielo chiediamo noi.
E poi i problemi sono diagnosticabile, riproducibili.
Questo è un grosso vantaggio, nel senso che nel momento in cui noi verifichiamo appunto che c' è un problema all'interno del sito web, possiamo diagnosticarla facilmente perché appunto questo testo richiediamo nell'immediato e possiamo riprodurlo, quindi possiamo vedere se l'abbiamo corretto oppure no in modo immediato, cosa che non accade con con i dati degli utenti reali.
Perché? Perché i dati degli utenti reali fanno riferimento alle sessioni, ad esempio di Fulcrum.
Quindi non prendono riferimento quelle che sono le sessioni con firefox, quelle che sono le sessioni con safari e via dicendo.
E questo può essere un po' penalizzante, perché se pensiamo che abbiamo un sito web che parla di dispositivi apple e quindi la gran parte dell'utenza arriva da browser safari, non abbiamo tutti altre disposizioni per capire se effettivamente gli utenti stanno navigando e stanno superando i poitras oppure no.
Il tempo di elaborazione dei dati può essere lungo.
Infatti walt prende il riferimento una finestra di ventotto giorni per fare questa valutazione.
Quindi pensate che se oggi che vedo una modifica vedo una ad esempio un dato che non mi piace all'interno di baby that's sui dati degli utenti reali e faccio la sistemazione di questa di questo elemento, vedrò il risultato su sugli utenti reali tra ventotto giorni ho spesso poco meno i problemi non sono diagnosticabile, sono difficilmente riproducibili, nel senso che se vediamo che un utente reale quindi una persona che si trova chissà in quale parte d'italia o anche al di fuori dell'italia con chissà quale dispositivo con chissà quale browser.
Ha avuto un esempio CLS molto alto, un cumulativa uscite molto alto e noi non possiamo capire effettivamente come hanno avuto.
È possibile che l'abbia avuto perché utilizza un browser, magari che ha qualche tipo di problema e per cui elabora l'immagine in modo diverso e di conseguenza generare questo errore.
Però per noi questo errore non è riproducibile, non è facilmente replicabile, quindi facciamo anche fatica diagnosticarla passiamo quindi ha come misurare curve Beatles e tra poco entreremo nella pratica.
Ma partiamo dai dati in laboratorio perché anche gli strumenti utilizzati per i vari test sono differenti.
Per quanto riguarda il laboratorio possiamo utilizzare golpe in Speed Insights che lo strumento ufficiale di Google possiamo utilizzare la Google Chrome Hearts che diciamo una funerea, una console Walt ci mette Google Chrome ci mette a disposizione per tutti gli utenti con cui possiamo andare a vedere nell'aspetto più tecnico.
Un aspetto più pratico, alcune alcuni aspetti, alcune analisi, tra cui appunto quella dei Capitals e infine Google Lighthouse.
Anche questa è un'estensione, ad esempio di Walt Chrome, ma è inclusa anche all'interno di della Roberts e quindi anche qui possiamo andare analizzare sempre prendendo a riferimento i dati di laboratorio, quindi i dati in questo caso del nostro computer.
Quindi è solo no del del nostro ambiente di test che abbiamo quindi il nostro computer con la nostra connessione con la nostra località e via dicendo possiamo appunto effettuare di testa.
Vediamo poi come misurare i Beatles sui dati degli utenti reali.
Quindi quello che quello diciamo, che viene raccolto da Google, che viene elaborato e messo a disposizione per gli sviluppatori, chi chi fa il nostro lavoro? Vediamo che abbiamo ancora golpe With Insights.
Questo è lo strumento ufficiale di Google che appunto ci dà disposizione sia i dati di laboratorio che i dati degli utenti reali.
Poi l'altro mio ex report.
Questa è una una dashboard di Google data studio per chi lo conoscesse, che è un sistema di analisi dati, uno strumento di analisi dati.
E questa questa dashboard che ha messo a disposizione i gol ci permette di vedere per qualunque sito web, quindi anche che non sia nostro, che non abbiamo dati a disposizione.
Quali sono i suoi colpi col baby that's rispetto a quelli che sono i dati degli utenti reali.
E possiamo anche vedere tante altre informazioni utili, come ad esempio con quali dispositivi navigano principalmente gli utenti di quel sito web e via dicendo.
Questo può essere tanto utile anche nel momento in cui si analizza la concorrenza, perché se pensiamo di avere un sito web di Lo so che produce armadi, noi andremo, andremo a cercare la concorrenza e di conseguenza potremo analizzare quali, ad esempio con quale dispositivo accedono ai siti web della concorrenza e quindi sulla base di quello costruire un sito web che sia più adatto a quello che è il nostro business.
E infine Google Search Console.
Per chi non lo conoscesse, una, appunto, una console, quindi un pannello di controllo che vuol mette a disposizione per qualunque dominio, per qualunque sito web che ci permette non solo di vedere i corvi baby that's sulla parte degli utenti reali, quindi sui dati raccolti da Google, ma anche di analizzare tanti più aspetti riguardanti la CEO, quindi riguardanti quello che è il posizionamento dei siti web sui motori di ricerca.
Questo sempre riguardo riguardo Walt, quindi non riguarda gli altri motori di ricerca.
Ok, passiamo alla pratica ora vi faro' vedere, prendendo a riferimento ad esempio, il mio sito web personale.
Condivido lo schermo.
Okay, buona sera.
Ok, perfetto.
In questo caso facciamo una breve analisi di quello che la situazione attuale del mio sito web e analizziamo quelli che sono in corso i Beatles, un sito web che ho creato da che ho creato da poco, quindi ho messo online da poco e al momento non ho ancora applicato alcuna ottimizzazione dal punto di vista delle prestazioni.
Quindi andiamo su Google Pixel Insight.
In questo caso, ovviamente, non possiamo prendere il riferimento.
Tutti quelli che sono i vari strumenti che abbiamo abbiamo visto per ovvi motivi, per motivi di tempo.
Chiaramente però vedremo nel dettaglio con Page Speed Insight è lo strumento più utilizzato in assoluto.
Quali sono tutti i valori da vedere di riferimento? Quindi prendiamo il mio sito web, incolliamo qui e analizziamo lo Innanzitutto vediamo una cosa interessante, ovvero che Goldman Sachs Insights ci mette a disposizione sia i dati dei dispositivi mobili che vuole dire stop.
È importante avere questa differenziazione in modo tale che noi ci rendiamo conto di come differiscono le le le informazioni, ma anche le prestazioni dai vari dispositivi.
Apro, lo apro su firefox perché vedo che spesso dentro Ok, facciamolo.
Okay, chiudiamolo.
Eccolo qua.
Allora rifacciamo.
Analizza.
Eccolo qui.
Abbiamo appunto i dati, i dispositivi mobili ed stop, come vedete già il punteggio, che è quello che è un punteggio, ovviamente da prendere molto con le pinze.
Perché un punteggio che assegna Google sulla base di alcuni elementi sulla base di alcuni tempi di risposta, diciamo già differiscono, ovviamente.
Perché questo? Perché questi sono dati di laboratorio, come dicevamo prima, e al momento non abbiamo alcun dato sull'esperienza degli utenti reali.
Perché? Perché, come diceva il sito web messo online da pochi giorni e di conseguenza Gul non ha raccolto abbastanza dati affinché possa darci una valutazione complessiva.
Quindi noi prenderemo di riferimento quelli che sono i dati di laboratorio, ovvero questi.
Come facciamo a sapere che sono andati in laboratorio? Lo vediamo qui.
Qui vediamo che in questo caso qui vediamo quello che l'ambiente di test in quest'area grigia e vediamo che il dispositivo utilizzato é un motore quattro motorola G quattro emulato su White House.
Quindi vediamo che è un'emulazione della visualizzazione del mio sito web.
Non è la situazione reale, non è nemmeno la situazione della vista dal mio computer.
Non solo.
Vediamo questo vediamo anche che c' è una connessione in uso che è una limitazione a quattro g lenta.
Quindi quello che sta facendo google sta aprendo un ambiente di test che è sempre questo che sarà sempre questo almeno per probabilmente per i prossimi mesi o anni ed è con un moto qua mò tu dici quattro che appunto un telefono parecchio datato con una connessione e quattro g lenta, quindi aprendo il riferimento, quella che potrebbe essere la media dei dispositivi mobili che navigano il vostro sito web.
Chiaramente se un utente canale del vostro sito web con un iphone su una connessione cinque g avrà delle prestazioni molto migliori di quella che è di quello che è questo ambiente di testa, però noi abbiamo questa media e quindi possiamo valutare purtroppo solamente questo, mentre la parte destra hop allo stesso modo quello che fa e fa gol emula appunto con una vista desktop.
Non ci dice in questo caso il dispositivo diciamo in uso e anche qui c'è una limitazione in termini di banda che è di dieci megabit me si megabit al secondo, quindi partiamo vedendo quali sono i vari, le varie metriche.
Google utilizza Innanzitutto vediamo che troviamo solo alcuni dei writers.
In questo caso vediamo solamente l'aria scontenta sul pene e il cumulativi shift.
Non vediamo il first input di lei perché non lo vediamo? Perché il forcing su di lei è un dato che purtroppo vuol può acquisire solo dagli utenti reali.
Non può fare non può fare un ambiente di testa una simulazione su un clic perché ovviamente ogni click è differente perché non sa esattamente neanche dove si trova l'elemento del click e ogni interazione differente.
Quindi Walt, questo dato non ce l'ho non ce lo fornisce.
Vediamo solamente l'argus content spent, cumulativi shift e altre metriche che ora vedremo insieme la prima first contact fulbright e e non è nient'altro che il primo elemento che viene viene generato viene reindirizzato, quindi viene visto all'interno della pagina.
Quindi non è il più il più il più grande come fa il corpo di byte dell'hardware scott, ma è il primo elemento in questo caso potrebbe essere il luogo potrebbe essere il titolo o qualsiasi altra cosa, poi il tempio interactive.
Quindi il tempo in cui l'utente può interagire con la pagina.
Io vado a caricare per la prima volta questa pagina e non posso subito interagire perché sono ancora caricando gli elementi.
Quindi mi sta dicendo che io potro' interagire dopo due virgola sei secondi.
Poi ce lo speed index.
Questo è semplicemente una metrica che Google utilizza per valutare la diciamo la velocità generale complessiva, diciamo è quello che sarebbe in un certo senso un po', il tempo di caricamento quasi totale della pagina e poi c'è il total blocking time.
Questo è il tempo di blocco, appunto della pagina e per blocco si intende un momento in cui l'utente non può far nulla.
La pagina però bloccata all'utente crescente reagire.
E infine troviamo il jobs content sul pene cumulative shift.
In questo caso vediamo che i dati sono il rosso arancione, quindi significa che stanno super non stanno superando quelli che sono quelli che sono gli standard di Google, quindi non stanno superando questa valutazione.
Sotto nello specifico vediamo quello che è.
Innanzitutto qui vediamo in queste schermate quello che è stato il caricamento le fasi di caricamento del sito web.
Perché è molto importante perché supponiamo che questa immagine generi cumulativi shift.
Noi vedremo ad esempio qui allora vediamo molto in piccolo prova a fare un po' di zoom.
Okay, ci vedremo qui.
Non vedremo, magari nulla.
Vedremo.
Luca l'ha proprio scritto qui nella parte alta e poi nella schermata successiva Luca proprio slitterebbe sotto e quindi capiremmo che questo ci generato dall'immagine proprio da questa immagine.
Quindi possiamo vedere in queste fasi di processo di render quindi di elaborazione del diciamo dei dati.
Possiamo vedere, diciamo quelli che sono i problemi, quindi diagnosticarla.
Dopodiché Google ci fornisce delle opportunità, cioè quelle che sono secondo lui le miglioramenti da applicare a questo sito web.
Qui in questo caso ci dice pubblica immagini informati più recenti e ovviamente ha ragione.
In questo caso, per esempio, è un'immagine scattata con una macchina fotografica e salvate in formato png, quindi non in formato compresso.
E ovviamente, come vedete il peso di un megabyte tre ed è molto, molto elevata per un'immagine.
Quindi Google ci dice Guarda, puoi risparmiare fino a sei secondi se vai a ottimizzare questa immagine.
Dopo vedremo nello specifico come farlo, non vi preoccupate.
E dopodiché ceh usa immagini di dimensioni adeguate perché anche qui l'immagine è stata caricata.
Ora non mi ricordo.
La risoluzione comunque è stata caricata con la risoluzione della macchina fotografica, quindi non arriva una risoluzione molto alta.
Tuttavia, Google identifica questa immagine non viene caricata a tutto schermo di di larghezza, per intenderci, viene caricata solo in una in una risoluzione inferiore.
Di conseguenza ci dice guarda, fai sì che l'immagine venga caricata una risoluzione inferiore di quella che hai caricato tu e in questo modo potresti risparmiare.
Come vedete qui sul potenziale riduzione potresti risparmiare novecento kilobyte l'immagine, quindi far sì che l'immagine pesi solo quattrocento chilometri.
Ovviamente questa opportunità variano in funzione del vostro sito web del sito web che state analizzando.
Quindi se state analizzando il sito web, che non ha alcun tipo di ottimizzazione, magari è stato anche sviluppato male.
Oppure magari ha un sito web WordPress in cui sono stati caricati temi poco aggiornati.
Ho tanti plugin.
Le opportunità possono essere una lista di dieci quindici ottimizzazioni che lo consiglia, mentre sotto infine, cioè la parte diagnostica, cioè quello che quelli che sono degli altri dati che Google prende in considerazione.
Come non lo so, evita di concatenare le richieste fondamentali piuttosto che ma mantiene un numero ridotto di richieste.
Tutti degli altri consigli che, diciamo in linea generale Google da sempre é sotto, vediamo i controlli superati.
Quindi facendo mostra possiamo vedere quelli che sono quelli che potrebbero essere le opportunità, ma in realtà sono già state superate.
Sono già state migliorate di minimizzare il css, eliminare risorse di blocco e via dicendo.
Sono tutte cose che comunque vedremo dopo.
E dopodiché ce la parte dello stop la parte dello stop.
Come vedete, il punteggio è più elevato.
Un po' per il fatto che il dispositivo che utilizzano per l'ambiente di testa è un po'.
Più è un po' più recente e soprattutto c' è una limitazione alla connessione di rete.
Un po' piu' un po' migliore, diciamo e di conseguenza il risultato a livello di punteggio è più alto.
Nonostante ciò, vediamo che ci sono comunque delle migliorie da fare.
C' è un piccolissimo cls considerato che il CFS deve stare al di sotto dello zero virgola uno.
Quindi in questo caso è veramente ridicolo.
Possiamo anche non prendere in considerazione e dopodiché mi da dare un po' gli stessi consigli che mi dava per la versione smartphone.
Chiaramente Ok, quindi qui abbiamo visto ora come analizzare un sito web su dal dal punto di vista dei dati e dei dati di laboratorio.
Ora, se prendiamo invece un sito web dal punto di vista dei materiali, prendo in questo caso ancora per non mostrare i dati dei clienti.
Prendo il mio il mio blog Ok, prendiamo un articolo qualunque e questa è una cosa molto importante.
Cercate di non analizzare necessariamente la homepage di un sito web perché pensiamo, ad esempio un e-commerce sull'e-commerce.
Probabile che un utente principalmente arrivi su una pagina prodotto che sulla packer sulla pagina iniziale del commercio.
Di conseguenza, dobbiamo prendere in considerazione quelle che sono le pagine piu' viste dagli utenti in modo tale da da poter analizzare quella che è veramente la versione che poi vedrà l'utente perché serve sulla home page ci va solamente il per cento del traffico.
Possiamo ottimizzare la va benissimo, però è ininfluente.
Quindi adesso prendo il riferimento a un articolo qualunque.
Okay, ok, qui vediamo adesso quelli che sono i dati, i dati reali.
Quindi vediamo che sotto sotto a scopri come l'esperienza dei suoi utenti reali vediamo quello che è.
In questo caso però non fa riferimento fa riferimento alla pagina iniziale.
Ok, allora cos'è successo.
Vi spiego questo articolo in questo caso è abbastanza recente, quindi Google non ha comunque abbastanza dati.
Però cosa dice? Per questo come vedete qui non ho abbastanza dati.
Però ti faccio vedere i dati dell' origine e per origine si intende la pagina iniziale.
In questo caso va bene, tanto è solamente un un test, quindi vediamo che per la pagina iniziale, quindi la homepage di questo sito web la valutazione superata da Google direttamente ci dice superata, non superata.
Considerate che anche un solo valore che non è corretto, ad esempio il cumulato invio shift che lo che supera quello che lo standard per Google va a far sì che la valutazione non sia superata.
Quindi è importante che tutte e tre le metriche tutti e tre i corpi Beatles siano siano ottimi per Google.
In questo caso vediamo i valori un po' diversi dati di laboratorio che troviamo sotto.
Innanzitutto vediamo che i dati di laboratorio al laboratorio sotto c'è un punteggio che è abbastanza basso, nonostante effettivamente non sia così realmente e quindi già questo ci fa vedere la differenza di quello di cui parlavamo prima tra i dati di laboratorio, i dati degli utenti reali.
Dopodiché vediamo che l'argus scontenti spento e quindi è una dell'elemento più importante del corpo e Beatles è inferiore.
È un secondo, quindi è nettamente inferiore ai due virgola cinque secondi che ci impone Google.
Vediamo che c' è un first in piu' di lei di dodici mila secondi e vediamo che abbiamo un accumulati lo shift di zero quindi sono superati.
In questo caso, qualora non fossero superati, Vulci dici direbbe non superato.
Troviamo poi altre metriche rilevanti che sono il first cut content Serpent che abbiamo visto prima l'inter action Jack spent che adesso vi spiegherò e il tenente Rivers byte interaction spent è una metrica che va a indicare è un po' come farsi input.
Lei va a prendere quello che è la quella che l'interazione dell'utente, ma lo va a prendere su tutta la sessione di navigazione, quindi a prendere tutte le possibili interazioni dell'utente.
In questo caso, prendendo i dati reali, prende tutte quelle che sono state le interazioni dell'utente all'interno del sito web e prende il tempo appunto il tempo di risposta di queste di queste richieste.
Infine celt first byte per byte e il tempo di risposta al server, quindi non è il tempo in cui server ci in cui scarichiamo una risorsa la serie, ma è solo il tempo di risposta, quindi il server ci risponde in quattrocento millisecondi, in questo caso quattro decimi di secondo e dopodiché in altro magari in altri due o tre decimi secondi.
Io scarico la richiesta, la stessa cosa facciamo sud stop.
Vediamo che anche qui è superata e notiamo subito che al click cambiano i valori, perché chiaramente su dispositivi mobili e su desktop i valori possono possono variare per diversi motivi, sia per come è stato sviluppato il sito web, soprattutto se avete dei temi e ci sono proprio delle versioni differenti.
È possibile che una versione sia più pesante delle altre e soprattutto perché i dispositivi che cambiano considerate ad esempio che da stop la gran parte degli utenti naviga col col cavo.
Di conseguenza col cavo di rete abbiamo una navigazione molto più rapida e con zero là con quasi zero latenza, mentre su dispositivi mobili è possibile che l'utente stia aprendo il sito web dal treno, magari dove prende proprio la connessione o comunque sia utilizzando una connessione che non è che non è il massimo.
Infatti vediamo che i dati su desktop sono ulteriormente ulteriormente migliori in alcuni aspetti.
Ok, torniamo.
Torniamo adesso alle slide.
Eccoci qua.
Ok, prendiamo ora vediamo come ottimizzare il large scontento sul pene, il first in piu' di lei, perché il first in più di lei, in realtà, come come dicevo prima, è una metrica che veramente il novantanove percento dei siti web passa, quindi supera.
Di conseguenza è difficile come il web se ne debba preoccupare.
Tuttavia, le ottimizzazioni dell'argus content sul pene vanno anche ottimizzare quello che il forcing su di lei.
Quindi partiamo da prendiamo, diciamo partiamo da ambienti stagni e vediamo elemento per elemento quali sono le e le possibili ottimizzazioni.
Io ne cito alcune e ovviamente non non entro nel dettaglio di ognuna di esse per sempre.
Per motivi di tempo è tuttavia l'importante è capire la teoria a capire il concetto che c' è dietro questa questa ottimizzazione e poi vedremo nel pratico anche come applicarle.
Quindi per quanto riguarda l' hosting, sicuramente uno il primo consiglio è quello di utilizzare il DNS veloci qui c' è cioè un qui si guadagna in pochi millisecondi.
Spesso, per chi non lo sapesse, i DNS sono sono quelle diciamo quelle chiavi che sono associate a un dominio che fa sì che il dominio corrisponda a un determinato servizio.
In questo caso il servizio potrebbe essere Google è un che appunto un fornitore di domini può essere cloud, server, dns ed easy e via dicendo.
Quindi utilizzare dns, ad esempio di un servizio di hosting che magari non è molto conosciuto e potenzialmente scadente, significa in alcuni casi anche ridurre di cento duecento mila secondi il tempo di elaborazione di questo di queste di queste chiavi.
Se così vogliamo dire, poi predisporre un buon web server, quindi il web server e quello e gli serve appunto all'infrastruttura che va a ospitare il vostro sito web.
Quindi ogni sito web abbiamo ospitato all'interno in un'infrastruttura offerta dal servizio di hosting o in alcuni casi offerta direttamente da voi, nel senso che non potete gestire tranquillamente voi prendere a noleggio farvela in casa e questa questa infrastruttura dev'essere di essere aggiornata.
Quindi utilizzare un protocollo http due ad esempio utilizzare il tre e il in uno punto tre e utilizzare i servizi di compressione dei file come gzip rotoli.
Questi sono sono tutte tecnicismi che ci permettono di avere il massimo delle prestazioni dal punto di vista del server, perché, come abbiamo visto prima nel tempo di risposta del server, il primo ad elaborare la richiesta di ogni caricamento in un sito web.
Proprio server, quindi il server che a monte deve essere performante.
Gigi gigi per protesi sono molto importanti perché sono degli algoritmi di compressione che ci permettono di far si' che un'immagine che un supponiamo ad esempio una pagina html vada a pesare da invece che cento kilobyte, magari venti kilobyte.
Quindi ha una compressione molto alta e nonostante ciò mantiene la pagina la struttura così com'è quindi senza perdita diciamo di qualità, poi configurare un sistema di cashback lato server l'abbiamo accennato prima.
Il sistema di Keating non è nient'altro che quel sistema che fa sì che nel momento in cui l'utente fa carica una pagina, questa pagina venga presa.
Questi diciamo le risorse contenute all'interno di questa pagina vengono prese da una memoria che può contenere che può contenere sia il server che il vostro browser, che vuole che le fornisca in modo più più complesso e più veloce.
Quindi supponiamo che ci sia un'immagine da due megabyte come previsto prima del mio sito web.
Cosa succede che la prima volta carico questa immagine ci mette un po'.
Perché effettivamente scaricare due megabyte dopo che la carico, il mio browser esempio potrà tenerla nella sua memoria all'interno del mio computer e la prossima volta che carica il sito web, questa immagine viene elaborata molto più rapidamente, quindi non vediamo più l'immagine che sta caricando.
In questo caso faccio riferimento a Fast cash in funzione diciamo del web server che utilizzate se Cash sta per Light speed cash mentre fa fast, mentre Fast può essere utilizzato sia sua pace che su GINEX, che sono appunto sempre dei web server.
Poi configurare un sistema di cash in oggetti Marrakesh ed in questo caso e può essere molto utile perché questa questa memoria viene, diciamo che viene.
Viene utilizzato questo sistema per archiviare quelle che sono le le richieste dal punto di vista del database piu' comuni all'interno di supponiamo WordPress se utilizzate WordPress e vengono archiviate in quella che è la memoria RAM del vostro server, in modo tale che vengano elaborate in pochi millisecondi.
Infine, ottenere un tempo di risposta del server rapido, quindi l'abbiamo detto anche prima riguardo il time to first byte, che è proprio questo il tempo di risposta del server è fondamentale.
Chiaramente il tempo di risposta del server varia da come ho detto prima, da vari fattori e soprattutto varia dalla posizione geografica in cui si trova l'utente.
Perché si trova ad esempio negli Stati Uniti il tempo di risposta del server sarà molto alto se avete un servo in Europa, quindi questo è importante valutarlo in funzione di quelli che sono i vostri utenti.
Quindi, se avete utenti solamente dall'italia, valutate di acquistare un servo in Italia o al massimo in Europa.
Se avete utenti da tutto il mondo, valutate di acquistare più server e gestire oppure affidarvi a una CDN, quindi a un sistema come cloud FLIR che una rete distribuita in tutto il mondo che permette agli utenti di avere accesso al vostro questo web nel server piu' vicino disponibile.
In questo caso non andiamo a vedere nella pratica perché sono aspetti troppo tecnici e che richiedono troppo tempo.
Passiamo poi alle immagini compri Merle riducendone il peso.
Ovviamente la comprensione delle immagini può essere di tipo si dice l'hostess, ovvero senza alcuna perdita di qualità e nonostante ciò ci permette di ridurre il peso dell'immagine se vogliamo ridurre il peso ulteriormente.
Ci sono altri sistemi di comprensione che adesso che adesso vedremo che ci permettono di avere una leggera perdita di qualità, ma in compenso una una forte riduzione del peso dell'immagine quindi l'utente di fatto non va a percepire quella che è la riduzione della qualità di immagine, ma allo stesso tempo andiamo a ridurre molto il peso.
Puoi utilizzare un formato vettoriale o moderno, quindi in formato vettoriale faccio riferimento a quelli che sono ad esempio, se bugie, un formato d'immagine vettoriale, nel senso che è composto da dei segmenti, da dei vettori che sono che ci permettono di avere questa.
Questa immagine diciamo, ridimensiona, abile a qualsiasi dimensione senza che ci sia alcuna alcun tipo di perdita di qualità, perché come se fosse un insieme appunto di tanti piccoli segmenti, tante piccole linee che di fatto non sono, non vanno come vanno a comporre un'immagine, ma senza che siano un insieme di pixel che perdono di qualità, ma appunto un insieme di segmenti che appunto qualunque dimensione li andiamo a ridimensionare, ci permette di avere sempre la qualità massima.
Web P e avi fu invece sono deformati le immagini più recenti, ad esempio, è stato sviluppato da google, se ricordo bene che ci permettono di avere anche qui per la stessa immagine, per la stessa qualità di immagine.
Una compressione molto più alta, quindi un peso dell'immagine molto più ridotto.
Puoi utilizzare il ridimensionamento attivo adattivo.
Il dimensionamento adattivo lo abbiamo visto prima, è fa riferimento al fatto che molto spesso all'interno dei siti web vengono caricate le immagini, magari scattate con una macchina fotografica o anche semplicemente con lo smartphone.
Lo smartphone molto spesso fa scattare con venti megapixel di risoluzione, quindi le immagini possono essere molto, molto più grandi rispetto a quanto ne ha bisogno.
Siti web.
Quello che quello che accade è che col ridimensionamento adattivo possiamo andare a far sì che l'immagine venga automaticamente ridimensionata in funzione della grandezza della del dispositivo in uso.
Quindi se stiamo utilizzando ad esempio uno smartphone l'immagine sarà grande così sarà grande poche centinaia di pixel se stiamo utilizzando una tv quattro k sicuramente ha una dimensione molto piu' grande pero' cosa succede che più piccolo dispositivo e meno pensare all'immagine e quindi non è un grosso vantaggio per noi per le prestazioni.
Poi precari carl si presenti nell'area immediatamente visibile con la funzione per il od allora cosa succede che l'immagine come quella che abbiamo visto prima del mio sito web in cui cioè la mia faccia come come area immediatamente visibile ebrea che viene mostrata proprio nel momento in cui io carico la pagina, si può pre caricare questa funzione chiamata chiamata appunto payload, che ci permette di pre caricare quell'immagine come primo elemento in modo tale da dire al browser guarda, questa è l'immagine che serve subito ancora prima degli altri elementi.
Questa è fondamentale se ad esempio quell'immagine fa viene appunto presa da Google in considerazione come lars Content serpent.
Di conseguenza quello che accadrà è che l'argus content sarà molto più rapido per quell'immagine l'avremmo pre caricata.
Poi ritardare il caricamento delle immagini secondarie con il payload Parolisi Lod, come dice il termine cioè caricamento pigro caricamento sia appunto pigro, ci permette di far sì che alcune immagini vengono caricate successivamente.
La cosa faccio riferimento.
Supponiamo di avere un sito web molto lungo da scrollare, quindi faccio scrolls.
Conosco il il sito web molto lungo perché è molto contenuto, è inutile che ha il caricamento di pagine.
Andiamo a caricare, andiamo a far caricare il browser, tutte le immagini, tutti gli elementi li possiamo far ricaricare, far caricare progressivamente man mano che l'utente fa lo scroll col pollice e l'indice man mano che lo fa col mouse.
Il browser va a caricare quelle quelle immagini, quegli elementi così facendo.
Cosa succede? Che leggeremo di molto il tempo di caricamento iniziale della pagina e rendiamo progressivo appunto questo questo upload, strumenti utili a riguardo.
In questo caso prendo sempre di riferimento appunto WordPress, perché la piattaforma più utilizzata.
Poi ci sono anche altri strumenti per altre piattaforme.
In questo caso faccio riferimento a strumenti che per esperienza personale sono sui migliori, sono i più stabili e soprattutto sono molto spesso anche gratuiti.
Infatti in questo caso abbiamo i primi due che sono gratuiti per un tot di visite, dopodiché possono diventare a pagamento, mentre i magi è direttamente a pagamento.
Quindi il primo che vediamo e short pixel adattivi magis quindi è un plugin di WordPress che, come dice il termine, e ci permette di avere le immagini adattive.
Quindi quello che abbiamo fatto riferimento prima sull'adattamento dei vari dispositivi abbiamo tmall che fa la stessa la stessa cosa e abbiamo i mezzi in questo caso per per darvi anche un'idea di quello che è il il sistema da loro utilizzato per spiegarmi un po' più nel tecnico, magari per le persone un po' più tecniche.
Ehmm Shore Pixel utilizza una CDN, appunto, una rete distribuita in tutto il mondo che si chiama Bunny CNN, mentre Optimo lo utilizza cloud front.
Se ricordo bene che è quella di Amazon, quindi si basano su reti comunque molto conosciute.
É molto stabili.
Passiamo alla pratica, quindi anche qui adesso andremo a vedere nel pratico come ottimizzare le immagini.
Ok, allora facciamo una cosa adesso entriamo in quella che è la Roberts che quello di cui vi ho parlato prima, cioè questa console, questo pannello di controllo che ci permette di vedere dal punto di vista tecnico di analizzare un sito web per farlo.
Facciamo tasto destro in un qualsiasi punto del del sito web all'interno di Google Chrome, ma questa funzione ce l'ha anche Firefox e se ricordo bene, anche safari facciamo un passo dall' estero ispeziona.
É quello che accade ora.
Io la vedo in questo modo, ma e voi probabilmente la vedrete così.
Quello che accade é che si apre questa console sotto che ci fa vedere del codice? Innanzitutto vi faccio vedere come metterla in questo modo.
Basta fare clic su questi tre punti e sulla voce Dock Side Street era la terza voce in modo tale che questa vada al di sotto di quello che il sito web in modo tale che vediamo sia il sito web sia il il codice che ci interessa.
In questo caso la alziamo anche un po' per vedere un po' meglio é quello che andiamo a fare.
Ricarichiamo la pagina nel momento in cui ho ricaricato la pagina.
Questo questo sistema ha analizzato quelli che sono tutte le risorse caricate dal sito web.
Ce ne andiamo in network, quindi in rete se ce l'avete in italiano ma di base dovrebbe essere in lingua inglese noi vedremo alziamolo ancora un po', diciamo così perfetto, noi vedremo tutte quelle che sono le risorse qui sto passando con il mouse che il server a ha mandato al mio browser, quindi a Google Chrome che ho scaricato, quindi vediamo qui tutte le richieste.
Vediamo qui ad esempio Luca appunto in questa è la html, quindi il contenuto della pagina sotto vediamo i css che sono i fogli di stile per chi li ha mai sentiti nominare é sotto vediamo ad esempio di script, quindi daiquiri altri iscritti che prescrive può essere esempio del pixel di Facebook può essere strumento di conversione di Voulez.
Può essere Hotchner o qualsiasi altro strumento utilizzato per l'analisi dei dati.
Quindi qui vediamo tutto quello che ci serve.
Ora andiamo ad applicare un filtro invece che suol.
Spostiamoci su MG sta prima Jess, andiamo.
Analizzare solo le immagini, che in questo caso è quello di cui stiamo parlando.
Ora vediamo che ha scaricato varie immagini.
Vediamo anche il loro formato.
Ad esempio, alcune sono che ìl vettoriale di cui parlavo prima, altre sono in PNG.
Quindi vediamo ad esempio che troviamo l'immagine della mia faccia del mio volto in formato PNG e se passiamo sul sulla parte destra, vediamo che, come sotto la voce, il peso di una virgola quattro megabyte quindi è elevatissimo, chiaramente per una per una e una sola immagine.
Perché immaginate di avere varie immagini di questo tipo all'interno del sito web.
Ovviamente l'utente soprattutto sta navigando magari dello smartphone su un treno in un punto in cui non prende bene.
Impiegherà anche dieci quindici secondi a caricare questa immagine e come vedete a destra come tempo di caricamento è quello è quello più elevato.
Chiaramente, in questo caso io sono sotto fibra, quindi è anche relativamente leggero pero'.
Come vi dicevo in funzione della rete in uso al dispositivo in uso puoi può diventare molto elevato.
Quindi questa immagine sicuramente da ottimizzare.
Per quanto riguarda le altre sono immagini sv quindi deformati vettoriali che come vedete hanno un peso ridicolo.
Stiamo parlando di byte addirittura o di kilobyte e di conseguenza non vanno a impattare minimamente.
Non sono ulteriormente ottimizzati lì.
Però questa immagine sicuramente sì, perché considerate che se torniamo su Walt noi vediamo qui il peso totale della pagina che è di in realtà quello compresso e di una virgola otto megabyte di cui una virgola quattro megapixel dell'immagine, quindi il peso totale è di quattrocento.
Il restante parte quell'immagine lì ora quindi andiamo ad utilizzarla, chiudiamo andiamo WordPress o in questo caso nel pannello di controllo andiamo su Aladeen e in questo caso, ovviamente non possiamo fare il test.
Tutti gli strumenti di cui ho parlato l'utilizzo dello strumento a cui sono più sono più abituato l'utilizzo più che utilizzo maggiormente che si chiama shore pixel.
Quindi andate a cercare il plugin fa andate su aggiungi nuovo citate Shakespeare che ha più versioni in realtà perché c'è anche la versione per organizzare le immagini senza appoggiarsi alla sua rete CDN di cui parlavo prima installiamo short pixel, l'adaptive bagels e questo qui io ho già installato, faccio attiva.
Ok, ora ho attivato il plugin e se noi andiamo su Google Pixel Adaptive se schiacciamo impostazioni, andiamo sulle relative impostazioni di questo panino.
Vediamo innanzitutto che non mi ha nemmeno fatto creare un account.
Questa è una cosa molto comoda e soprattutto mi ha associato a quello che il dominio considerate.
Che shock sarà un limite in questa versione è il limite è basato su quante immagini fate elaborare Sharp Pixel.
Quindi quante immagini volete ottimizzare? Chiaramente più immagini avete, più traffico avete e più risorse richiederà di conseguenza.
In alcuni casi si può arrivare a un piano a pagamento e sperate che se avete poco traffico si parla di anche qualche migliaio di utenti al mese.
Potete utilizzare una versione gratuita quando superate, magari cinque diecimila di utenti al mese.
Poi, ovviamente dipende anche dal peso delle pagine, da tanti fattori, dal peso alle immagini.
Però, quando superate un certo traffico, una certa quantità di immagini può diventare a pagamento.
Comunque parte da costi molto bassi.
Ora attiviamo la la funzione advance.
Io ho già attivato perché altrimenti vediamo una versione limitata del lo strumento attività attiviamo la trance e come vi faccio vedere solamente quelli che sono gli elementi che ci interessano maggiormente senza fare un approfondimento totale del plachina, altrimenti richiederebbe ore è innanzitutto guardiamo il compression laval, quindi il livello di compressione dell'immagine.
Quindi, come abbiamo detto prima, ci sono divari vari livelli e sostanzialmente ceh tossiche è il sistema che comprime maggiormente l'immagine che fa che dal diciamola la perdita di qualità maggiore che comunque minima grossi una via di mezzo mentre l'hostess come dice come dice il termine senza alcuna perdita di qualità.
Vi faccio un esempio molto, molto semplice vi consiglio Los Angeles se siete dei fotografi ad esempio, o se non lo so, se le immagini comunque sono predominanti non posso questo web sono soprattutto importanti anche per la decisione del potenziale cliente' sull'acquisto o meno di un prodotto.
Quindi los non va a perdere, non fa perdere alcuna qualità l'immagine è probabilmente la comprensione è minima.
Grossi.
La via di mezzo, forse quella più adatta a tutti mentre lo fossi è sono è adatta a tutti quei siti web in cui le immagini comunque non sono così importanti, come ad esempio nel mio in cui è comunque la perdita di qualità è veramente minima.
E poi io in questo caso tengo attivo grossi.
In questo caso abitiamo il supporto ai formati di ultima generazione.
Li abbiamo citati prima in questo caso attivo sia il web sia life, nonostante non tutti siano supportati da tutti i browser.
Ad esempio lavi, se ricordo bene non è supportato da safari, mentre voi ormai credo sia supportato la da tutti e poi li diciamo disabilitarlo su tutti su tutte le tipologie di immagini qual qualunque tipologia di immagine sia presente sul mio sito web andrà a convertire un babbeo naif.
Poi questa lasciamola attiva e andiamo.
Intanto salviamo e andiamo su Bajor, quindi comportamento attiviamo alcune cose che vi faccio vedere la prima fayed in effect questo è un effetto abbastanza carino.
Esteticamente è più è più piacevole per l'utente in cui l'immagine non viene caricata di colpo, ma viene caricata in modo in modo progressivo, diciamo tra poco vi faccio vedere l'effetto che è più facile vedersi a farsi che a dirsi.
Poi andiamo a qua possiamo impostare l'asilo threshold il trash cos'è è il punto in cui deve iniziare show pixel, quindi lo strumento deve iniziare a utilizzare l'asilo delle slot.
Come abbiamo detto prima, è quel sistema e quel sistema per cui un'immagine viene caricata solamente nel momento in cui entra all'interno dell'area dello schermo e noi possiamo possiamo far sì che questo che quel che venga applicato solamente dopo una certa quantità di pixel.
Ad esempio, se prendo il mio sito web, diciamo che questa questa area qui che stiamo vedendo in blu occupa circa seicento pixel in altezza.
Quindi nel mio caso cinquecento sono un po' pochi io vorrei far si' che fino ai sette ottocento pixel tutte le immagini vengono caricate subito mentre quelle successive vengano caricate col sistema le sedotta quindi in modo progressivo io inserisco ottocento okay, poi applichiamo il netflix roads less loading.
Questa è una funzione nativa dei browser, in questo caso di google Chrome, firefox e anche safari lo sta per supportare, anche se in realtà non è scritto.
Pero' safari lo sta già supportando ad abilitare e probabilmente a breve sarà sarà abilitato di default in tv l'esilio ding, un sistema di asilo holding che è integrato all'interno del browser, quindi all'interno di esempio di walt Crom e ci permette di avere un Riesling progressivo, molto molto efficace per quella che è l'esperienza utente.
Dopodiché andiamo a disattivare il sistema di engine and gin, che è il sistema che il sistema di intelligenza artificiale shore pixel che va a dare un risultato a mio parere non non efficace.
Salviamo le modifiche, spostiamoci in aree arias, allora in questo caso non non tocchiamo niente.
Comunque, giusto per far vedere, abbiamo anche la possibilità di prendere quelli che sono i fogli di stile o file javascript e far si' che shorts e li elabori all'interno della sua della sua cm.
Quindi la sua rete in questo caso non ci interessa.
E poi le esclusioni.
Supponiamo ad esempio che c' è un'immagine che per nessun motivo deve essere caricata con road per non nessun motivo deve essere ridimensionato via dicendo ci possono essere due motivi, soprattutto magari nel caso di un fotografo.
In questo caso possiamo far si' che aggiungere il nome dell'immagine e far sì che venga esclusa da questo da questo sistema di comprensione.
Ok, torniamo sul mio sito web.
Avete visto? Nel momento in cui carico la pagina l'immagine non viene caricata di botto ma in modo progressivo e in effetti il mio parere è un po' più piacevole.
Quindi vediamo già che shock pixel applicato delle delle migliorie ora facciamo il tasto destro ispeziona torniamo sul network, ricarichiamo la pagina e applichiamo il filtro amg quindi solo le immagini quello che vedremo è che vediamo dov'è eccola qui questa è l'immagine di riferimento.
Andiamo seggio che sia corretta sì, direi di sì.
Perfetto l'immagine di riferimento che prima pesava una virgola quattro megabyte è passata sotto un formato a biff e come vedete il sito web da cui viene caricata non è è mio, quindi non è l'unico lavoro appunto com e-shop pixel quindi che appunto shore pixel punto hai quindi viene elaborata dal loro server.
Di conseguenza è meglio anche per me perché chiaramente il mio servo a elaborare meno risorse di quelle realmente necessarie il peso dell'immagine di dodici kilobyte contro una virgola quattro kilobyte di prima.
Ovviamente io personalmente non vedo alcuna differenza nella qualità.
Se vogliamo essere precisi possiamo attivare un livello di compressione meno meno aggressivo.
Però chiaramente a mio parere va benissimo così, quindi abbiamo se guardiamo ora il peso totale della pagina che prima era di una virgola otto megabyte ora è di cinque centosettanta kilobyte.
Ok, torniamo alle slide.
Perfetto, andiamo avanti e vediamo quelli che sono i font.
Allora, per quanto riguarda il fronte, per chi non sapesse chiaramente sono sono i caratteri, le tipologie di carattere utilizzate all'interno del sito web e spesso possono essere molto invasivi e molto, molto pesanti, perché alcuni siti web caricano tanti fonte varie font e di conseguenza possono andare appesantire molto il sito web.
Quindi la prima il primo consiglio è quello di archiviare nel server locale.
Qui ci sarebbe da aprire un dibattito nel senso a livello legale, nel senso che c' è stato un caso in Germania dalla corte tedesca, adesso dal relativo diciamo garante della Germania, che ha definito Google Fonts che sono praticamente il novanta percento dei font utilizzate per un sito web li ha dichiarati illegali, nel senso che l'utilizzo di Google font fa sì che vengano presi, venga preso il font dai server di Google o i server di Google elaborano questo dato prendendo quello che è l'indirizzo più deludente e di conseguenza questo appunto questo questo è stato questo questo caso che l'ha reputato illegale ora non mi permetto di dire se sia legale o meno.
Lo faccio valutare un legale, però, considerando che anche questa cosa quindi il primo consiglio è quello di archiviare il server locale, quindi prenderli dal server di Google e spostarli sul vostro server.
Innanzitutto in modo tale che evitate che per qualsiasi motivo fine innanzitutto vengono diffusi dati a Google e in secondo luogo, che ci sia della latenza, perché magari serve di Google un giorno un problema per qualche ora hanno un problema e di conseguenza potrebbe potrebbe esserci della latenza.
Invece riteniamo sul nostro server così dipendono solo da noi.
Puoi utilizzare lo stile fonti spray Suap Questo è un sistema per far sì che il font venga venga caricato quello quello che accade nel momento in cui viene caricato un font col questo con questo attributo e che viene caricato un font.
Si chiama di flashback di un fronte alternativo, ad esempio il Times romano.
Comunque un font che il browser già in memoria fino a quando non è disponibile fino a quando non è stato scaricato il font che avete scelto per il vostro sito web.
Quindi viene usato questo fondo alternativo per il momento in cui è disponibile il vostro viene sostituito automaticamente una funzione molto comoda che permette appunto di far sì che il fondo sia immediatamente visibile.
Quindi se se un'area di testo fa parte della, nascondendo sul point viene subito resa visibile all'utente poi nel momento in cui effettivamente ceda abbellirlo quindi da utilizzare il vostro viene cambiato non appena disponibile, poi pre caricarli sui presenti nell'area immediatamente visibile con la funzione payload, quindi precari Hamra immediatamente visibile, come abbiamo detto prima, è quell rea che vediamo non appena si apre la pagina, quindi senza che noi effettuiamo lo scroll.
Si chiama both fall in termine tecnico, quindi possiamo appunto pre caricare in modo tale che vengono caricati immediatamente, come abbiamo visto prima, anche con le immagini poi riguardarli se non immediatamente necessari col la funzione di far.
Quindi in questo caso possiamo andare a ritardare tutti quei fondi che magari vengono utilizzati solamente in in parte del sito web molto poco visitate.
Ci sono veramente siti web che hanno quattro cinque sei tipologie di fondi differenti per per una sola pagina e alcune di esse magari vengono utilizzate nel footer, quindi nella parte più bassa del sito web.
Di conseguenza perché caricarli subito non ha senso.
Andiamo solo appesantire il tempo di caricamento del server, quindi li possiamo far caricare successivamente.
Puoi sostituire con il parametro text uguale in questo caso un parametro di Google che ora vi spiego o rimuovere quelli poco utilizzati.
Come dicevo poco fa, ci sono tanti siti che ne hanno veramente molti, é l'ideale sarebbe utilizzare meno fan possibili, quindi una al massimo due anche varie tipologie di font per varie tipologie intendo ad esempio quanto quanto cicciottello il font oppure la l'italica, quindi il fatto che sia sia in corsivo e via dicendo.
Quindi quando possibile cerchiamo di avere meno più fondi possibili.
E invece se ci sono delle porzioni di testo che supponiamo, magari nell'area con scritto ad esempio nome e cognome, magari invece di mostrare il proprio nome e cognome, si vuol mostrare una sorta di firma, quindi utilizzando un font che sia in corsivo molto particolare.
In quel caso cosa possiamo andare a fare con il parametro test tramite le Fonzies di Google possiamo far sì che quel solamente quel testo venga caricato con quel font.
Ciò cosa significa? Che il caricamento di pagina non viene caricato totalmente il font, ma viene caricato solamente il font necessario per quello, ma per quello per quel testo lì, di conseguenza sarà molto più leggero.
Anche qui strumenti utili il primo e il terzo sono gratuiti e o MGF.
Anche qui è un plugin di WordPress che ci permette di in modo molto quasi maniacale, nel senso che ci dà la possibilità di modificare tanti aspetti.
Ci permette di appunto archiviare localmente font e di gestirli come vogliamo.
Asset clean up che il terzo anche esso è gratuito, anche se una versione a pagamento e ci da anche lui la possibilità di archiviarli.
E infine, cioè per Flanders, che è un plugin a pagamento, però ha un costo veramente irrisorio si parla di venticinque dollari l'anno quindi circa nemmeno due euro al mese e ci dà la possibilità di fare le stesse cose.
Sostanzialmente.
Quindi veniamo alla pratica, passiamo anche quella pratica tanto vivo.
Quindi torniamo sul sito web.
In questo caso quello che andrò a utilizzare è perché Brothers, per semplice comodità e anche perché lo vedremo tra poco è il che ci da' a disposizione.
Piu' ottimizzazioni, diciamo é comunque un costo veramente irrisorio, quindi in questo caso andrebbe acquistato Braghin.
Dopodiché va caricato sul sito web.
Va attivato.
Ok, abbiamo attivato e andiamo sulle impostazioni.
Ok, ho riattivato già dalle impostazioni di base che servono a me.
Non mi so spiegare che sono piccolissime migliorie.
Andiamo nella sezione fondi che quello che ci interessa.
Molto semplice questo Platini è veramente semplicissimo.
Però è molto, molto potente.
La prima la prima opzione.
Quale? Disabilitare Walt Phones.
Semplicemente io potrei dire guarda, non voglio proprio utilizzare Walt Fonte.
Voglio utilizzare il font di sistema predefinito dei browser.
Quindi, ad esempio su Walt Chrome Times Roman, se ricordo bene e di conseguenza non viene caricato al confronto il sito web viene utilizzato quello standard che esteticamente non è il massimo pero', diciamo si vanno a risparmiare risorse.
Noi non siamo così, è così estremisti.
Di conseguenza, andremo ad archiviare localmente i fondi di Google tramite questa funzione local Google Fox.
Inoltre andremo a trovare lo slap, quello di cui parlavamo prima, cioè il fatto che un font m' venga caricato nel momento in cui è disponibile.
Nel frattempo si utilizza un altro font standard, diciamo quello predefinito di sistema.
Qui abbiamo anche la possibilità di carichi di utilizzare una CDN che, come abbiamo detto prima è una rete che fa da ponte, quindi una rete distribuita in tutto il mondo che puo' essere root Claire potrebbe essere bannister in o altro, e possiamo far sì che questi fondi vengono fornite li' che li inseriamo all'interno della nostra città.
In questo caso non ci interessa.
Prima di salvare le modifiche, però, vi faccio vedere quella che è la situazione attuale.
Quindi ancora torniamo sul mio sito web, facciamo tasto destro, ispeziona, andiamo sotto la voce network, ricarichiamo la pagina e in questo caso andiamo nella voce font.
Ok, quello che accade ignorando il secondo fonti c'è un font che mi genera un'estensione Google Chrome.
Quindi ignoriamo lo viene caricato solamente un font.
In questo caso è catamaran e come vedete il ferro da cui viene caricato non è il mio iPhone.
Spunto degli stati il punto com quindi un server di Google anche quali torniamo al discorso di prima? Si, sia se sia norma con il PD, per lo meno non sta a me stabilirlo.
Però io preferisco archiviarlo localmente nel mio sito web.
Quindi cosa succede in questo caso? Il peso del mondo non cambierà semplicemente viene caricato attualmente da da da Google.
Okay, salviamo le modifiche.
Aggiorniamo la pagina.
Ok, vediamo subito che è cambiato.
Quindi vediamo lo stesso font.
Fate lo stesso peso.
Su questo non possiamo fare un granché.
Però in questo caso viene caricato da Vedete come Quest'aereo viene caricato nel mio sito web.
Quindi è all'interno del plugin per Smithers.
Perfetto.
Io sono contento.
Quindi non viene più caricato da quel server.
Non ci fermiamo qui ora.
Andiamo.
Apre caricare questo font.
Io voglio che questo font sia il dispone disponibile all'utente nel più breve tempo possibile.
Quindi quello che vado a fare a tasto destro vediamo qui.
Oddio.
Ok, mi sto aprendo questa scheda a priori.
Va bene, facciamo, scopriamolo da qui sotto sequestro il dobbiamo prendere il per di questo di questo font e fartelo pre caricare.
Quindi facciamo copie value, Copiamo il valore, andiamo nella nella scheda April Holding e sulla voce payload la funzione di cui abbiamo parlato anche prima.
Possiamo dire a al browser Diprè caricare questo font come prima l'evento, diciamo in modo tale che venga venga subito mostrato all'utente.
Quindi inserisco questo si'.
Scelgo come tipologia di file font, perché in questo caso potrei anche pre caricare un'immagine.
E dopo lo faremo con con l'immagine per quale dispositivo? Per tutti e in questo caso abilità alla funzione cross origin origin, che è una funzione che andrebbe abilitata per tutti quelli che sono gli per caricare esterni al nostro sito web, ma nel caso di fonte delle icone va comunque utilizzata.
Salviamo le modifiche ok l'abbiamo salvata ricarichiamo qua non cambia nulla, però vi faccio vedere una cosa.
Innanzitutto andiamo su tasto destro qui visualizza sorgente pagina e vediamo quello che è il codice del sito web.
Quindi tutto quello che è il codice che viene caricato all'interno di questa pagina web, quello che andiamo a vedere subito e c' è una funzione reloaded.
Eccola qua è questo il pilot, quella funzione che abbiamo abilitato che va a caricare.
Questo lo fa in automatico per Brothers va a caricare il CSS, cioè il foglio di stile contenente le nostre varianti di fronte perché, come dicevamo prima, il font è disponibile in più varianti.
Quindi a disporre la variante meno cicciottella cicciottella per le variazioni appunto, di stile e non solo.
Viene anche pre caricato un link che gli abbiamo detto noi che questo qui che va da evidenziare che è il font direttamente lì sto dicendo vada, precari camicia come primissimo elemento tre carica quello che è.
Il font che utilizzo in questo caso è uno solo.
Così facendo il font verrà elaborato in modo più rapido.
Ora facciamo la stessa cosa anche con le immagini.
In realtà in questo caso io voglio farlo solamente per questa immagine che l'immagine in diciamo in evidenza quella che che vediamo immediatamente visibile.
Quello che posso fare io adesso in questo caso è fare ad new seleziona tipologia metto immagine e inserire il dell'immagine.
Quindi cosa faccio? Io prendo, faccio tasto destro copia l'indirizzo dell'immagine, vediamo se è corretto.
Perfetto come vedete l'immagine fornita da shorts pixel che lo strumento abbiamo utilizzato dal ottimizzazione e la inseriamo qui.
La pre caricherà però non è quello che voglio fare.
Perché? Perché se io facessi così l'immagine verrebbe caricata in pre caricata in tutte le pagine del sito web.
E non è ciò che voglio.
Perché questa immagine è presente solo in homepage.
Di conseguenza, su payload critica l'immagine che è una funzione, appunto sempre di permettersi che è in beta.
Ehi, io vado a selezionare una o due.
Anzi, e cosa fa questa funzione fa sì che automaticamente rileva per ogni pagina quelle che sono le immagini critiche.
E per immagini critiche intende le immagini, quelle immediatamente visibile all'apertura della della pagina e lepre carica.
Quindi li identifica lui per ogni pagina Lepre carica di salvare le modifiche.
Ora vediamo perché questa funzione non non sempre funziona.
Anche perché la dieta vediamo se nel nostro caso ha funzionato.
Facciamo tasto destro.
Ok, facciamolo qui.
Visualizza sorgente pagina e andiamo a cercare la funzione.
Okay, Reloaded.
Ok, vediamo innanzitutto che ha aggiunto un pilota un'immagine.
Ok, in questo caso ha fatto il payload.
Come vedete qui dell'immagine relativa a mano il pannello di controllo per considerate che questa funzione è relativa, dipende dall'utente.
Quindi io sono utente loggato all'interno del pannello di controllo e di conseguenza mi incarica anche quelle che sono le icone.
Proviamo a farlo in una navigazione in incognito.
Fatemi prima rigenerare quella che è la cash del server.
Ok, quindi apro una scheda in incognito.
Vediamo se ricarica questa immagine.
Visualizza sorgente pagina Cerchiamo ancora la funzione payload.
In questo caso vediamo che il telefono perché questo qui informato un po' doppio F F due.
In questo caso, vediamo che è stato pre caricato il logo.
Vedete qui luogo Luca allora bianco è stato caricato ancora pre caricato il luogo.
Ok, in questo caso, perché o forse più due varianti logo dovrà inserire come preludio critica l'immagine tre o quattro o cinque.
In questo caso mi precari che rebbe più immagini, tra cui anche quella in evidenza.
Magari se metto quattro è più probabile che funzioni.
Ora vediamo Aggiorniamo qui la pagina Visualizza sorgente pagina e vediamo se ha pre caricato l'immagine che ci interessa.
Reloaded.
Ok, concentrazione pre caricato un'altra ancora.
Ok, eccola qua.
Questa immagine è stata pre caricata.
In questo caso non ha identificato due r di shorts al, quindi ho pre caricato l'immagine.
Quella diciamo nativa é il che non mi va tanto bene, però comunque l'ha fatto in questo caso disattiva la funzione.
Anche perché, come dicevo in beta, però è per far vedere la possibilità di caricare qualsiasi tipo di risorsa e soprattutto, farlo in funzione delle tipologie di immagini che abbiamo all'interno del sito web.
Ok, torniamo alle slide e proseguiamo.
Okay, Ora passiamo ai fogli di stile L'ho Già accennato.
I fogli di stile sono tutti quei documenti, quei file che contengono lo stile del sito web.
Quindi il sito web è composto da html, quindi il codice che ne determina la struttura, gli elementi che sono contenuti all'interno della pagina e lo stile, quindi lo stile degli elementi ad esempio il colore blu, il font che è più grande e più piccolo l'immagine del più grande o più piccola.
Tutti questi sono ostili che sono contenuti appunto di questi fa all'interno di questi fogli come possiamo per ottimizzare l'argus content spent a migliorare i fogli di stile possiamo comprimere li utilizzando la mummificazione minimizzazione si può chiamare in diversi modi utilizzare il css critico il cs critiche css critico che cos'è il css critico elabora sempre su quella che è l'area immediatamente visibile all'utente io apro la pagina, vedo solamente un'area, quindi non sto vedendo tutta la pagina completa il css critico non è nient'altro che quel css, quindi quel quel foglio di quei fogli di stile necessari a farmi vedere correttamente l'area immediatamente visibile all'apertura della pagina perché ovviamente ci sono tanti fogli di stile, tanto tanto codice css che molto spesso è inutilizzato e ora andremo anche vedere come come analizzarlo di conseguenza questo css critico va a caricare immediatamente solamente lo stile necessario al cari, alla immediata visualizzazione di pagina e alla prima interazione dell'utente ad esempio allo scroll carica tutto il resto in modo tale da alleggerire molto il peso della pagina.
Poi precari Carly si presenti in tutte le pagine del sito web, quindi utilizzando la funzione reloaded è possibile pre caricare quelli che sono i fogli di stile immediatamente necessari.
È simile un po', il css critico oppure ritardarlo se non immediatamente necessari.
Quindi sempre rispetto a quelli che sono i ci fa il css lo stile non immediatamente necessario si puo' ritardare come si può fare gli strumenti utili vivi.
Proviamo ancora Kathleen Happy sempre gratuito perché in WordPress gratuito per Brothers che è quello che andremo a utilizzare che ha un costo di venticinque dollari l'anno e V P rocket che probabilmente conoscerete uno dei più diffusi e anche lui a pagamento, forse intorno ai quaranta o cinquanta dollari l'anno.
Nel nostro caso utilizzeremo ancora per radersi, quindi passiamo alla pratica perfetto.
Ritorniamo sul sito web e vediamo una cosa molto importante, ovvero facendo tasso destro ispeziona riaprendo quella che è la console di sviluppo di Google Chrome.
Tra le tante cose possiamo andare abilitare una uno strumento di analisi molto importante.
Se andiamo qui sui tre punti e facciamo morts di altri strumenti, possiamo attivare coverage.
Eccolo qui e ci dice ricarica la pagina, la ricarichiamo quello che fa coverage cos'è analizza tutti i fogli di stile che sono contenuti all'interno del sito web e ti dice se sono utilizzati o meno.
Se non sono utilizzati in parte ti dice in che percentuale sono utilizzati.
Quindi vediamo qua sulla sinistra tutti per dei corrispondenti a tutti i fogli di stile presenti.
La tipologia in questo caso ci fa vedere anche i file JavaScript e li andiamo a escludere il peso di questi file CSS e i bidoni inutilizzati.
Ci fa vedere in percentuale qual è la percentuale, la parte, la porzione diciamo di css utilizzato perché magari una parte non viene utilizzato, oppure viene utilizzata solo per un menu che si apre in certi casi e via dicendo.
Sono tante situazioni in cui molte parti di CSS non vengono piu' utilizzate.
Supponiamo anche che voi insediate del codice e quel codice non venga più utilizzato, magari non del codice per un elemento per un pulsante.
Quel pulsante dopo un mese lo cancellate perché non mi serve più e quel codice è rimasto dentro, quindi hanno utilizzato.
Infatti, se vediamo qui, vediamo che in questo caso la barra rosso ci fa vedere la parte inutilizzata e vediamo il novanta novantotto percento.
A parte qualche foglio di stile, diciamo che la gran parte del codice inutilizzato all'interno della pagina.
Questo perché? Perché magari inserito nel codice presente in tutto il sito web, ma non necessaria nella homepage, magari necessario solo nella pagina che sono nella pagina, contattami.
Quindi lui comunque lo carica.
Ma io non ne ho bisogno qui ora, quindi andiamo a torniamo su permettersi.
Andiamo su.
Anzi, facciamo prima una cosa andiamo a significare quello che è e quelli che sono i fogli di stile attiviamo asset line-up, che è uno dei pregi che ho citato.
È gratuito.
Anch'esso.
Ok, andiamo su settings.
E in questo caso quello che mi interessa fare è andare sulla sezione Optimus, quindi ottimizza questi fogli di stile e attivare la mummificazione.
Minimizzazione? Chiamiamola come vogliamo.
Non entro nel dettaglio anche qui, perché è troppo tecnico come strumento e possiamo andare a escludere quelli che vogliamo modificare e via dicendo, ma in questo caso ci limitiamo solamente ad attivarla.
Facciamo aggiorna perfetto.
Ora andiamo in per Mathers, andiamo nella sezione Asset e andiamo ad attivare quello che è il Critical Pss PSS.
Critico questa funzione come come già detto, va' a utilizzare solamente a prendere solamente il CSS, quindi lo stile necessario immediatamente e va' a ritardare in un certo senso quello non necessario.
Qua ci chiede come quale metodo vogliamo utilizzare? Se vogliamo utilizzare online all'interno del codice HTML o in un file separato.
Me va benissimo online e possiamo decidere come ritardare quello inutilizzato.
Possiamo ritardarlo col di lei perdi lei si intende proprio la prima interazione utente finché l'utente carica e sta' fermo non muove il mouse non fa nulla.
Quel quel codice non viene caricato in modalità sync, che viene scaricato in modo sincrono e caricato durante il caricamento degli altri elementi, quindi semplicemente viene in un certo senso ritardato rispetto al resto, oppure remove rimuovi tutto quello che è inutilizzato.
Questa è la cosa che vi sconsiglio perché c' è anche del codice SS, ad esempio, che è necessario solamente per un modulo piuttosto che per un menù, magari per il menu da smartphone.
Tra alcune situazioni a cui voi magari non avete pensato, é però è comunque comunque necessario, quindi vi sconsiglio di rimuoverlo.
Potete ovviamente fare dei test e verificare che funzioni in meno al sito web, quindi verificato in tutte le forme, in tutte le varianti e su vari dispositivi.
Infine, possiamo escludere quei fogli di stile o quegli elementi qui possiamo farlo che in cui questo sistema non riconosce correttamente il codice CSS utilizzato.
Ci sono stati dei casi in cui ho fatto delle ottimizzazioni in cui, ad esempio, ledere la parte più alta del sito.
Attivando questa funzione non si vedeva correttamente.
Perché il SIS questo sistema non è riuscito a identificare qual era il CSS utilizzato.
Quello che nonna.
E poi abbiamo la possibilità di cancellarlo.
Quindi per rigenerare, diciamo questo, questa funzione.
Ora attiviamo lo.
Okay, É quello che accade ora.
Ritorniamo qua.
Eravamo nella parte coprici.
Quello che vediamo qui è che C' è tre.
Ci sono trecentocinquanta kilobyte di RAM, i fogli di stile, diciamo di contenuto CSS inutilizzato.
Ora ricaricare la pagina.
Ok, in questo caso me la me lo sta comunque caricando.
Vediamo se ha preso la funzione.
Torniamo lo.
Ok, In questo caso proviamo ad aprirlo in incognito con la stessa funzione.
Colei che ha aperto.
Okay, ok, proviamo a cancellare quella che cash del server.
Ok, vedete che è cambiato? Vedete che adesso sotto al news io non muovo il mouse.
Però se guardate sotto dell'ultimissima riga c'e' scritto cento settantasette kilobyte news La più della metà di quello di prima è CSS che lui ha scartato, lo fa caricare la prima interazione.
Ora, nel momento in cui andrò a muovere il mouse, come vedete, è salito a tre centotrenta.
Quindi ha recuperato tutti i fogli di stile.
Tutto il codice che io utilizzavo prima.
Quindi non ha non mi ha rimosso nulla.
Semplicemente fa sì che io me lo carichi solamente la mia prima interazione.
Perché identifica che non è necessario subito.
Quindi rivediamo Ricarichiamo Centosettanta sette kilobyte utilizzati quando il nuovo il mouse sale a tre centotrenta circa.
Quindi così facendo andiamo alleggerire molto.
Il CSS viene scaricato immediatamente.
Vediamolo nel lato tecnico facendo tasso destro.
Visualizza sorgente pagina.
Andiamo a cercare.
Eccolo qua.
Lo vediamo subito.
Andiamo a cercare quello che lo stile per Brothers.
E questo qui proprio vediamo.
In termini di codice grezzo è tutto lo stile che lui identifica come necessario.
Quindi cosa dice? Questo? È necessario immediatamente, quindi io l'ho precarico, lo inserisco subito all'interno della pagina.
Tutto il resto invece viene caricato dopo tutto il resto lo rimando.
Così facendo abbiamo attivato appunto la funzione d'accesso.
È critico questa funzione e ribadisco che non non sempre funzionante, soprattutto sul sito web, magari dove sono, dove sono in spalla i temi obsoleti piuttosto che tanti clan in in alcuni casi potrebbe non funzionare.
Ma come avete visto film come avete visto poco fa è possibile anche escludere singoli elementi che mi danno problemi mi causano problemi.
Ok, ritorniamo alle slide.
Ok, eccoci qua e arriviamo alle scritte che sono il penultimo elemento comprimere quelli interni, quindi anche qui stesso stesso consiglio, stessa raccomandazione valida per i fogli di stile, quindi utilizzare la mummificazione, caricarli in modo asincrono o ritardare li'.
Quindi utilizzare la funzione async de fer alla funzione async ci permette di scaricare il lo script e prescritti intendiamo possono essere sia scritti interni, quindi fai Giau scritti interni al sito web, ad esempio per per attivare alcune funzioni tipo un menu che appare un modulo o qualsiasi altra cosa sia scritte esterni scritte esterni insomma, ad esempio i codici di tracciamento piuttosto che il pixel di facebook e via dicendo, quindi si possono caricare in modo sincrono con la sync funziona sink in modo tale che vengano scaricati insieme al resto della pagina in modo asincrono, però vengono elaborati quindi caricati, elaborati dal browser insieme agli altri elementi.
Questo è un po' pericoloso perché l'elaborazione dei file già scritte molto spesso comporta al momento di blocco per l'utente.
Molto spesso l'utente si può trovare in situazioni in cui non riesce a muovere, non riesce a fare clic perché sta caricando discreet, quindi la funzione.
La cosa ideale molto spesso è ritardarlo con la funzione di far la funzione di ferro.
Si ritardano a quando tutto il contenuto della pagina è stato completato, quindi vengono caricati proprio come ultimi elementi come ultimissimi elementi.
Consiglio quindi per la gran parte dei casi di utilizzare la funzione di far, ma in altri casi quindi magari in casi in cui c'è un elemento già scritto essenziale per il sito web è essenziale subito.
Sin dal primo caricamento di pagina si può utilizzare funziona seek poi ritardare, se non immediata, immediatamente necessari.
Questa è una funzione molto, molto interessante che da sola puo' veramente accelerare di due o tre secondi il tempo di caricamento riuscito web, se non di più e della funzione di lei che tra poco vedremo è oppure rimuovere quelli inutilizzati.
Quindi ovviamente, quando stiamo parlando di sempre plachino o temi installati all'interno di word presso all'interno di qualunque tipologia di sito web, spesso troviamo dei dei componenti inutilizzati, quindi magari componenti necessari a qualche funzione che noi non stiamo utilizzando.
A quel punto si possono si possono escludere, possiamo escluderli dal caricamento di pagina.
Strumenti utili anche qui sono sono simili, sono quasi sempre gli stessi.
Troviamo ancora asset line-up che, come vi dicevo, è gratuito, ma è molto tecnico per me é Anders che a pagamento, ma come state vedendo è molto, molto semplice da utilizzare e Flint swift che tra poco vedremo ed è anch'esso gratuito.
Passiamo alla pratica.
Ok, allora molto, molto importante.
Ora vi faccio vedere sotto quella che è la voce network.
Okay, allora ritorniamo su quella che era questa console degli strumenti di Google Chrome.
Facendo il tasto destro ispeziona e andiamo sulla voce network, ricaricare la pagina e mettiamo facciamo quelli che su J S.
Che sta per Giava Script Gli script del del sito web in realtà nel mio caso ne troviamo veramente pochi perché non ha installato niente.
Io come componente esterno pero' adesso andiamo, magari facendo l'installazione di analytics e vi faccio vedere una cosa molto interessante.
Quindi andiamo innanzitutto su sul blog in e riapriamo quelle che sono impostazioni di asset line-up quello quel plugin gratuito che però ha molto tecnico.
Andiamo su optimize JavaScript e andiamo.
Attivare la mummificazione come come dicevo prima, non non entro nel dettaglio tutte le restanti funzioni perché troppo sarebbe troppo dispendioso di tempo.
Ora andiamo su Impostazioni per traders, ritorniamo sul nostro strumento per Brothers e andiamo nella nella voce assets.
Innanzitutto qua possiamo fare il Deferred JavaScript, come dicevo prima, il ferro e la funzione che ci permette di di ritardarlo in un certo senso, di tenerlo come diciamo, tenerli scritto come ultimi elementi della pagina che deve caricare, quindi dargli una priorità minore io attivo e lo attivo anche in questo caso per lei é qui che sono delle librerie automaticamente integrate all'interno di WordPress che in alcuni casi potrebbero non non servirlo immediatamente.
Quindi, ovviamente, tutto quello che stiamo vedendo dovete valutarlo dal sito web sito web perché ogni sito web è stato strutturato in un certo modo e funziona in un certo modo.
Qui possiamo escludere dei file dal Defender della funzione di ferro.
E poi ce la funzione di lei già scritta che ora vi faro' vedere.
Facciamo salva le modifiche.
Okay, In questo caso ve lo faccio vedere con un codice di tracciamento di di analytics che prendo al volo.
Facciamo così, allora prendo creo velocissimamente la proprietà all'interno google-analytics.
Vi mostro quella che è la funzione di di lei di lei Già scritto.
Quello che ci permette di ritardare proprio un file script fino alle La prima interazione dell'utente.
Quindi prendo il file.
Ora prendo dall'altro schermo.
Il codice JavaScript che mi interessa, che è l'integrazione.
É un semplice tracciamento di analytics.
Ok, faccio la configurazione.
Prendo il codice.
Okay.
Tremendi dati.
Eccolo qua.
Perfetto.
Okay, prendiamo.
Okay.
Secondo solo che sto prendendo il codice.
No, non ce l'ho disponibile qui.
Allora, vediamo facciamolo in un altro modo.
Prendo un codice dal mio blog.
Facciamo così un codice di tracciamento qualunque utilizzo.
Advanced Scripts è un plugin per gestire quelli che sono i codici di tracciamento.
E prendiamo con le due analytics quattro di questo del blog.
Quindi non è quello corretto.
Però non in questo caso.
Non ci importa.
Allora quello che vado a fare ora inserisco questo codice all'interno del mio sito web.
Quindi, con questo strumento senza allora so spiegare.
Inserisco il codice come HTML e questo è il codice di integrazione Curano di Pike.
Ok, abbiamo quello che accadrà ora e caricando il sito All'interno di J S.
Vedremo quello che è già quello che è google-analytics.
Quindi ricarichiamo una pagina, vediamo se me l'ha scaricato.
No, non me lo sto caricando.
Andiamo, torniamo alla Cash.
Ok.
Non me lo sta caricando benissimo.
Diciamo così.
Vediamo se riesco.
Probabilmente perché é uno script di un altro sito web, quindi non è quello.
Chiaramente non è quello corretto.
Vediamo se riesco a a prendere il codice di integrazione.
Ok.
Ecco qua.
Ok, Ha ottenuto quello del mio sito web, quindi andiamo a cambiarlo da qui.
Okay.
Non l'avevo attivato anche per quello.
Perfetto.
Torniamo qui.
Facciamo F.
Eccolo qua.
Questo qua e il codice di Google Analytics, il codice classico di integrazione di Analytics quattro che troviamo qui, Quindi Analytics quattro.
Il caricamento di pagina viene caricato ed è questo qua.
Facciamo così applichiamo un filtro in modo tale da vedere solo quello.
Questo qui è perfetto.
Nel caricare la pagina viene caricato.
Cosa succede? Che molto spesso i siti web hanno tanti iscritti esterni possono essere quello di Facebook.
Miguélez può essere Hot Air Clarity, qualsiasi strumento esterno utilizzate.
Quindi una cosa molto utile, soprattutto se non questi strumenti non sono essenziali.
All'immediato caricamento della pagina, per esempio, Analytics potrebbe esserlo.
Dipende una cosa soggettiva.
Possiamo andare a ritardare lì.
Quindi, con questa funzione di di lei possiamo inserire e andare a inserire il nome di uno scritto e far sì che questo scritto venga ritardato fino alla prima interazione dell'utente.
Quindi inseriamo ad esempio in questo caso, un elemento, un nome che possa far ricondurre lo strumento al nostro analytics.
Quindi mettiamo ad esempio Google, il manager e il nome del dominio.
Okay, salviamo.
Ok, Ora ricarichiamo la pagina.
Ok.
Quello che è accaduto come vedete, non sto muovendo il mouse non c'.
È nessuna interazione.
La pagina è stata caricata senza google-analytics.
Ora, nel momento in cui faccio l'interazione come avete visto, è stato caricato lo script.
Come come state vedendo? Nel mio caso, non solo scritto è quello di Analytics, però molto spesso si parla anche di un megabyte megabit, mezzo di script che vengono caricati esternamente con questa funzione, senza che all'utente cambia nulla e senza che molto spesso neanche per voi cambi nulla, perché in questo caso ho applicato anche a diversi siti web con le concessionarie pubblicitarie, quindi anche per l'erogazione di servizi pubblicitari e ha quasi sempre funzionato.
Noi possiamo andare a ritardare questi script velocizzando quello di moltissimo quello che il tempo di caricamento la pagina vedete, io sto caricando ha caricato la pagina, non viene caricato analytics, muovi il mouse viene caricata analytics.
Quindi in ogni caso non andate a perdere dei dati.
Ok, ora andiamo a togliere questa funzione che anzi andiamo a togliere il proprio scritto che non ci non ci interessa.
Ok, disattivato.
Perfetto.
Ritorniamo.
Ritorniamo ora le slide.
Eccoci qua.
Ora vediamo quello che è l'ultimo punto ovvero altro, cioè quelle che sono altre funzioni che possono esservi utili.
La prima riguarda a definire le priorità di ogni la priorità di ogni risorsa.
Quindi è cioè una funzione chiamata everything's, che è una funzione che sta sperimentando Google, in cui noi possiamo andare a definire per ogni singola risorsa qual è l'importanza.
Quindi possiamo ad esempio dare l'importanza più elevata alle immagini, meno importanza riscritte e via dicendo.
Poi per connettere il browser ai domini essenziali utilizzando la funzione Connect, possiamo andare a pre connettere il l'utente a quelli che sono i domini essenziali, come ad esempio Google Analytics Analytics, utilizzata all'interno del sito web è essenziale viene sempre caricato all'interno di ogni pagina.
Di conseguenza possiamo pre connettere il browser al servizio in modo tale che è lo script venga erogato in modo più rapido.
Puoi ritardare il caricamento degli fram con l'isil od per chi non lo sapesse, gli esami sono tutte le integrazioni esterne che molto spesso sono per farti un esempio alle integrazioni Google Maps piuttosto che l'integrazione di un post di un social esempio in un post di Facebook all'interno di un sito, il post di Twitter e poi pre caricare i collegamenti interni al sito web con la funzione Prego fece anche questo è molto interessante e con veramente un solo click cambia moltissimo quella che è l'esperienza utente all'interno del sito web anche ancora qui gli strumenti utili sono Pupi Rocket che abbiamo già visto per Brothers che abbiamo già visto e Flynn Pacis che un altro strumento gratuito.
Passiamo alla pratica.
Okay, allora in questo caso, in particolare, vi ci tengo a farvi vedere quello che è la funzione di di cui vi ho parlato poco fa.
Anche questa si attiva.
Lo faccio vedere sempre con partners si attiva con un solo click è basta andare su per il holding e attivare la funzione e bo Istant pages Stampaggio.
Cosa significa? Che nel momento in cui viene caricato viene caricata una pagina.
Ora vi farò vedere.
Ovviamente quella pagina viene scaricata ogni volta dal browser.
Quindi io sono nel mio nella mia home page e faccio clic su chi sono.
Questa pagina viene scaricata, quindi ogni volta viene scaricata.
Quindi il tempo di accesso a questa pagina è potrebbe essere mediamente alto, perché ovviamente viene scaricata.
Con questa funzione la pagina viene caricata istantaneamente.
Perché? Perché con questa funzione di Cliff e io mentre sto navigando mi viene precari Kate Non vengono caricate in automatico tutti i collegamenti interni al sito web, ovviamente solo quelli interni, non quelli esterni ad altri siti web.
Quindi tutti i collegamenti del menù, i collegamenti vari che sono presenti all'interno del sito web vengono pre caricati.
Quindi le pagine vengono precari, Kate e al mio click vengono elaborate immediatamente perché il browser leggera caricate, vediamo nel tecnico come come avviene.
Facciamo presto, resto l'ispezione.
No, andiamo ancora sul network, aggiorniamo la pagina e andiamo su Holland.
Ok, torniamo al filtro.
Vediamo che la prima Il primo elemento che viene caricato è la pagina HTML.
È un documento che viene caricato come come sai, venticinque kilobyte.
Quindi viene caricata in tutto il suo peso.
Se faccio anche su chi, su chi sono Quello che vediamo in alto e questa pagina questa pagina in bianco.
Vedi, vedete che non troviamo alcun caricamento perché cioè, prefect cash questa pagina viene inserita in questa memoria cash in questa memoria temporanea e di conseguenza è già stata elaborata da mio browser.
Io nel momento in cui faccio clic, mi viene scaricato automaticamente.
Faccio clic su Contattami, vediamo voi vedete la navigazione immediata.
Guardate, sembra quasi che io sia offline.
Nel senso che chiudiamo qua tra l'altro io alcune ottimizzazioni non ce lo attivi essendo bloccato.
Ma se noi facciamo la prova da apriamo da adesso ho fatto o rigenerato la cash.
Lavoriamo in incognito.
Aspettiamo che si rigenera la cash.
É normale che sia lento.
Ok, guardate adesso la navigazione come stesse passando una pagina all'altra in modo istantaneo.
Non faccio nemmeno il tempo a far clicca già elaborato la pagina.
Questo con questa semplice funzione l'unico potenziale contro di questa funzione è chiaramente in siti molto grandi che hanno tantissimi collegamenti interni e che può appesantire leggermente il carico del server.
Però come vedete è veramente fantastico.
L'effetto soprattutto per l'utente che fa clacson su una pagina è già dentro.
Ok, torniamo alle slide.
Ok, vediamo infine come ottimizzare il cumulativo shift.
Quindi fino adesso abbiamo parlato dell'art scontento utente con sul pene.
Ora parliamo di cumulativi autista, quindi quella che è la variazione dell'immaginazione, sia durante il caricamento di pagina sia successivamente, quindi sia durante la sessione di navigazione c' è una sola, una sola slide, perché questa è una cosa molto semplice da risolvere e facciamo riferimento solamente le immagini la fram che di cui abbiamo parlato poco e sono tutte quelle integrazioni di servizi esterni un post di Facebook integrato all'interno del sito web, un post di Twitter e via dicendo.
Per farlo è importante semplicemente definirla larghezza all'altezza di ogni contenitore per contenitore faccio riferimento a un contenitore di un'immagine, quindi all'interno del sito web esistono dei contenitori per ogni riga per ogni colonna.
L'immagine non necessariamente è inserita li vagante, ma all'interno di un contenitore.
Quindi immaginiamo proprio come avere un contenitore di di caramelle.
Ad esempio è questo contenitore alla alla sua altezza la sua larghezza un contenitore chiaramente perché lo posso tenere in mano e all'interno ci possono stare x caramelle per chiaramente posso metterne due.
Posso metterne cinque, però il contenitore ha sempre quella grandezza.
Di conseguenza la stessa cosa funziona anche anche per un sito web.
Una volta che andiamo a definire con l'altezza con larghezza per un contenitore, le immagini che vengono caricate al al suo interno non ci importano, non vanno a creare variazioni di impaginazione, quindi non vanno a creare accumulati Locke poi definire la larghezza e l'altezza di ogni immagine.
Allo stesso modo, se l'immagine non è inserita all'interno del contenitore, è importante definire altezza e larghezza di ogni immagine e poi utilizzare lo stile aspect ratio se si dispone di una sola misura, cosa succede? Definire altezza e larghezza di ogni immagine non è sempre semplice, perché chiaramente un'immagine potrebbe su dispositivi mobili, ad esempio riadattarsi.
Quindi avere altezza e larghezza differenti.
La stessa cosa potrebbe venire su tablet e via dicendo, quindi è difficile da gestire molto spesso.
Magari noi vogliamo dare una regola, un po', un po' meno restrittiva.
Ad esempio dire che su smartphone quel quell'immagine non debba essere più alta di trecento pixel perché non la vogliamo troppo alta, però la larghezza e la facciamo decidere a lui.
Quindi cosa cosa si fa con la funzione aspects, che è un semplice codice css? Si va a definire quello che il rapporto di immagine del rapporto di immagine si intende, ad esempio se i nonni e sedici nonni quattro terzi quadrata via dicendo.
Quindi noi prendiamo un solo valore.
Quindi ad esempio l'altezza vogliamo che l'altezza all'interno di un'immagine all'interno dello smartphone sia di trecento pixel, quindi definiamo hit che l'altezza trecento pixel e poi diamo la spectre dell'immagine quindi ad esempio sedici noni quello che andrà farà andrà a fare il browser e andrà a elaborare quella all'altezza e definirà automaticamente lui la larghezza in modo tale da non generare cumulativi shift e da non impegnare noi.
Comunque chi si occupa di questa parte di sviluppo a definire una larghezza diversa per ogni tipo di dispositivo, anche perché sarebbe pressoché impossibile.
La stessa cosa si può fare con larghezza al cento per cento.
Cioè noi possiamo andare a dire che esempio su dispositivi mobili larghezza dell'immagine essere al cento percento dello schermo.
Quindi si deve adattare in funzione il dispositivo in uso, però rimanere sempre il cento per cento lo schermo, mentre l'altezza la si definisce tramite la Spectre.
Quindi si mette with che saper larghezza al cento per cento speck aspect lasciò il formato, dell'immagine il rapporto di immagine e così facendo non andremo a generare cumulativi shift.
Vediamo i risultati ottenuti adesso alla fine di queste ottimizzazioni.
Quindi ritorniamo sulla parte pratica.
Ora passo su Firefox.
Ok, vediamo se ho ancora il test di prima.
Mi rimane in memoria.
Ok, ce l'abbiamo ancora.
Perfetto.
Questa è la testa di prima in cui abbiamo ottenuto un punteggio di settanta novantatré in cui i tempi di caricamento, soprattutto sui dispositivi mobili, erano molto lenti.
Come vedete, L'arte è scontento sul pene.
Era di nove virgola.
Un secondo.
Ora pubblichiamo ricarichiamo la pagina, così una nuova scheda e vediamo il risultato ottenuto.
Considerando comunque non abbiamo fatto ancora tutte le ottimizzazioni possibili e immaginabili pero', diciamo che abbiamo dato una buona base.
Ok, direi che direi che ci siamo.
Come vedete, il risultato è eccellente.
Chiaramente tutti i valori sono sono superati.
Vediamo anche su destra vedete che addirittura su desktop Willard Scott Flint è di zero virgola sette secondi.
Quindi è veramente sotto il secondo su smartphone.
Considerando che uno smartphone datato, questi andati sempre di laboratorio di una virgola nove secondi che va più che bene cumulati lo shift non si non si avvicina nemmeno lontanamente a zero virgola uno e di conseguenza abbiamo superato alla grande tutto.
Tutti i risultati.
In realtà c'è un'altra parte.
Vediamo se sia rimasta nelle slide relativa al okay relativo ai font.
Ti faccio vedere brevemente, ma senza senza che andiamo ad implementare.
Okay, Ok, vediamo sulle slide perfetto che riguarda sempre cumulativi shift sui font.
Quindi abbiamo visto i risultati ottenuti.
Sono eccellenti, ma abbiamo visto che ci hanno accumulato il loro shift veramente minimo.
Questo come un'attività shift minimo si può risolvere in realtà utilizzando la funzione phone display optional.
Ora andiamo a vedere nello specifico di cosa? Di cosa parliamo? É un altro modo è di precari.
Carly.
Se presenti nell'area immediatamente visibile utilizzando la funzione payload che abbiamo già utilizzato prima.
Quindi questo phon display optional questo questo infografiche fa vedere brevemente quali sono le differenze nella possibilità di di mostrare un fonte all'interno del sito web di caricarlo.
La funzione su app è quella che abbiamo abituato prima ci permette di avere un font di fall back, quindi un fronte alternativo intanto che viene caricato quello che abbiamo scelto noi sin da subito.
Quindi sin da subito il fondo viene caricato fino a quando non viene caricato il nostro che quello azzurro.
Quando viene caricato il nostro benissimo lo sostituisce e genera questo leggerissimo cumulati dallo shaft che veramente minimo e non va a impattare il risultato.
Con la funzione opzionale invece abbiamo una situazione in cui il font non viene mostrato, non viene mostrato alcun font.
È una situazione in cui è invisibile semplicemente c'è un'area bianca all'interno del sito web.
Nel momento in cui viene caricato il font viene caricato subito quello che abbiamo scelto noi oppure, in alternativa in grado di identificare se il diciamo il dispositivo usa una connessione lenta e in quel caso carica un altro font, quello di Fullback, quello alternativo.
Il motivo per cui si chiama optional è opzionale, lo stabilisce lui.
Però in questo modo avremo un cumulativi shift zero, mentre con lo slap ce l'abbiamo veramente di un valore minimo.
Che cosa abbiamo visto? Quindi cosa sono? Due cose quali Sono in corso i Beatles l'importanza delle prestazioni di un sito web, come misurare e ottimizzare i Beatles e i risultati di ottimizzazione su WordPress.
Grazie per l'attenzione e passiamo alle domande.
Ok, okay, partiamo da quelle che sono le domande.
Vediamo da le prime che sono arrivate.
Allora vediamo subito esatto.
Viaggio diceva Ok, prima con le app integrate, poi con le progressi web si poteva ridurre il caricamento del sito web fino a un secondo.
Naturalmente ora ci sono i cornflakes.
Esattamente.
Ok, una domanda Luca ritiene affidabile gt matrix rispetto a Page Speed Insights? Allora io o jt Matrix? In realtà non l'ho nemmeno inserito per il semplice fatto che era molto più utile in passato quando il corpo i Beatles non erano stati implementati e in quel periodo diciamo che veniva utilizzato per fare un'analisi più complessiva.
Attualmente gt matrix, per chi non lo conoscesse, integra sia i beatles, però senza spiegare appunto se sono dati di laboratorio oppure no.
è dando un punteggio che molto spesso viene viene utilizzato magari come come sistema di vanto.
Però appunto, senza comprendere senza che il ct matrix faccia comprendere a cosa sta facendo riferimento, quindi i dati di laboratorio e soprattutto non va a dare.
Molto spesso va a dare opportunità che sono molto, molto inferiore e molto meno dettagliate rispetto a quelle che da golf google experience said al riguardo.
Però roberto io ti consiglio di utilizzare webpage test punto org.
Questo è veramente veramente fantastico e vada a dare dei dati molto, molto più tecnici è tuttavia non si non si sostituisce comunque a gulp speed insights.
Poi marius chiede una volta che abbiamo apportato le modifiche con i plugin possiamo disattivarli.
Le modifiche rimangono allora no.
Nel momento in cui vai a disattivare un plugin la modifica viene viene rimossa almeno per quasi tutti i paladini.
Così tuttavia rimane in memoria, quindi è una cosa che ad esempio puoi fare se se lavori come consulente stai applicando le ottimizzazioni per un cliente è attivare il plugin, applicare tutte le ottimizzazioni del caso disattivarlo.
Quindi rhys scansionare il sito web, farlo vedere al cliente con i plugin disattivati puoi attivarli e quindi far vedere subito dopo al cliente il risultato con il blog, in blog inattivi e con le ottimizzazioni attive.
Poi è sempre Marios chiede ma sentivo molti bambini? Il sito non si rallenta? In realtà no.
Dipende, dipende molto dal tipo di plugin che utilizzi, nel senso che ci sono siti web con quaranta cinquanta braghin che sono velocissimi, ci sono siti web con venti pagine che sono veramente terribili.
Sarebbe possibile vederla lavarsi? Ok, ottima lezione, dice Fabio.
Questi interventi possono essere fatti anche sul sito in html puro e non WordPress? Assolutamente sì.
Come ho detto all'inizio tutte le ottimizzazioni possono essere applicate sia su WordPress sia su scifi, su qualsiasi sito web e soprattutto su un sito web in HTML puro.
Qui abbiamo il vantaggio di avere mano, diciamo, poter mettere mano a tutto.
Ad esempio prima abbiamo parlato di Priority Inn, che sono una funzione sperimentale di Google, che però è molto interessante tra l'altro.
Se volete andare a dare un'occhiata, cercate su Google e trovate dei casi di studio di Google, fanno vedere quanto su siti web molto grandi quanto hanno impattato sulle prestazioni.
In questo caso posso puoi andare a implementare queste PlayRatings, che è un po' più difficile da implementare su WordPress.
Quindi col codice html puro è il controllo veramente di tutto e sotto certi aspetti è meglio sotto sotto altri aspetti.
Ad esempio c'è, un sito web WordPress con i plugin che abbiamo visto poco fa, ci permette di con pochi click ottimizzare un po' il grazie.
Grazie a tutti dei complimenti.
Perfetto.
Se non ci sono altre domande, direi che possiamo chiudere il webinar.
Abbiamo abbiamo superato l'ora e mezza, siamo un'ora e cinquantatre.
Quindi, come in ogni caso per diciamo che per qualunque domanda mi potete trovare su LinkedIn, sul sito web o scrivermi su quello su qualunque social.
Ecco qua mi trovate trovate di LinkedIn.
Potete scrivermi per qualsiasi domanda, per qualsiasi cosa eventualmente su domande, un po' più complesse, un po' più lunghe.
Vi posso rispondere lì, quindi grazie a tutti della dell'attenzione e speriamo di rivederci un prossimo webinar.
A presto e buona serata
Learnn è la piattaforma online che ti aiuta a 360 gradi a crescere nel digitale. Sviluppa competenze con oltre 220 corsi, condividi i tuoi risultati, fai networking con otre 120.000 professionisti/e e oltre 300 aziende.
Vogliamo cambiare l’Italia, una persona alla volta.
Per farlo ci proponiamo di democratizzare l’apprendimento e accelerare la crescita di persone, idee e aziende attraverso strumenti tecnologici a supporto di qualsiasi professionista.
Learnn prevede un piano totalmente gratuito (Free) che ti permette di iniziare qualsiasi corso che abbiamo su Learnn.
Per chi volesse finire i corsi, ottenere certificazioni e connettersi con professionisti e aziende, Learnn Pro permette di avere accesso illimitato a tutto questo. Il corso di Learnn Pro è 9.99 euro / mese e puoi disdire quando vuoi.
Per i team di aziende abbiamo anche un Piano Team con oltre 300 clienti aziendali.
Potrai seguire i contenuti da computer, tablet e smartphone.
Scarica l’App iOS/Android Learnn e segui i contenuti in modalità video, audio e testo.
Learnn ha un piano gratuito che ti permette di accedere all 40% di ogni corso in maniera gratuita e solo con la tua email.
Learnn offre sia un piano gratuito con accesso limitato ai contenuti, sia un piano PRO del costo di soli 9.99 euro al mese con cui potrai avere accesso a tutti i nostri contenuti senza limiti o sorprese.
Una volta completata l’iscrizione sarà possibile gestire i propri dati e disdire in qualsiasi momento e in completa autonomia.
No, non offriamo certificazioni, facciamo di meglio.
Man mano che completi corsi potrai verificare le tue competenze e condividerle sul tuo profilo LinkedIn o CV.
Inoltre abbiamo sviluppato una feature chiamata Profile attraverso il quale otterrai un link personale per mostrare in tempo reale tutti i contenuti da te completati e molto altro.
Immagine personale, username, badge, link esterni e molto altro.
Crea una vera e propria sales page dove il prodotto in vendita sono le tue competenze.
Se avessi altre domande puoi usare la live chat qui di fianco.
Per partnership compila questo form
La nostra vision è rendere l'Italia famosa nel mondo per l'esecuzione.
La missione di Learnn
è accelerare la crescita di ogni individuo rendendo accessibili conoscenza, opportunità e tecnologia per avere un impatto positivo sul mondo e sugli altri.
Tutto incluso (come Netflix), IVA inclusa, nessuna sorpresa o addebito indesiderato.
Disdici quando vuoi, in 1 click.
Scegli di migliorare ogni giorno per 12 mesi senza interruzioni scegliendo il piano annuale.
In un unico pagamento annuale
Disdici quando vuoi, in 1 click.
Con l’abbonamento otterrai:
Consuma i +200 corsi e webinar di Learnn da webapp o app iOS e Android, in formato video, audio o testo.
Con l'abbonamento a Learnn hai accesso a tutto (proprio tutto) ciò che contiene la piattaforma.
Ogni mese registriamo nuovi corsi su tutto cio di cui potresti avere bisogno nel mondo digitale.
Con l'app Learnn trasformi ogni momento di vuoto in un'occasione di apprendimento.
Scarica tutto il materiale che ti serve e utilizza i moduli riassuntivi per fissare i concetti.
Ogni settimana nuove offerte di lavoro da parte di tantissime aziende che operano nel mondo digitale.