Adds INP content collection by malchata · Pull Request #9915 · GoogleChrome/web.dev

malchata · 2023-04-17T17:36:43Z

Changes proposed in this pull request:

Adds the INP content collection.

netlify · 2023-04-17T17:36:53Z

✅ Deploy Preview for web-dev-staging ready!

Name	Link
🔨 Latest commit	`4161ab4`
🔍 Latest deploy log	https://app.netlify.com/sites/web-dev-staging/deploys/645a9d3467595b0008cc2a5e
😎 Deploy Preview	https://deploy-preview-9915--web-dev-staging.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

…nt-collection

…ction.

...ite/content/en/how-to-optimize-inp/avoid-large-complex-layouts-and-layout-thrashing/index.md

…nt-collection

…llection.

tunetheweb · 2023-05-04T17:38:33Z

...ite/content/en/how-to-optimize-inp/avoid-large-complex-layouts-and-layout-thrashing/index.md

+
+When a user interacts with the page, those interactions should be as fast as possible. The amount of time it takes for an interaction to complete—ending when the browser presents the next frame to show the results of the interaction—is known as _interaction latency_. This is an aspect of page performance that the [Interaction to Next Paint](/inp/) metric measures.
+
+The amount of time it takes for the browser to present the next frame in response to a user interaction is known as the interaction's _presentation delay_. The goal of an interaction is to provide visual feedback in order to signal to the user that something has occurred, and visual updates can involve some amount of layout work in order to achieve that goal.


Suggested change

The amount of time it takes for the browser to present the next frame in response to a user interaction is known as the interaction's _presentation delay_. The goal of an interaction is to provide visual feedback in order to signal to the user that something has occurred, and visual updates can involve some amount of layout work in order to achieve that goal.

The amount of time it takes for the browser to present the next frame after processing a user interaction is known as the interaction's _presentation delay_. The goal of an interaction is to provide visual feedback in order to signal to the user that something has occurred, and visual updates can involve some amount of layout work in order to achieve that goal.

I initially read that as being the whole time so suggested a tweak to make it clearer.

tunetheweb · 2023-05-04T17:40:02Z

...ite/content/en/how-to-optimize-inp/avoid-large-complex-layouts-and-layout-thrashing/index.md

+
+Layout is almost always scoped to the entire document. If you have a lot of elements, it's going to take a long time to figure out the locations and dimensions of them all.
+
+If it's not possible to avoid layout then the key is to once again use Chrome DevTools to see how long it's taking, and determine if layout is the cause of a bottleneck. Firstly, open DevTools, go to the Timeline tab, hit record and interact with your site. When you stop recording you'll see a breakdown of how your site performed:


You haven't explained how it is possible to avoid layout. Do you mean making changes that don't affect "geometric properties"? E.g. ensuring elements are sufficiently sized to take any updates?

A lot of this doc is left over from what Paul wrote, and what he wrote was a bit high-level. There's a ton of context we'll have to fill in after launch, I think.

src/site/_data/paths/how-to-optimize-inp.json

…nt-collection

…y were.

…dev into inp-content-collection

tunetheweb · 2023-05-08T13:32:26Z

src/site/_data/paths/fast.json

-        "optimize-long-tasks",
-        "optimize-inp",


Why remove these?

I think optimize-long-tasks is still good optimize JavaScript advice and there's no problems with this being in two collections.

Optimize INP should be moved to where the other Optimize guides are

I'll add them back in.

...site/content/en/how-to-optimize-inp/client-side-rendering-of-html-and-interactivity/index.md

src/site/content/en/how-to-optimize-inp/dom-size-and-interactivity/index.md

src/site/content/en/learn/learn.11tydata.js

Co-authored-by: Barry Pollard <barrypollard@google.com>

src/site/content/en/blog/avoid-large-complex-layouts-and-layout-thrashing/index.md

…he fast content collection.

Co-authored-by: Barry Pollard <barrypollard@google.com>

tunetheweb

Think we're pretty much there so approving for you to merge when happy. Well done!

Co-authored-by: Rachel Andrew <rachelandrew@google.com>

…dev into inp-content-collection

malchata added 3 commits April 16, 2023 11:12

Adds the INP field guide.

c671b86

Renames content collection folder, adds optimize long tasks guide.

cf06987

Fixes linter yelling.

9663087

malchata added P0 An urgent priority task. Drop everything and work on this! DO NOT MERGE Actively working on but experimental content Issues related to content content update for issues that do not require new content (only for updates to existing content) labels Apr 17, 2023

malchata self-assigned this Apr 17, 2023

malchata added vitals and removed vitals labels Apr 17, 2023

malchata added 11 commits April 18, 2023 10:10

Tweaks field data collection code in INP field guide.

9048b9a

Merge branch 'main' of github.com:GoogleChrome/web.dev into inp-conte…

600f9a5

…nt-collection

Merge branch 'main' of github.com:GoogleChrome/web.dev into inp-conte…

393c79a

…nt-collection

Fixes incorrect case in front matter for field guide.

01ab2c7

Moves the layout thrashing guide into the content collection folder.

d565438

Merge branch 'main' of github.com:GoogleChrome/web.dev into inp-conte…

56e7389

…nt-collection

Adds the optimize input delay guide.

