SSWConsulting / SSWConsulting/SSW.Website

⚡ Homepage PageSpeed: CLS and TBT are holding the score down

Open
#4,889 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Type: Refactor
Dominant language
HTML
Stars
14
Forks
10
Avg merge
13h 51m
Merged PRs (30d)
38

Description

TL;DR

The homepage scores ~42 on PageSpeed Insights (mobile). Two metrics account for essentially all of the loss — CLS (~0.6–0.7, score 0.12) and TBT (~770 ms, score 0.38). Everything else is already healthy, so work should be confined to those two.

What's actually healthy — don't spend time here

Metric Value Score
FCP 1.5 s 0.95
LCP 2.4 s 0.92
TTFB 0.17 s (x-nextjs-cache: HIT)
HTML over the wire 78 KB (brotli)
Render-blocking CSS none

Already fixed

  • Icon bundleimport * as on three react-icons sets shipped 4.76 MB to every page; now 42 KB (#4887).
  • ButtonRow forced reflow — geometry reads moved into the ResizeObserver callback; chunk 9148 has dropped off the forced-reflow list entirely (#4884).
  • Hero image weight + deviceSizes srcset gap (#4884).

Ruled out — do not chase

  • Footer logo flagged as "Unsized image element": the SVG is exactly 332×98, matching its declared dimensions, so the delta on load is 0.0 px. Lighthouse false positive on height:auto.
  • v3Events: server-rendered via preloaded events.
  • Globe / office accordion: hidden lg:block, desktop-only — cannot affect the mobile score. A previous fix targeted this desktop path, which is why the CLS number never moved.
  • JotFormEmbed (ssr:false): not on the homepage.

Order of work

Sub-issues are ordered by score impact per unit of effort and risk. 1 and 2 are the high-value, low-risk items; 3 is a genuine refactor; 4 is cleanup.

Measurement of record is PageSpeed Insights (mobile). Note the shift only reproduces under real throttling — simulated throttling reports CLS 0, so verify with devtools/real throttling or PSI itself.


Update — deduplicated against #4894

#4894 (AI for Business Leaders event page) covers overlapping site-wide infrastructure. Reconciled as follows:

This PBI Status
#4890 — Footer CLS (homepage) Keep. Not covered by #4894. Its CLS sub-issue #4906 is the events page header — useMobileHeaderAppearance is imported only by eventsv2.tsx, so it's a different page and a different cause.
#4891 — Defer GTM third-party (~722 ms) Keep. Not covered anywhere in #4894, which addresses AOS, App Insights and Eventbrite but not GTM / Clarity / Hotjar / FB Pixel. Still the only zero-code item across both PBIs.
#4892 — TinaCMS off public pages Closed — consolidated into #4896. Its distinct finding (9 files value-importing the tinacms root package) is preserved as a comment there.
#4893 — embla forced reflow Keep. #4898 covers V2ComponentWrapper; embla is a different source and isn't mentioned in #4894.

Correction to this PBI's earlier analysis: the claim that tinacms/dist/react imports were "fine" understated the problem. #4896 found TinaMarkdown (tinacms/dist/rich-text) pulls sanitizeUrl from @tinacms/mdx — a 1.97 MB package — across 65 components. That is the larger chain and is tracked in #4896.

Also verified: #4887 is deployed. Chunk 3b0ee722 on production went from 4.76 MB to ~0 MB with Simple Icons gone, so #4895 can be closed.

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked work items #4890, #4891, and #4893, then measure the homepage with PageSpeed Insights on mobile or real throttling. Done means addressing the remaining CLS and TBT causes without revisiting the ruled-out items, and confirming that the metrics improve.

Written by the indexing model from the issue text.

Assessment

Tech stack
nextjs, react
Domain
frontend, performance, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.