Un riepilogo delle principali notizie e degli aggiornamenti annunciati durante il nostro evento della community online di 3 giorni e un promemoria sui prossimi eventi regionali.
Abbiamo appena concluso il nostro evento di tre giorni, web.dev LIVE, in cui alcuni membri della community web si sono riuniti online per parlare dello stato dello sviluppo web. Abbiamo iniziato ogni giornata in un fuso orario regionale diverso e i Googler hanno condiviso una serie di aggiornamenti, notizie e suggerimenti con l'obiettivo di aiutare gli sviluppatori con strumenti e indicazioni per mantenere il web stabile, potente e accessibile.
Se hai perso parte del live streaming, tutte le sessioni sono registrate e disponibili per la visione su YouTube. Inoltre, sono in programma eventi regionali in tutto il mondo, organizzati dai Google Developer Group, che offriranno sessioni di approfondimento su argomenti correlati a quelli trattati durante web.dev LIVE.
Diamo un'occhiata ad alcune delle novità e degli aggiornamenti condivisi nel corso dei tre giorni.
Web Vitals
Il team di Chrome ha annunciato l'iniziativa Web Vitals per fornire indicazioni, metriche e strumenti unificati per aiutare gli sviluppatori a offrire esperienze utente eccellenti sul web. Inoltre, il team della Ricerca Google ha annunciato di recente che valuterà l'esperienza sulle pagine come criterio di ranking e includerà le metriche di Core Web Vitals come base.
I tre pilastri dei Core Web Vitals del 2020 sono il caricamento, l'interattività e la stabilità visiva dei contenuti della pagina, che vengono acquisiti dalle seguenti metriche:
- Largest Contentful Paint misura la velocità di caricamento percepita e indica il punto nella sequenza temporale di caricamento della pagina in cui è probabile che siano stati caricati i contenuti principali della pagina.
- First Input Delay misura la reattività e quantifica l'esperienza degli utenti quando provano a interagire per la prima volta con una pagina.
- Cumulative Layout Shift misura la stabilità visiva e quantifica la quantità di movimenti imprevisti dei contenuti della pagina.
In occasione di web.dev LIVE, abbiamo condiviso le best practice su come eseguire l'ottimizzazione per Core Web Vitals e su come utilizzare Chrome DevTools per esplorare i valori dei parametri vitali del tuo sito. Abbiamo anche condiviso molti altri interventi relativi alle prestazioni che puoi trovare su web.dev/live nel programma del primo giorno.
tooling.report
Sviluppare per una piattaforma ampia come il web può essere difficile. Gli strumenti di build sono spesso al centro del tuo progetto di sviluppo web e svolgono un ruolo chiave nella gestione del ciclo di vita dello sviluppatore e del prodotto.
Abbiamo tutti visto file di configurazione di compilazione ingombranti, quindi per aiutare gli sviluppatori web e gli autori di strumenti a superare la complessità del web, abbiamo creato tooling.report. È un sito web che ti aiuta a scegliere lo strumento di build giusto per il tuo prossimo progetto, a decidere se vale la pena eseguire la migrazione da uno strumento all'altro o a capire come incorporare le best practice nella configurazione degli strumenti e nella codebase.
Abbiamo progettato una suite di test per determinare quali strumenti di build ti consentono di seguire le best practice di sviluppo web. Abbiamo collaborato con gli autori degli strumenti di build per assicurarci di utilizzarli correttamente e di rappresentarli in modo equo.
La versione iniziale di tooling.report copre webpack v4, Rollup v2, Parcel v2 e Browserify con Gulp, che al momento sembrano essere gli strumenti di build più popolari. Abbiamo creato tooling.report con la flessibilità di aggiungere altri strumenti di build e test aggiuntivi con l'aiuto della community.
Se manca una best practice che dovrebbe essere testata, proponila in un problema di GitHub. Se vuoi scrivere un test o aggiungere un nuovo strumento che non abbiamo incluso nel set iniziale, ti invitiamo a contribuire.
Nel frattempo, puoi scoprire di più sul nostro approccio alla creazione di tooling.report e guardare la nostra sessione di web.dev LIVE.
Privacy e sicurezza sul web
Chrome crede in un web aperto che rispetti la privacy degli utenti e mantenga i casi d'uso chiave che consentono al web di funzionare per tutti.
Nel 2019, Chrome ha proposto un aggiornamento dello standard dei cookie per limitare i cookie ai contesti proprietari per impostazione predefinita e richiedere che i cookie per i contesti di terze parti siano contrassegnati esplicitamente come tali. In particolare, questo fornisce una linea di difesa contro gli attacchi di falsificazione di richiesta cross-site. La proposta è ora in fase di adozione da parte di Chrome, Firefox, Edge e altri browser.
Sebbene Chrome abbia deciso di eseguire temporaneamente il rollback di queste modifiche alla luce del COVID-19, purtroppo, durante una crisi in cui le persone sono più vulnerabili, si assiste anche a un aumento di questo tipo di attacchi. Pertanto, con la versione stabile di Chrome 84 (metà luglio 2020), le modifiche inizieranno a essere implementate di nuovo in tutte le versioni di Chrome dalla 80 in poi. Per saperne di più, consulta le indicazioni sui cookie SameSite e la sessione web.dev LIVE.
Inoltre, nell'ambito di Privacy Sandbox, Chrome sta introducendo una serie di proposte di standard che mirano a supportare i casi d'uso che consentono alle persone di guadagnarsi da vivere utilizzando la piattaforma web, ma in un modo che rispetti meglio la privacy degli utenti. Chrome sta cercando attivamente feedback su queste proposte e sta partecipando ai forum aperti del W3C per discutere le proposte, nonché quelle presentate da altre parti. Scopri di più su questa iniziativa nella sessione Sicurezza e privacy per l'open web.
Infine, per quanto riguarda la sicurezza degli utenti, Spectre era una vulnerabilità che consentiva al codice dannoso in esecuzione in un processo del browser di leggere tutti i dati associati a quel processo, anche se provenienti da un'origine diversa. Una delle misure di mitigazione del browser è l'isolamento dei siti, ovvero l'inserimento di ogni sito in un processo separato. Per saperne di più, guarda la sessione web.dev LIVE sulle nuove policy multiorigine per opener ed embedder (COOP e COEP).
Creazione di un web con funzionalità avanzate
Chrome vuole darti la libertà di creare app web di altissima qualità che ti consentano di raggiungere il maggior numero di utenti su tutti i dispositivi. Combinando l'installabilità e l'affidabilità delle PWA con il progetto Capabilities (Project Fugu), Chrome si concentra su tre aspetti per colmare il divario tra le app specifiche per la piattaforma e il web, per aiutarti a creare e offrire esperienze straordinarie.
Innanzitutto, i team di Chrome hanno lavorato sodo per offrire agli sviluppatori web e agli utenti un maggiore controllo sull'esperienza di installazione, aggiungendo una promozione di installazione alla omnibox e altro ancora. Nonostante l'ubiquità del web, per alcune attività è comunque importante avere la propria app nello store. Per aiutarti, Chrome ha lanciato Bubblewrap, una libreria e un'interfaccia a riga di comando che semplifica l'inserimento della tua PWA nel Play Store. Infatti, PWABuilder.com ora utilizza Bubblewrap dietro le quinte. Con pochi clic del mouse, puoi generare un APK e caricare la tua PWA sul Play Store, a condizione che tu soddisfi i criteri.
In secondo luogo, Chrome offre una maggiore integrazione con il sistema operativo, ad esempio la possibilità di condividere una foto, un brano o qualsiasi altro elemento richiamando il servizio di condivisione a livello di sistema con l'API Web Share o la possibilità di ricevere contenuti quando vengono condivisi da un'altra app installata. Puoi tenere gli utenti aggiornati o informarli in modo discreto di nuove attività con i badge delle app. Inoltre, ora è più facile per gli utenti avviare rapidamente un'azione utilizzando le scorciatoie per le app, che verranno introdotte in Chrome 84 (metà luglio 2020).
Infine, Chrome sta lavorando a nuove funzionalità che consentono nuovi scenari che prima non erano possibili, come gli editor che leggono e scrivono file nel file system locale dell'utente o ottengono l'elenco dei caratteri installati localmente in modo che gli utenti possano utilizzarli nei loro progetti.
Durante web.dev LIVE, abbiamo parlato di molte altre funzionalità che possono consentirti di offrire lo stesso tipo di esperienza, con le stesse funzionalità, delle app specifiche per la piattaforma. Guarda tutte le sessioni su web.dev/live nel programma del giorno 2.
Novità di Chrome DevTools e Lighthouse 6.0
Chrome DevTools: nuova scheda Problemi, emulatore di carenze cromatiche e supporto di Segnali web essenziali
Una delle funzionalità più potenti di Chrome DevTools è la sua capacità di individuare i problemi su una pagina web e portarli all'attenzione dello sviluppatore. Questo è particolarmente importante ora che stiamo entrando nella fase successiva di un web incentrato sulla privacy. Per ridurre l'affaticamento da notifiche e il disordine nella console, Chrome DevTools ha lanciato la scheda Problemi, che si concentra su tre tipi di problemi critici: problemi relativi ai cookie, contenuti misti e problemi relativi a COEP. Per iniziare, guarda la sessione web.dev LIVE su come trovare e risolvere i problemi con la scheda Problemi.
Inoltre, con i Core Web Vitals che stanno diventando uno dei set di metriche più importanti per gli sviluppatori web da monitorare e misurare, DevTools vuole garantire che gli sviluppatori siano in grado di monitorare facilmente le proprie prestazioni rispetto a queste soglie. Quindi queste tre metriche sono ora nel riquadro Prestazioni di Chrome DevTools.
Infine, con un numero crescente di sviluppatori che si concentrano sull'accessibilità, DevTools ha anche introdotto un emulatore di deficit della visione dei colori che consente agli sviluppatori di emulare la vista annebbiata e altri tipi di deficit visivi. Puoi scoprire di più su questa e molte altre funzionalità nella sessione Novità di DevTools.
Lighthouse 6.0: nuove metriche, misurazioni di laboratorio dei Core Web Vitals, un punteggio delle prestazioni aggiornato e nuovi controlli
Lighthouse è uno strumento automatico open source che aiuta gli sviluppatori a migliorare le prestazioni del proprio sito. Nell'ultima versione, il team di Lighthouse si è concentrato sulla fornitura di approfondimenti basati su metriche che offrono una visione equilibrata della qualità della tua esperienza utente rispetto alle dimensioni critiche.
Per garantire la coerenza, Lighthouse ha aggiunto il supporto per i Core Web Vitals: LCP, TBT (un proxy per FID, poiché Lighthouse è uno strumento di laboratorio e il FID può essere misurato solo sul campo) e CLS. Lighthouse ha anche rimosso tre vecchie metriche: First Meaningful Paint, First CPU Idle e Max Potential FID. Queste rimozioni sono dovute a considerazioni come la variabilità delle metriche e le metriche più recenti che offrono una migliore riflessione della parte dell'esperienza utente che Lighthouse sta cercando di misurare. Inoltre, Lighthouse ha apportato alcune modifiche al peso di ogni metrica nel punteggio complessivo del rendimento in base al feedback degli utenti.
Lighthouse ha anche aggiunto uno strumento di calcolo dei punteggi per aiutarti a esplorare il tuo punteggio di rendimento, fornendo un confronto tra i punteggi delle versioni 5 e 6. Quando esegui un controllo con Lighthouse 6.0, il report include un link al calcolatore con i risultati compilati.
Infine, Lighthouse ha aggiunto una serie di nuovi controlli, con un focus sull'analisi e sull'accessibilità di JavaScript.
Scopri di più guardando la sessione Novità degli strumenti per la velocità.
Scopri di più
Grazie a tutti i membri della community che si sono uniti a noi per discutere delle opportunità e delle sfide della piattaforma web.
Questo post riassume alcuni dei punti salienti dell'evento, ma c'è stato molto altro. Assicurati di dare un'occhiata a tutte le sessioni e di iscriverti alla newsletter di web.dev se vuoi ricevere altri contenuti direttamente nella tua casella di posta. Visita la sezione Eventi regionali su web.dev/live per trovare un evento della community in programma nel tuo fuso orario.