Vitesse à grande échelle: quelles sont les nouveautés en matière de performances Web ?

Découvrez trois nouveaux lancements de fonctionnalités de performances Web lors de Google I/O 2019.

Katie Hempenius
Katie Hempenius

Lors de la conférence "Vitesse à grande échelle" lors de Google I/O 2019, nous avons annoncé trois éléments qui, nous l'espérons, amélioreront les performances Web au cours de l'année à venir.

Lighthouse est désormais compatible avec les budgets de performances

LightWallet est une nouvelle fonctionnalité de Lighthouse qui prend en charge les budgets de performances. Les budgets de performances établissent des normes sur les performances de votre site. Plus important encore, ils permettent d'identifier et de corriger facilement les régressions de performances avant leur expédition.

Rapport LightWallet indiquant les composants dont la taille dépasse le budget de taille de fichier.

LightWallet est disponible dans la dernière version de la CLI Lighthouse et ne prend que quelques minutes à configurer. Pour en savoir plus, consultez ces instructions.

Vous ne savez pas quels budgets définir ? Essayez notre calculateur de budget de performances expérimental, qui peut générer une configuration de budget compatible avec LightWallet.

Le chargement différé des images et des iFrames au niveau du navigateur arrive sur le Web

Les pages Web contiennent souvent un grand nombre d'images, ce qui contribue à l'utilisation des données, à l'encombrement des pages et au ralentissement du chargement des pages. Beaucoup de ces images sont hors écran, ce qui oblige l'utilisateur à faire défiler la page pour les voir.

Jusqu'à présent, vous deviez résoudre le problème du chargement paresseux des images à l'aide d'une bibliothèque JavaScript, mais cela pourrait bientôt changer. Cet été, Chrome lancera la prise en charge de l'attribut loading, qui apporte le chargement différé <img> et <iframe> standardisé sur le Web.

Chargement différé au niveau du navigateur mettant en évidence le contenu hors écran chargé à la demande

L'attribut loading permet à un navigateur de différer le chargement des images et des iFrames en dehors de l'écran jusqu'à ce que les utilisateurs fassent défiler la page à proximité. loading accepte trois valeurs:

  • lazy: est un bon candidat pour le chargement paresseux.
  • eager: n'est pas un bon candidat pour le chargement paresseux. Chargez immédiatement.
  • auto: le navigateur déterminera si le chargement paresseux doit être effectué ou non.
<img src="io2019.jpg" loading="lazy" alt="..." />
<iframe src="video-player.html" loading="lazy"></iframe>

Les heuristiques exactes pour "lorsque l'utilisateur fait défiler l'écran près" sont laissées au navigateur. En général, nous espérons que les navigateurs commenceront à extraire les images différées et le contenu d'iFrame un peu avant qu'ils n'apparaissent dans le viewport.

L'attribut loading est implémenté derrière les indicateurs dans Chrome Canary. Vous pouvez tester cette démonstration dans Chrome 75 ou version ultérieure avec les indicateurs about://flags/#enable-lazy-image-loading et about://flags/#enable-lazy-frame-loading activés.

Pour en savoir plus, consultez cet article sur la fonctionnalité de chargement différé.

Google Fonts accepte désormais font-display en tant que paramètre de requête

Nous avons annoncé que la prise en charge de font-display est désormais disponible en production pour toutes les polices Google Fonts via le paramètre de chaîne de requête display:

https://fonts.googleapis.com/css?family=Lobster&display=swap

Le descripteur font-display vous permet de choisir comment vos polices Web seront affichées ou remplacées, en fonction du temps de chargement. Il accepte un certain nombre de valeurs, y compris auto, block, swap, fallback et optional.

Auparavant, le seul moyen de spécifier font-display pour les polices Web de Google Fonts était de les héberger vous-même. Ce changement vous évite d'avoir à le faire.

La documentation Google Fonts a été mise à jour pour inclure font-display dans les intégrations de code par défaut (comme indiqué ci-dessous). Nous espérons que cela encouragera davantage de développeurs à essayer cette nouveauté passionnante.

Code d&#39;intégration Google Fonts avec font-display inclus dans l&#39;URL en tant que paramètre de requête

Voici une démonstration sur Glitch de l'utilisation d'un affichage avec plusieurs familles de polices. Essayez-le avec l'émulation réseau DevTools pour voir l'impact de font-display: swap.

Regarder plus

Notre présentation a également abordé plusieurs études de cas de production sur l'utilisation de modèles de performances avancés pour améliorer l'expérience utilisateur. Il s'agit de sites qui exploitent des CDN d'images, la compression Brotli, le service JavaScript intelligent et le préchargement pour accélérer leurs pages. Regardez la conférence pour en savoir plus.