Performance Improvements
Ottimizzare le performances web ed i principali KPI come LCP, TBT e CLS
Conoscere del Web
Per migliorare le performances e KPI non è sufficiente conoscere HTML CSS e JS ma è fondamentale capire i loro internals e l'impatto che ogni riga di codice ha sui vari devices. Ci vuole una profonda comprensione dei browser, degli engine JS dei e dei trigger CSS. Con JS dobbiamo estendere le skills anche sui principali framework come Angular, React e Vue. Di questi dobbiamo conoscere ogni trick e pattern per spingere al massimo le performances. In Bitforce ci occupiamo di fornire consulenza, fare assessment e code review per portare le performances a livelli ottimali.
KPI: LCP, TTB, CLS, TTI, FCP, FMP
L'analisi delle performances si basa sulla misurazione KPI e sulla loro ottimizzazione. Sono molti i parametri da tenere in considerazione e spesso vengono rivisti nel tempo i loro pesi e significati. Adesso i tre principali KPI suggeriti da Google vengono chiamati Web core vitals e sono: LCP (largest contentful paint): Il tempo necessario per mostrare il contenuto principale all'utente, che potrebbe essere un blocco di testo o un immagine. TBT (total blocking time) il tempo che passa tra il FCP (first contentful paint) ed il TTI (time to interactive). Rappresenta il tempo nel quale l'utente prova ad interagire con il sito ma questo non e' responsive perchè il main thread è occupato. CLS (cumulative layout shift): Rappresenta la quantita' di re-layout della pagina dovuti da contenuti asincroni che vengono mostrati in pagina. Ex immagini, ADV e tutto quello che cambia altezze e posizionamenti dei contenuti della pagina.
Black box assessment
Un servizio che ci viene richiesto molto spesso è quello di produrre un black box assessment. Questo consiste nel misurare e valutare i principali aspetti architetturali di una web app senza accedere alla codebase. Utilizziamo strumenti come webpagetest, pagespeed insights, ed ovviamente la devToolbar. La nostra analisi produce un documento che contiene tutti i seguenti focus points con relativi hints per migliorarli:
Semantica e dimensione della index / Fonts check / Ordine degli scripts e risorse bloccanti / Dimensione, compressione, minificazione e coverage assets / Chiamate XHR / Check dell'utilizzo di lib o framework JS / Valutazione delle inclusioni di third party / Performances cloud e CDN / Renditions immagini ed art direction / Gestione video e streaming / Analisi di tutti i KPI citati in questo articolo analizzando waterfall, filmstrip, performance snapshot e molto altro.