Beyond fast with new performance featuresYouTube↗  IA↗(long shot)
Science & Technology  24.2K views 1.3K likes 10 dislikes   14 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)
（明るい音楽）
- Vous avez donc entendu les avantages des Core Web Vitals,
- Core Web Vitalsの利点は 聞いたことがあるでしょう
mais sur quoi travaillons-nous
しかし その指標のしきい値を簡単に
pour faciliter le respect de ces seuils ?
満たせるように何かしていますか？
Au cours des 10 prochaines minutes,
次の10分で
nous allons faire un tour d'horizon des fonctionnalités
ページの読み込みを早くする機能を
qui vous aident à rendre vos pages plus rapides.
駆け足で紹介します
Je suis Jake Archibald et voici notre vidéo « Au-delà de la rapidité ».
ジェイク･アーチボルドです 今日のテーマはBeyond Fastです
Tout d'abord, les propriétés CSS,
まずCSSプロパティの content-visibilityと
content-visibility et contain-intrinsic-size.
contain-intrinsic-size を取り上げます
Que font-elles ?
具体的には
Eh bien, lorsque vous chargez une page,
ページを読み込む時
le navigateur essaie d'être intelligent lorsqu'il affiche du contenu.
ブラウザは必要な分だけを 描画しようとします
Par exemple, il ne fera pas l'effort
たとえば まだスクロールしていない
de dessiner des objets qui sont bien en dehors de la fenêtre
ビューポート外のはるか先までは
jusqu'à ce que vous les atteigniez en faisant défiler.
描画しません
Cependant, le navigateur doit effectuer
ただし ブラウザはビューポート内に
beaucoup de travail de mise en page pour comprendre
あるものとないものを選り分ける
ce qui se trouve à l'intérieur de la fenêtre et ce qui ne l'est pas.
煩雑なレイアウト作業をします
C'est parce qu'un élément
これはドキュメントの最後にある
peut se trouver à la toute fin du document,
要素を一番上に配置したり
mais positionné en haut
複雑な入れ子の要素を
ou un élément profondément imbriqué
すべての親要素の外に配置する
pourrait être positionné en dehors de tous ses parents.
場合があるからです
Ce sont des choses que CSS vous permet simplement de faire.
これはCSSで行います
Pour déterminer la taille et la position d'un élément,
したがって １つの要素のサイズ と位置を決めるとき
vous avez vraiment besoin de connaître la disposition de ses frères et sœurs,
その兄弟、親、親の親、
ses parents, les parents de ses parents,
その兄弟、子要素のレイアウトを
leurs frères et sœurs, leurs enfants...
分かっていなければなりません
Fondamentalement, vous devez tout savoir.
基本的にすべてを 知っていなければなりません
Mais il existe un moyen simple d'éviter cela.
しかしそれを回避する簡単な方法があります
Commençons par ces zones de contenu.
このコンテンツ領域で始めましょう
Nous allons définir la propriété content-visibility sur « auto ».
そのcontent-visibilityに autoを指定します
Cela signifie que le navigateur peut ignorer la mise en page des enfants
こうするとコンテナーがビューポートの 外にある限り
pendant que le conteneur est en dehors de la fenêtre.
ブラウザは子要素のレイアウトを スキップできます
Mais le fait de sauter cette mise en page
しかしレイアウトをスキップすると
signifie que le conteneur perd sa hauteur.
コンテナの高さが制限されます そこで
Nous utilisons donc contain-intrinsic-size
contain-intrinsic-size を使用して
pour définir une taille de contenu de secours pour l'élément.
要素のフォールバックコンテンツサイズ を設定します
Cela présente les conteneurs comme s'ils avaient un seul enfant
これによりコンテナは 幅０ピクセル、高さ500ピクセルの
de zéro pixel de large et 500 pixels de hauteur.
子要素が１つあるかのように なります
Maintenant, zéro pixel, ça peut sembler bizarre,
０ピクセルは奇妙に聞こえるかもしれませんが
mais comme le conteneur se situe au niveau du bloc,
コンテナはブロックレベルであるため
il reste en pleine largeur.
全幅のままです
Pendant que nous y sommes,
この場合
nous faisons de même avec nos éléments d'en-tête plus petits,
小さい見出し要素でも同じことを 行います
cette fois en leur donnant une hauteur de secours de 60 pixels.
ここではフォールバックの高さを 60ピクセルにします
Maintenant, quand la page se charge,
そしてページが読み込まれると
elle fait une mise en page complète de tout ce qui se trouve dans la fenêtre.
ビューポート内のすべて に対して 自動的にレイアウトが行われます
Voilà donc l'en-tête supérieur et cette première zone de contenu.
これがトップの見出しで 最初のコンテンツ領域です
Mais c'est tout, le reste est ignoré,
残りはスキップします
ce qui rend les choses beaucoup plus rapides.
これで大幅に速くなります
Ensuite, si l'utilisateur fait défiler vers le bas,
次に ユーザーが下にスクロールすると
les autres zones de la page seront disposées juste à temps.
ページの他の領域は ちょうど間に合うように配置されます
Toute la mise en page que vous voyez ici
このレイアウトの移行はすべて
se passe en dehors des fenêtres.
ビューポートの外で起こっています
La seule chose que les utilisateurs pourraient remarquer
ユーザーが唯一気付くかもしれないのは
est une mise à jour de la barre de défilement.
スクロールバーの更新と
Et bien sûr, un temps de chargement beaucoup plus rapide.
読み込みが速いことでしょう
Mais de quelle vitesse parlons-nous ici ?
しかし どれくらい速いのでしょうか
Eh bien, j'ai testé cela sur la spécification HTML
私はこれをHTML仕様サイトでテストしました
et cela a réduit le temps de mise en page en le faisant passer de 50 secondes
レイアウト時間は 50秒から
à 400 millisecondes.
400ミリ秒に短縮されました
C'est une économie incroyable.
驚くべき短縮です
Mais rappelez-vous que la spécification HTML est un document de 12 mégaoctets,
HTML仕様は 12MBのドキュメントですから
c'est donc un cas assez extrême.
これは非常に極端なケースです
Mais même sur les sites normaux,
しかし 通常のサイトでも
vous pouvez économiser des centaines de millisecondes
ほとんど変更することなく
avec très peu de changement.
数百ミリ秒短縮できます
Mesurez-le avec votre propre contenu et voyez la différence.
あなた自身のコンテンツで 測定して違いを見てください
C'est le niveau élevé.
ハイレベルです
Pour plus de détails, consultez l'article web.dev
詳細は 説明文にリンクがある
qui est lié dans la description.
web.devをごらんください
Mais la bonne nouvelle, c'est que cela est expédié dans Chrome 85.
嬉しいことにChrome 85では これに対応しています
Et bien sûr, cela inclut les autres navigateurs
そしてもちろん Chromiumエンジンを使用する
qui utilisent le moteur Chromium.
他のブラウザも同様です
D'autres moteurs de navigation y réfléchissent également.
その他のブラウザエンジンでも 検討中です
Il existe en particulier des indicateurs positifs pour Firefox.
特に Firefoxは前向きに 検討しているようです
Mais l'utiliser dès aujourd’hui n’affectera pas les autres navigateurs
現在これを使用しても 他のブラウザに支障はありません
afin que vos utilisateurs puissent en profiter dès maintenant.
そのため ユーザーは 今すぐその メリットを受けることができます
Voici ensuite les descripteurs de remplacement des métriques de police.
さて 次はフォントメトリックの オーバーライド記述子です
Cela peut ressembler à quelque chose que le Capitaine Picard
何やらエンタープライズ号が爆発するのを 止めるために
activerait pour interrompre l'explosion de l’Entreprise,
ピカード艦長が起動するもののように 聞こえるかもしれませんが
mais cette fonctionnalité CSS s'attaque à une frustration de longue date
テキストレンダリングに関しては このCSS機能は
lorsqu'il s'agit de rendu de texte.
長年の問題に対処するものです
Avez-vous déjà arrangé votre mise en page
あるブラウザで思い通りの
exactement comme vous le souhaitiez dans un navigateur
レイアウトになるようにしても
puis essayé celle-ci dans un autre pour découvrir
別のブラウザではテキストがわずかにずれている
que le texte est légèrement décalé ?
などということはありませんか？
Eh bien, c'est parce que les informations de mise en page de police
これは フォントレイアウト情報が
peuvent provenir de différents endroits
フォント自体の さまざまな場所から
dans la police elle-même.
来る場合があるからです
Certaines polices les utilisent toutes, mais aussi des nombres différents
すべての情報を使ったり 異なる番号を使うフォントもあります
et parfois, les navigateurs et les systèmes d'exploitation ne sont pas d’accord
ブラウザとOSで 使用する番号が異なる
sur les numéros à utiliser.
場合もあります
Heureusement, une nouvelle fonctionnalité CSS
幸いにも 新しいCSS機能では
dit au navigateur d'ignorer tout cela
それをすべて無視するようにブラウザに指示し
en faveur des descripteurs de remplacement de la métrique de police.
フォントメトリックをオーバーライドします
En fait, pouvons-nous simplement les appeler « f-mods » ?
それを単にf-modとでも呼びましょうか
À la base, c'est censé être une courte vidéo.
このビデオのように手短に
D'accord, voici donc les f-mods.
これがf-modです
Maintenant, les textes ont une taille de police donnée.
これで テキストのフォントサイズが決まります
Je peux dire que 73 % sont les ascendants et 25 %...
73%がアセンダー、25%が...
En fait, c'est un mauvais exemple
ああ これは例が悪いですね
car il n'a aucun descendant.
ディセンダーがないからです
Saisissons plutôt « Textgjy ».
textgjyにしましょう
Cool.
いいですね
Donc 25 % sont les descendants
25%がディセンダーです
et enfin 2 % sont partagés entre les écarts
最後の2%は
en haut et en bas.
上下の隙間を指定する共通の値です
Cela sera totalement cohérent dans tous les navigateurs
そしてこれはf-mod対応の すべてのブラウザで完全に一貫して
qui prennent en charge les f-mods, qui est actuellement Chrome 87.
行われる予定です 今はChrome 87だけですが
Mais attendez, qu'est-ce que cela a à voir avec les Web Vitals ?
しかし これはウェブバイタルと 何の関係があるのでしょうか？
Eh bien, le moyen le plus rapide d'afficher des textes à l’écran
画面にテキストを表示 する最も簡単な方法は
consiste à l'afficher directement avec une police de secours,
まずフォールバックフォントを 使用して表示し
puis à passer à la police Web une fois qu'elle est téléchargée.
ウェブフォントをダウンロードしたら それにり替えます
Mais des métriques différentes entre les polices
しかし フォントでメトリックが異なるので
peuvent provoquer un saut de mise en page considérable lors de l'échange,
切り替え時にレイアウトが 大幅に変わる可能性があります
que nous pouvons résoudre avec les f-mods.
これはf-modで修正できます
En ajustant les métriques de la police de secours,
フォールバックフォントのメトリックを 調整することにより
nous pouvons réduire le changement de mise en page causé par l'échange de polices.
フォントの交換によるレイアウトの変更を 減らすことができます
Comme je l'ai dit, cela se passe dans Chrome 87.
これはChrome 87での話です
Consultez la description pour plus d'informations et des liens vers des démos.
詳細およびデモへのリンクは 説明を参照してください
Nous voulons également trouver des moyens de gérer d'autres différences
異なる文字の混入など フォールバックフォント間の
entre les polices de secours comme différentes largeurs de caractères.
他の違いを 処理する方法も必要ですね
Mais nous en reparlerons davantage
しかしこれについては
quand les choses seront plus concrètes.
具体的な内容の時に説明します
Bien, fonctionnalité suivante.
さて 次の機能です
J'ai déjà navigué sur le Web
ウェブを閲覧して
pour lire un article vraiment intéressant,
本当に面白い記事を読んでいる時に
vu un lien, cliqué dessus et me suis dit :
リンクを見てクリックした後
« Oui, d'accord, mais je veux revenir à l'article. »
「ああ、だけど記事に戻りたいな」 と思います
Eh bien, voici le bouton de retour.
戻るボタンを見つけます
Bon, d'accord, nous l’avions depuis le début,
最初からあったボタンです
mais cela impliquait de recharger la page précédente
しかし前のページを 最初から読み込まなければなりませんでした
de zéro.
ゼロから
Ok, c'était encore assez rapide
いいでしょう　かなり速かったから
et c'est en fait parce que j'optimise très bien mon site
そのサイトが本当にうまく最適化 されていたからです
et qu'il est vraiment simple,
そしてシンプルなサイトだったから
mais vous pouvez toujours voir le problème ici.
しかし ここで問題があります
Cette partie de la page est améliorée avec JavaScript.
ページのこの部分には JavaScriptが使われています
Quand on y retourne, vous pouvez voir qu'elle doit se recharger
したがって 戻るには再読み込みをして
et se réexécuter.
再実行することになります
Si la page implique beaucoup plus de JavaScript,
ページにさらに多くの JavaScriptが含まれていると
cela prendra plus de temps.
さらに時間がかかります
La mise en page peut même changer
要素がページに追加されると
au fur et à mesure que des éléments sont ajoutés à la page.
レイアウトがずれることもあります
Mais essayons à nouveau dans la dernière version de Chrome.
しかし 最新のChrome でもう一度試してみましょう
Comme avant, j'ai suivi le lien,
同じようにリンクをクリックしました
mais cette fois, Chrome garde automatiquement
今回はChromeが自動的に
la page précédente en mémoire.
前のページをメモリに保存しますが
Toutefois, elle est gelée pour arrêter le traitement et la surveillance
処理と監視を停止するために バックグラウンドで
en arrière-plan.
凍結しています
Cela signifie que lorsque nous y revenons, elle est prête instantanément.
戻ってもすぐに準備ができている わけです
Cela est possible dans Chrome 86 sur Android
AndroidのChrome 86では
pour les navigations d'origine croisée
クロスオリジンナビゲーションで
et Chrome 87 pour les navigations de même origine.
Chrome 87では同一オリジン ナビゲーションで機能します
C'est aussi un déploiement progressif,
未だ段階的に展開しているので
donc tous les utilisateurs n'obtiendront pas la fonctionnalité en même temps.
すべてのユーザーがすぐにこの機能を 利用できるわけではありません
Cela vaut également la peine de mentionner
特にお伝えしたいのは
que cette fonctionnalité a été intégrée dans d'autres navigateurs
この機能が 他のブラウザにあったということです
comme Firefox, Safari et même Internet Explorer
Firefox、Safari、 Internet Explorerにも
depuis des années maintenant.
何年も前からです
Il a été difficile pour nous de l'intégrer dans
厳密なマルチプロセスアーキテクチャの
l'architecture multi-processus stricte de Chrome.
Chromeに組み込むのは困難でした
Disons simplement dans ce cas,
この点では
que nous avons été à la mode en retard.
私たちはかなり遅れていたのです
Il peut aussi y avoir quelques pièges.
いくつかの落とし穴もあります
L'utilisation de fonctionnalités Web particulières empêche cette optimisation
特定のウェブ機能を使用すると この最適化が妨げられます
et cette liste diffère selon les navigateurs et les versions de navigateur.
この問題はブラウザとブラウザの バージョンによって異なります
Dans de nombreux cas, vous pouvez contourner ce problème
これは多くの場合 回避できます
en désactivant la fonction
ユーザーが移動する直前に
juste avant que l'utilisateur ne s’éloigne
ページ非表示イベントを使用して
en utilisant les événements de masquage de page
機能を無効にし
et en la réactivant lorsqu'ils reviennent
戻る時に ページ表示イベントで
en utilisant les événements d'affichage de page.
それを再アクティブ化すればよいのです
Consultez le lien dans la description
使用条件は
pour toutes ces conditions, j'imagine.
説明のリンクにあると思います
Très bien, la prochaine étape, c'est les portails.
さて次はポータル（portal）です
Les portails sont un nouvel élément HTML
<portal>は新しいHTML要素です
qui vous permet de charger une page et de la rendre
これを使用すると ページを読み込んで
à l'intérieur de la page actuelle.
現在のページ内でレンダリングできます
En voici un, je l'ai un peu réduit
少し縮小しました
et lui ai appliqué une bordure.
そしてボーダーを入れました
Oui, je sais que vous pensez
さて 私はあなたが何を考えているかわかります
qu'il s’agit d’iFrames,
「これはiframeだ」
mais ce n'est pas pareil.
しかし同じではありません
Par exemple, les portails ne sont pas interactifs.
ポータルはインタラクティブではないのです
Si un utilisateur clique dessus,
ユーザーがクリックしても
il clique sur les éléments du portail,
クリックしているのはポータル要素であって
pas sur la page à l'intérieur du portail.
ポータル内のページではありません
Oui, je sais que vous pensez
私はあなたが何を考えているかわかります
qu'il s’agit d’iFrames, mais en pire.
「これはiframeだし もっと悪い」
Cependant, les portails ont leurs propres avantages.
ただし ポータルには 独自の利点があります
D'une part, ils peuvent être activés
それをクリックするか このメソッドを呼び出しして
soit en cliquant dessus, soit en appelant cette méthode.
アクティブ化できるのもそのひとつです
Lorsqu'un portail est activé,
ポータルがアクティブ化されると
il devient la page de premier niveau.
それがトップレベルのページになり
Cela modifie comme d'habitude la barre d’URL.
いつものようにURLバーが変わります
C'est similaire à une navigation normale
通常のナビゲーションに似ていますが
sauf que la page était prérendue et prête à l'emploi
事前にレンダリングされたページが 準備されているので
donc c'était vraiment, vraiment rapide.
本当に本当に速かったです
Mais essayons à nouveau.
念の為もう一度試してみましょう
Plutôt que d'afficher le portail maladroitement
そしてポータルをページの中央に
au milieu de la page,
そのまま置いておかず
nous allons le déplacer hors de la vue
見えないところに移動し
et attendre que l'utilisateur clique sur le lien de l'article.
ユーザーが記事のリンク を クリックするのを待ちます
Quand il le fera, nous animerons le portail,
ユーザーがクリックすると ポータルをアニメーション化し
puis l'activerons.
次にそれをアクティブ化します
Avec un peu d'écrêtage et de coordination,
少しのクリッピングと調整で
nous pouvons l'utiliser pour créer
これを使用してかなり快適な
des transitions de navigation plutôt agréables.
ナビゲーショントランジションが作成できます
Mais ce n'est pas tout, regardez cela.
しかし それだけではありません！
C'est la même page qu'avant,
これは以前と同じページです
mais j'ai ajouté un bouton pour partager l'article
外部サービスと記事を共有するための
avec un service externe.
ボタンを追加しました
L'utilisateur clique dessus et confirme qu'il souhaite le partager
ユーザーがそれをクリックして 共有することを確認します
et c'est tout.
それだけです
Mais que s'est-il réellement passé là-bas ?
しかし実際にそこで何が起こったのか
Passons à nouveau cela en revue mais dans le code.
コードを使ってもう一度 実行してみましょう
Tout d'abord, l’utilisation d’un bouton de partage.
まず共有ボタンを タップします
Le site de l'article crée un portail vers le service de partage
記事サイトには共有サービスへの ポータルが作成され
puis l'ajoute à la page et l'active.
それがページに追加され アクティブ化されます
Maintenant, example.com est en charge,
現在 example.comが行っています
et l'URL a changé.
URLが変更されました
Mais l'utilisateur ne voit pas cette page vierge
ユーザーにはこの空白のページは表示されません
car example.com utilise l'événement d'activation du portail
example.comが ポータルactivateイベントを
pour obtenir un portail vers la page précédente
使用して前のページへのポータルを取得し
et l'ajoute au document.
それをドキュメントに追加するからです
Pour être clair, ce n'est pas interactif,
これは決してインタラクティブではありません
ils floutent la page et ajoutent leur propre interface utilisateur par-dessus.
ぼかした背景の上に 独自のUIが追加されます
Bien que cela ressemble à un modèle par-dessus l'article,
記事の上のモデルの ように見えますが
le service de partage est sous total contrôle ici.
共有サービスは ここで完全に制御されます
Ils peuvent faire confiance aux interactions entre cette boîte de dialogue
ダイアログのインタラクションは 信頼され
et l'utilisateur, et peuvent le confirmer à partir de la barre d'URL.
ユーザーは URLバーからそれを確認できます
Ils savent à qui ils ont affaire.
誰とやりとりしているのかも分かります
Maintenant, l'utilisateur clique sur Oui,
ユーザーが「はい」をクリックすると
et le service de partage capture cet événement,
共有サービスは そのイベントをキャプチャし
utilise des animations pour remettre l'article en évidence
アニメーションを使用して 記事に焦点を戻します
puis active le portail vers l'article
次に 記事へのポータルを アクティブ化し ます
et cela lui donne à nouveau le contrôle sur l'onglet.
これでタブを再び 制御できるようになります
Vous pouvez voir que l'URL a changé.
URLが変更されていることがわかります
Les portails peuvent non seulement créer des transitions de navigation,
ポータルはナビゲーショントランジションを 作成できるだけでなく
mais aussi créer des interactions utilisateur fluides entre les sites.
サイト間でスムーズなユーザー インタラクションを作成できます
C'est grâce à la fonctionnalité Chrome « Behind the flag » (derrière le drapeau).
それは旗の後ろのChromeにあります
Derrière quel drapeau se trouve-t-il ?
どの旗の後ろですか？
Ce nom pourrait changer entre le moment où j'enregistre cette vidéo
まあ これを録画している間に 変わるかもしれ ません
et sa diffusion sur YouTube.
YouTubeで確認してください
Allez voir la description pour plus de détails
詳細については
et des liens vers plus d'informations.
説明と詳細情報へのリンクを見てください
Nous sommes vraiment intéressés par vos retours sur cette fonctionnalité.
この機能について フィードバックをお待ちしています
Il est juste de dire que nous avons parlé de portails
新しい機能としてポータルについて ここ数年話してきたと言っても
comme une nouveauté depuis quelques années maintenant,
過言ではありませんが
mais nous voulons vraiment faire les choses correctement
私たちは特にプライバシーの観点から
surtout en termes de confidentialité.
これを正しい形にしたいのです
Par exemple, lorsqu'un site contient
たとえば あるサイトに
un iFrame vers un autre site,
別のサイトへのiframeがある場合
les navigateurs passent à un modèle où le site intégré
ブラウザは 標準のCookieセットや その他のストレージに
n'aura pas accès à son ensemble standard de cookies
アクセスできない埋め込みサイト が存在する
ni à un autre type de stockage.
モデルに移行していきます
Cela empêche les deux sites d'échanger des informations
これにより ２つのサイトで あなたについての情報交換ができなくなり
à votre sujet, ce qui est donc une victoire pour la confidentialité.
プライバシーが守られます
Bien sûr, Chrome fournira la même protection
もちろん Chromeはポータルに関して
quand il s'agit de portails.
同様の保護を提供します
Mais il y a un défi supplémentaire ici.
しかし ここには別の課題があります
Si ce portail s'active, il constitue maintenant la page de premier niveau
そのポータルがアクティブ化されると トップレベルのページになり
et n'a donc plus besoin de ces restrictions de stockage.
これらのストレージ制限は 不要になります
Nous devons trouver la meilleure façon de gérer cela.
これを処理するため 最良の方法が必要です
Pour que le site puisse réagir au changement de stockage
サイトがストレージの変更に 対応しその内容を
et mettre à jour son contenu
更新できるようにし
et comment il a accès à des informations comme l'état de connexion
ログイン状態やユーザー設定に アクセスする方法
et les préférences de l'utilisateur.
についても考慮が必要です
La résolution de ce problème nous permettra également d'en faire plus
この問題を解決すれば プライバシーを保護しつつ
avec la prérécupération et le prérendu PACE sur les sites
サイト間でのプリフェッチと プリレンダリングをしながら
d'une manière préservant la confidentialité.
多くのことができるようになります
Consultez la description pour plus de détails à ce sujet.
詳細については 説明を確認してください
En fait, au lieu de penser aux portails
実際 ポータルは
comme des iFrames un peu différents,
iframeの別種と考えるより
vous pourriez dire qu'ils ressemblent plus à des balises de prérendu
表示できるプリレンダリングタグに近いもの
que vous pouvez afficher.
と言うこともできるでしょう
Ok, voici le futur
実現はまだ先ですが
mais qu'en est-il du présent ?
現在はどうでしょう
Souvent, le moyen le plus rapide et le plus simple
多くの場合 最も速く簡単に
pour améliorer les performances de votre page
ページのパフォーマンスを向上させる方法は
est de garantir le chargement précoce du contenu important.
重要なコンテンツを早期に 読み込むようにすることです
Les balises de préchargement et de prérécupération font cela
プリロードタグとプリフェッチタグで これを行います
et ce sont des améliorations qui sont bien prises en charge.
これは十分にサポートされている拡張機能です
Nous avons également la bibliothèque Quicklink,
コンテンツのプリフェッチを自動化する
qui automatise la prérécupération du contenu
quicklinkライブラリもあります
qui sera probablement nécessaire dans la prochaine navigation.
これは次のナビゲーションで 必要になる可能性があります
Newegg l'utilise et a constaté une augmentation de 50 % des conversions
Neweggはこれを使用して コンバージョン数が50%増加し
et des navigations de page quatre fois plus rapides.
ページナビゲーション速度が ４倍になりました
C'est énorme.
これは大きいです
Allez voir la description des liens vers la bibliothèque
ライブラリへのリンクと プリフェッチとプリロードの詳細は
et plus d'informations sur la prérécupération et le préchargement.
説明を参照してください
C'est tout ce que je voulais vous montrer aujourd'hui.
今日 ご紹介したかったことは 以上です
Comme je l'ai dit, c'est un petit tour éclair.
最初にお話したように 駆け足での紹介でした
Je ne sais pas si j'ai mentionné
リンクはお伝えしたか
les liens dans la description encore,
覚えていませんが
mais il y a des liens dans la description
今日のトピックの詳細情報の箇所に
pour plus d'informations sur ces sujets.
リンクがあります
Si vous êtes intéressé par plus d'informations
今日のトピックの詳細情報を
sur ces sujets
知りたい方で
et que vous aimez cliquer sur les liens et les descriptions,
リンクをクリックしたり 説明を読みたい方は
assurez-vous de cliquer sur les liens qui se trouvent dans la description
今日のトピックの詳細情報にある
pour plus d'informations sur ces sujets.
リンクをクリックしてください
Où sont ces liens que je vous entends demander ?
リンクはどこにあるかという質問ですが
Là dans la description.
説明文にあります
Quel genre d'informations se trouvent dans ces liens ?
このリンクには どのような情報があるのでしょう？
Des informations complémentaires.
詳細情報です
Que devez-vous faire avec tout cela ?
リンクはどうすればよいでしょう？
Eh bien, ils ne vont pas se cliquer d'eux-mêmes, n’est-ce pas ?
リンクは勝手には開きませんから
Alors continuez et cliquez dessus.
あなたがクリックしてください
(musique entrainante)
（明るい音楽）
Similar videos:

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

