Fixing common Web Vitals issuesYouTube↗  IA↗(long shot)
Science & Technology  9.4K views 231 likes 5 dislikes   11 Dec 2020
Chrome for Developers 814K subscribers N/A YouTube↗


Please select the problem
You must specify your email and describe the problem in detail
Describe your problem in detail if it's not obvious

Click to Play Video Click to Play Video
(upbeat music)
(musique entraînante)
- There are handful challenges and points of confusion
- Il y a plusieurs soucis et points problématiques
about optimizing for web vitals
à propos de l'optimisation pour Web Vitals
that I see really frequently.
que je rencontre très fréquemment.
So the goal of today's presentation
L'objectif de la présentation d'aujourd'hui
is to cover as many of these issues as possible
est de couvrir autant de ces problèmes que possible
in the next 10 minutes.
au cours des 10 prochaines minutes.
In particular the three themes I'm going to be talking about
Plus précisément, les trois thèmes dont je vais parler
are Cumulative Layout Shift, Third-Party Scripts, and RUM.
sont le décalage de mise en page cumulatif (CLS), les scripts tiers et RUM.
I'm not going to be giving you an overview of these topics.
Je ne vais pas vous donner un aperçu de ces sujets,
And so I really want to stick to discussing
je vais vraiment m'en tenir à aborder
some of the edge cases and details
certains des cas extrêmes et des détails
that people tend to find confusing,
que les gens ont tendance à trouver déroutants,
as well as highlighting some performance techniques
et mettre en évidence des techniques de performance
that you might not be aware of.
dont vous n'avez pas forcément conscience.
I'm going to start today by walking you through
Je vais commencer aujourd'hui par vous expliquer
how CLS measurement is implemented in code.
comment la mesure de CLS est implémentée dans le code.
I want to do this because I think seeing
Je pense qu'en voyant
the implementation in code,
l'implémentation en code,
clears up a lot of the questions and confusion
vous aurez des réponses à plusieurs de vos interrogations
around when CLS is reported and finalized,
sur le moment où le CLS est signalé et finalisé,
particularly for single page applications.
en particulier pour les applications d'une seule page.
CLS is measured by using a performance observer
Le CLS est mesuré à l'aide d'un analyseur de performance
to observe for layout shift events.
qui repère les événements de changement de disposition.
When a layout shift occurs
Lorsqu'un changement de disposition se produit,
the PerformanceObserver invokes a callback function,
PerformanceObserver appelle une fonction de rappel,
and this callback function
et cette fonction de rappel
adds to the running layout-shift score, in other words, CLS.
contribue au score de décalage de mise en page en cours, en d'autres termes, CLS.
If you wanted to, you could also add code
Si vous le souhaitez, vous pouvez également ajouter du code
inside that callback function
à l'intérieur de cette fonction de rappel
to report this intermediate value of CLS.
pour signaler cette valeur intermédiaire de CLS.
Although you can do that is not necessary.
Même si vous pouvez le faire, ce n'est pas nécessaire.
Ultimately the only value of CLS that matters
En fin de compte, la seule valeur de CLS qui compte
is the final one.
est la dernière.
Final CLS is not determined by taking a bunch of CLS entries
Le CLS final n'est pas déterminé en prenant plusieurs entrées CLS
and seeing which one occurred last,
et en vérifiant laquelle s'est produite en dernier.
instead it's determined
Au lieu de cela, il est déterminé
by listening for the visibility state change event.
en écoutant l'événement de changement d'état de visibilité.
User actions like navigating to a new page,
Les actions d'utilisateurs, comme la navigation vers une nouvelle page,
switching tabs, minimizing tabs, closing the browser,
le changement d'onglet, la réduction d'onglets ou la fermeture de navigateur,
they're all examples of events
sont des exemples d'événements
that cause a document's visibility state
qui font passer l'état de visibilité d'un document
to change from visible to hidden.
de visible à hidden.
When any document's visibility state
Lorsque l'état de visibilité d'un document
changes from visible to hidden,
passe de visible à hidden,
you know that the value of CLS
vous savez que la valeur de CLS
at that moment should be reported.
à ce moment-là devrait être signalée.
One tool that I really liked for debugging layout shift
Il y a un outil que j'ai vraiment aimé pour déboguer le changement de disposition,
is the layout shift regions option in DevTools.
c'est l'option Layout Shift Regions dans DevTools.
You can access it from the command palette
Vous pouvez y accéder depuis la palette de commandes
or the rendering options tab.
ou l'onglet des options de rendu.
This feature highlights page elements
Cette fonctionnalité met en évidence les éléments de la page
that have shifted as they are shifting.
qui ont changé à mesure qu'ils se déplacent.
In other words, it's not highlighting
En d'autres termes, elle ne montre pas
the root cause of the layout shift
la raison du changement de disposition
but rather the effected elements.
mais plutôt les éléments affectés.
I personally find this tool most helpful
Je trouve cet outil très utile
when combined with screen recording.
lorsqu'il est combiné avec l'enregistrement d'écran.
Layout shifts can happen very very quickly
Les changements de disposition peuvent se produire très rapidement,
and this can make it difficult to debug them in real time.
et il peut être difficile de les déboguer en temps réel.
However, with screen recordings,
Cependant, avec les enregistrements d'écran,
you can step through the page load process afterwards
vous pouvez ensuite suivre le processus de charge de la page
as many times as you want, at your own pace,
autant de fois que vous le souhaitez, à votre rythme,
until you figure out what's causing the layout shift.
jusqu'à ce que vous compreniez ce qui cause le changement de disposition.
Another thing that I want to mention
Je veux également souligner
is that you can augment your web vitals reporting,
que vous pouvez développer vos rapports Web Vitals,
to provide you with more information
pour qu'ils donnent plus d'informations
about the circumstances under which
sur les circonstances dans lesquelles
a particular performance measurement was observed.
une mesure de performance particulière a été observée.
This includes things like reporting on connection type,
Il peut s'agir d'éléments sur le type de connexion
or scroll position, as well as pieces of data
ou la position de défilement, ainsi que des éléments de données
that might be unique to your app.
propres à votre application.
For example, if your app sets a debugging token.
Par exemple, si votre application définit un jeton de débogage.
Layout shifts that occur within 500 milliseconds
Les changements de disposition qui se produisent dans les 500 millisecondes
of user input do not count towards CLS.
suivant des interactions utilisateur ne comptent pas pour le CLS.
The asterisk here, though, is that
L'exception, ici, c'est que le
scrolling is not considered an excluded user input.
défilement n'est pas considéré comme une interaction utilisateur exclue.
In other words, if a user scrolls on a page
En d'autres termes, si un utilisateur fait défiler une page
and a layout shift occurs immediately after
et un changement de disposition se produit immédiatement après,
it's still going to count towards CLS.
il va toujours compter pour le CLS.
The reason why scrolling is treated a little bit differently
La raison pour laquelle le défilement est traité un peu différemment
than these other user input events,
des autres événements d'interaction utilisateur,
is that if you think about it,
est qu'en y réfléchissant,
if a user is scrolling on the page
si un utilisateur fait défiler la page
there's really no good reason why
il n'y a vraiment aucune raison valable pour laquelle
a layout shift should be occurring.
un changement de disposition pourrait se produire.
On the other hand, when a user is clicking on the page
D'autre part, lorsqu'un utilisateur clique sur la page,
it's much more likely that
il est beaucoup plus probable qu'il
they’re trying to navigate to a new page,
essaie d'accéder à une nouvelle page,
or opening a nav bar,
ou d'ouvrir une barre de navigation,
and these are things that can trigger layout shifts
et ce sont des choses qui peuvent entraîner des changements de disposition,
but they're probably layout shifts
mais ce sont probablement des changements de disposition
that the user doesn't mind, or they're wanted,
dont l'utilisateur ne se soucie pas, ou qu'il a voulues,
'cause the user is trying to accomplish something.
parce que l'utilisateur essaie d'accomplir quelque chose.
Keeping with the scrolling theme.
Toujours dans le thème du défilement,
Another thing that I want to mention
je veux aussi souligner que
is that most lab tools such as Lighthouse,
a plupart des outils de laboratoire, comme Lighthouse
or WebPageTest do not scroll down your page.
ou WebPageTest ne font pas défiler votre page vers le bas.
And this can be a blind spot when it comes to measuring
Et cela peut être un problème pour mesurer et
and identifying CLS in lab environments.
identifier le CLS dans les environnements de laboratoire.
And I'd say this probably affects mobile
Et je dirais que cela affecte probablement les mobiles
a little bit more than it does desktop.
plus que les ordinateurs.
At the same time, though, this blind spot
Mais en même temps, ce point n'est peut-être
might not be as big as you think it is.
pas aussi important que vous le pensez.
Keep in mind that layout shifts only count towards CLS
Gardez à l'esprit que les changements de mise en page ne comptent comme CLS
if they're visible to the user.
que s'ils sont visibles par l'utilisateur.
In other words, if there’s a layout shift
En d'autres termes, s'il y a un changement de disposition
that occurs below the fold,
qui se produit dans la zone below the fold,
but the user hasn't scrolled down the page,
et si l'utilisateur n'a pas fait défiler la page,
it's not going to count towards CLS.
ça ne compte pas comme CLS.
Lastly, keep in mind that sometimes
Enfin, gardez à l'esprit que parfois,
there can be no correlation
il n'y a pas de corrélation
between the CLS of a mobile and desktop site.
entre le CLS d'un site mobile et pour ordinateur.
This desktop and mobile versions of the same site
Les versions mobile et pour ordinateur d'un même site
often use different layouts, they use different UX patterns,
utilisent souvent des dispositions et modèles UX différents,
and as a result they can exhibit
et en conséquence ils peuvent présenter des
very different layout shifts.
changements de disposition très différents.
That brings me to my next point,
Cela m'amène à mon point suivant,
which is that code is only part of the solution
à savoir que le code n'est qu'une partie de la solution
to layout shift.
face au changement de disposition.
Some layout shifts can be fixed strictly through code.
Certains changements de disposition peuvent être résolus strictement avec du code.
This usually consists of adding the width
Cela consiste généralement à ajouter des attributs de
and height attributes to images, videos, and iframes.
hauteur et largeur aux images, vidéos et iframes.
However, many layout shifts
Cependant, de nombreux changements de disposition
are largely the result of bad UX patterns.
sont en grande partie le résultat de mauvais modèles UX.
In other words, the product was designed that way.
En d'autres termes, le produit a été conçu de cette façon.
An example that I've seen really frequently
Exemple que j'ai rencontré fréquemment :
is sites popping in banners at the top of the page
les sites qui apparaissent dans des bannières en haut de la page
to make an announcement, and when this banner pops in,
pour faire une annonce, et lorsque cette bannière apparaît,
it pushes everything else on the page down.
elle pousse tout le reste de la page vers le bas.
Optimizing UX patterns for Core Web Vitals
L'optimisation des modèles UX pour Core Web Vitals
is a whole topic in and of itself.
est un vaste sujet en soi.
Luckily for you, Garima will be discussing this
Heureusement pour vous, Garima en discutera
in the talk immediately following this one.
dans la présentation qui suivra la mienne.
I highly recommend that you stick around and watch it.
Je vous recommande fortement de la suivre.
That's all I have to say about CLS,
Voilà pour les CLS.
I'm now going to talk about third-party scripts.
Je vais maintenant parler des scripts tiers.
In the past year, we've heard a lot
L'année passée, nous avons beaucoup entendu
about lazy-loading images and lazy-loading iframes.
parler des images à chargement différé et des iframes à chargement différé.
Lazy loading can also be used to load third-party scripts,
Le chargement différé peut également être utilisé pour charger des scripts tiers,
however, it's a bit more of a delicate art form
cependant, c'est un peu plus délicat
and the APIs are also different.
et les API sont également différentes.
On the screen I've listed some APIs
Sur l'écran, j'ai listé quelques API
that are available for lazy-loading scripts.
disponibles pour les scripts à chargement différé.
There are a couple of things I want to note here.
Je veux souligner plusieurs choses ici.
One is that the delay set by set timeout
Premièrement, le délai défini par setTimeout
does not represent a guarantee
ne garantit pas quand
as to when the callback function will execute.
la fonction de rappel s'exécutera.
Instead, it's the minimum amount of time
Au lieu de cela, c'est le temps minimum
until that callback function will execute.
jusqu'à ce que cette fonction de rappel s'exécute.
This is because the callback function cannot be executed
C'est parce que la fonction de rappel ne peut pas être exécutée
if the main thread is busy.
si le thread principal est occupé.
This behavior sometimes makes that timeout
Ce comportement rend parfois ce délai d'expiration
frustrating to use
problématique à utiliser,
because it makes it a little bit unpredictable.
parce que cela le rend un peu imprévisible.
But in the context of loading third-party scripts,
Mais dans le contexte du chargement de scripts tiers,
it's actually kind of interesting
il est intéressant,
because maybe you don't want to
parce que peut-être que vous ne souhaitez pas
or you shouldn't be loading third-party scripts
ou ne devriez pas charger de scripts tiers
if the main thread is busy.
si le thread principal est occupé.
In addition, I want to note that,
De plus, je tiens à noter que,
if you want to trigger lazy loading based on user scrolling,
pour déclencher un chargement différé basé sur le défilement de l'utilisateur,
you should really use IntersectionObserver to do that
vous devriez utiliser IntersectionObserver pour cela,
rather than listening for the scroll event.
plutôt que d'écouter l'événement de défilement.
IntersectionObserver is going to be much more performant
IntersectionObserver va être beaucoup plus performant
than listening for the scroll event.
que d'écouter l'événement de défilement.
Lastly, I don't see many people using
Enfin, je ne vois pas beaucoup de gens utiliser
the PerformanceObserver for lazy loading,
PerformanceObserver pour le chargement différé,
but it does open up some really interesting possibilities
mais cela donne accès à des possibilités vraiment intéressantes,
for doing things like waiting
comme attendre
for a particular performance event to occur.
qu'un événement de performance particulier se produise.
For example, first paint or First Contentful Paint,
Par exemple, First Paint ou First Contentful Paint,
and then triggering script loading.
puis déclencher le chargement du script.
Another issue with third-party scripts that I hear a lot
Un autre problème avec les scripts tiers que je vois souvent,
is that engineering teams are really frustrated
c'est que les équipes d'ingénieurs ont vraiment l'impression
because they feel like marketing teams
de fonctionner comme des équipes marketing,
just keep adding more scripts to their page,
en ajoutant continuellement des scripts à leurs pages,
and there’s nothing they can do about it.
et elles ne peuvent rien y faire.
Ideally you would get those teams on board with performance,
Dans l'idéal, il faudrait présenter les performances à ces équipes,
but if that's not an option,
mais si ce n'est pas possible,
you might be able to make some improvements to the situation
vous pouvez peut-être améliorer la situation
by taking advantage of some of the features
en tirant parti de certaines fonctionnalités
available on tag managers.
disponibles sur Tag Manager.
These are features that give you
Ces fonctionnalités vous permettent
the ability to restrict tag usage,
de restreindre l'utilisation des tags,
as well as get greater visibility into the usage of tags.
mais aussi d'avoir une meilleure visibilité sur l'utilisation des tags.
This slide lists some useful features of Google Tag Manager
Cette diapositive montre quelques fonctionnalités utiles de Google Tag Manager,
but I would expect that you would be able to find
mais je pense que vous pouvez trouver des fonctionnalités
similar features in other tag managers as well.
similaires dans d'autres gestionnaires de tags.
In this last section
Dans la dernière section,
I'll be talking about techniques that you can use
je vais parler des techniques que vous pouvez utiliser
for improving your RUM setup.
pour améliorer votre configuration RUM.
A question that I commonly get
On me demande souvent
is how can you get page-level performance data?
comment obtenir des données de performances au niveau de la page.
Page-level performance data is technically available
Les données de performances au niveau de la page sont techniquement disponibles
in both CrUX and PageSpeed Insights.
dans CrUX et PageSpeed Insights.
However, in practice,
Cependant, dans la pratique,
you might find that it's not available,
elles ne sont pas forcément disponibles,
and that's because page-level data will not be exposed
parce que les données au niveau de la page ne sont pas exposées
if there's not enough performance data
s'il n'y a pas assez de données de performance
available for that page.
disponibles pour cette page.
If you're running into this situation,
Si vous rencontrez cette situation,
you might find it helpful to look at Search Console.
il peut être utile de regarder du côté de Search Console.
Search Console is a little bit different
Search Console est un peu différent,
because it exposes performance data based on URL groups.
car il expose des données de performances basées sur des groupes d'URL.
Search Console URL groups are groupings of URLs
Les groupes d'URL de Search Console sont des regroupements d'URL
with similar HTML structure.
avec une structure HTML similaire.
The idea being that structurally similar pages
L'idée étant que des pages structurellement similaires
are going to exhibit similar performance characteristics.
vont présenter des caractéristiques de performance similaires.
As a result, pages that might not have
Par conséquent, les pages qui pourraient ne pas avoir
enough performance data to be displayed in PSI or CrUX,
suffisamment de données de performance pour être affichées dans PSI ou CrUX,
could potentially be displayed in Search Console.
peuvent potentiellement être affichées dans Search Console.
In addition, this feature provides you with a way
De plus, cette fonctionnalité vous propose un moyen
of forecasting the performance
de prévoir la performance
of newly added pages to your site.
des pages nouvellement ajoutées à votre site.
For example, the screenshot on the screen
Par exemple, la capture d'écran ici
shows the URL groupings that Search Console detected
montre les regroupements d'URL détectés par Search Console
for all the author pages on web.dev.
pour toutes les pages d'auteur sur web.dev.
If I were to add a new author page to web.dev,
Si je devais ajouter une nouvelle page d'auteur à web.dev,
I technically don't know
je ne sais techniquement pas
what the page performance is going to be like,
quelle sera sa performance,
but I can get a pretty good idea
mais je peux en avoir une bonne idée
by looking at the aggregate page performance
en examinant les performances globales
of all the existing author pages on web.dev.
de toutes les pages d'auteur existantes sur web.dev.
Search Console is a great tool,
Search Console est un excellent outil,
but if you want more detailed
mais si vous voulez plus de détails
or more frequent performance data
ou des données de performance plus fréquentes
than what search console provides,
que ce que fournit Search Console,
you will need to collect your own performance data.
vous devrez collecter vos propres données de performance.
There are two paths that you can go down
Il y a deux façon de faire
when it comes to collecting your own performance data.
pour collecter vos propres données de performance.
You can set up the tooling yourself,
Vous pouvez configurer des outils vous-même,
or you can sign up for a third-party service.
ou vous pouvez passer par un service tiers.
If you want to set up the performance tooling yourself,
Si vous souhaitez configurer vous-même des outils de performance
we recommend using the web-vitals JS library
nous vous recommandons d'utiliser la bibliothèque JS web-vitals,
that is available on GitHub.
qui est disponible sur GitHub.
Web-vitals JS is a small lightweight script
Cette bibliothèque est un petit script
that you include on your page,
que vous incluez sur votre page,
that provides an API for measuring the web-vitals metrics.
qui fournit une API pour mesurer les métriques web-vitals.
The advantage of using this script
L'avantage d'utiliser ce script
rather than something you implement yourself,
plutôt que quelque chose que vous créez vous-même,
is that it gives you the assurance
c'est que ça vous donne l'assurance
that your implementation is correct,
que votre implémentation est correcte,
and therefore the measurements that you collect
et donc les mesures que vous collectez
are going to match those found in Google Tooling.
vont correspondre à celles relevées par les outils Google.
Alternatively, there are a wide variety
Il existe également une grande variété
of third-party services that support web-vitals.
de services tiers qui prennent en charge Web Vitals.
Most of these are paid services,
La plupart de ces services sont payants,
however, CloudFlare Browser Insights
cependant, CloudFlare Browser Insights
is available for free and supports web-vitals.
est disponible gratuitement et prend en charge Web Vitals.
That brings me to the end of this presentation.
Voilà pour ma présentation.
Thanks for watching, see you soon.
Merci pour votre attention, et à bientôt.
(upbeat music)
(musique entraînante)
Similar videos:

