 ok a disclaimer intanto spero che non ci sia nessun fornitori di pubblicità qua dentro perché ne parli ero male e detto questo spero che il nel titolo nessuno si aspettasse un talk di marketing o robe simili perché non ci sarà niente di marketing io sono uno sviluppatore sono un team leader e full stock developer a performance solo ho arrivato a magistranea informatica e ho un master in gestione di impresa cosa vedremo in questo talk parlerò un contesto generale cosa sono i banner cosa sono le pubblicità per chi è utili cioè perché vengono utilizzati e lato tecnico effettivamente cosa sono per uno sviluppatore i banner quali sono le criticità che ci portiamo dietro quando in un sito integriamo delle pubblicità come le pubblicità vanno a diciamo peggiorare o comunque influenzare i core vitals e vi spiegherò come poter caricare in maniera corretta comunque come ottimizzare il caricamento di banner e poi volevo condividere con voi due tecniche che ho utilizzate utilizza su susciti che sviluppiamo che è l'utilizzo di praticamente di banner per essere in php e l'utilizzo di legati di amici tramite javascript se avanza tempo dovrebbe se c'è qualche domanda poi sono qua a disposizione allora intanto contesto quindi cosa sono le pubblicità dovremmo saperlo tutti banner sono pubblicità online che stanno su un sito possono essere diversi tipi immagini log animazioni possono essere ormai abbiamo visto qualsiasi cosa ultimamente hanno delle caratteristiche in comuni tutte le pubblicità hanno un formato quindi diversa grandezza occupano diverse posizioni possono essere interazione tendenzialmente interattive e la maggior parte le volte sono dei link per me che sono un tecnico che mi interessa fino a un certo punto poiché cosa è una pubblicità cosa rappresenta la pubblicità rappresenta semplicemente dell'html del javascript che viene ignittato in una pagina web tramite uno script di terze parti quindi uno script che tendenzialmente prende del colice da un'altra parte che non è il mio sito qual è perché vengono utilizzati poi fondamentalmente i banner perché ci vogliamo fare del male esclusivamente la ragione è una sola che soldi i banner portano soldi quindi chiaramente tutti siamo interessati a fare i soldi e tutti vogliono utilizzare i banner nei propri siti quindi il cliente che ha l'idea geniale dice beh se io con un banner porto soldi cosa faccio rientro il sito di banner no e quindi il banner il sito che porta soldi diventa questo è un sito che porta soldi questo qua ovviamente no perché perché c'è un uso sconsiderato dei banner quindi qual è il problema che banner portano delle criticità criticità che sono diciamo di vari vari tipologie diverse principalmente sono più o meno in queste quattro aree quindi abbiamo problemi lato ui perché possono complicare la navigazione o addirittura rompre i layout che lo sviluppatore ha creato ho problemi lato esperienzotente perché le pubblicità possono distrarre il mio utente e quindi addirittura anche portare dei diciamo dei peggioramenti nella conversione del sito e il posizionamento di alcuni banner possono creare frustrazione quindi pensiamo per esempio al classico sito in cui il banner chiaramente si carica in ritardo rispetto alla pagina e va a finire esattamente sul bottone che volevate e poi c'è anche una parte importante di diciamo la parte di autorevolezza di un sito quindi un sito con molte pubblicità può essere percepito poco professionale può essere poco credibile e spesso le pubblicità sono forvianti cioè io ho un sito di agenzia viaggi e il mio banner pubblicitario mi spiega come posso allungarmi una certa parte del corpo ecco diciamo che non è il massimo della vita no e poi chiaramente per me che sono un sviluppatore l'aspetto più importante è l'aspetto delle performance cioè un banner qualunque esso sia mi rallenta il caricamento della pagina carica rallentare il caricamento della pagina e alla fine di tutto mi può portare anche a un peggioramento del assio perché perché vado a peggiorare tutta l'ha i dati che vengono raccolti tramite i core web vitals quindi non mi dilungero esageratamente perché stamattina già parlate di core web vitals quindi ne ho parlato anche nel tuo catorino quindi qui parlerò solamente di definizioni sono tre come già è stato da stamattina larga squadron full paint misura il tempo del caricamento dell'elemento più grande che c'è nella pagina il first input di lei fino a marzo che poi verrà sostituito misura il tempo che intercorre tra il mio clic sulla pagina al momento in cui il browser risponde a questo click quindi misura indifintiva l'interattività della pagina e poi come ultimo all cumulative le outshift che misura lo spostamento degli elementi nella pagina e quindi fatto è l'indice di stabilità degli elementi del mio sito quindi questo è quello che diciamo le definizioni che vi dan che c'ha gpp insomma niente di straordinario come i banner vanno a influenzare questi tre web vitals allora per quanto riguarda l'lcp il problema qual è che banner se sono di grandi dimensioni potrebbero essere essi stessi l'elemento più grande della pagina caricandoli diciamo in maniera non ottimizzata le cp vanalmente quindi o dei risultati che sono pezzini per quanto riguarda il first input di lei il problema è che abbiamo detto all'inizio il banner sono degli script e quindi mi vanno a occupare quello che è l'elaborazione del thread principale della pagina e quindi chiaramente mi farà allentare i caricamenti di tutti gli alti script e per quanto riguarda il cls il problema qui è che una volta come diciamo nell'esempio precedente quando vengono creati posso avere degli elementi nel mio layout che vengono spostati anche perché qual è il punto il punto è che magari io posso conoscere la posizione del banner ma non so a priori non è detto che io posso sapere a priori qual è la sua dimensione e quindi crea tutto un problema appunto di stabilità del layout quali sono i metodi per caricare in maniera ottimizzata i banner alla fondamentalmente più o meno sono questi tre in maniera molto generale quindi il responsive banner non significa che responsive qui in questo caso non significa esattamente sì i banner da mobile e i banner da dezzo adesso grazie al 2023 tutti i fornitori di pubblicità hanno di banner responsive il punto è che bisogna scegliere attentamente la dimensione del banner in base alla posizione cioè si può scegliere quale banner quali caricare magari c'è un un set tra cui scegliere bisogna scegliere quello di dimensioni corrette la prestignazione dello spazio cosa vuol dire posso creare un container un div in modo tale da allocare preventivamente lo spazio del banner al momento del caricamento quindi non le ho faccio caricare in maniera diciamo non controllata ma gli dico io dove farlo e con un div di una certa dimensione ultimino un ultimo come dicevo poca anzi parliamo sempre di script javascript quindi sempre lì si va a parare uno script tendenzialmente in un'ottimizzazione bisogna utilizzare assin che deferere in maniera intelligente comunque in maniera corretta oltre a diciamo questi che sono macro diciamo regole sulla parte appunto di ottimizzazione le due tecniche che io volevo condividere con voi sono queste due perché diciamo che sono non sono ecco diciamo super intuitiva all'inizio ovvero utilizzare c'è oltre ad allocare allo spazio io posso dire al mio sito di caricare un'immagine che vada a imitare quello che sarà il banner nella pagina l'altra l'altra tecnica che per uno sviluppatore poi almeno per quanto mi riguarda è la più divertente invece è utilizzare uno servatore del layout che non è un super eroe ma è un un oggetto javascript che permette di guardare quello che succede nella pagina e riuscire ad adattare il layout in base a quello che succede quindi prima tecnica cosa consiste il questo preloader dei banner allora io di fatto in tre mosse inserisco un div nella pagina in cui io dirò che qua ci sta il mio banner lo so inserisco questo div poi ho una funzione che mi restituisce За un svg in codificato in base 64 che sarà della stessa dimensione del banner e dopo di che io prendo questa immagine e la metto come background del mio tag che contrarà la pubblicità questo sembra una grandissima super cazzo la in realtà l'effetto quello che potrebbe imitare è questo cioè io nei privi mili secondi di caricamento della pagina potrei avere tutte quei rettangolini per caricati da me questo fa sì che non si rompa una volta caricata lì la la pubblicità il mio layout perché poi di fatto è questo il problema più grosso anche per l'utenti che navigano ora vi faccio vedere come farlo quindi in questo caso io utilizzato stidu action qui semplicemente perché sono le due posizioni classiche in cui si vedono le pubblicità quindi all'apertura del body e nel future e banalmente questa funzione non fa nient'altro che un eco di un diva quindi non c'è niente di complicato a questo punto la mia funzione questa è un po più complicato perché ora mia funzione è che mi fa un ritorne quindi mi restituisceombi tutta questa stringa di codice qui che è un svg come dicevo prima in base 64 e non è nient'altro che un rettangolo qui viene passato il colore perché ho detto va beh tanto che ci siamo facciamo gli anche colorati sti rettangoli che almeno se qualcuno gli dovesse intravedere almeno sono sono carini ecco unendo queste due cose cos'ho questa cosa qui ovvero alla vpd poi ritorniamo su questo aspetto io prendevo il colore del customizer perché lo faccio uscigliere al cliente mi faccio ritornare il mio bel svg e a questo punto apro i miei tag style e metto come regola css questa qui che banalmente la mia immagine diventa il mio background ora due osservazioni la prima è rispetto anche la parte più generale che vedetto prima cioè quindi preallocare lo spazio di banner quindi a sin su utilizzare e se with per il banner quindi sicuramente queste due cose sono due cose che due attributi che serve specificare si può fare in un foglio di stile differente non è importante questa poi perché la vp ad allora la vp ad picco velocissimo inciso è un action che va a aggiungere una mia callback all'interno della ed di una pagina perché nella ed perché siccome io voglio che questi banner siano caricati il più velocemente possibile il prima possibile lo vado a fare nella parte più alta della mia pagina che verrà passata prima di tutto il resto rispetto a quando carico la pagina la pagina web insomma essenzialmente per questo motivo qua questo sempre perché è come anche detto stamattina in altri speech la parte la bov default del sito comunque il sito deve caricarsi sempre il più velocemente possibile quindi prima li dò informazioni prima riesci a farlo ok a questo punto veniamo a supereroi qua l'osservatore cosa fa questo osservatore allora intanto a cosa serve cioè in questo caso serve a fa tante cose cioè viene utilizzato in tutte le situazioni io l'utilizzo essenzialmente per questi tre problematiche uno mi risolve problemi di x cioè se ho problemi di sovrapposizione di elementi quando viene caricata una pubblicità io tramite javas che posso sistemare la situazione il secondo è insieme alla parte di prima cioè io il mio risolver svg viene caricata la pubblicità forse quel presolder non serve più e quindi vado a toglierlo ma devo sapere quando viene caricata la pubblicità l'ultimo il più divertente è creare le ia dinamici cosa significa significa che posso crea posso cambiare il liato di una pagina in base a quello che succede in generale in questo caso nel questo speech perlomeno in base se è presente o meno un banner facciamo un esempio ho un articolo di un blog classico content a 75% sidebar al 25 nella sidebar ho solo pubblicità oggi non si caricano le pubblicità per una motivazione casuale cosa faccio tengo il content al 75 per cento con tutto del bianco alato posso fare non è bello il mio osservatore dice ok la pubblicità non è stata caricata allora prendo il mio content della pagina e lo allungo al 100 per cento presente o lo centro nella pagina ora lezione bonus su cosa sono gli observer pi in javas per non so quanti di voglia hanno mai utilizzato quanti di voglia abbiamo mai sentiti qualcuno l'ha mai sentiti qualcuno ok ok perfetto allora faccio un po di contesto quindi cosa cosa servono gli observer gli observer semplicemente monitorano qualcosa e notificano qualcosa quando viene incontrato una certa una certa condizione cosa servono in generale sono di 4 tipologie e servono appunto per individuare dei cambiamenti in pagine web o applicazioni sono i quadratipi abbiamo in mutation observer che è quello che controlla il cambiamento di che che vengono nelle pagine quindi magari un oggetto l'intersection che è quello che controlla l'intersezione di un oggetto con qualcos'altro il resize che è quello che monitora il cambiamento della dimensione di un oggetto è l'ultimo il performance che fondamentale utilizzato per raccogliere dei dati sulle prestazioni di una pagina nel nostro caso specifico quello che ci serve è per far farvi un esempio l'intersection observer adesso viene utilizzato per fare tutti quegli effetti allo scroll della pagina c'è patting javascript moderno si usa non si usa più l'event scroll ma si usa l'intersection observe se volete farlo un po più fine in questo caso noi serve il mutation observer e quindi in questo caso cosa fa posso creare un istanza l'istanza prendo come argomento l'oggetto da osservare è un oggetto di configurazione questo oggetto di configurazione serve per dirgli cosa devo andare a monitorare quindi posso monitorare il cambiamento di attributi posso monitorare l'aggiunta di un un elemento child all'elemento che sto osservando e altre diciamo e posso avere altri parametri di configurazione ha una callback che appunto è quella che al momento in cui deve essere notificato il cambiamento mi fa qualcosa e qui è carino il fatto di nella callback prima di chiamare la callback utilizzare una mutation list in modo tale da raccogliere tutte le mutazioni che avvengono nella pagina e poi andrà a controllare solo quella specifica che mi interessa l'oggetto può variare in diversi modi per caricamenti di cose della pagina a me interessa in questo caso sapere come dicevo prima la pubblicità è stata caricata e vai ultimissimo c'è il metodo serve che è quello che diciamo avvia l'osservatore il disconnect che lo stoppa quindi abbiamo uno stop and go in base all'utilizzo che ci serve nella pagina codice breve e semplice un esempio vado a prendere l'az che in questo caso va vera di google vado a prendere il mio edder perché è l'elemento che voglio cambiare costruisco il mio oggetto di configurazione che gli dico monitora mili attributi istanzo istanzi il mutation observer e gli dico prendimi tutta la mia mutation list prendimi mutazione per mutazione se ne trovi una in cui è stato modificato l'attributo che in questo caso so perché questo tag qui so che può avere solo la pubblicità dentro essenzialmente allora prendi il mio edder e gli aggiungi del bad del padding sotto e poi appunto la mia istanza metodo observe in quelli passo come dicevo prima l'oggetto da verificare da monitorare e la configurazione cosa fa questo codice banalmente guardava quando la pubblicità di google veniva caricato nel sotto la letter della pagina dava del padding perché la pubblicità in alcuni casi se aveva un formato troppo grosso andava sopra un elemento del letter e quindi impediva la navigazione comunque andava a peggiorare l'esperienza utente bene siamo arrivati alla fine quindi cosa cosa abbiamo imparato non so cosa spero di avervi trasmesso è che i banner ok hanno uno scopo economico ma hanno l'altra faccia della medaglia che è un peggioramento e creano diversi problemi all'interno del testo di un sito internet quindi bisogna si possono usare chiaramente ma bisogna utilizzarli in maniera controllata e cercando di ottimizzare il più possibile il loro caricamento e poi spero che di avervi messo perlomeno la curiosità di provare magari i due trucchi presso del php e il di audio dinamico in javascript vi ringrazio grazie andrea wow stiamo andando veramente a dei livelli si davvero domande abbiamo tempo qualche minuto sì prima ho visto che avevi messo un svg come base 64 in line perché in base 64 è semplicemente perché per una questione di compressione diciamo e però mi serviva per avere non riuscivo a fare diversamente per assignare colori file quant'altro cioè lì era una situazione per cui usavo le svg per essere il più sì perché nello specifico va beh adesso il colore non era una cosa che l'avevo messo perché mi piaceva me avevo una richiesta specifica dal cliente perché doveva essere un tema diciamo utilizzato su più siti per più clienti quindi un tema rivendibile quindi avevano espresso la possibilità di avere questa cosa qui insomma quindi era un po' vinculato da questa cosa e se visto che evidentemente evidentemente ci ha lavorato a livello pratico se i concessionari tipo google principali stanno lavorando anche loro a un miglioramento delle performance nativo di questa cosa visto che comunque poi google lavora tanto sulle performance anche dei suoi prodotti a cioè mi sei che nello si ci stanno lavorando allora diciamo che il io i lavori che ho fatto finora non avevano come target google apparti il quel colice che era un esempio ma quello era diciamo un caso specifico il grande lavore io fatti su fornitori diciamo terzi ma diciamo non google il punto qual è ok google può sicuramente lavorare a tutte le ottimizzazioni che vuole e sicuramente ben venga il problema che comunque ho uno script nella pagina che devo gestire c'è quello purtroppo è in carico mio c'è google non ci può fare niente può essere veloce quanto vuole ma uno script in più mi va ad aggiungere manamente un un effort al al mentre della pagina e quindi chiaramente per quanto poco mi va comunque a enficiare poi quelle tempistiche il discorso è potrà essere diciamo una cosa che possiamo diciamo non tenere in considerazione dipende dipende c'è fondamentalmente ecco però diciamo che quando andiamo quando noi in performance ottimizziamo ottimizziamo i siti c'è tanto gli script li vai ottimizzare non è che fai questo sì questo no quindi io già basti vado a ottimizzarli tutti so che con il banner potrei avere diciamo qualche accortezza in più per una questione più che altro di layout perché sono sempre tanto caricati in delay rispetto al resto però è comunque uno script che devo gestire ecco io una curiosità è probabilmente una domanda fatta da totale ignorante e quindi magari è pure sbagliata la domanda quindi sentiti libero di dirmi non c'entra niente si questo sempre con me e tutti quelli che mi conoscono lo sanno ma soprattutto sentiti libero di dirmi non c'entra niente io ho una di bloc sul uso una di bloc nel mio browser quanto questo che c'è i detto che ci hai mostrato interagisce con gli adi blocker no sì no quindi io continuo a vedere vedrò allora le cose bianche e cioè dipende nel senso che allora è la di bloc non per me impedisci al browser di caricare le pubblicità poi dipende se il sito però c'è non può gestire diciamo questa cosa qua può vedere se nel momento in cui non viene caricato in non hai fisicamente proprio l'HTML della pubblicità trova gestito come come c'è come ho fatto vedere con l'observer piuttosto che robe robe strane volendo lo puoi ottimizzare con l'observer e dire sei il browser a una di bloc sì perché sì perché poi quella di bloc ti blocca proprio nel sucrone si vede che proprio ti va a bloccare il caricamento di uno script certo per esempio c'è la di bloc da problemi anche con anche quella partita manager volendo perché va a bloccare gli script e quindi se non ti carica con la pubblicità la pubblicità non esiste quindi è un divino che rimane vuoto ok grazie