Découvrez trois nouveaux lancements concernant les performances Web lors de Google I/O 2019.
Lors de la conférence "Speed at Scale" (Vitesse à grande échelle) de la conférence 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 la budgétisation des performances
LightWallet est une nouvelle fonctionnalité de Lighthouse qui prend en charge les budgets de performances. Les budgets de performances établissent des normes de performances pour votre site. Plus important encore, elles permettent d'identifier et de corriger facilement les régressions de performances avant leur diffusion.
LightWallet est disponible dans la dernière version de la CLI Lighthouse et sa configuration ne prend que quelques minutes. Ces instructions fournissent plus d'informations.
Vous ne savez pas quels budgets choisir ? Essayez notre calculateur de budget de performance expérimental qui peut générer une configuration de budget compatible avec LightWallet.
Le chargement différé des images et des cadres iFrame au niveau du navigateur est disponible sur le Web
Les pages Web contiennent souvent un grand nombre d'images, ce qui contribue à l'utilisation des données, à l'accumulation de pages et à la lenteur du chargement des pages. Bon nombre de ces images se trouvent hors de l'écran, ce qui oblige l'utilisateur à faire défiler la page pour les afficher.
Jusqu'à présent, vous deviez résoudre des images à chargement différé à l'aide d'une bibliothèque JavaScript, mais cela risque bientôt de changer. Cet été, Chrome acceptera l'attribut loading, qui permet le chargement différé standardisé <img> et <iframe> sur le Web.
L'attribut loading permet à un navigateur de différer le chargement des images et des cadres iFrame hors écran jusqu'à ce que les utilisateurs fassent défiler l'écran à proximité. loading accepte trois valeurs:
lazy: ce format est particulièrement adapté au chargement différé.eager: le chargement différé n'est pas adapté. Chargez immédiatement.auto: le navigateur détermine si le chargement est différé.
<img src="io2019.jpg" loading="lazy" alt="..." />
<iframe src="video-player.html" loading="lazy"></iframe>
L'heuristique exacte pour "lorsque l'utilisateur fait défiler la page à proximité" dépend du 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 qu'ils n'entrent dans la fenêtre d'affichage.
L'attribut loading est implémenté derrière des indicateurs dans Chrome Canary. Vous pouvez essayer cette démonstration dans Chrome 75 ou version ultérieure en activant les indicateurs about://flags/#enable-lazy-image-loading et about://flags/#enable-lazy-frame-loading.
Un résumé de la fonctionnalité de chargement différé est disponible avec plus de détails.
Google Fonts prend désormais en charge font-display en tant que paramètre de requête.
Nous avons annoncé que font-display était désormais compatible en production pour toutes les Google Fonts via le paramètre display query-string:
https://fonts.googleapis.com/css?family=Lobster&display=swap
Le descripteur font-display vous permet de déterminer le mode d'affichage ou de remplacement de vos polices Web, en fonction de leur temps de chargement. Elle 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 consistait à les auto-héberger, mais cette modification vous évite d'avoir à le faire.
La documentation de 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 d'autres développeurs à essayer cette nouvelle fonctionnalité.
Voici une démonstration sur Glitch de l'utilisation de l'affichage avec plusieurs familles de polices. Essayez-le avec l'émulation réseau DevTools pour voir l'impact de font-display: swap.
Regarder d'autres contenus
Nous avons également abordé plusieurs études de cas en production sur l'utilisation de modèles de performances avancés pour améliorer l'expérience utilisateur. Il s'agissait, par exemple, de sites exploitant des CDN pour les images, de la compression Brotli, de la diffusion et du préchargement intelligentes de JavaScript pour accélérer leurs pages. Regardez la présentation pour en savoir plus :)