Nouveautés de Chrome 77

Pete LePage

Chrome 77 est en cours de déploiement.

Je m'appelle Pete LePage. Découvrons 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 disent pas ce que l'utilisateur voit à l'écran. First Paint et First Contentful Paint, ne capturent que le début de l'expérience. La méthode First Meaningful Paint est meilleure, mais elle est complexe, et parfois erronée.

L'API Largest Contentful Paint, disponible à partir de Chrome 77, indique le temps d'affichage 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 métrique "Largest Contentful Paint", vous devez utiliser un observateur de performances et rechercher les é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 l'élément le plus grand 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 post concernant le Largest Contentful Paint sur web.dev.

Nouvelles fonctionnalités pour les 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 des 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 à Chrome 77, facilitent la création de commandes de formulaire personnalisées et suppriment de nombreuses limitations existantes.

L'é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 formdata avant de l'envoyer.

Éléments personnalisés associés au 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 du formulaire. Vous devez également ajouter des propriétés communes trouvées sur les éléments d'entrée, comme 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 la section Des commandes de formulaire plus performantes sur web.dev.

Chargement différé natif

Je ne sais pas pourquoi j'ai manqué le chargement différé natif de ma dernière vidéo. C'est incroyable, alors je l'inclut maintenant. Le chargement différé est une technique qui vous permet de différer le chargement des ressources non critiques, telles que les <img> hors écran ou les <iframe>, jusqu'à ce qu'elles soient nécessaires, ce qui augmente les performances de votre page.

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

Pour indiquer au navigateur que vous souhaitez charger une image ou un iFrame de manière différée, utilisez l'attribut loading="lazy". Les images et les cadres iFrame situés dans la partie au-dessus de la ligne de flottaison se chargent normalement. Celles qui sont en dessous ne sont récupérées que lorsque l'utilisateur fait défiler la page à proximité.

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

Pour en savoir plus, consultez la section consacrée au chargement différé au niveau du navigateur pour le Web sur web.dev.

Chrome Dev Summit 2019

Le Chrome Dev Summit aura lieu les 11 et 12 novembre.

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

Il sera diffusé en direct sur notre chaîne YouTube. Si vous souhaitez y participer 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 sûr, il y en a bien d'autres.

L'API Contact Picker, disponible en tant qu'évaluation d'origine, est un nouvel outil de sélection à la demande qui permet aux utilisateurs de sélectionner une ou plusieurs entrées de leur liste de contacts et de partager des détails limités des contacts sélectionnés avec un site Web.

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

Complément d'informations

Nous n'aborderons ici que certains des points clés. Consultez les liens ci-dessous pour en savoir plus sur les modifications supplémentaires apportées à Chrome 77.

S'abonner

Pour ne pas manquer nos vidéos, abonnez-vous à notre chaîne YouTube pour les développeurs Chrome. Vous recevrez une notification par e-mail chaque fois qu'une nouvelle vidéo sera lancée.

Je m'appelle Pete LePage. Dès la sortie de Chrome 78, je serai là pour vous dire quelles sont les nouveautés de Chrome !