 Allora, intanto, mi presento Sanandria Guarnieri, lavoro da Performance, sono Full Stack Developer e Team Leader. Non siamo un'agenzia, ma siamo un'azienda che sviluppa software. Quindi tendenzialmente abbiamo gli stessi clienti di un'agenzia, ma le nostre soluzioni sono soluzioni completamente custom o i nostri lavori riguardano espressamente ottimizzazione massima di un sito internet. Io personalmente sono lavorato magistrale in informatica a Milano, all'Università degli Studi, e ho un master preso politecnico al MIP in gestione di impresa. Sono uno speaker e formatore, ho fatto lo speaker per eventi universitari scolastici, adesso qui al WarCamp, e sono formatore nella mia azienda. Cosa andiamo a vedere in questo speech? Allora, intanto, cercherò di annoiarvi il meno possibile con la prima parte teorica di Performance e WebCorp Vitals. Mi hanno messo prima del pranzo per darvi la mazzata finale, e ho detto di renderlo più in dolore possibile. Ci concentriamo sulla parte above the fold del sito, poi spichiamo perché. Vado ad analizzare tre tecniche specifiche, che sono il preloading delle risorse, il CSS critico e come servire l'immagine in maniera corretta. E poi, spero, ci sia il tempo per le domande. Intanto, parliamo di Performance, quindi parliamo di velocità. Perché parliamo di velocità? Perché la velocità impatta sia sull'indiciziazione sia sul posizionamento. Non solo su questo, impatta in generale sulla User Experience. E perché è importante la User Experience? Perché studi negli ultimi anni ci sono sempre i più che dicono che la User Experience impatta direttamente su il tasso di conversione di un sito. E cosa vuol dire questo? Vuol dire che il migliore è la User Experience del nostro sito più profitti generiamo. E con questa frase avete venduto l'analisi e l'ottimizzazione del sito al client. Come la misuriamo? Più o meno è identificato quattro aree che corrispondono più o meno a quattro domande. Quindi cosa sta succedendo? La navigazione funziona e fluida e corretta. Il server ha iniziato a rispondere alla mia richiesta. È usabile? Quindi se io interagisco con il sito, il sito fa qualcosa in maniera più o meno veloce. È utile? Quindi quello che la pagina mi sta mostrando effettivamente risponde a quello a cui io stavo cercando. E in ultima analisi è piacevole che nel nostro caso significa lo scroll, le animazioni sono fluide. Le performance della pagina, questo è un fatto magari un po' meno scontato. Le performance si mantengono stabili durante tutta la navigazione del sito, non al primo caricamento. Come facciamo a misurare questi dati, questi aree, con questi indicatori? Penso che più o meno gli conosciate un po' tutti perché decini di articoli ne parlano. Come vedete sono distribuiti un po' in tutte queste quattro aree di cui parlavo. Cosa c'è da sottolineare di questi indicatori? Che in realtà gli strumenti di misurazione delle performance di un sito non usano tutti gli stessi indicatori e tra l'altro non li usano alla stessa maniera. Cosa vuol dire? Vuol dire che per esempio questi sono gli indicatori per Google Lighthouse. Tra per esempio la versione 7 e la versione 8 di Google Lighthouse, se prendiamo l'LCP, Largest Contentful Paint, il peso di questa metrica nel generare la votazione finale delle performance di un sito è cambiata da 10-15% al 30%. E questo è quello che succedeva dicendo ma fino a due giorni fa il mio sito dava 100%, e oggi mi dà 70%. Perché nel tempo, chiaramente Google non ha caso ma in base a studi che fa, nel tempo questi indicatori pesano diversamente. Questa purtroppo si vede un po' piccola ma non aveva un'immagine migliore, è un po' quello che succede diciamo nel mondo reale. Quindi clicco sul link o il First Paint che è l'indicatore di quando inizia a vedere il primo elemento nella pagina, First Contentful Paint che è quando inizio a vedere tutti gli elementi della pagina del Viewport, e poi First Menu in Full Paint, quindi quando carico anche i testi e font, e ha cascata tutti gli altri indicatori. Sotto più o meno ho cercato di indicare questi indicatori a quale, diciamo, l'area della nostra User Experience che diceva prima corrispondono quindi la prima parte, cosa sta succedendo, poi è utile e poi infine è usabile. Arriviamo a WebCoreVitals, che cosa sono? WebCoreVitals sono tre metri che vengono espressi sotto forma di range, quindi non c'è un valore univoco ma è un range, per capire ci sono i tre colori che trovate su PageSpeed o simili, che utilizzano, che sono basati su tutti i fattori che abbiamo visto prima. Nello specifico i tre WebCoreVitals sono il Largias Contentful Paint, che corrisponde al tempo necessario a mostrare l'elemento più grande nel Viewport, il first input delay, ovvero il tempo che intercorre tra il click che io faccio sul link a l'interazione, il momento in cui il browser risponde a questa interazione e il cumulatore di LayoutShift che è un valore che praticamente viene calcolato sulla stabilità degli elementi nella pagina, quindi calcola quanto gli elementi durante il caricamento cambiano di dimensioni o si spostano. La bandetto ci concentriamo, ho finito la parte più noiosa, a parte questa slide ho finito la parte noiosa, diciamo. Poi è noiosa, io sono uno sviluppatore quindi è sempre soggettiva la cosa, però concentriamoci sulla parte above the fold perché la above the fold è la prima parte che viene caricata, è la prima parte che viene mostrata all'utente e quindi possiamo dire che dovrebbe essere la parte più veloce. Quali sono le problematiche legate alla above the fold cosa rendono il caricamento della above the fold lento? Più o meno questi quattro fattori, risorse bloccanti, vuol dire che il browser mostra i contenuti quando carica e scarica tutti i CSS JavaScript e quindi chiaramente devo aspettare di finire questa operazione. Il main thread visa, cosa vuol dire? Vuol dire che l'interazione dell'utente è possibile solamente quando il main thread JavaScript è finito di essere stato processato e la dimensione, la posizione degli elementi come dicevamo prima. Vedete che questi problematiche rientrano nei webcore vitals tra parentesi li potete vedere. Quali sono le soluzioni quindi? Queste qua, ovvero evitare caricamenti inutili, cioè nella pagina devono essere caricati solo i file JavaScript e CSS necessarà la pagina, non tutto il resto. Rimandare il caricamento inutile, vedere risorse nel body, nel footer. Quindi appunto spostare il caricamento di file JavaScript nel body e utilizzare le z-load in maniera intelligente. Dopo vediamo anche un caso particolare. Il preload in delle risorse, che cos'è? Utilizzare i browser int per modificare il caricamento dei file in base a quello che decidiamo noi. General CSS critico, che di fatto è il CSS necessario solo alla parte above the fold e servire l'immagini correttamente. Per la prima parte, cosa possiamo fare con WordPress? Quindi ho fatto i caricamenti condizionali o caricamenti on demand. Cosa vuol dire? Vuol dire che non vado a caricare tutti insieme in maniera generica, ma l'enchio di file viene fatto in base a appunto se la pagina utilizza o meno lo specifico file. Questo è chiaramente presuppone di poter spezzare si è CSS che JavaScript in più file. L'unico plugin di cui parlerò espressamente in questo talk è Asset Cleanup, che è un plugin utilizzato per ottimizzare i siti e permette proprio di specificare per ogni pagina quale fai caricare o meno. Quindi se non vogliamo farlo via codice Asset Cleanup diciamo che ci aiuta in questo caso. In caso reale prendiamo il nostro ucvp in Qscript e qui dentro nella nostra callback possiamo specificare due parametri che ci aiutano in questa operazione. Le dipendenze, ovvero specificare il mio file JavaScript da quale altro file JavaScript dipende. Questo fa sì che non venga caricato prima generando al meglio un retard dal peggio un error in console e quindi anche tra l'altro potrebbe far rompere il sito e l'altro parametro è l'ultimo che è un booleano che specifica se il file JavaScript sta caricando deve essere caricato nel footer o meno e quindi è proprio lo spostamento dei file come dicevo prima alla fine del body. Chiaramente questi vp in Qscript possono essere vrapati all'interno di controlli specifici della pagina. Quindi avete un file JavaScript particolare che fa delle operazioni particolari solo nel checkout non ha senso che venga caricato in tutte le pagine. La vostra callback che fa l'enchiude di script avrà un controllo if is checkout se nel carrello o quant'altro per controllare se siamo nella pagina all'uccarico se non ho. Però lo ding delle risorse. Allora intanto cosa sono i browser ins? Sono dei suggerimenti che possiamo dare al browser quindi qui non parliamo di WordPress ma parliamo del browser. Al browser possiamo dirgli guarda browser questa risorsa va caricato subito oppure questa risorsa la puoi caricare quando non è niente da fare. Chiaramente dobbiamo conoscere dove specificarlo. Quello che non interessa è lint preload. Che cosa fa preload? Dice al browser guarda questa risorsa mi serve immediatamente quindi me la devi caricare subito. Preload deve essere utilizzata specificando anche che tipo di risorsa bisogna scaricare. Quindi se andiamo a vedere un esempio qui si vede più o meno a look della vp ad quindi quando WordPress dove WordPress stampa a led della pagina in questo specifico caso io andavo a prendere il logo specificato nel customizer del tema prendevo l'url di questo logo e poi dicevo stampami un link con rel preload come esimage, quindi come immagine con questo link stessa cosa per l'icone c'è scritto font ma io sto parlando qua di icone perché tendenzialmente un caso normale può essere che io abbia delle icone nell'above the folder del sito contatti, le mail, i menu potrebbero avere delle icone. Piccolo suggerimento che non sono stati a spiegare le icone o si utilizzano gli svg o si utilizzano come font ma non come cdn, questo assolutamente ma nemmeno carico tutta la libreria di fontosum per usare 4 icone quindi ci sono dei software online io uso fontello ma c'è anche i software online, ci sono anche altri che vi fanno scegliere da tutte le icone di fontosum e di altre libere di icone selezionate solo le icone che vi servono e vi creano un file css piccolino carino da poter utilizzare questa è la maniera corretta per usare le icone dopodiché css critico ora come generiamo il css critico? chiaramente non a mano osmani, che è l'ingegnere software di google ha messo ci permette di utilizzare una libreria fatta da lui che si chiama critico al punto gs appunto che è scaricabile, installabile come pacchetti di node e possiamo portarla in qualunque progetto questa libreria cosa fa? specificando l'url del sito e che non me vogliamo dare al file che viene generato possiamo specificare tutte le risoluzioni dello schermo per cui vogliamo generare questo css critico e in automatico questa libreria ci crea il nostro css critico quella sarebbe la maniera migliore per utilizzare questa libreria qua che ci sia un css critico per la maggior parte delle pagini diciamo importanti del nostro sito perché se voi generati css critico dell'on page, ma non della pagina blog magari voi portate utenti portate traffico dal blog nel senso l'ottimizzazione non salva moltissimo e perché è utile è voluto specificare che è possibile anche specificare dei parametri che si possono ignorare perché se prima noi abbiamo deciso di portare nei nostri icone direttamente nella ad dicendogli al browser carica mele subito e poi nel css critico noi andiamo a rimettere dentro il css dell'icone non è un errore però è duplicazione di codice e anche questo di fatto porta via tempo magari poco magari tanto dipende dalle situazioni e per il risoluzione di uno schermo è interessante perché è completamente personalizzabile quindi avete tutti gli utenti l'80% utenti apple sapete qual è il device perché Google analisi se ve lo dice e potete creare un css critico specifico praticamente basato sui devices di vostro utenti qui come si porta dentro poi nel sito sempre nella head in questo caso la cosa interessante come vi dicevo è che come faccio a sapere quale css critico devo portare devo mettere nella head del sito se ho creato magari il css critico per tutte le pagine del sito banalmente noi dicevo la libreria di utilizzare come nome il nome della pagina e quindi nella head del sito dicevo ok c'è un file che si chiama col post name della pagina su cui sei si se c'è perfetto allora stampo due tag style e dentro mi stampi direttamente il css critico di questa pagina e così sono certo perché nella head che questo css è il primo che viene processato ed è il primo che mi serve ultimo ma non ultimo le immagini ora compressione webp ma anche i famigerati cugini lo sanno e lo ripetono tutti a pappagallo si comprimono le immagini sempre si usa webp grazie a Dio dalle ultime versioni anche se fa le supporta quindi possiamo usarli senza alcun tipo di paura cosa succede è che WordPress la 5.8 supporta il caricamento delle webp ma non la generazione vuol dire che di fatto servirà un plugin per generarli oppure ci sono le cdn che lo fanno in automatico però su questo punto bisogna ancora insomma trovare una soluzione e come dicevo prima attente a lazy load perché bellissimo a lazy load strumento fondamentale ma a lazy load è utile nella bovdefold no perché perché quando io carico io la devo vedere subito non deve essere lazy subito quindi lazy load nella bovdefold è utile per esempio se ci sono degli slider perché alla prima immagine mi va bene che venga caricata subito tutte le altre può essere utile avere le lazy load perché non le vedo a meno che l'utente non scorra quindi attenzione a configurare bene anche la library anche se comunque penso che ormai più o meno tutte le configurazioni dovrebbero evitare questo problema ultimissima cosa esplicitare with the data del foto perché è così il browser sa quanto spazio porterà via l'immagine cioè se l'immagine ci impiega un pochino a essere scaricata però il browser già prealloca lo spazio necessario perché sa quanto recupera questa immagine questa cosa evita che poi non so il pubblicit, il classico esempio delle pubblicità è caricata una pagina le pubblicità arrivano dopo risposta a tutte e voi avete cliccato sulla pubblicità perché avete caricato un secondo prima ma come facciamo poi a generare correttamente qual'è la maniera migliore possibile per avere delle immagini servite correttamente WordPress qui con la funzione ad attaccamento image, fa quasi già quasi tutto questa funzione restituisce spece l'HTML dell'immagine ma lo fa anche in maniera efficiente perché restituisce l'HTML con già dei tag i tag sizes e src set che aiutano appunto a gestire correttamente l'immagine intanto se servono è corretto crearsi le proprie image size quindi per esempio come esempio di prima ho un so che tutto il mio traffico è da mobile ho bisogno di un'immagine che è larga per forza 370 pixel può essere utile ai fini dell'ottimizzazione aggiungere il proprio ritaglio al tema cosa fanno questi due attributi questi due attributi sono sempre dei suggerimenti di warp cosa dell'HTML che il browser interpreta sizes dice che guarda browser a questa larghezza prendi l'immagine che a questa larghezza qua quindi ha una certa risoluzione del viewport prendimi l'immagine con questa larghezza qui l'Src set cosa fa semplicemente permette di specificare più formati immagine nello stesso taglio tutto questo sembra una grandissima super cazzola ma visto così è un po' più comprensibile ovvero questo è un'immagine è un'immagine che nell'Src set ha due formati specificati quindi una che è larga 480 pixel e l'altra che larga 800 pixel nel sizes io mi so dicendo browser se il viewport è al massimo 600 pixel prendimi quella da 480 il virgola 800 vuol dire in tutti gli altri casi prendimi di fatto quella più grande naturalmente si usa così il tag sizes quindi si specifica la media query dell'immagine più piccola più grande perché ha senso fare questo perché computationalmente è meno pesante prendere un'immagine da 480 pixel su schermi che magari sono anche 390 quindi comunque c'è un fattore di ridimensionamento ma è molto più piccolo che prenderne una da 800 pixel e ridimensionarla a 390 quindi comunque si cerca di servire le immagini nel formato più vicino a quello necessario tutto questo fa sì che la velocità sia appunto migliore detto ciò io ho finito l'unica cosa che voglio dire marketata finale è che noi in performance cerchiamo continuamente delle persone quindi se vi piace programmare vi piace sviluppare non avete paura di soluzioni completamente custom potete andare sul sito, scrivere a me io sono qua in giro quindi poi potete rimorchiarmi e parlare di qualunque cosa insomma Bene, grazie mille fatemi un applauso Grazie Abbiamo 5 minuti per le domande vi ricordo che se quando siete iscritti a workamp avete specificato che avete esigenze alimentari particolari per il pranzo che sarà alla fine di questo talk qua, uscendo a destra c'è il catering qui potete chiedere quello che avete specificato all'acquisto domande? non per lui, non per il catering io ho una domanda ok, volendo io c'ho due slide in più quindi ehm te la faccio visto che sono curioso non è debito quando ovviamente le immagini già visibili nel viewport all'inizio non vanno caricate con le z-load però va comunque specificato con il metapreload che deve caricare quell'immagine che è subito visibile, giusto la best practice sarebbe quella Sì, allora e diciamo che se parliamo di immagini per esempio di uno slider non può utilizzare il preload perché il preload venne utilizzato di solito su link quindi però ecco diciamo che in questo momento almeno per il software che utilizziamo noi in azienda beh, senza tanto EVOV per esempio uno di più usati in teoria il problema delle z-load è già gestito quindi vi esula dal dover controllare ecco però sì, vuolendo poi anche specificarlo poi il preload se è necessario per delle risorse ecco e... Sì, beh, guarda, è una roba velocissima allora intanto qui si vede poco questo è il sito a cui poi è nato questo tool che non è nemmeno completamente ottimizzato però come vedete qua non si usano plugin ecco, cioè, io l'ho altro per scontato cioè, noi non usiamo plugin allora, l'ottimizzazione dei siti quindi piroketo, robe simile ecco cioè, noi l'ottimizzazione le facciamo a mano dal codice quindi si possono raggiungere, diciamo questi risultati qui e a fronte della chiacchierata questo è il diagramma waterfall e adesso non si vede perché si vede svuocato ma la prima cosa scaricata è il logo perché ha usato il baro saline, il secondo sarebbe l'orecone sempre per lo stesso motivo e poi, per esempio, in questo caso specifico io avevo uno slider in on page quindi cosa scarico scarico il CSS e il JavaScript che mi permettono di far funzionare quello slider perché poi perché poi è la prima cosa che il mio utente vedeva ecco faccio anche una domanda nel mondo degli unicorni tutti hanno i siti custom super ottimizzati purtroppo noi non viviamo in quel mondo lì e a me arrivano i siti Disastro i siti che su GTmetrics performano 35 42 allora i siti da rifare e non sempre uno ci riesce perché magari il budget a disposizione non lo prevede ora la risposta giusta sarebbe tutto custom ma non si vuole allora volevo capire qual è il tuo approccio perché tutte le cose che hai detto sono bellissime quando uno può mettere le mani ma quando ti trovi su 30 plugin è vero che c'è quel plugin degli asset però hai voglia a farlo e soprattutto poi ci sono alcuni strumenti alcuni temi, alcuni plugin che addirittura piantano il codice delle immagini senza sfruttare le funzioni di WordPress allora incomincia a cristonare dicendo cavolo io come faccio a uccare quelle robe lì quindi tuo approccio su siti che zoppicano e scappo via più veloce di una lepre allora ti do primo un attimo di contesto perché poi allora è chiaro che non in performance performance è l'azienda di Andrea Cardinale intanto che molti conoscono lui è conosciuto perché è specializzato su ottimizzazione quindi noi abbiamo dei siti che arrivano e fondamentalmente dicono che questo sito deve diventare una formula 1 non tutti i siti possono essere una formula 1 o meglio magari a livello tecnico potete diventare una formula 1 ma se il cliente paga per avere una panda avrà una panda con tutto rispetto per le panda quindi è chiaro che certi tipi di lavori si possono fare solo con certi tipi di budget nel caso specifico perché chiaramente non tutti i clienti hanno i budget ingenti perché comunque questa è solo la parte a both the fold del sito quindi capite che e poi va beh queste in realtà non sono tecniche che volendo si fanno post lavoro cioè sarebbero delle best practice da utilizzare quando uno sviluppa un sito perché è vi portato avanti con lavoro allora intanto anche qui dividiamo ci sono i siti fatti coi builder i siti fatti non coi builder i siti fatti coi builder già partono con una stampella anziché con due gambe però detto ciò allora quello che si può fare intanto è sicuramente a certain app viene in aiuto perché comunque anche un builder non ha bisogno di essere attivo in tutte le pagine non per forza cioè non hai detto dipende da caso a caso oppure faccio un esempio contact for seven il css di javasil viene messo incluso in tutte le pagine e di senso un plugin che funziona bene fa quello che deve fare ma questa cosa non è gestita e quindi a secret app fa il suo poi quello che si può vedere analizzare ok dei 50 plugin che ha questo sito quali sono quelli che performano peggio quindi ci sono degli strumenti diciamo per monitorare ok anche queste cose qui e da lì la domanda è posso sostituire il plugin quindi non posso rifare il tema perché poi di solito è il tema magari che affossa il grosso delle prestazioni ma posso almeno mettere dei plugin che funzionano meglio tipo non so non posso fare il nome ma l'ultimo sito che fattura parecchio che ha un plugin di recensioni che arritare enormemente il caricamento della pagina perché ha una chiamata iniziale ok la nostra soluzione lì la prima cosa è posso lato codice modificare questo comportamento quindi ci sono uc filtri all'interno del plugin che posso sfruttare si o no se no forse mi conviene sostituire il plugin probabilmente sì nel caso di builder quello che si può fare è intanto legger la documentazione che un pochino viene anche sottovalutata però molti builder hanno una parte dedica elemento se non sbaglio ha una parte dedicata all'ottimizazione e poi di fatto si può arrivare comunque fino a un certo punto è chiaro che ma penso che queste cose verranno vette per esempio una parte c'è tutta una parte di ottimizzazione che esula poi da il codice vero e proprio che quindi è lato server anche se il server comunque pensa il 10% quindi comunque non è che facciamo i miracoli bella veri serve performanti però comunque serve fino a un certo punto l'object cache lato applicativo quindi ci sono delle cose che migliorano e queste sono magari anche a costi un po' più sostenuti di avere un'ottimizzazione specifica su misura queste sono chiaramente tecniche che a meno che non dovete fare un sito custom è fatica poi andare a fare cioè si possono fare perché poi dipende tutto come fatto ci sono aziende che fanno dei temi comunque fatti bene IT per esempio fa dei temi che sono fatti bene e lì ci si può anche mettere mano grazie grazie mille andiamo all'altro applauso grazie