Bene.

Vediamo ora come gestire e ottimizzare i fogli C S S, ovvero i fogli di stile, quelli che determinano lo stile degli elementi all'interno della pagina.

Allora abbiamo già visto all'interno del del modulo relativo all'analisi di un sito web che molte delle problematiche relative alle prestazioni um erano relative a proprie foglie di stile perché determinando lo stile della pagina ed essendo elementi importanti durante il della pagina, molto spesso andavano a impattare su quello che era appunto il tempo ricaricamento di una pagina web.

Ora vediamo sempre utilizzando per Meers che a mio parere è il plugin più adatto per questa tipologia di ottimizzazioni, come ottimizzare e gestire al meglio i file C S S.

Allora partiamo da quello che è il la voce loading all'interno sempre di hers e utilizziamo la funzionalità.

In questo caso utilizzeremo semplicemente due funzionalità che sono load e potremmo utilizzarla per precaricare degli elementi, quindi per precaricare del dei fogli C S S che noi reputiamo prioritari durante la fase della pagina, mentre ci servirà a definire una priorità appunto dei vari fogli di stile all'interno di ogni pagina web.

Partiamo innanzitutto da vedere quella che è la situazione rispetto al nostro sito web che chiaramente è una è una situazione, un po', un po' comune, ovvero quella in cui c'è un semplice tema con una pagina appunto, diciamo un sito web vetrina, quindi con varie informazioni, senza senza troppe interazioni da parte dell'utente e in questo caso facendo tasso destro e ispezione.

Apriamo il nostro crows, andiamo nella scheda network, mettiamo il filtro su c s s.

Aggiorniamo la pagina prima in f cinque e vediamo i fogli di stile che carica.

In questo caso vediamo che carica quattordici fogli di stile sono relativamente pochi.

Considera comunque che questo è un sito web sul quale io ho installato l'elemento, un appunto un tema preimpostato e basta, quindi non c'è nessun'altra particolare funzionalità aggiuntiva.

Quindi molto spesso mi capita chiaramente di avere a che fare con siti web che ne hanno settanta ottanta di fogli di stile.

Quindi questa è una situazione quasi atipica, perché comunque, nonostante dovrebbe essere lo standard, è comunque una situazione all'interno della quale è un ambiente all'interno della quale del quale non sono presenti plugin che vanno ad appesantire quello che è il sito web.

Come puoi vedere in questo caso troviamo fogli di stile vari troviamo anche da Shik, che in questo caso vediamo solamente perché stiamo utilizzando WordPress.

Stiamo visualizzando il sito web come amministratori, quindi sono icone che WordPress utilizza nell'area amministratore al di fuori di questo, prevalentemente se ordiniamo per peso dei dei file.

Quindi sulla voce Z vediamo che prevalentemente ci sono due o tre file che hanno un peso relativamente sostenuto, anche se comunque parliamo di poche decine di kilobyte.

In particolare vediamo da KS che appunto possiamo ignorare.

Light in questo caso fa riferimento a elemento, quindi è qualcosa di di presente all'interno del tema e poi c'è lo swipe che è un molto spesso viene utilizzato per per le slide e altri elementi c'è.

La parte di icons sempre icone e relativo elemento però ha un peso già piuttosto irrisorio.

Quattro kilobyte anche quello sopra in realtà anche lo in realtà ha un peso piuttosto piuttosto irrisorio.

Comunque sono file che se possiamo ottimizzare ben venga.

Quindi abbiamo sostanzialmente una decina di file S s che potenzialmente possiamo già ult- possiamo ulteriormente ottimizzare, anche se in realtà sono già sono già piuttosto scarni.

Allora andiamo su per Mathers e la prima cosa che ti voglio far vedere è la funzionalità.

Allora in questo caso semplicemente noi facciamo new e con questa funzionalità noi possiamo andare a appunto dare una priorità ai vari elementi.