92e806c

Fixes TODO link.

35cacaa

Merge branch 'main' of github.com:GoogleChrome/web.dev into inp-conte…

2518990

…nt-collection

Updates layout thrashing guide.

c8ecc48

Initial migration of style recalc cost guide to the INP content colle…

d360ad5

…ction.

malchata commented May 2, 2023

View reviewed changes

...ite/content/en/how-to-optimize-inp/avoid-large-complex-layouts-and-layout-thrashing/index.md Outdated Show resolved Hide resolved

malchata added 6 commits May 2, 2023 10:06

Adds the DOM size and interactivity guide.

e83fd62

Adds the DOM size and interactivity guide to metadata.

b412a7c

Merge branch 'main' of github.com:GoogleChrome/web.dev into inp-conte…

e8fa2ff

…nt-collection

Adds the client-side HTML rendering guide.

083344a

Fixes linter yelling.

20d5c7a

Adds the script evaluation and long tasks guide to the INP content co…

411a9da

…llection.

tunetheweb reviewed May 4, 2023

View reviewed changes

malchata added 5 commits May 5, 2023 09:59

Merge branch 'main' of github.com:GoogleChrome/web.dev into inp-conte…

c38bd79

…nt-collection

Adds the INP lab guide.

576ce02

I busted the build and fixed it.

ee19df8

Adds the top level Optimize INP rewrite, also adds collection data.

57de1a8

Updates some front matter.

e84d5e1

malchata requested a review from tunetheweb May 7, 2023 17:46

malchata removed the DO NOT MERGE Actively working on but experimental label May 7, 2023

malchata requested a review from rachelandrew May 7, 2023 17:46

matthiasrohmer and others added 5 commits May 8, 2023 10:27

Merge branch 'main' into inp-content-collection

32e0415

Merge branch 'main' of github.com:GoogleChrome/web.dev into inp-conte…

9420f7e

…nt-collection

Moved a couple pieces back to the blog directory where they originall…

ba5d08c

…y were.

Merge branch 'inp-content-collection' of github.com:GoogleChrome/web.…

ffd89c7

…dev into inp-content-collection

Adds hero image to the web workers post.

8cb0521

tunetheweb reviewed May 8, 2023

View reviewed changes

Apply suggestions from code review

18cb37b

Co-authored-by: Barry Pollard <barrypollard@google.com>

rachelandrew approved these changes May 8, 2023

View reviewed changes

src/site/content/en/blog/avoid-large-complex-layouts-and-layout-thrashing/index.md Outdated Show resolved Hide resolved

src/site/content/en/blog/avoid-large-complex-layouts-and-layout-thrashing/index.md Outdated Show resolved Hide resolved

malchata and others added 3 commits May 8, 2023 09:21

Relocates two guides back to their original location, and back into t…

957d321

…he fast content collection.

Apply suggestions from code review

81c1813

Co-authored-by: Barry Pollard <barrypollard@google.com>

Update home page section

282fe2e

tunetheweb approved these changes May 8, 2023

View reviewed changes

malchata and others added 5 commits May 8, 2023 12:57

Adds contextualizing info to the reduce style recalcs guide.

0fb94ca

Apply suggestions from code review

7d899bc

Co-authored-by: Rachel Andrew <rachelandrew@google.com>

Sets the date back for INP content collection pieces by one day.

1f7321e

Merge branch 'inp-content-collection' of github.com:GoogleChrome/web.…

1095680

…dev into inp-content-collection

Tweaks i18n language for the familiarize key.

4161ab4

malchata merged commit 8345b9b into main May 9, 2023

malchata deleted the inp-content-collection branch May 9, 2023 19:27


		When a user interacts with the page, those interactions should be as fast as possible. The amount of time it takes for an interaction to complete—ending when the browser presents the next frame to show the results of the interaction—is known as _interaction latency_. This is an aspect of page performance that the [Interaction to Next Paint](/inp/) metric measures.

		The amount of time it takes for the browser to present the next frame in response to a user interaction is known as the interaction's _presentation delay_. The goal of an interaction is to provide visual feedback in order to signal to the user that something has occurred, and visual updates can involve some amount of layout work in order to achieve that goal.


		Layout is almost always scoped to the entire document. If you have a lot of elements, it's going to take a long time to figure out the locations and dimensions of them all.

		If it's not possible to avoid layout then the key is to once again use Chrome DevTools to see how long it's taking, and determine if layout is the cause of a bottleneck. Firstly, open DevTools, go to the Timeline tab, hit record and interact with your site. When you stop recording you'll see a breakdown of how your site performed:

Conversation

malchata commented Apr 17, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

netlify bot commented Apr 17, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for web-dev-staging ready!

Uh oh!

Uh oh!

tunetheweb May 4, 2023

Choose a reason for hiding this comment

Uh oh!

tunetheweb May 4, 2023

Choose a reason for hiding this comment

Uh oh!

malchata May 4, 2023

Choose a reason for hiding this comment

Uh oh!

Uh oh!

tunetheweb May 8, 2023

Choose a reason for hiding this comment

Uh oh!

malchata May 8, 2023

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

tunetheweb left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

malchata commented Apr 17, 2023 •

edited

Loading

netlify bot commented Apr 17, 2023 •

edited

Loading