UX patterns optimized for Core Web Vitals
Chrome for Developers
17.8K views 520 likes 22 dislikes 11 Dec 202067% match

Beyond fast with new performance features
Chrome for Developers
24.2K views 1.3K likes 10 dislikes 14 Dec 202066% match

Exploring the future of Core Web Vitals
Chrome for Developers
4.5K views 102 likes 6 dislikes 14 Dec 202065% match

The web ahead
Chrome for Developers
5.3K views 105 likes 3 dislikes 21 Dec 202063% match

Core Web Vitals and SEO
Chrome for Developers
13.6K views 358 likes 7 dislikes 14 Dec 202061% match

Making the web more visual with Web Stories
Chrome for Developers
9.3K views 250 likes 39 dislikes 21 Dec 202059% match

Next-level web apps on desktop
Chrome for Developers
29.6K views 836 likes 241 dislikes 18 Dec 202056% match

Connecting hardware devices to the web
Chrome for Developers
11.5K views 445 likes 12 dislikes 21 Dec 202056% match

Debugging WebAssembly with modern tools
Chrome for Developers
14.3K views 244 likes 25 dislikes 17 Dec 202055% match

Optimize for interactivity using Web Vitals (FID/TBT)
Chrome for Developers
8.2K views 234 likes 4 dislikes 16 Dec 202046% match

