Novità di Chrome 77

Pete LePage

È in corso l'implementazione di Chrome 77.

Mi chiamo Pete LePage, analizziamo le novità di Chrome 77 per gli sviluppatori.

visualizzazione elemento più grande

Comprendere e misurare le prestazioni reali del tuo sito può essere difficile. Le metriche come load o DOMContentLoaded non indicano ciò che l'utente vede sullo schermo. First Paint e First Contentful Paint, mostrano solo l'inizio dell'esperienza. First Meaningful Paint è meglio, ma è complessa e a volte sbagliata.

L'API Largest Contentful Paint, disponibile a partire da Chrome 77, segnala il tempo di rendering dell'elemento di contenuti più grande che si trova nell'area visibile e consente di misurare il momento in cui vengono caricati i contenuti principali della pagina.

Per misurare la metrica Largest Contentful Paint, devi utilizzare un Performance Monitoring e cercare gli eventi largest-contentful-paint.

let lcp;
const po = new PerformanceObserver((eList) => {
  const e = eList.getEntries();
  const last = e[e.length - 1];
  lcp = last.renderTime || last.loadTime;
});

const poOpts = {
  type: 'largest-contentful-paint',
  buffered: true
}
po.observe(poOpts);

Poiché la pagina viene spesso caricata in fasi, è possibile che l'elemento più grande di una pagina cambi, pertanto ti consigliamo di segnalare solo l'ultimo evento largest-contentful-paint al tuo servizio di analisi.

addEventListener('visibilitychange', function fn() {
  const visState = document.visibilityState;
  if (lcp && visState === 'hidden') {
    sendToAnalytics({'lcp': lcp});
    removeEventListener('visibilitychange', fn, true);
  }
}, true);

Phil ha pubblicato un ottimo post sulla Largest Contentful Paint su web.dev.

Nuove funzionalità per i moduli

Molti sviluppatori creano controlli con moduli personalizzati per personalizzare l'aspetto e il design di elementi esistenti o per creare nuovi controlli non integrati nel browser. In genere questo comporta l'utilizzo di JavaScript e di elementi <input> nascosti, ma non è una soluzione perfetta.

Due nuove funzionalità web, aggiunte a Chrome 77, semplificano la creazione di controlli personalizzati per i moduli e eliminano molte delle limitazioni esistenti.

L'evento formdata

L'evento formdata è un'API di basso livello che consente a qualsiasi codice JavaScript di partecipare all'invio di un modulo. Per utilizzarlo, aggiungi un listener di eventi formdata al modulo con cui vuoi interagire.

const form = document.querySelector('form');
form.addEventListener('formdata', ({formData}) => {
  formData.append('my-input', myInputValue);
});

Quando l'utente fa clic sul pulsante Invia, il modulo attiva l'evento formdata, che include un oggetto FormData contenente tutti i dati inviati. Quindi, nel gestore di eventi formdata, puoi aggiornare o modificare formdata prima che venga inviato.

Elementi personalizzati associati al modulo

Gli elementi personalizzati associati a un modulo consentono di colmare il divario tra elementi personalizzati e controlli nativi. L'aggiunta di una proprietà formAssociated statica indica al browser di trattare l'elemento personalizzato come tutti gli altri elementi del modulo. Ti consigliamo inoltre di aggiungere le proprietà comuni trovate negli elementi di input, come name, value e validity, per garantire la coerenza con i controlli nativi.

class MyCounter extends HTMLElement {
  static formAssociated = true;

  constructor() {
    super();
    this._internals = this.attachInternals();
    this._value = 0;
  }
  ...
}

Consulta Controlli dei moduli più efficaci su web.dev per tutti i dettagli.

Caricamento lento nativo

Non so come mi sia sfuggito il caricamento lento nativo nel mio ultimo video. È sorprendente, quindi l'ho incluso ora. Il caricamento lento è una tecnica che ti consente di posticipare il caricamento delle risorse non critiche, come quelle di tipo <img> fuori schermo o <iframe>, finché non sono necessarie, aumentando le prestazioni della pagina.

A partire da Chrome 76, il browser gestisce il caricamento lento automaticamente, senza dover scrivere codice di caricamento lento personalizzato o utilizzare una libreria JavaScript separata.

Per indicare al browser che vuoi che un'immagine o un iframe venga caricato lentamente, utilizza l'attributo loading="lazy". Le immagini e gli iframe "above the fold" vengono caricati normalmente. Quelli sottostanti vengono recuperati solo quando l'utente scorri vicino a questi.

<img src="image.jpg" loading="lazy" width="400" height="250" alt="...">

Per maggiori dettagli, consulta l'articolo sul caricamento lento a livello di browser per il web su web.dev.

Chrome Dev Summit 2019

Il Chrome Dev Summit si terrà l'11 e il 12 novembre.

È un'ottima opportunità per conoscere gli strumenti e gli aggiornamenti più recenti in arrivo sulla piattaforma web e conoscere direttamente il team tecnico di Chrome.

L'evento verrà trasmesso in live streaming sul nostro canale YouTube oppure, se vuoi partecipare di persona, puoi richiedere l'invito sul sito web del Chrome Dev Summit 2019.

E tanto altro.

Queste sono solo alcune delle modifiche apportate a Chrome 77 per gli sviluppatori, e ovviamente ce ne sono molte altre.

L'API Contact Picker, disponibile come prova dell'origine, è un nuovo selettore on demand che consente agli utenti di selezionare una o più voci dal proprio elenco contatti e condividere dettagli limitati dei contatti selezionati con un sito web.

Inoltre, sono disponibili nuove unità di misura nell'API intl.NumberFormat.

Per approfondire

Vengono trattati solo alcuni dei punti salienti. Controlla i link riportati di seguito per ulteriori modifiche in Chrome 77.

Abbonati

Se vuoi tenerti al corrente sui nostri video, iscriviti al nostro canale YouTube degli sviluppatori di Chrome e riceverai una notifica via email ogni volta che verrà lanciato un nuovo video.

Mi chiamo Pete LePage e non appena verrà rilasciata la versione 78, sarò qui per dirti le novità di Chrome.