Quindi se ad esempio ci rendiamo conto che ti rendi conto che nel tuo sito web hai dei file C S S che vengono scaricati per primi ma in realtà non hanno una priorità elevata, perché sono comunque um, contengono dello stile che fa riferimento magari a una pagina a fondo pagina o comunque a degli elementi che non sono importanti per il rendering, allora tu puoi andare a dargli una priorità minore.

Come puoi farlo prendendo semplicemente quello che è il nome del file.

Quindi supponiamo che il nostro file light abbia una priorità minore, una bassa priorità al momento sotto la voce all'interno della colonna ha la priorità quindi la più alta.

Noi supponiamo di voler ridare una priorità minore, perché supponiamo appunto che non abbia importanza quello che andiamo a fare è semplicemente facciamo un tasto destro cop siamo copil, quindi copiamo l' u r l lo incolliamo in una nuova in una nuova finestra e s estrapoliamo solamente quello che è il nome del file, ovvero questo punto mi punto c s s e lo incolliamo qui.

Una volta fatto questo, selezioniamo una priorità per l'elemento.

Quindi noi diamo quindi bassa e in questo caso possiamo addirittura specificare per quale tipologia di dispositivi, quindi solo per desktop, solo per smartphone, e cercare altri parametri aggiuntivi.

Cercare delle informazioni aggiuntive come la la location, quindi la posizione in cui è presente questo file questa classe e abbiamo la possibilità di cercarlo per o meglio di selezionare quello che è l'elemento genitore.

Questo serve principalmente a ad esempio, dare una priorità bassa a un a un container, quindi a un a un a un elemento e però magari non riusciamo ad avere la classe di quell'elemento specifico.

Quindi specifichiamo magari la classe dell'immagine che è contenuta all'interno di quel container e facendo Search Selector abbia la possibilità di selezionare il contenitore genitore.

Quindi quello che appunto la raggruppa in questo caso non ci interessa.

Noi abbiamo messo direttamente il nome del file e quindi facciamo changes.

Bene, torniamo sulla nostra scheda, aggiorniamo la pagina premendo f cinque e vediamo il nostro file che vediamolo qui Light.

Come vedi, passa da una priorità che prima era is, quindi la più alta a I, quindi in questo caso è comunque una priorità alta, ma ha dato una priorità minore rispetto agli altri file C S S che vengono quasi tutti scaricati con la priorità massima.

Quindi di conseguenza quello che va che quello che accade che se andiamo su Wall vediamo quello che è l'ordine con il quale sono stati caricati gli elementi l'ordine, lo impostiamo da water, quindi all'ultimo elemento della della nostra della nostra tabella e se noi andiamo a vedere dove viene scaricato il file, come vedi viene scaricato dopo la metà.

Insomma, quindi non viene più data la priorità a questo file che prima ci viene scaricato quasi per primo, ma passa in secondo piano, quindi gli viene data una priorità minore.

La stessa cosa chiaramente possiam farla in senso opposto, quindi dargli una priorità maggiore in funzione di quello che è di quello che è il nostro bisogno.

Chiaramente questa priorità non possiamo controllarla completamente perché in parte è controllata dal browser, quindi da quello che il browser crede che sia la cosa più corretta da fare e in parte è controllata da come è stato sviluppato il sito web, quindi dal codice da quell'elemento.

Da quel sistema il tema che va a iniettare, che va a far sì che questo codice c s s venga caricato.

Quindi non abbiamo un controllo al cento per cento completo, ma possiamo quantomeno andare a ad aggiustare e a fare alcuni miglioramenti rispetto ai file c S s che ci interessa, a cui ci in cui ci interessa dare maggior priorità o minor priorità.

Passiamo ora a un'altra funzionalità che è quella del pd, che è una funzionalità in un certo senso quasi opposta, nel senso che questo ci dà la possibilità di precaricare un foglio c s s, quindi in un certo senso è come dargli.