Design at scale with Web Components (and ducks)
Chrome for Developers
14.9K views 389 likes 49 dislikes 22 Dec 202045% match

Superpowers for next gen web apps: Machine learning
Chrome for Developers
65.1K views 1.9K likes 30 dislikes 15 Dec 202045% match

Updating the way we work
Chrome for Developers
16.5K views 200 likes 24 dislikes 16 Dec 202045% match

Patterns for privacy
Chrome for Developers
4.6K views 105 likes 10 dislikes 23 Dec 202045% match

Web development on Chrome OS (Chrome Dev Summit 2019)
Chrome for Developers
17.3K views 455 likes 25 dislikes 25 Nov 201944% match

Canvas2D is getting an update
Chrome for Developers
13.9K views 783 likes 35 dislikes 22 Dec 202044% match

Predictive prefetching for the Web (Chrome Dev Summit 2019)
Chrome for Developers
6.2K views 215 likes 2 dislikes 25 Nov 201944% match

Introducing the Privacy Budget
Chrome for Developers
4.7K views 138 likes 7 dislikes 15 Dec 202043% match

Ready player web: Building modern web games (Chrome Dev Summit 2019)
Chrome for Developers
13.5K views 412 likes 28 dislikes 17 Nov 201943% match

What’s new in Material Design for the web (Chrome Dev Summit 2019)
Chrome for Developers
38.1K views 915 likes 22 dislikes 22 Nov 201943% match

