Découvrez trois nouveaux lancements de fonctionnalités de performances Web lors de Google I/O 2019.
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 concernant 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.
LightWallet est disponible dans la dernière version de la CLI Lighthouse et ne prend que quelques minutes à configurer. Ces instructions fournissent plus d'informations.
Vous ne savez pas quels budgets choisir ? 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. De nombreuses images ne sont pas visibles à l'é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.
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étermine s'il faut ou non effectuer un chargement différé.
<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 à récupérer les images différées et le contenu iFrame un peu avant leur arrivée dans la fenêtre d'affichage.
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 incitera davantage de développeurs à tester cet ajout intéressant.
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 vidéo de présentation pour en savoir plus.