La priorità massima, però non funziona proprio allo stesso modo il load nella fase nella fase di rendering viene prima molto spesso viene prima di tutto di tutto il resto di tutto ciò che um di ciò che segue nel nel processo di rendering, quindi viene data la priorità a questo elemento ancor prima, ad esempio, di eh di tipologie di elementi che avrebbero la priorità.

Facciamo un esempio in questo caso, come vedi il browser va giustamente eh chiaramente anche in funzione di quello di come è stato costruito il sito web va a dare la priorità a quelli che sono i fogli di stile.

Quindi è file c s s perché chiaramente determinare lo stile della pagina è la prima cosa che importa per l'utente, cioè vedere la pagina correttamente.

Se noi però volessimo dare um volessimo caricare ancor prima dei fogli di stile, ad esempio non so questa immagine e non possiamo farlo con f privat, perché comunque questa immagine è già una priorità alta non è la ma non è con la massima, ma comunque non è non è controllabile, cioè non è non possiam far sì che col col questa immagine venga caricata ancor prima dei fogli di stile.

Un modo però per farlo è pre caricandola, cioè pre caricandola in modo tale che il browser ce l'abbia già pronta.

Vediamo anche questa questa funzione prendiamo questa immagine, facciamo tasto destro copy copy, quindi copiamo l' u r l ci copiamo solamente il nome dell'immagine e il formato.

Torniamo su hers e in questo caso cancelliamo la la funzione di prima che non ci interessa più.

Aggiungiamo facciamo ad new sotto, affianco alla voce load inseriamo.

In questo caso dovrebbe bastare anche semplicemente il nome d'immagine.

Qualora non funzionasse.

Proviamo con l' r l completo se c'è una tipologia di di file perché come vedi abbiamo la possibilità di farlo con l'immagine, ma con quals qualunque altro file.

In questo caso specifichiamo che è un email immagine e anche qui abbiamo la possibilità di specificare la tipologia di dispositivo e col se l'immagine è interna o esterna al sito web.

Quindi, ad esempio, se è un'immagine ospitata su un altro sito web, facciamo save Changes.

Okay, torniamo sulla nostra scheda F cinque, quindi aggiorniamo la pagina, vediamo se ha preso il comando.

Okay? Come vedi e in questo caso non l'ha preso correttamente per il semplice fatto che vuole.

Che specifico L'u r l completo Ora lo andiamo a fare, quindi facciamo copy o incolliamo completo.

Facciamo save Changes.

Torniamo di qui.

Aggiorniamo la pagina.

E come puoi vedere Okay, ancora vediamo cosa c'è di di sbagliato o per il mio tab? Um L'immagine.

No, non è non è l'u r l com- corretto.

Eccolo qua.

Dobbiamo copiarlo da qua.

Ho sbagliato io.

Facciamo ora lo incolliamo qui.

Perfetto.

Questo è il due R l completo dell'immagine.

Aggiorniamo la nostra pagina.

E come potrei vedere? Eccola qui.

La nostra immagine è stata caricata in questo caso correttamente ancor prima dei fogli di stile, cioè quindi gli stiamo dando la priorità massima in assoluto.

Cioè ti stiamo dicendo pre carica questa immagine prima di qualunque altra cosa.

Chiaramente dopo aver recuperato quello che è il documento H T M l.

Quindi stiamo dando una priorità massima.

In quali casi può servire questa funzione adesso? Chiaramente l'abbiamo fatto l'abbiamo fatto come come esperimento, ma in quali casi può servire? Può servire ad esempio per il logo.

Molto spesso viene utilizzata questa funzione per il logo.

Ora in questo caso non ho un logo in formato in formato immagine, ma è semplicemente un testo.

Ma quello che può capitare se magari il nostro logo è pesante o magari addirittura è un logo che ha un'animazione, quindi magari è una gif o un'altra tipologia di logo e comunque per qualsiasi motivo, magari anche solo per come è stato costruito, il sito web non viene caricato immediatamente, ma quindi c'è un po' di latenza l'utente lo vede dopo magari mezzo secondo.

