Nouveautés de Chrome 77

Pete LePage

Chrome 77 est en cours de déploiement !

Je m'appelle Pete LePage. Je vais vous présenter les nouveautés de Chrome 77 pour les développeurs.

Largest Contentful Paint

Il peut être difficile de comprendre et de mesurer les performances réelles de votre site. Les métriques telles que load ou DOMContentLoaded ne vous indiquent pas ce que l'utilisateur voit à l'écran. First Paint et First Contentful Paint ne capturent que le début de l'expérience. First Meaningful Paint est meilleur, mais il est complexe et parfois incorrect.

L'API Largest Contentful Paint, disponible à partir de Chrome 77, indique le délai de rendu du plus grand élément de contenu visible dans la fenêtre d'affichage et permet de mesurer le moment où le contenu principal de la page est chargé.

Pour mesurer la plus grande peinture de contenu, vous devez utiliser un observateur de performances et rechercher des événements 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);

Étant donné qu'une page se charge souvent par étapes, il est possible que le plus grand élément d'une page change. Vous ne devez donc signaler que le dernier événement largest-contentful-paint à votre service d'analyse.

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

Phil a publié un excellent article sur le Largest Contentful Paint sur web.dev.

Nouvelles fonctionnalités des formulaires

De nombreux développeurs créent des commandes de formulaire personnalisées, soit pour personnaliser l'apparence des éléments existants, soit pour créer de nouvelles commandes qui ne sont pas intégrées au navigateur. En général, cela implique l'utilisation de JavaScript et d'éléments <input> cachés, mais ce n'est pas une solution parfaite.

Deux nouvelles fonctionnalités Web, ajoutées dans Chrome 77, facilitent la création de commandes de formulaire personnalisées et éliminent de nombreuses limitations existantes.

Événement formdata

L'événement formdata est une API de bas niveau qui permet à tout code JavaScript de participer à l'envoi d'un formulaire. Pour l'utiliser, ajoutez un écouteur d'événements formdata au formulaire avec lequel vous souhaitez interagir.

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

Lorsque l'utilisateur clique sur le bouton d'envoi, le formulaire déclenche l'événement formdata, qui inclut un objet FormData contenant toutes les données envoyées. Ensuite, dans votre gestionnaire d'événements formdata, vous pouvez mettre à jour ou modifier l'formdata avant son envoi.

Éléments personnalisés associés à un formulaire

Les éléments personnalisés associés à un formulaire permettent de combler l'écart entre les éléments personnalisés et les commandes natives. L'ajout d'une propriété formAssociated statique indique au navigateur de traiter l'élément personnalisé comme tous les autres éléments de formulaire. Vous devez également ajouter des propriétés courantes trouvées sur les éléments d'entrée, tels que name, value et validity, pour assurer la cohérence avec les commandes natives.

class MyCounter extends HTMLElement {
  static formAssociated = true;

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

Pour en savoir plus, consultez Contrôles de formulaire plus performants sur web.dev.

Chargement différé natif

Je ne sais pas comment j'ai pu oublier le chargement paresseux natif dans ma dernière vidéo ! C'est assez incroyable, alors je l'inclus maintenant. Le chargement paresseux est une technique qui vous permet de différer le chargement de ressources non critiques, telles que les <img> ou les <iframe> hors écran, jusqu'à ce qu'elles soient nécessaires, ce qui améliore les performances de votre page.

À partir de Chrome 76, le navigateur gère le chargement différé à votre place, sans avoir à écrire de code de chargement différé personnalisé ni à utiliser une bibliothèque JavaScript distincte.

Pour indiquer au navigateur que vous souhaitez qu'une image ou un iframe soit chargée de manière différée, utilisez l'attribut loading="lazy". Les images et les iFrames "au-dessus de la ligne de flottaison" se chargent normalement. Et ceux qui se trouvent en dessous ne sont récupérés que lorsque l'utilisateur fait défiler l'écran à proximité.

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

Pour en savoir plus, consultez Chargement différé au niveau du navigateur pour le Web sur web.dev.

Chrome Dev Summit 2019

Le sommet des développeurs Chrome aura lieu les 11 et 12 novembre.

C'est une excellente occasion d'en savoir plus sur les derniers outils et mises à jour de la plate-forme Web, et d'entendre directement l'équipe d'ingénieurs Chrome.

Il sera diffusé en direct sur notre chaîne YouTube. Si vous souhaitez y assister en personne, vous pouvez demander votre invitation sur le site Web du Chrome Dev Summit 2019.

Et bien plus !

Ce ne sont là que quelques-unes des modifications apportées à Chrome 77 pour les développeurs. Bien entendu, il y en a bien d'autres.

L'API Contact Picker, disponible en version d'essai d'origine, est un nouveau sélecteur à la demande qui permet aux utilisateurs de sélectionner une ou plusieurs entrées de leur liste de contacts et de partager des informations limitées sur les contacts sélectionnés avec un site Web.

De nouvelles unités de mesure sont également disponibles dans l'API intl.NumberFormat.

Documentation complémentaire

Il ne s'agit là que de quelques-uns des points clés. Consultez les liens ci-dessous pour découvrir d'autres modifications apportées à Chrome 77.

S'abonner

Si vous souhaitez rester informé de nos vidéos, abonnez-vous à notre chaîne YouTube pour les développeurs Chrome. Vous recevrez alors une notification par e-mail chaque fois que nous lancerons une nouvelle vidéo.

Je m'appelle Pete LePage. Dès que Chrome 78 sera disponible, je vous présenterai les nouveautés de Chrome.