Self-doc the Exploring the universe page

[mikehoffms]

1. In the rendered webpage, tell user to read the instructions comments in the demo's Readme file.
2. In the instructions comments in the demo's Readme file, tell user to make the webpage pane at least a certain width - wider is better, to make the cards orange/poor. If cards are staying green, make webpage pane wider.
    
   Repro:
3. Make webpage less than 60% width of window. Hard Refresh.
   • Actual result: CLS remains green.
   • Expected result: CLS should be orange.
4. Make webpage wider than 60% width of window.
   • Result: CLS is orange, which is desirable here.

Add the red-markup png + the following, to bottom of demo page.

1. Open the page
2. Open DevTools and go to Performance
3. Optional, but recommended: set a 4x CPU slowdown and a slow 4G network throttle
4. Empty cache and reload the page (important to make sure the image isn't loaded from cache)
5. Observe LCP in the Performance tool: it should show that the image took a long time to load. This image is what the engine identifies as the largest item to be displayed to the user.
6. Observe the CLS score. It should be orange and maybe somewhere around 0.15. This illustrates how sudden/unexpected jumps in the layout can negatively impact users. This is also due to the image. The webpages doesn't specify a height for then image, which means that the page initially loads without reserving much space for it, and when the image starts appearing, the content below it suddenly jumps down.
7. To see INP values, click on one, or several, of the accordion items in the right column. These are made to load slowly. So the time between a click and the corresponding content to appear will be long (it's a random value between 100ms and 1000ms right now), leading to long INP metric.

Important: note the % width of webpage, eg 60%:

Next, I will walk through those steps (again) and see if that resolves the below questions.

Like some other demo pages, maybe have a link at top of page, jumping down to instructions at bottom of page.
Convert the red boxes and lines and arrows into English statements, as condensed summary.
Or add text overlay on this png.
Include this png at bottom of demo page, but w/ clarification.

I initially had the demo page super narrow and was failing to get poor results in the cards. Figured out that the page is intended to be wider, apparently, for it to work/ to generate poor results in the 3 cards as shown. At this point, I still haven't figured out how to trigger CLS poor result. I'm clicking controls, refreshing, resizing, d/k what I'm supposed to do. What does the 0.13 arrow mean for me to do? Need text, not just arrows/boxes.

That would supplement the detailed article, which in theory will explain the 3 cards.
Summarize in the demo page how to trigger poor results in the 3 cards.
Have condensed tips directly in the demo page.

How do you interact w/ the page to get poor LCP?
How do you interact w/ the page to get poor CLS?
How do you interact w/ the page to get poor INP?

• How wide is the webpage pane supposed to be?
• png shows no CPU throttling.
• png shows Network: Slow 4G.

[mikehoffms]

Need instructions in the demo page, linked at top of demo page, saying:

• webpage (vs. DevTools) pane is intended to be at least yay wide before the cards go orange, and, [per your steps]:
• you need to click a Discovery entry, and
• need to first set throttling, and
• must DevTools displayed, and
• hard refresh.

When demo page is narrow, 2 cards fail to go orange (when follow all your provided steps):

That tripped me up b/c i'm tending to work w/ super narrow webpage:

• not max'd window, b/c making screenshots.
• super narrow webpage, b/c making screenshots.
• Narrow webpage is a requirement, to make pngs that the article user can repro on their own machine - ie, non-max'd window + narrow webpage viewport.

When demo page is wide, all 3 cards succeed at going red/orange (when follow all your provided steps):