La cosa che puoi fare è prendere l' r l di immagine, inserirlo qui e far sì che venga pre caricato in tutte le pagine attenzione però devi usare chiaramente questa funzione in modo limitato, perché se noi andassimo a precaricare un po' tutto tutto quello che ci va di far vedere per primo e poi diventerebbe diventerebbe più un un un difetto con beneficio.

Perché chiaramente quello che andrebbe a fare il browser è precaricare tante risorse, quindi dedicare tanto tante risorse, tanto tempo a quelle e poi magari caricare dopo risorse che comunque sono altrettanto importanti.

Quindi va va ponderato l'uso di questa di questa funzionalità puoi appunto utilizzarlo, per esempio per precaricare il logo oppure per precaricare le immagini fondamentali all'interno di una pagina.

Attenzione anche al riguardo, perché questa funzione load non ci dà la possibilità di definire in quale pagina effettuare il payload, quindi di base lui lo fa su tutte le pagine.

Cosa succede? Che se tu se noi pre caricassimo appunto questa immagine qui che stiam vedendo in tutte le pagine del sito web e supponiamo che il nostro sito web abbia cinquanta pagine e nelle altre quarantanove questa immagine non ci fosse non avrebbe senso, perché noi staremmo andando a precaricare un'immagine su altre pagine dove non è necessaria.

Quindi questa funzione in questo modo va utilizzata solamente dove ci sono degli elementi che sappiamo per certo che vengono caricati in tutte le pagine.

Questi elementi, appunto, possono essere fogli di stile font, ad esempio, perché i font molto spesso um sono utilizzati in egual modo in tutte le pagine.

Quindi la stessa cosa, facendo ispezione possiamo farla con i font, ma questo lo vedremo poi nei nelle successive lez- le lezioni e chiaramente con i fogli di stile, quindi anche questa è una funzione molto utile.

Ora la togliamo, facciamo ste changes e passiamo all'ultima funzione molto utile che è quella relativa al c s s.

Critico anche questo è qualcosa che che abbiam visto nell'analisi dei sui siti web e in questo caso possiamo attivare la funzione da asset c s s e attiviamo reve a news c S s a news c S s per il semplice fatto che va a rimuovere quello che è il c s s inutilizzato all'interno di una pagina, se ricordi bene, avevamo visto tramite lo strumento che noi apriremo da qui.

Network tre tre puntini in alto a destra del menù cod.

Eccolo qui ricarichiamo la pagina e questo strumento ci permetteva di vedere quelli che sono quello che è lo stile okay, facciamo ricarichiamo da qui quello che è lo stile all'interno di una pagina che non viene utilizzato, cioè quindi capita molto spesso, soprattutto su siti web con temi un po' complessi o comunque con tanti plugin di avere dello stile che magari viene utilizzato solamente in una pagina specifica, però viene caricato in tutto il sito web eh, lo vediamo selezionando da questa tendina c s s e vediamo in questo caso che all'interno di quest'area che stiam vedendo di questa pagina della nostra pagina iniziale gran parte dei fogli di stile contengono, nonostante appunto sia non abbia non abbia alcun tipo di plug aggiuntivo.

Funzionalità aggiuntivo semplicemente elemento con un tema preimpostato eh già possi-.

Possiamo comunque vedere che gran parte del codice g S s presente all'interno di questi di questi fogli di stile non viene utilizzato all'interno di quest'area che stiamo vedendo.

Quindi come vedi sulla destra sottovoce a news bites e poi abbiamo il grafico sulla destra vedi che il novantanove percento di quasi tutti i fogli di stile contengono del codice che in quest'area io non sto utilizzando, magari verrà utilizzato nel momento in cui faccio lo scroll.

