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 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.
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.
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.
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.