Next-level web apps on desktop
Chrome for Developers
29.6K views 836 likes 241 dislikes 18 Dec 202058% 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

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

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

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

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

Next-generation web styling (Chrome Dev Summit 2019)
Chrome for Developers
252.7K views 7.5K likes 0 dislikes 11 Nov 201940% match

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

The main thread is overworked & underpaid (Chrome Dev Summit 2019)
Chrome for Developers
93.4K views 2.5K likes 68 dislikes 11 Nov 201939% match

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

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

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

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

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

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

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

Chrome OS: Ready for Web Development (Chrome Dev Summit 2018)
Chrome for Developers
33.4K views 522 likes 18 dislikes 13 Nov 201838% match

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

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

Get Down to Business: Why the Web Matters (Chrome Dev Summit 2018)
Chrome for Developers
8.9K views 154 likes 10 dislikes 12 Nov 201838% match

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

What’s new in Canvas - Offscreen Canvas and Text Metric use cases (Chrome Dev Summit 2019)
Chrome for Developers
9.3K views 344 likes 19 dislikes 20 Nov 201937% match

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

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

Machine Learning magic for your web application with TensorFlow.js (Chrome Dev Summit 2019)
Chrome for Developers
41.6K views 2K likes 20 dislikes 25 Nov 201936% match

Complex JS-heavy Web Apps, Avoiding the Slow (Chrome Dev Summit 2018)
Chrome for Developers
29.1K views 908 likes 16 dislikes 12 Nov 201836% match

Oh the things you’ll compile - modern WebAssembly (Chrome Dev Summit 2019)
Chrome for Developers
21.1K views 396 likes 16 dislikes 12 Nov 201936% match

Chrome Dev Summit 2018 - Day 2 Livestream
Chrome for Developers
13.7K views 229 likes 9 dislikes 13 Nov 201836% match

Chrome Dev Summit 2018 - Day 1 Livestream
Chrome for Developers
30K views 533 likes 23 dislikes 12 Nov 201836% match


Settings Privacy About Contact Donate