Infatti, se noi facciamo uno scroll, vedi come alcuni valori cambiano però in quest'area a me non serve quindi perché lo stiamo facendo scaricare all'utente quindi in questo caso a me per risolvere questo problema torniamo di qui, facciamo a news c s s.

Partiamo però da quello che è lo stato attuale, ovvero è la situazione in cui qui dove sto passando il mouse purtroppo non posso fare zoom all'interno dello strumento eh, io sto noi stiamo utilizzando solamente il sedici percento di quello che è lo stile di tutti gli elementi c s s che mi sono che sono stati scaricati per questa pagina, quindi stiamo sfruttando solamente il sedici percento del codice totale scaricato.

Ora facciamo questa modifica applichiamo la funzione a news c s s che quello che va a fare semplicemente genera all'interno di ogni pagina e questo lo fa in modo automatico.

Lo lo comprende da solo quello che è il codice c s s immediatamente necessario alla visualizzazione per l'utente nel momento in cui carica la pagina e tutto il restante codice decidiamo noi come gestirlo, decidiamo come gestirlo dalla funzione possiamo ritardarlo e per ritardarlo intende dopo il caricamento di pagina, quindi ritardarlo magari di qualche secondo caricarlo in modo sincrono, quindi caricarlo per ultimo, in un certo senso differirlo e infine rimuoverlo.

Rimuoverlo significa però rischiare che effettivamente quel codice magari serva a fondo pagina o serva in altri punti e quindi rischiare che poi, um questa funzione vada a compromettere un po' la visualizzazione del nostro sito web, magari in alcune pagine.

Inoltre possiamo scegliere questo codice se tenerlo online significa inserirlo all'interno del codice sorgente di ogni pagina o se inserirlo in un file specifico che poi verrà caricato all'inizio della pagina durante il caricamento di pagina.

Noi lasciamo online come modalità, mettiamo lasciamo di lei che è quella ideale e per di lei in genere intende al primo alla prima interazione dell'utente quindi non viene scaricato fino a che l'utente non fa la prima interazione all'interno della pagina e poi qui possiamo specificare um dei fogli di stile da escludere, perché magari sappiamo che ci sono dei fogli di stile che ci danno problemi con questa funzionalità.

Può capitare soprattutto se i temi magari un po' vecchi o se hai dei ging, un po' vecchi che non non sono stati sviluppati al meglio, quindi possiamo andare a escludere dei fogli di stile che non funzionano bene non sono compatibili con questa funzionalità e allo stesso modo possiamo andare a escludere dei selettori, cioè delle classi o del d d um relativamente all' h t m l che non vogliamo che prenda in considerazione.

Supponiamo ad esempio, che questo problema dia che questo questa funzionalità dia problemi all'interno del nostro e noi andiamo su elements selezioniamo con il nostro selettore con questa icona l'elemento che ci interessa in questo caso leader questa parte qui okay, eccolo qui.

In questo caso noi possiamo andare a copiare il nostro i d header, copiarlo e inserirlo qui con il um il cancelletto che rappresenta appunto va a selezionare un i d.

Quindi in questo caso inseriamo eder e così facendo va a escludere l'etr da questa funzionalità.

Okay, infine c'è la possibilità di cancellare di rigenerare quello che è il c s s utilizzato, quindi rigenerarlo qualora magari noi abbiam noi abbiamo fatto.

Supponiamo di aver fatto dopo questa.

Dopo aver implementato questa funzio- funzionalità, supponiamo di aver fatto delle modifiche.

Quello che possiamo andare a fare è andare a cancellarlo, a far sì che si rigeneri e che segua quelle che sono le modifiche che abbiamo fatto.

Ora facciamo Changes, Li salviamo.

Ritorniamo qua.

La nostra situazione è quella in cui solamente il sedici percento del codice all'interno di questa pagina e all'interno di quest'area viene utilizzato.

Vediamo se ha salvato le modifiche.

Perfetto.

Ricarichiamo.

Okay, In questo caso è rimasto il sedici percento.

Ricarichiamo nuovamente.