Day 1: Chrome Dev Summit 2020
Chrome for Developers
15.9K views 628 likes 8 dislikes 09 Dec 202043% match

Chrome Dev Summit 2019 - Day 2 Livestream
Chrome for Developers
12.3K views 195 likes 7 dislikes 12 Nov 201942% match

Upgrading DevTools' architecture to the modern web
Chrome for Developers
10.4K views 338 likes 5 dislikes 23 Dec 202042% match

Transitioning to modern JavaScript
Chrome for Developers
83.1K views 3.8K likes 72 dislikes 17 Dec 202042% match

Sign-up form best practices
Chrome for Developers
21.1K views 1.1K likes 11 dislikes 16 Dec 202042% match

Chrome Dev Summit Adventure: How we built it
Chrome for Developers
4.4K views 131 likes 6 dislikes 14 Dec 202042% match

Chrome Dev Summit 2019 - Day 1 Livestream
Chrome for Developers
21.8K views 461 likes 5 dislikes 11 Nov 201942% match

3x3 SEO tips for JavaScript web apps
Chrome for Developers
18.5K views 591 likes 20 dislikes 23 Dec 202042% match

Web as a building block for user experience (Chrome Dev Summit 2019)
Chrome for Developers
5.2K views 126 likes 14 dislikes 12 Nov 201941% match

Speed highlights (Chrome Dev Summit 2019)
Chrome for Developers
6.7K views 188 likes 5 dislikes 14 Nov 201941% match


Settings Privacy About Contact Donate