È in corso l'implementazione di Chrome 77.
- Esiste un modo migliore per monitorare le prestazioni del tuo sito con Largest Contentful Paint.
- Moduli ha alcune nuove funzionalità.
- Il caricamento lento nativo è ora disponibile.
- Chrome DevSummit 2019 si terrà dall'11 al 12 novembre 2019.
- E molto altro.
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.
- Novità di Chrome DevTools (77)
- Deprecazioni e rimozioni di Chrome 77
- Aggiornamenti di ChromeStatus.com per Chrome 77
- Novità di JavaScript in Chrome 77
- Elenco delle modifiche al repository di codice sorgente di Chromium
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.