Découvrez trois nouveaux lancements de performances Web lors de l'I/O 2019.
Lors de la conférence "Speed at Scale" à l'occasion de l'événement Google I/O 2019, nous avons annoncé trois nouveautés qui, nous l'espérons, amélioreront les performances Web au cours de l'année à venir.
Lighthouse est désormais compatible avec la budgétisation des performances
LightWallet est une nouvelle fonctionnalité de Lighthouse qui ajoute la prise en charge des budgets de performances. Les budgets de performance établissent des normes pour les performances de votre site. Plus important encore, ils vous permettent d'identifier et de corriger les régressions de performances avant leur déploiement.
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 quel budget 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 de chargement différé 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é standardisé de <img> et <iframe> sur le Web.
L'attribut loading permet à un navigateur de différer le chargement des images et des iFrames hors écran jusqu'à ce que les utilisateurs fassent défiler la page à proximité. loading accepte trois valeurs :
lazy: est un bon candidat pour le chargement différé.eager: n'est pas un bon candidat pour le chargement différé. Chargement immédiat.auto: le navigateur détermine s'il doit charger de manière différée ou non.
<img src="io2019.jpg" loading="lazy" alt="..." />
<iframe src="video-player.html" loading="lazy"></iframe>
La méthode heuristique exacte pour "lorsque l'utilisateur fait défiler la page à proximité" est laissée à la discrétion du navigateur. En général, nous espérons que les navigateurs commenceront à récupérer les images et le contenu des iFrames différés un peu avant qu'ils n'apparaissent dans la fenêtre d'affichage.
L'attribut loading est implémenté derrière des flags dans Chrome Canary. Vous pouvez essayer cette démonstration dans Chrome 75 ou version ultérieure avec les flags about://flags/#enable-lazy-image-loading et about://flags/#enable-lazy-frame-loading activés.
Un article sur la fonctionnalité de chargement différé est disponible pour plus de détails.
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 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 décider de la manière dont vos polices Web seront affichées ou remplacées, en fonction de leur temps de chargement. Il accepte un certain nombre de valeurs, y compris auto, block, swap, fallback et optional.
Auparavant, la seule façon de spécifier font-display pour les polices Web de Google Fonts était de les auto-héberger, mais ce changement élimine cette nécessité.
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é intéressante.
Voici une démonstration sur Glitch de l'utilisation de l'affichage avec plusieurs familles de polices. Testez-le avec l'émulation réseau des outils de développement pour voir l'impact de font-display: swap.
Regarder pour en savoir plus
Nous avons également abordé plusieurs études de cas de production utilisant des modèles de performances avancés pour améliorer l'expérience utilisateur. Ces sites ont utilisé des CDN d'images, la compression Brotli, la diffusion intelligente de JavaScript et le préchargement pour accélérer leurs pages. Regardez la présentation pour en savoir plus :)