Step 1: list the components in the first view
Open the template on the target mobile profile and list every component visible before scrolling, then every component that loads later. For Example Lobby:
- First view: header with search, promotional banner, category tabs, first row of four game tiles, consent banner.
- Later: further tile rows, jackpot ticker, review carousel, chat launcher, footer with provider logos and safer gambling links.
Step 2: map components to metrics
Use the component map to note which metric each component can put at risk. Then identify the LCP element on the profile. In this example we assume the banner is the LCP element on mobile.
Step 3: record sizes and timings (invented)
| Component | Transfer size (invented) | Metric at risk | Finding (invented) | Owner |
|---|---|---|---|---|
| Promotional banner | 420 KB | LCP | Loaded by carousel script; no fetch priority | Marketing, front end |
| First row of tiles | 4 × 60 KB | LCP, CLS | No width and height | Front end |
| Lobby bundle | 650 KB | INP | Filter and search code included at load | Front end |
| Consent banner | 90 KB | CLS | Inserted at the top after first paint | Legal, front end |
| Chat launcher | 380 KB | INP | Full chat code loads with the page | Product |
| Review carousel | 150 KB | CLS | No reserved height | Content |
Step 4: prioritize
Rank the findings by the metric that fails in field data and by effort. In the example, suppose field data shows mobile LCP failing and CLS borderline. The order would be:
- Move the banner into the HTML with high fetch priority and a mobile-sized file (LCP).
- Add dimensions to tiles and reserve the review carousel's height (CLS).
- Show the consent banner as an overlay (CLS).
- Split filter and search code, and put chat behind a facade (INP and weight).
Step 5: set budgets and re-measure
Enter the planned sizes in the budget calculator and export the CSV for the ticket. After each change, repeat the lab runs with the same settings, following the measurement protocol, and label the results as lab results. Confirm with field data after the 28-day window.
Template for your own analysis
| Column | What to write |
|---|---|
| Component | Name as the team knows it |
| In first view | Yes or no, on the target profile |
| Transfer size | From the lab trace, with the date |
| Metric at risk | LCP, INP or CLS |
| Finding | The mechanism, in one sentence |
| Fix and owner | Proposed change and responsible team |
| Evidence | Trace file, screenshot or field report |
Questions
Are the sizes on this page typical for casino sites?
We do not know, and they are not meant to be. They are invented to show the method. Measure your own pages.
How long does an anatomy analysis take?
That depends on the number of templates and variants. Start with one template on one device profile.
Who should own the analysis?
A front-end lead usually runs it, but each finding needs an owner in the team that controls that component.
Sources
- web.dev, Optimize Largest Contentful Paint, last updated March 31, 2025.
- web.dev, Optimize Cumulative Layout Shift, last updated February 7, 2025.
- web.dev, Optimize Interaction to Next Paint, last updated September 2, 2025.