Optimize for interactivity using Web Vitals (FID/TBT)YouTube↗  IA↗(long shot)
Science & Technology  8.2K views 234 likes 4 dislikes   16 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
(musique entraînante)
（陽気な音楽）
- Bonjour, je suis Cheney,
こんにちは Cheneyです
et je suis ici aujourd'hui pour vous parler d'optimisation
本日はCore Web Vitalsの
de votre site Web pour les Core Web Vitals.
最適化についてお話します
Plus tard dans cette présentation, mon collègue Demian interviendra
後半は 同僚のDamianにバトンタッチして
et vous présentera une étude de cas réel.
実際のケーススタディについて 説明してもらいます
Aujourd'hui, nous allons parler
本日取り上げる柱は
du pilier que constitue l'interactivité,
インタラクティブ性です
en quoi elle est importante, sur quelle métrique se concentrer,
重要である理由、注目すべき指標、
et comment l'améliorer.
改善方法を見ていきます
Pour rappel, les deux autres piliers
復習として Core Web Vitalsの
des Core Web Vitals sont le chargement et la stabilité visuelle.
残り２つの柱は 読み込み時間と 視覚的な安定性でしたね
Vous pouvez en découvrir plus à ce sujet dans le discours d'Adios Molly
詳しくは Adios Mollyの プレゼンで説明しています
disponible au lien web.dev Live ci-dessous.
下のweb.dev LIVEへのリンクから ご覧いただけます
Parlons d'abord d'interactivité.
まず インタラクティブ性についてです
Qu'essayons-nous réellement d’améliorer
実際 ユーザーのためにどこを改善し
et d'optimiser pour l’utilisateur ?
最適化をしようとしているのでしょうか
Les pages Web sont plus dynamiques,
ウェブページはこれまで以上に動的で
plus tactiles que jamais.
タッチ操作中心になっています
C'est un dialogue permanent
１つのナビゲーション内でも
entre l'utilisateur et la page, avec plusieurs onglets,
タブの切り替え、スワイプ、スクロールなど
balayages du doigt et défilements, le tout en une seule navigation.
ユーザーとページ間で絶えず 対話が行われています
Lorsque nous touchons, faisons glisser ou balayons quelque chose,
私たち人間は何かを
nous avons été formés par le monde tout autour de nous,
タッチ、ドラッグ、スワイプすると
en tant qu'êtres humains, à attendre une réponse instantanée à cette action.
これまでの経験から その入力への 即時の応答を期待してしまいます
Pourtant, les interfaces utilisateur que nous touchons numériquement
ところが 私たちがタッチするデジタルUIは
ne semblent pas toujours correspondre à ces attentes.
必ずしもこうした期待を 満たすものばかりではなく
Il est frustrant de rencontrer des expériences
反応が遅い、まったく反応しないなどの
qui paraissent lentes ou carrément insensibles.
体験をするとイライラしてしまいます
Bien sûr, certaines actions comme appuyer sur un bouton de recherche
もちろん 検索ボタンや フィルターボタンのタップなどの
ou un bouton de filtre peuvent ne pas constituer une simple tâche banale.
一部のアクションの処理は 容易ではないかもしれません
Peut-être que je passe simplement d'un onglet de navigation à un autre.
一方 あるナビゲーションタブから別のタブに 移動しているだけの場合もあるでしょう
Ce pilier ne cherche pas forcément
この柱で評価するのは
à renvoyer des résultats immédiatement,
必ずしも すぐに結果を返したかではなく
mais plutôt à mesurer si la page a pu
ページがその入力に反応し
réagir à cette action
必要に応じて即座に
et fournir un retour d'information instantanément si nécessaire.
フィードバックを返すことができたかです
Nous voulons donc finalement améliorer
したがって 最終的に改善したいのは
ce que l'on appelle la « latence d’entrée »,
入力レイテンシと呼ばれるものです
et celle-ci se divise en trois parties.
入力レイテンシは３つの部分に分かれます
La première partie est le délai.
１つ目の部分は遅延です
C'est la durée entre l'interaction de l’utilisateur
これは ユーザーが操作してから
et le moment où le navigateur traite effectivement les gestionnaires d'événements
それに応答して ブラウザが実際に イベントハンドラを処理するまでの
en réponse à celle-ci.
時間です
Contrairement à la croyance populaire, lorsque vous touchez quelque chose,
一般に考えられていることに反して
le navigateur est toujours en train de finir
私たちが何かにタッチするとき
ce qu'il faisait jusqu’à présent.
ブラウザはまだ その前の処理を行っています
La deuxième partie est le temps de traitement.
２つ目の部分は処理時間です
C'est le temps que prend réellement
これはユーザー入力に応じて
l'exécution des gestionnaires d'événements liés
関連付けられているイベントハンドラを
en réponse à cette action de l'utilisateur.
実行するのに実際にかかる時間です
Vous remarquerez que, dans la deuxième partie ici,
この２つ目の部分で
l'interface utilisateur n'a pas réellement été mise à jour.
ユーザーインターフェースは まだ更新されていません
L'utilisateur ne sait pas encore
入力が登録され
que son action a été effectivement enregistrée
それが何らかの効果を生み出したことを ユーザーに示す
et qu'il a réellement fait quelque chose.
フィードバックがまだありません
La troisième partie est donc le rendu,
３つ目の部分はレンダリングです
et il s'agit du temps qu’il faut
これは
pour rendre l'image suivante une fois que le navigateur sait
ブラウザがどのようにUIを更新して 画面に表示するかを認識した後に
quel type de mise à jour de l'interface utilisateur afficher à l’écran.
次のフレームをレンダリングするまでの時間です
Vous pouvez voir qu'ici,
そして ここで初めて
l'interface utilisateur est passée de « FLY » à « SLEEP ».
UIが[FLY]から[SLEEP]に 移行します
Les trois parties résument donc ici
以上３つの部分をまとめたものが
ce que nous appelons la latence d'entrée.
入力レイテンシと呼ばれるものです
Maintenant, la métrique du délai d'entrée fait référence à la toute première partie.
そして 入力遅延という指標が 最初の部分に当たります
Nous mesurons un délai d'entrée pour chaque action discrète
タップ、クリック、キー操作など
qu'un utilisateur effectue, comme un appui, un clic,
ユーザーが行う個々のすべての アクションの入力遅延を
ou un appui sur une touche.
測定します
Le défilement de la page n'est pas comptabilisé,
ページのスクロールはカウントされません
car cela peut toujours arriver
メインスレッドがビジーであっても
même si le thread principal est toujours occupé.
スクロールされる可能性があるためです
En observant cet exemple de chargement de page,
このサンプルページの読み込みを見てみると
le First Input Delay (premier délai d'entrée) est la toute première interaction
最初の入力遅延はユーザーが
après qu'un utilisateur accède à votre page.
ページに移動した後の最初の操作です
Notez les nombreux délais d'entrée,
入力遅延は多くありますが
mais nous voulons nous concentrer sur le premier
着目するのは最初の遅延です
car cela se produit souvent lorsque le navigateur est le plus occupé.
これは 読み込んでいる大規模な
Il analyse et exécute
各種JavaScriptファイルの 解析および実行で
divers fichiers JavaScript volumineux que vous pourriez charger.
ブラウザがもっともビジーなときであり
Cela constitue également le moment idéal
ウェブ開発者が第一印象をよくするための
pour faire une bonne première impression
大きなチャンスとなるタイミングでも
en tant que développeur Web.
あるからです
Alors que nous voulons nous assurer que chaque entrée d'utilisateur
ページ上でのユーザー入力に対する遅延を
sur la page s'effectue le plus rapidement possible,
すべて最小限に抑えたいところですが
dans la version actuelle des Core Web Vitals,
現在のエディションの Core Web Vitalsでは
nous vous recommandons d'optimiser
First Input Delay 略してFIDの
le First Input Delay, ou FID en abrégé.
最適化を推奨しています
Dans ce chargement de page,
こちらの
lorsque l'utilisateur a appuyé au tout début de la page,
ページの読み込みでは ユーザーが ページの最初にタップしたとき
le thread principal était en pleine exécution de la tâche JavaScript.
メインスレッドは JavaScriptタスクの処理中でした
Pour commencer à répondre à cette action,
ブラウザが この入力への応答を開始するには
le navigateur doit attendre la fin de la tâche.
タスクが終了するまで待つ必要があります
La durée entre le point d'entrée de l’utilisateur
したがって ユーザーが入力した時点から
et l'achèvement de la tâche jaune
ブラウザがこちらの黄色のタスクを 終えるまでの時間が
que vous voyez ici par le navigateur
最初の入力遅延
constitue le First Input Delay.
つまり First Input Delay となります
Pour être le plus susceptible
高速かつ想定に沿った方法で
de répondre à l'utilisateur
ユーザーに応答できる可能性を高めるため
d'une manière rapide et attendue,
推奨される遅延は
nous recommandons de ne pas avoir plus de 100 millisecondes de retard
75パーセンタイル以上で
au 75e centile ou plus.
100ミリ秒以下となります
Il est important de ne pas oublier
忘れてはならないのが
que ce First Input Delay est une métrique de champ
First Input Delayは 実地指標であり
et qu'elle nécessite un utilisateur réel.
実際のユーザーを必要とする点です
Il n'est pas facile de deviner ce qu'un utilisateur pourrait faire.
ユーザーの行動を予測するのは 容易ではありません
Certains utilisateurs sont intéressés par un élément spécifique.
あるものに関心を持つユーザーがいれば
D'autres peuvent naviguer différemment
何かをタップする前にまずスクロールするという
et faire défiler d'abord avant d'appuyer sur autre chose.
異なる閲覧のし方をするユーザーもいれば
D'autres, comme moi, sont un peu plus impatients
私のように せっかちで
et appuient sur les éléments immédiatement.
すぐにタップする人もいると思います
Et tout cela est impacté
そして これはすべて
par ce que vous montrez à l'utilisateur, comme un écran de démarrage
スプラッシュ画面または ローディングカルーセルとして
ou un carrousel en chargement.
ユーザーに表示するものによる影響を受けます
Lorsque vous lui montrez cela,
これを表示することで
l'intention de cet utilisateur en particulier
その特定のユーザーの意図
et tout autre travail vous pourriez réaliser
そして UIの下で他にどのような
derrière l'interface utilisateur
作業が行われているかが
sont en quelque sorte cachés pour l'utilisateur.
ユーザーには見えません
La variation des délais d'entrée
つまり 入力遅延のばらつきは
montre l'importance du recueil et de l'analyse
実際のユーザーのFIDデータを
des données FID de vos utilisateurs en situation réelle
収集して分析することの重要性と
et peut également se concentrer sur des centiles élevés
75パーセンタイルのように 高いパーセンタイルに
comme le 75e.
着目すべき理由を示しています
Vous pouvez recueillir ces données en utilisant
このデータは ここにリンクされている web-vitalsという
la bibliothèque JavaScript web-vitals liée ici,
JavaScriptライブラリを使って 収集できます
ou rechercher auprès de votre fournisseur d'analyse RUM
また RUM分析プロバイダーに
tout support prêt à l'emploi qu'il pourrait fournir.
すぐに使えるサポートがないか 確認してみてください
Grâce aux données recueillies,
収集されたデータを使用して
vous pouvez observer tous les types d'entrées,
あらゆるタイプの入力を見ることができます
des instantanées qui n'atteignent pas une tâche de blocage,
ブロッキングタスクにぶつからず すぐに処理された入力から
à celles qui disposent d'un délai.
遅延があるものまでです
Cela implique alors une question importante.
そして 重要な問いは
Lorsque l'utilisateur a rencontré un délai
ユーザーの入力に対して
de réponse à son action,
遅延が発生したとき
à quel point cela a-t-il impacté son expérience ?
それはどの程度の遅延だったかです
Oh, regardez, Demian est en train de nous rejoindre.
ここからはDamianが 参加してくれるようです
- Oui, cela fait cinq minutes que j'essaie de te rejoindre,
５分前から参加しようとしてたんです
mais je n'obtenais pas de réponse.
応答がありませんでした
- Désolé, j'étais en train de terminer cette longue
すみません イントロダクションというタスクを
introduction.
終えるのに時間がかかっていました
- Peut-être que la prochaine fois, tu pourras la décomposer
次回は 小さなチャンクに分割して
en plusieurs parties pour pouvoir répondre plus vite.
より速く応答できるようにすると いいかもしれませんね
- C'est une bonne idée,
いい考えですね
mais encore mieux, il y a peut-être des trucs
さらに言えば 全部カットできた部分も
que j'aurais pu couper carrément.
あったのではないかと思います
Bref, je sais que tu as déjà discuté
ともかく Damianは現場の開発者と
avec de vrais développeurs sur le terrain.
話をしていると思いますが
Quelles sont les questions les plus courantes
First Input Delayに関して
que l'on t’a posées à propos du First Input Delay ?
多く寄せられる質問は何ですか
- Oui c'est vrai.
はい そのとおりです
Le FID est affecté par de nombreux facteurs sur le terrain.
FIDは 実地の多くの要因の影響を受けるので
Quelle métrique peut-on donc utiliser lorsque l'on développe
開発中およびラボでのテスト中に
et effectue des tests en laboratoire ?
使用できる指標を尋ねられます
- C'est une excellente question.
素晴らしい質問ですね
Le problème, comme nous l'avons dit,
問題はすでに述べたように
c'est que chaque utilisateur est différent.
ユーザー一人ひとりが異なる点です
Vous ne pouvez pas généraliser un cas de test
ラボのテストケースを一般化して
en laboratoire car il ne représente pas vraiment le terrain.
実地と同等だと見ることはできません
Chaque utilisateur effectue ses propres choix légitimes sur la page,
ユーザーは誰でもページ上で 独自の選択する権利があり
et ceux-ci peuvent être très différents.
選択する内容は大きく異なる可能性があります
Se baser sur une moyenne ou une médiane
平均や中央値を求めるのには
n'aurait donc pas de sens puisque les valeurs peuvent être nulles
合理的ではありません 長いタスクにぶつからなかったから
si l'utilisateur n’a pas du tout atteint la fin d'une longue tâche,
値がゼロの場合もあれば
ou bien les valeurs pourraient être assez élevées
左の図のように
parce qu'il a touché la page
ユーザーが長いタスクの途中で
en plein milieu d'une longue tâche,
ページにタッチしたため
comme vous le voyez ici à gauche.
値が非常に高くなる場合もあります
Le First Input Delay nécessite qu'un utilisateur
したがって First Input Delayは
interagisse avec cette page.
ユーザーによるページの操作を前提としています
Nous savons que cela pourrait se produire au milieu
操作はメインスレッドの処理の途中に 行われる場合があることも
de certaines tâches du thread principaux.
わかっています
Dans le scénario idéal,
理想的なシナリオでは
nous allons dans notre outil de laboratoire et nous lui indiquons
ラボツールを使って
notre délai d'entrée typique.
代表的な入力遅延を調べるところですが
Maintenant, nous venons d'expliquer qu'il n’est pas très facile
すでに説明したように ラボツールでの測定は
pour un outil de laboratoire de faire cela.
容易ではありません
Au lieu de cela, dans Lighthouse et DevTools,
そこで Lighthouseと DevToolsには
nous utilisons une métrique complémentaire pour le laboratoire
ラボ向けの姉妹指標画面を設けています
appelée « Total Blocking Time » (Temps total de blocage).
合計ブロッキング時間です
Le Total Blocking Time décrit la cause première
合計ブロッキング時間は First Input Delayが
d'un First Input Delay lent,
大きくなる根本原因である
qui est de longues tâches de blocage.
長いブロッキングタスクを表します
Nous fixons un budget de 50 millisecondes pour chaque tâche,
各タスクに50ミリ秒のバジェットを設定し
mais si vous le dépassez,
これを超えた時間はすべて
chaque milliseconde après ça
ミリ秒単位で
est considérée comme un temps de blocage potentiel.
潜在的なブロッキング時間と見なされます
Vous obtenez gratuitement 15 millisecondes
ただし 15ミリ秒の猶予が与えられます
parce que nous pensons que cela donne au navigateur
ブラウザとメインスレッドが一部の処理を行い
et au thread principal suffisamment de temps pour effectuer des tâches
一部のユーザー入力に対して
et réagir visuellement de manière fiable
確実に視覚的に反応するのに
à l'action d’un utilisateur dans ce délai.
十分な時間と考えられるからです
Désormais, cette action d'utilisateur peut avoir lieu à tout moment.
このユーザー入力はいつでも 発生する可能性があります
Elle pourrait survenir lors de la toute première tâche
ページの最初のタスクにぶつかる場合も
sur la page jusqu'à la 50e tâche de la page.
50番目のタスクにぶつかる場合もあります
Il n'est donc pas logique de mesurer un temps de blocage
ですから 1つのタスクの 合計ブロッキング時間を測定するのは
juste pour une tâche.
合理的ではありません
À la place, nous regardons toutes les différentes tâches
１つのタスクではなく ページを読み込む間
pendant la durée du chargement de la page,
すべてのタスクについて測定し
additionnons tous les différents temps de blocage,
それぞれのブロッキング時間をすべて合計します
raison pour laquelle cela s'appelle Total Blocking Time.
それで合計ブロッキング時間と呼ばれるわけです
Nous allons vous donner un exemple ici.
例を挙げます
Sur la diapositive, vous voyez un thread principal.
メインスレッドが表示されています
Vous pouvez voir plusieurs tâches se dérouler ici,
複数のタスクが発生しているのがわかります
des longues comme des courtes.
長いものも 短いものもあります
La somme de toutes ces différentes régions de blocage,
赤で示した
indiquées en rouge, est ce que nous appelons Total Blocking Time.
このブロッキング領域すべての合計が 合計ブロッキング時間と呼ばれます
Maintenant, un développeur arrive et veut améliorer cela.
これを目にした開発者が改善しようと考えた場合
Pour y parvenir,
その方法の１つは
il peut optimiser l'étape d’hydratation de l'application.
アプリのハイドレーションステップの 最適化です
Cela pourrait supprimer 100 millisecondes de cette tâche,
これにより 該当する１つのタスクが 100ミリ秒短くなり
et également 100 millisecondes
合計ブロッキング時間も
de votre Total Blocking Time.
100ミリ秒短くなります
Le Total Blocking Time
つまり ここでは
ne mesure pas le FID, dans ce cas,
合計ブロッキング時間で FIDは測定されませんが
mais il est en corrélation avec le FID
FIDとは相関しています
parce que si vous les comparez,
比較してみると
ce thread principal semble maintenant un peu plus ouvert.
こちらのメインスレッドの方が 先ほどより多少オープンに見えます
La probabilité d'avoir un bon First Input Delay
ですから 確率的に言って
lorsque j'appuie quelque part
このメインスレッド内のどこかでタップし場合
dans ce thread principal
フリーな時間が多いため
est plus élevée car il est plus libre.
First Input Delayが短くなる 可能性が高くなると考えられます
Vous pouvez trouver les détails du Total Blocking Time dans Lighthouse.
合計ブロッキング時間の画面は Lighthouse内にあります
Ce sera l'une de ces principales métriques
このようにトップ指標の1つとして
que vous verrez là-bas,
表示されています
mais parfois, vous voudrez sûrement aller plus loin.
しかし さらに掘り下げたい場合は どうでしょうか
Ce n'est peut-être pas seulement votre code de première partie
合計ブロッキング時間が長いのは
qui provoque un Total Blocking Time lent.
ファーストパーティコードだけが 原因ではないかもしれません
Il pourrait en fait s'agir également de tiers.
実際にはサードパーティコードが 原因の可能性もあります
Lighthouse est mis en place pour essayer de vous aider à optimiser
ですから Lighthouseは
cela en obtenant un diagnostic Lighthouse
サードパーティのみを対象とした診断で
uniquement pour les tiers.
最適化をサポートする設定となっています
Dans cet audit,
この監査では
vous pouvez voir tous les différents tiers que vous avez chargés
さまざまなドメインから読み込んだ
et parmi les différents domaines listés ici,
すべてのサードパーティが一覧で表示され
la taille de l'émetteur réseau
ネットワーク転送のサイズと
et leur contribution au Total Blocking Time
合計ブロッキング時間の内訳が
sur le côté droit ici.
右側に表示されます
Vous remarquerez que
そして
parfois, même de petits scripts
小規模なスクリプトで
qui sont relativement rapides à transférer sur le réseau
ネットワークでの転送が比較的高速であっても
pourraient avoir un impact très important sur votre temps de blocage
メインスレッドで実行する処理によっては
en raison du travail qu'ils exécutent sur votre thread principal.
ブロッキング時間に多大な影響を与える 場合があることがわかるでしょう
- Bon, c'est compris.
わかりました
Tu viens de mentionner
先ほど
que cette métrique est corrélée.
この指標の相関について言及されていましたが
Mais je vois des cas avec un bon FID sur le terrain,
実地では ラボツールの評価で FIDは良好なのに
mais un TBT médiocre lorsqu'il est évalué par des outils de laboratoire.
TBTが大きいサイトが見られます
Quelle en serait la raison ?
理由は何でしょうか
- C'est une excellente question
いい質問ですね
qui est très courante.
そして とてもよくある質問です
Je soupçonne que les développeurs,
開発者の皆さんやDamianは
et vous avez déjà vu des rapports comme celui-ci,
実地のChromeユーザー エクスペリエンスレポートの
extraient des données, que l'on voit en haut,
データを画面上部にプルする
à partir du rapport d'expérience utilisateur Chrome sur le terrain.
このようなレポートを 目にしたことがあると思います
Cela montre un nombre vert
この緑の数字は
et un First Input Delay relativement bon.
First Input Delayが比較的 良好であることを示します
Et en bas, vous ouvrez Lighthouse.
画面下部ではLighthouseが開きます
Nous venons de dire que le Total Blocking Time
先ほど 合計ブロッキング時間は
est un excellent outil pour évaluer le FID ici,
FIDを評価するための優れたツールであると 説明しましたが
mais nous voyons que notre Total Blocking Time est marqué en rouge.
合計ブロッキング時間は赤で表示されています
Pourquoi cela ?
これは一体どういうことなのでしょうか
Entrons un peu plus dans les détails
実地データについて
des données de terrain.
少し詳しく見ていきましょう
Les données de terrain reflètent vos utilisateurs réels.
実地データは 実際のユーザーを反映するものです
Ainsi, lorsque nous évaluons les Core Web Vitals
したがって 75パーセンタイルで
au 75e centile,
Core Web Vitalsを 評価するということは
nous vérifions qu'au moins 75 % de vos entrées utilisateur réelles
実際のユーザー入力の75％以上が 「速い」に分類されるかを
répondent aux critères.
確認しているということです
Les caractéristiques qui composent cette population
この母集団の特性は
peuvent être très différentes d'un site à l’autre.
サイトごとに大きく異なる可能性があります
Lighthouse est un outil très générique.
Lighthouseはきわめて 汎用的なツールであり
Il n'a pas accès à votre base d'utilisateurs
ユーザーベースにアクセスし
ni à vos préférences.
バイアスを考慮できません
Il peut émuler un utilisateur cible
構築したサイトの種類によっては
qui pourrait plutôt correspondre à un centile supérieur,
より高いパーセンタイルに一致する ターゲットユーザーを
selon le type de site que vous avez créé.
エミュレートしている可能性があります
Nous savons également que les données FID sont assez larges.
また FIDデータが非常に 広範であることもわかっています
Certaines entrées peuvent être aussi faibles que zéro
メインスレッドがフリーの状態で ユーザーがタップしたため
car un utilisateur appuie simplement lorsque le thread principal est libre,
一部の入力はゼロまで小さくなることもあります
et parfois il peut avoir un score FID très élevé.
逆に FIDスコアが非常に高くなる 場合もあります
Nous voyons donc ici une courbe
そのため すべてのユーザー入力を
qui concerne toutes vos différentes entrées utilisateur
プロットした場合の曲線は
et qui prendra un peu cette forme.
このような形になります
Cela signifie que, quand vous l'évaluez
これが意味しているのは より低い
à un centile inférieur,
パーセンタイルで評価した場合
il pourrait en réalité faire une digression très loin
95パーセンタイルや99パーセンタイルで
pour quelque chose qui serait mesuré
評価した場合よりも
aux 95e et 99e centiles.
非常に大きく逸脱する 可能性があるということです
Lorsque vous commencez à passer au 75e centile,
75パーセンタイルに近づくにつれて
il commence à prédire avec une plus grande précision
より高い精度でFIDを
ce que cela pourrait être.
予測できます
Mais vos outils pourraient en fait l'évaluer
しかし ツールはユーザーの異なる サブセットを把握しているため
à un centile supérieur
より高いパーセンタイルで
car il comprend un sous-ensemble différent de vos utilisateurs.
評価しているかもしれません
Nous savons donc par expérience
実験から
que ce Total Blocking Time
合計ブロッキング時間と
et le First Input Delay sont corrélés,
First Input Delayに相関が あることはわかっていますが
mais ils pourraient avoir un impact sur la courbe de différentes manières.
それぞれ違った方法で曲線に影響を 与えていると考えられます
Néanmoins, cette corrélation signifie
とはいえ この相関関係が意味するところは
qu'une amélioration du Total Blocking Time
合計ブロッキング時間の改善が
conduira probablement à une amélioration
この例に挙げた
du First Input Delay sur la courbe
First Input Delay曲線全体の
dans cet exemple ici.
改善につながる可能性が高いということです
Le mot clé ici est la probabilité.
したがって ここでのキーワードは確率です
En fin de compte, le First Input Delay dépend
結局のところ First Input Delayは
de nombreux facteurs de domaines différents.
実地のさまざまな要因に依存します
Considérons un cas extrême
エッジケースを考えてみましょう
où une page dispose d'un seul appel à l’action,
Call-to-Actionを １つ含むページで
qui apparaît très tôt dans le chargement de la page.
ページの読み込みのかなり早い段階で表示され
Il s'agit du seul appel à l’action.
CTAはこの１つのみだとします
Il survient précisément au moment où le thread principal est le plus occupé.
これはメインスレッドが もっともビジーなタイミングです
La plupart des utilisateurs finiront par appuyer à ce moment-là,
ほとんどのユーザーは
en activant cette longue tâche de thread principal,
長いメインスレッドタスクとぶつかる このタイミングでタップすることになり
et n'attendent pas que la page soit complètement chargée.
ページが完全に落ち着くのを待ちません
Maintenant, un développeur pourrait intervenir
そこで開発者は
et améliorer le Total Blocking Time dans ce scénario
このシナリオでの合計ブロッキング時間を
en renvoyant les longues tâches plus tard dans le chargement de la page.
ページ読み込みの後半の長いタスクをすべて クリーンアップすることで改善したとします
Mais dans notre cas,
ところが
l'utilisateur appuyait encore au tout début
ユーザーは変わらず 読み込みの最初にタップするため
sur cette même tâche longue et obtenait le même délai.
先ほどと同じ長いタスクにぶつかり 同じ遅延が生じます
Voici donc un exemple où le Total Blocking Time a été amélioré
これは 合計ブロッキング時間が 改善されたにもかかわらず
mais l'endroit le plus probable où un utilisateur appuie sur la page
ユーザーがページをタップする 可能性の高いタイミングが
reste encore sur une longue tâche,
たまたま長いタスクにぶつかるため
conduisant ainsi à un mauvais First Input Delay.
First Input Delayが 大きくなるケースの例です
Ce qu'il faut retenir,
覚えていてほしいのは
c'est que la clé ici est la probabilité.
ここで重要なのは確率だということです
Encore une fois, lorsque vous améliorez le Total Blocking Time,
繰り返しますが 合計ブロッキング時間を改善すれば
vous avez de meilleures chances
First Input Delayが
d'améliorer votre First Input Delay,
改善される可能性も高まります
mais sachez qu'il existe des cas extrêmes
しかし 実地にはエッジケースが存在することも
en dehors du terrain.
知っておいてください
En parlant de terrain,
実地といえば
Demian va vous présenter ensuite un cas concret
次に 開発者がこの指標を どう改善しているかについて
de la façon dont les développeurs améliorent réellement cette métrique.
Damianから実際の事例を 紹介してもらいます
- Merci, Cheney.
ありがとうございます
Dans cette partie de la présentation, nous allons passer en revue un cas réel
ここからはインタラクティブ性の最適化について
d'optimisation de l'interactivité.
実際の事例を見ていきます
Le cas vient de Mercado Libre,
ラテンアメリカ最大のeコマースおよび
le plus grand écosystème d'e-commerce
決済エコシステムである
et de paiements en Amérique latine.
メルカドリブレの事例を紹介します
Mercado Libre est un site Web complexe
メルカドリブレは複雑なウェブサイトで
développé par des équipes distributives avec un mélange de technologies.
分散型チームによりさまざまな 技術を組み合わせて開発されました
Pour cette raison, la mise en œuvre d'une stratégie de performance
そのため 全社規模のパフォーマンス戦略の
à travers l'entreprise peut constituer un véritable défi.
実施は困難となる可能性がありました
Malgré cela, l'équipe d’architecture d'interface de Mercado Libre
にもかかわらず メルカドリブレの フロントエンドアーキテクチャチームは
a commencé à surveiller la vitesse sur tout le site
サイト全体の速度のモニタリングと 必要に応じた
et à appliquer des optimisations de performances au besoin.
パフォーマンスの最適化という 任務を引き受けました
Dans cette section,
ここでは
nous allons nous concentrer sur une optimisation spécifique
Core Web Vitalsの１つである
de l'un des Core Web Vitals, le First Input Delay.
First Input Delayの 最適化に焦点を当てます
Pour entreprendre ce voyage,
先に進めるにあたり
nous allons vous montrer comment surveiller les performances.
パフォーマンスのモニタリング方法を紹介します
Les outils de vitesse sont divisés en deux grands groupes.
スピードツールは 大きく２つのグループに分けられます
Les outils de test de laboratoire sont exécutés
ラボテストツールは
dans un environnement de test
テスト環境で実行され
et sont essentiels pendant le développement.
開発中には欠かせないツールです
Mercado Libre a utilisé Chrome DevTools, Lighthouse
メルカドリブレはラボではChrome DevTools、Lighthouse
et WebPageTest en travaillant en laboratoire.
WebPageTestを使用しました
Des outils de surveillance des utilisateurs réels
リアルユーザーモニタリングツールは
recueillent des données sur le terrain,
実地データを収集し
en vous permettant de comprendre l'expérience
実際のユーザーがサイトを利用する際の エクスペリエンスを
d'utilisateurs réels sur votre site.
把握できます
L'équipe Mercado Libre a combiné le rapport d'expérience utilisateur Chrome
メルカドリブレチームは Chrome UXレポートと
avec d'autres outils RUM pour mesurer les performances
他のRUMツールを組み合わせて 実際のパフォーマンスを
dans le monde réel.
評価しました
Lorsque vous travaillez sur les performances,
パフォーマンスの改善における
la première étape consiste à avoir un plan
最初のステップは計画を立てることです
qui vous permet d'identifier les problèmes,
問題を特定し 対策を繰り返し
de les itérer et d'analyser les résultats.
結果を分析するための計画です
Comme Cheney l'a mentionné plus tôt,
先ほどCheneyも述べていたように
contrairement aux autres Core Web Vitals,
他のCore Web Vitalsとは異なり
le First Input Delay est une métrique de données de terrain uniquement.
First Input Delayは 実地でのみ使用する指標です
Lorsque vous travaillez en laboratoire,
ラボでは
vous pouvez utiliser le Total Blocking Time comme métrique proxy
First Input Delayに 代わる指標として
pour le First Input Delay.
合計ブロッキング時間を使用できます
Un outil qui peut vous être d'une grande aide
ローカルでのTBTの最適化に
lors de l'optimisation locale du TBT est Chrome DevTools.
大きく役立つツールが Chrome DevToolsです
L'onglet Performance vous permet de visualiser facilement les tâches longues,
[パフォーマンス]タブでは 長いタスクを 簡単に視覚化できます
qui sont celles qui prennent plus de 50 millisecondes,
長いタスクとは50ミリ秒以上かかるもので
et d'afficher un triangle rouge en haut.
上部に赤い三角形が表示されます
Dans le coin inférieur gauche,
ツールの左下隅には
l'outil indique le Total Blocking Time
そのトレースの合計ブロッキング時間が
pour ce suivi.
表示されます
Après avoir apporté des modifications localement
ローカルで変更を加えて
et déployé de nouvelles versions du site,
新しいバージョンのサイトを展開したら
vous pouvez utiliser des outils comme Lighthouse
Lighthouseや WebPageTestなどの
et WebPageTest pour simuler le chargement du site
ツールを使用して 特定の条件下でのサイトの読み込みを
sous certaines conditions.
シミュレートできます
Enfin, vous pouvez mesurer l'impact dans le monde réel
最後に Chrome UXレポートを クエリすることで
en faisant appel au rapport d'expérience utilisateur Chrome.
実地での影響を評価できます
Il existe différentes manières
データを取得して視覚化する
d'obtenir et de visualiser ces données.
さまざまな方法があります
Le tableau de bord CrUX, par exemple,
たとえば CrUXダッシュボードでは
vous permet de voir comment les différents Core Web Vitals
それぞれのCore Web Vitalsの
ont évolué dans le temps.
経時的な変化を確認できます
L'API CrUX est une autre façon d'explorer les données
CrUX APIも データを掘り下げ
et de les intégrer à vos propres outils et solutions.
独自のツールやソリューションに統合する 手段となります
Par exemple, Mercado Libre a utilisé l'API CrUX
たとえば メルカドリブレでは CrUX APIを利用して
pour créer un outil qui lui permet de comparer facilement ses URL
競合するサイトと自社のURLを簡単に比較し
avec des sites concurrents
その情報に基づいて
et de créer un classement basé sur ces informations.
ランキングを作成するツールを構築しました
Mais l'une des intégrations CrUX
しかし CrUXとの統合機能で
que l'équipe du Mercado Libre a trouvé la plus utile
メルカドリブレチームが もっとも有効だと感じたのは
était le rapport Core Web Vitals de la Search Console.
Search Consoleの Core Web Vitalsレポートでした
Les équipes ont commencé à recevoir des avertissements sur la Search Console,
製品の詳細ページの
qui les prévenaient que les pages de détails des produits
First Input Delayが 大きいとして
avaient un First Input Delay médiocre.
チームには Search Consoleから 警告が届くようになりました
Cela a aidé l'équipe à comprendre
これによりチームは
sur quelle partie du site
サイトのどの部分に着目して
ils devaient concentrer leurs efforts d'optimisation.
最適化に取り組めばよいかが把握できました
Après avoir reçu ces informations,
この情報を受け取ったら
l'étape suivante consistait à mesurer de longues tâches
次のステップは 製品の詳細ページの
dans les pages de détails des produits Mercado Libra.
長いタスクの評価でした
L'équipe a commencé par exécuter Lighthouse
チームは製品の詳細ページのサンプルで
sur un échantillon de pages de détails des produits.
Lighthouseを 実行することから始めました
Ils ont trouvé
そして
que la seule métrique en rouge était Max Potential
唯一赤字となっている指標は Max Potential
First Input Delay, d'une valeur de 1,7 seconde.
First Input Delayの 1.7秒という値であることがわかりました
Cette métrique représente la durée
この指標は最初の長いタスクの
de la première longue tâche.
継続期間を表します
Tenez compte du fait que, à ce moment-là,
メルカドリブレが
lorsque Mercado Libre a appliqué ces optimisations,
こうした最適化を実施した時点で使用したのは
l'entreprise utilisait Lighthouse 5.2.
Lighthouse 5.2であることに 注意してください
Dans la dernière version de Lighthouse,
Lighthouseの最新バージョンである
la version six, la métrique à utiliser dans des cas comme celui-ci
バージョン6でこのような場合に 使用する指標は
est celle dont Cheney a parlé
このプレゼンの冒頭で
au début de cette présentation,
Cheneyが説明してくれた
le Total Blocking Time.
合計ブロッキング時間です
Pour entrer dans les détails de ces métriques,
指標を詳しく見るため
l'étape suivante consistait à exécuter des simulations
次のステップは 実際のデバイスと接続タイプによる
dans les appareils et types de connexion réels.
シミュレーションの実行でした
Mercado Libre est présent dans 18 pays.
メルカドリブレは18か国で事業を行っています
Ses principaux marchés sont le Mexique, le Brésil et l'Argentine.
主な市場は メキシコ、ブラジル、アルゼンチンです
Avec toutes ces options,
この中から
ils devaient décider dans quel pays travailler en premier.
シミュレーションを行う 最初の国を選ぶ必要がありました
L'équipe a choisi d’itérer sa solution
チームが解決策を繰り返し改善する 舞台として選んだのは
au Mexique,
メキシコでした
car WebPageTest propose une grande variété d'appareils
WebPageTestにより 近隣から
qui permettent de tester à partir d'emplacements proches.
さまざまなデバイスを対象に テストできるためです
Pour simuler l'expérience des utilisateurs au Mexique,
メキシコのユーザーのエクスペリエンスを シミュレートするため
elle a décidé d'utiliser le profil suivant.
チームは次のプロファイルを 使用することにしました
Pour l'emplacement, elle a choisi Dulles en Virginie,
対象地には バージニア州ダレスを選びました
qui est une ville relativement proche
比較的近隣の都市であり
avec une grande variété d'appareils réels dans WebPageTest.
WebPageTestの対象となる さまざまなデバイスが使用されていたからです
Pour le type de connexion, elle a choisi la 4G,
接続タイプには 4Gを選びました
et pour l'appareil, un Moto G4,
対象デバイスには Moto G4を選びました
un téléphone relativement bas de gamme
比較的ローエンドの機種で
qui peut facilement reproduire
インタラクティブ性に関連する
des goulots d'étranglement des performances autour de l'interactivité.
パフォーマンスボトルネックを 容易に再現できます
Voici à quoi ressemblait le thread principal
こちらが製品の詳細ページの
pour les pages de détails des produits.
メインスレッドのテスト結果です
Comme on peut le voir,
ご覧のとおり
une tâche longue
メインスレッドを
a occupé le thread principal
２秒間連続で占有する
pendant deux secondes consécutives.
実行時間の長いタスクがありました
Ceci explique les valeurs élevées
これであのMax Potential
du Max Potential First Input Delay.
First Input Delayの 大きな値も説明がつきます
En analysant la cascade correspondante,
対応するウォーターフォールの分析により
ils ont constaté qu'une partie considérable
この２秒のかなりの部分が
de ces deux secondes provenaient de deux fichiers.
２つのファイルに由来することがわかりました
Leur module de suivi,
追跡モジュールは
qui est utilisé non seulement dans les pages de détails des produits
製品の詳細ページだけでなく
mais aussi sur tout le site Web,
ウェブサイト全体で使用されており
et le fichier JS du bundle principal
メインバンドルJSファイルは
dont la taille faisait 950 Ko
950キロバイトあります
et qui a pris beaucoup de temps à analyser, compiler et exécuter.
この２つは解析、コンパイル、実行に 長い時間がかかるものでした
Sur la base des informations obtenues,
得られた情報に基づいて
Mercado Libre s'est fixé comme objectif d'optimiser
メルカドリブレは実行に時間のかかる
les deux modules qui exécutaient un objectif important.
２つのモジュールの最適化を目標に定めました
Les pages de détails des produits
製品の詳細ページでは
permettent aux utilisateurs d'effectuer des interactions complexes.
ユーザーによる複雑な操作が可能です
Le défi était donc d'optimiser ces fichiers
そのため 価値ある機能性を
sans interférer avec des fonctionnalités précieuses.
損なうことなく ファイルを最適化することが 課題となりました
Ils ont commencé à optimiser les performances
チームは まず内部追跡モジュールの
du module de suivi interne.
パフォーマンスの最適化に着手しました
Le module contenait une tâche lourde de processeur
モジュールにはCPU負荷の高い タスクが含まれていましたが
qui n'était pas essentielle au fonctionnement
モジュールの機能に不可欠なものでは なかったため
et pouvait donc être retirée en toute sécurité.
問題なく取り除くことができました
Cela a conduit à une réduction de 2 % du JavaScript
これにより ウェブサイト全体の JavaScriptが
pour l'ensemble du site.
2%削減されました
Après cela, ils ont commencé à travailler
続いて チームは
sur le bundle principal.
メインバンドルに着手しました
Mercado Libre a utilisé Webpack Bundle Analyzer
Webpack Bundle Analyzerを使用し
pour détecter les opportunités d'optimisation.
最適化できる箇所を探りました
Par exemple, au départ, ils exigeaient
たとえば 当初は完全な
le module complet de Lodash.
Lodashモジュールが必要でしたが
Il a été remplacé par une exigence par méthode
これをメソッドごとの要件とし
pour charger uniquement un sous-ensemble de Lodash
Lodashの全ライブラリではなく
au lieu de toute la bibliothèque.
一部のみを読み込むことにしました
Ils ont également utilisé le plugin Web Lodash
また ライブラリをさらに縮小するため
pour réduire encore plus la taille de la bibliothèque.
Lodash-webpackプラグインを 使用しました
Après cela, ils ont appliqué les optimisations Babel suivantes.
その後 チームは Babelの最適化を実施しました
Ils ont utilisé le plugin transform-runtime
transform-runtime プラグインを使って
pour réutiliser les assistants de Babel
コード全体で
dans tout le code et réduire la taille
Babelのヘルパーを再利用し
du bundle de façon considérable.
バンドルのサイズを大幅に縮小しました
Ensuite, ils ont appliqué le plugin de recherche et de remplacement
次に search-and-replace プラグインを適用して
pour remplacer les jetons ou le temps de conception
メインバンドル内のサイズの大きい
afin de supprimer un gros fichier de configuration
構成ファイルを取り除くため ビルドタイムトークンを
à l'intérieur du bundle principal.
置き換えました
Enfin, ils ont utilisé un plugin supplémentaire
最後に さらなるプラグインを使って
pour enregistrer quelques octets supplémentaires
PropTypesを取り除いて
en supprimant les PropTypes.
さらにバイト数を削減しました
À la suite de toutes ces optimisations,
こうしたすべての最適化の結果として
la taille du bundle a été réduite
バンドルサイズは
d'environ 16 %.
約16%縮小しました
Les changements ont réduit la longue tâche de Mercado Libre
各種変更によりメルカドリブレの 連続する長いタスクは
de deux secondes à une seconde.
２秒から１秒に短縮されました
En exécutant Lighthouse à nouveau,
再びLighthouseを実行すると
celui-ci a montré une réduction de 57 %
Max Potential First Input Delayは
du Max Potential First Input Delay.
57%減となりました
Mais une seconde de JavaScript, c'était encore trop long,
しかし 1秒間の連続する JavaScriptはまだ長いため
donc l'équipe s'est fixé l'objectif
チームは
d'optimiser encore plus cette métrique.
この指標をさらに最適化する という目標を立てました
En creusant dans le thread principal,
メインスレッドを調べて
ils ont identifié les bibliothèques
長いタスクを生み出しているライブラリを
qui produisaient de longues tâches.
特定しました
Étant donné que les pages de détails des produits avaient été créées avec React,
製品の詳細ページは Reactで作成されているため
ils ont trouvé leur inspiration dans les guides
Web.dev/Reactのガイドや
et les laboratoires de code sur Web.dev/React.
コードラボからヒントを得ました
Voici quelques-unes des optimisations qu'ils ont apportées.
実施された最適化の一部をご紹介します
Tout d'abord, continuez à réduire la taille du bundle principal
まず 引き続きメインバンドルのサイズを縮小し
pour optimiser le temps de compilation et d'analyse,
コンパイルと解析時間を最適化しました
par exemple, en supprimant les dépendances en double
各種モデル全体で重複する依存関係を排除する
à travers les différents modèles.
などの方法を取りました
Deuxièmement, appliquez la division du code au niveau du composant
次に コンポーネントレベルでコード分割を行い
pour diviser le JavaScript en petits morceaux
JavaScriptを小さなチャンクに分けて
et permettre un chargement plus intelligent des différents composants.
各種コンポーネントをよりスマートに 読み込めるようにしました
Enfin, différez l'hydratation des composants
最後に コンポーネント ハイドレーションを繰り延べし
pour permettre une utilisation plus intelligente du thread principal.
メインスレッドのよりスマートな 活用を可能にしました
Cette technique est communément appelée
この手法は一般に
« hydratation partielle ».
部分的ハイドレーションと呼ばれます
Le nouveau suivi a montré des morceaux encore plus petits de l'exécution JS.
新しいトレースでは JSがさらに小さな チャンクで実行されているのがわかります
Cela a donné au navigateur plus de temps pour traiter les entrées des utilisateurs,
これにより ブラウザはより多くの時間を ユーザー入力の処理に充てることができ
ce qui a rendu l'interface utilisateur plus réactive.
より応答性の高い ユーザーインターフェースとなります
En exécutant Lighthouse encore une fois,
再びLighthouseを実行すると
ils ont constaté que la durée du Max Potential FID
Max Potential FIDは
avait été réduite de 60 % supplémentaires.
さらに60%減となったことがわかりました
Mais le véritable objectif de ces optimisations
しかし こうした最適化の真の目標は
était d'améliorer l’expérience d'utilisateurs réels.
実際のユーザーの エクスペリエンスの向上にありました
Mercado Libre a recueilli ses propres
メルカドリブレは
données utilisateur réelles pour mesurer les Core Web Vitals.
Core Web Vitalsを評価するため 実地で独自にユーザーデータを収集しました
Ceci est un rapport obtenu de New Relic
これは New Relicのレポートです
qui montre comment le FID s'est amélioré dans les pages de détails des produits.
製品の詳細ページでFIDが どう改善されたかを示しています
Le groupe témoin en jaune
黄色は対照群で
montre le First Input Delay sans aucune optimisation.
最適化前のFirst Input Delayを示しています
Le groupe expérimental en violet montre un
紫は実験群で 変更実施後のFIDは
First Input Delay bien plus bas après les modifications.
はるかに低くなっています
Tous les 28 jours, le rapport d'expérience utilisateur Chrome
CrUXレポートでは28日ごとに
présente de nouvelles données d'utilisateurs réels.
実際のユーザーからの 新しいデータが表示されます
Ici, nous pouvons voir la progression du First Input Delay de Mercado Libre
こちらは2020年1月～4月までの メルカドリブレの
entre janvier et avril 2020.
First Input Delayの推移です
Avant le projet d'optimisation,
最適化プロジェクトの実施前は
82 % des utilisateurs percevaient le FID aussi vite.
82%のユーザーが FIDを「速い」と認識していました
En fin de projet,
プロジェクト実施後
ce nombre est passé à plus de 91 %.
この数字は91%を超えました
Cela signifie que 9 % d'utilisateurs en plus
つまり 9%を超えるユーザーが新たに
pouvaient percevoir ces métriques aussi rapidement.
この指標を「速い」と認識するようになりました
Au début de cette section,
このパートの冒頭で
nous avons dit que Mercado Libre recevait des avertissements
メルカドリブレが Search Consoleから受け取った
depuis la Search Console sur les performances
製品の詳細ページのパフォーマンスに関する
des pages de détails des produits.
警告についてお話しました
Après avoir résolu ces problèmes,
問題点を修正した結果
ils ont cessé de recevoir ces avertissements.
警告は出なくなりました
Faisons un bref récapitulatif du cas de Mercado Libre.
メルカドリブレの事例を簡単にまとめましょう
Au début de l'année,
今年初めに
l'équipe s’est fixé comme objectif d'optimiser l’interactivité
製品の詳細ページの インタラクティブ性の最適化という
dans les pages de détails des produits.
目標を立てました
Elle a combiné
ラボツールと
des outils de suivi des utilisateurs réels
リアルユーザー モニタリングツールを組み合わせて
et a utilisé une approche incrémentielle pour appliquer les optimisations.
漸進的アプローチで最適化を実施しました
En conséquence, elle a atteint
その結果
90 % de réduction du Max Potential
Lighthouseの Max Potential
First Input Delay dans Lighthouse
First Input Delayは90%減
et une augmentation de 9 % du nombre d'utilisateurs percevant le First Input Delay
CrUXのFirst Input Delayを「速い」と認識するユーザーは
aussi vite dans CrUX.
9%増となりました
Mais les performances ne prennent jamais fin.
しかし パフォーマンスの改善に 終わりはありません
Mercado Libre estime que la vitesse
メルカドリブレはサイトの速度が
de son site est un aspect crucial de l'expérience utilisateur,
ユーザーエクスペリエンスの 重要な要素であると考え
donc l'entreprise surveille
すべてのCore Web Vitalsを
et applique constamment des optimisations à tous les Core Web Vitals.
常にモニタリングし 最適化しています
J'espère que vous avez apprécié cette présentation.
プレゼンをお楽しみいただけたでしょうか
Merci de nous avoir regardés.
ご覧いただきありがとうございます
(musique entraînante)
（陽気な音楽）
Similar videos:

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

Fixing common Web Vitals issues
Chrome for Developers
9.4K views 231 likes 5 dislikes 11 Dec 202046% match

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

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

Web bingo at Chrome Dev Summit '19
Chrome for Developers
3.5K views 133 likes 9 dislikes 22 Nov 201938% match

Ready player web: Building modern web games (Chrome Dev Summit 2019)
Chrome for Developers
13.5K views 412 likes 28 dislikes 17 Nov 201937% 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 201937% match

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

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

Chrome Dev Summit 2017 - Livestream (Day 1)
Chrome for Developers
24.7K views 0 likes 0 dislikes 23 Oct 201736% match

Chrome Dev Summit 2017 - Livestream (Day 2)
Chrome for Developers
10.7K views 160 likes 10 dislikes 24 Oct 201736% match

Chrome and the web in 2020
Chrome for Developers
54K views 552 likes 56 dislikes 09 Dec 202035% 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 201935% match

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

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

You should focus — supporting different devices on the web (Chrome Dev Summit 2019)
Chrome for Developers
4K views 206 likes 6 dislikes 19 Nov 201935% match

The gift of giving up (Chrome Dev Summit 2019)
Chrome for Developers
4.6K views 167 likes 4 dislikes 16 Nov 201935% match

Top 3 Speed Essentials for Web Developers
Chrome for Developers
15.6K views 415 likes 20 dislikes 21 Nov 201835% match

3D, VR and AR on the web (Chrome Dev Summit 2019)
Chrome for Developers
15.3K views 514 likes 2 dislikes 17 Nov 201935% match

Designing for speed and hacking user perception (Chrome Dev Summit 2019)
Chrome for Developers
9K views 539 likes 4 dislikes 15 Nov 201934% match

Faster apps with JSON.parse (Chrome Dev Summit 2019)
Chrome for Developers
300.2K views 12.8K likes 0 dislikes 22 Nov 201934% match

PWAs and capability highlights (Chrome Dev Summit 2019)
Chrome for Developers
8.1K views 200 likes 5 dislikes 16 Nov 201934% match

PWA and the installable web (Chrome Dev Summit 2019)
Chrome for Developers
23.6K views 560 likes 15 dislikes 11 Nov 201934% match

Tools for fast Angular applications (Chrome Dev Summit 2019)
Chrome for Developers
8.8K views 328 likes 6 dislikes 22 Nov 201934% match

5 tips to make your PWA stand out (Chrome Dev Summit 2019)
Chrome for Developers
6.4K views 233 likes 5 dislikes 25 Nov 201934% match

Advancing the web framework ecosystem (Chrome Dev Summit 2019)
Chrome for Developers
11.8K views 192 likes 25 dislikes 12 Nov 201934% match

Blending PWA into native environments (Chrome Dev Summit 2019)
Chrome for Developers
5.3K views 147 likes 8 dislikes 25 Nov 201934% match

WebP in its 10th year (Chrome Dev Summit 2019)
Chrome for Developers
5K views 187 likes 3 dislikes 19 Nov 201934% match

State of the Union for Speed Tooling (Chrome Dev Summit 2018)
Chrome for Developers
9.8K views 186 likes 11 dislikes 12 Nov 201834% match

Hello dark mode, my old friend (Chrome Dev Summit 2019)
Chrome for Developers
24.5K views 824 likes 25 dislikes 22 Nov 201933% match


Settings Privacy About Contact Donate