Sì, okay.

In questo caso è rimasto ancora al sedici per cento.

Vediamo se ha inserito questo codice.

Poi per per vederlo facciamo tasso destro.

Visualizza sorgente, pagina.

Attendiamo che carichi e cerchiamo, giusto.

C S S.

Eccolo qui.

Ora è importante per vedere effettivamente le modifiche.

Non possiamo farlo da loggati come amministratore, in quanto questa funzionalità l' abilita per me dArs l' abilita solamente su chi non è loggato come amministratore.

Quantomeno, la prima cosa che dobbiamo fare innanzitutto, è cancellare la cache.

Quindi rigenerare la cash passiamo in performance, così da rigenerare la crescita di pagina e far sì che questa modifica venga applicata Benissimo.

Ora apriamo una nuova scheda in incognito, quindi simuliamo un nuovo utente, ricarichiamo la pagina, prendiamo F dodici, quindi apriamo la nostra.

Facciamo il record.

Aggiorniamo nuovamente la pagina.

Seleziona solo c S s Okay.

Ora, come vedi, siamo passati dal sedici percento um utilizzato al trentun percento utilizzato.

Cosa significa? Significa che è cambiata la quantità di di kilobyte che viene, che viene scaricata in termini di fogli di stile.

Così facendo abbiamo alleggerito il peso della pagina e sfruttiamo una una una parte in più di codice che che effettivamente o meglio abbiamo risparmiato una parte di codice che prima veniva caricata perché non abbiamo raggiunto il cento per cento per il semplice fatto che innanzitutto per Mason è in grado di comprendere al cento per cento tutto il codice che viene utilizzato e quello che non e.

In secondo luogo perché parte di questo codice può essere, può essere presente ad esempio al al al primo scroll e quindi di conseguenza può essere subito utile.

All'utente quindi permettersi in un certo senso va a tutelare anche quella che è l'esperienza utente.

Però abbiamo guadagnato.

Abbiamo guadagnato diversi kilobyte chiaramente su un sito web che contiene diversi megabyte di fogli di stile.

Il guadagno può essere veramente immenso in termini di prestazioni.

Ora ti faccio vedere anche come identificare se la funzione sta funz- sta è diciamo è in uso oppure no.

E soprattutto ti faccio vedere come alla prima interazione.

Ora muoverò il mouse, farò uno scroll.

Questo valore cambierà.

Okay? Vedi, ho fatto un'interazione.

Come vedi, è apparsa una lista di pollici S s in più.

Questo perché, um, sono stati scaricati alla alla prima interazione, come ti dicevo.

Quindi noi abbiamo deciso all'interno di hers di far sì che questi fogli venissero scaricati in modo ritardato.

Quindi alla prima interazione dell'utente e così è stato.

Quindi, fino a che l'utente non effettua alcuna interazione, viene scaricato ciò che viene reputato essenziale al primo scroll, come vedi, viene scaricato tutto il resto.

Quindi la funzione è è veramente comoda.

Come verifichiamo che la funzione stia funzionando? Facciamo tasto destro, visualizza sorgente pagina e cerchiamo quella che è.

Eccolo qui l'i d hers US C S s.

Come vedi tutto questo codice viene stampato all'interno di ogni pagina del nostro sito web.

Ed è il codice che per Meers ritiene essenziale affinché la pagina si indirizza e si vede, si vede si veda correttamente per l'utente tutto il resto.

Invece quindi lui va a estrapolare solamente questo codice e tutto il resto invece viene scaricato semplicemente alla prima interazione.

Dell'utente quindi al primo click, al primo movimento del mouse al primo scroll.

Così facendo andiamo a alleggerire di molto il peso di ogni pagina del nostro sito web.

Mi raccomando, è molto importante che una volta attivata questa funzione e verificato che eh che stia funzionando, è importante che tu vada a controllare che ogni pagina si veda correttamente sia sul computer sia su smartphone e tablet.