Un riepilogo delle notizie e degli aggiornamenti principali annunciati durante l'evento online della nostra community di tre giorni, nonché un promemoria sui prossimi eventi regionali.
Abbiamo appena terminato il nostro evento di tre giorni, web.dev LIVE, durante il quale alcuni membri della community web si sono riuniti online per parlare dello stato dello sviluppo web. Abbiamo iniziato ogni giorno in un fuso orario regionale diverso e i Googler hanno condiviso una serie di aggiornamenti, notizie e suggerimenti per aiutare gli sviluppatori con strumenti e indicazioni per mantenere il web stabile, potente e accessibile.
Se non hai potuto partecipare al live streaming, tutte le sessioni vengono registrate e sono disponibili per la visione su YouTube. Abbiamo anche i prossimi eventi regionali in tutto il mondo, organizzati da Google Developer Group, e che indicheranno sessioni di approfondimento su argomenti correlati agli argomenti trattati durante web.dev LIVE.
Analizziamo 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. Il team della Ricerca Google ha anche annunciato di recente che valuterà l'esperienza sulle pagine come criterio di ranking e includerà le metriche dei Segnali web essenziali come base.
I tre pilastri dei Segnali web essenziali del 2020 sono caricamento, interattività e stabilità visiva dei contenuti delle pagine, che vengono acquisiti dalle seguenti metriche:
- La metrica Largest Contentful Paint misura la velocità di caricamento percepita e contrassegna il punto della sequenza temporale di caricamento della pagina in cui è probabile che siano stati caricati i contenuti principali di una pagina.
- First Input Delay misura la reattività e quantifica l'esperienza che gli utenti provano quando tentano di 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 web.dev LIVE abbiamo condiviso best practice su come eseguire l'ottimizzazione per i Segnali web essenziali e su come utilizzare Chrome DevTools per esplorare i valori vitali del tuo sito. Inoltre, abbiamo condiviso molte altre conversazioni relative alle prestazioni che puoi trovare all'indirizzo web.dev/live nel programma del primo giorno.
tooling.report
Sviluppare per una piattaforma così ampia come il web può essere impegnativo. Gli strumenti di creazione sono spesso al centro del tuo progetto di sviluppo web, assumendo un ruolo chiave nella gestione del ciclo di vita dello sviluppatore e del prodotto.
Abbiamo notato che i file di configurazione di creazione sono stati ingombranti e, per aiutare gli sviluppatori web e gli autori degli strumenti ad affrontare la complessità del web, abbiamo creato tooling.report. Si tratta di un sito web che ti aiuta a scegliere lo strumento giusto per il tuo prossimo progetto, a decidere se vale la pena eseguire la migrazione da uno strumento a un altro o a capire come incorporare le best practice nella configurazione degli strumenti e nel codebase.
Abbiamo progettato una suite di test per determinare quali strumenti di creazione ti consentono di seguire le best practice per lo sviluppo web. Abbiamo collaborato con gli autori degli strumenti di creazione per assicurarci di aver utilizzato i loro strumenti in modo corretto.
La versione iniziale di tooling.report riguarda Webpack v4, Rollup v2, Parcel v2 e Browserify con Gulp, che sembrano essere gli strumenti di creazione più popolari al momento. Abbiamo creato tooling.report con la flessibilità di aggiungere più strumenti di creazione e test aggiuntivi con l'aiuto della community.
Se manca una best practice che deve essere testata, proponila in un problema su 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 da web.dev LIVE.
Privacy e sicurezza sul web
Chrome crede in un web aperto che rispetti la privacy degli utenti e si occupi di casi d'uso chiave che garantiscano il funzionamento del web per tutti.
Nel 2019, Chrome ha proposto un aggiornamento allo 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, fornisce una linea di difesa dagli attacchi di falsificazione di richieste cross-site. La proposta viene ora adottata da Chrome, Firefox, Edge e altri browser.
Anche se Chrome ha deciso di eseguire temporaneamente il rollback di questi cambiamenti alla luce dell'emergenza COVID-19, purtroppo durante una crisi in cui le persone sono più vulnerabili, noterai anche un aumento di questi tipi di attacchi. Pertanto, con la release stabile di Chrome 84 (metà luglio 2020), le modifiche cominceranno a essere implementate di nuovo in tutte le versioni di Chrome a partire dalla versione 80. Per scoprire di più, consulta le linee guida sui cookie SameSite e la sessione LIVE web.dev.
Inoltre, sotto il banner della 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 nel rispetto della privacy degli utenti. Chrome cerca attivamente feedback su queste proposte e partecipa ai forum aperti del W3C per discutere delle proposte e di quelle presentate da altre parti. Scopri di più su questa iniziativa nella sessione Sicurezza e privacy per il web aperto.
Infine, esaminando la sicurezza degli utenti, Spectre presentava una vulnerabilità che indicava che un codice dannoso in esecuzione in un processo del browser potrebbe essere in grado di leggere tutti i dati associati al processo in questione anche se provenivano da un'origine diversa. Una delle mitigazioni del browser è l'isolamento dei siti, ovvero l'inserimento di ogni sito in un processo separato. Per scoprire di più, guarda la sessione LIVE web.dev sui nuovi criteri di apertura e incorporamento multiorigine (COOP e COEP).
Creare un web con funzionalità potenti
Chrome vuole che tu sia libero di creare app web della massima qualità che ti offrono la più ampia copertura degli utenti su più dispositivi. Combinando l'installabilità e l'affidabilità delle PWA con il progetto di funzionalità (Progetto Fugu), Chrome si concentra su tre aspetti per colmare il divario tra le app specifiche della piattaforma e il web, per aiutarti a creare e offrire esperienze straordinarie.
Innanzitutto, i team di Chrome si sono impegnati per offrire a sviluppatori e utenti web maggiore controllo sull'esperienza di installazione, aggiungendo una promozione di installazione nella omnibox e altro ancora. Nonostante l'ubiquità del web, è comunque importante per alcune attività avere le proprie app nello store. Per aiutarti, Chrome ha lanciato Bubblewrap, una libreria e interfaccia a riga di comando che rendono più semplice inserire la PWA nel Play Store. Infatti, PWABuilder.com ora utilizza il wrapper. Puoi generare un APK e caricare la PWA sul Play Store con pochi clic del mouse, a condizione che vengano soddisfatti i criteri.
In secondo luogo, Chrome offre un'integrazione più stretta con il sistema operativo, ad esempio la possibilità di condividere una foto, un brano o altro richiamando il servizio di condivisione a livello di sistema con l'API Web Share oppure la possibilità di ricevere contenuti quando vengono condivisi da un'altra app installata. Puoi mantenere aggiornati gli utenti o notificare loro in modo discreto una nuova attività con il badge delle app. Inoltre, ora è più facile per gli utenti avviare rapidamente un'azione utilizzando le scorciatoie app, che saranno disponibili in Chrome 84 (metà luglio 2020).
Infine, Chrome ha lavorato a nuove funzionalità che consentono nuovi scenari che prima non erano possibili, ad esempio editor che leggeno e scrivono nei 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.
In web.dev LIVE abbiamo parlato di molte altre funzionalità e funzionalità che possono consentirti di offrire lo stesso tipo di esperienza, con le stesse funzionalità delle app specifiche della piattaforma. Vedi tutte le sessioni all'indirizzo web.dev/live nel programma del secondo giorno.
Novità di Chrome DevTools e Lighthouse 6.0
Chrome DevTools: nuova scheda Problemi, emulatore per le carenze di colore e supporto per Web Vitals
Una delle funzionalità più potenti di Chrome DevTools è la capacità di individuare i problemi su una pagina web e di portarli all'attenzione dello sviluppatore. Questo aspetto è più importante man mano che si passa alla fase successiva di un web incentrato sulla privacy. Per ridurre l'onere delle notifiche e il disordine nella Console, Chrome DevTools ha lanciato la scheda Problemi, che si concentra su tre tipi di problemi critici da cui iniziare: problemi relativi ai cookie, contenuti misti e problemi COEP. Per iniziare, guarda la sessione LIVE web.dev su come individuare e risolvere i problemi relativi alla scheda Problemi.
Inoltre, poiché i Segnali web essenziali stanno diventando uno degli insiemi di metriche più importanti che gli sviluppatori web devono monitorare e misurare, DevTools vuole garantire che gli sviluppatori siano in grado di monitorare facilmente le loro prestazioni rispetto a queste soglie. Queste tre metriche ora si trovano nel riquadro Prestazioni di Chrome DevTools.
Infine, con un numero crescente di sviluppatori che si concentrano sull'accessibilità, DevTools ha anche introdotto un emulatore per le carenze della visione dei colori che consente agli sviluppatori di emulare una visione sfocata e altri tipi di carenze visive. Puoi scoprire di più su questa e su molte altre funzionalità nella sessione Novità di Strumenti per sviluppatori.
Lighthouse 6.0: nuove metriche, misurazioni dei lab di Core Web Vitals, punteggio delle prestazioni aggiornato e nuovi controlli
Lighthouse è uno strumento automatico open source che aiuta gli sviluppatori a migliorare il rendimento del loro sito. Nella sua ultima versione, il team di Lighthouse si è concentrato sulla fornitura di insight basati su metriche che offrono una visione bilanciata della qualità dell'esperienza utente rispetto alle dimensioni fondamentali.
Per garantire la coerenza, Lighthouse ha aggiunto il supporto per Core Web Vitals: LCP, TBT (un proxy per FID in quanto Lighthouse è uno strumento di lab, mentre il FID può essere misurato solo sul campo) e CLS. Lighthouse ha anche rimosso tre metriche precedenti: First Meaningful Paint, First CPU Idle e Max Potential FID. Queste rimozioni sono dovute a considerazioni come la variabilità delle metriche e metriche più recenti che riflettono meglio la parte dell'esperienza utente che Lighthouse sta cercando di misurare. Inoltre, Lighthouse ha apportato alcune modifiche a quanto ogni metrica tiene conto del punteggio complessivo delle prestazioni in base al feedback degli utenti.
Lighthouse ha anche aggiunto una calcolatrice dei punteggi per aiutarti a esaminare il punteggio delle tue prestazioni, mettendo a confronto i punteggi della versione 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 particolare attenzione all'analisi e all'accessibilità di JavaScript.
Scopri di più guardando la sessione Novità sugli 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 momenti salienti dell'evento, ma c'è molto altro. Assicurati di dare un'occhiata a tutte le sessioni e di iscriverti alla newsletter web.dev se vuoi altri contenuti direttamente nella posta in arrivo. Visita la sezione Eventi regionali su web.dev/live per trovare uno dei prossimi eventi della community nel tuo fuso orario.