iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
A Three.js particle background looked right on the site’s home page, but in Yap Pat Yih’s mobile-simulated Lighthouse test it pushed a post page’s performance score to 39. With the animation withheld from that reading page, the score rose to 97. Those are the author’s results from a local preview, not universal scores or a measure of every reader’s experience.
What the 39 score measured
In an article published October 2, 2026, Yap Pat Yih compared the same post page with and without the animated Three.js world behind it. In the author’s mobile-simulated Lighthouse run, the animated version scored 39; the version without the world scored 97. The reported metrics show what changed alongside the scores:
| Post-page version | Lighthouse performance score | LCP | TBT | Page weight |
|---|---|---|---|---|
| Animated world enabled | 39 | 5.70 seconds | 3636 ms | 733 KB |
| Animated world withheld | 97 | 2.21 seconds | 0 ms | 191 KB |
These are the author’s reported local-preview results from 2026, not an independently reproduced benchmark. The published account does not specify the device model, full Lighthouse configuration or version, or provide a raw report. Treat the figures as a comparison under the author’s stated test setup rather than a durable rating of the site.
How to read the Lighthouse result
Lighthouse’s performance score combines metric scores using weights, and results can vary with test conditions, as Chrome for Developers explains. A 39 therefore does not mean that every visitor experienced a score of 39; it is a lab result useful for comparing runs when the test setup is held as consistent as possible.
#1 Best Overall
Total Blocking Time (TBT) is also a lab metric. Chrome defines it as the sum of the blocking portions of long tasks between First Contentful Paint and Time to Interactive. A long task is one that runs for more than 50 ms, and its blocking portion is the time beyond 50 ms. The reported 3636 ms is the Lighthouse TBT result; it does not establish that every phone user was unable to interact for exactly that long. See Chrome’s TBT explanation.
Why keep an animation on one page but not another?
The site’s animated particle world was central to the home page’s visual identity. The author’s decision was not to remove Three.js everywhere, but to distinguish the home page from post pages, where reading was the priority. As the author put it, “The difference is not the code. It is what the page is for.”
Rank #2
That leads to a useful design question: “What is this page for? One verb. Watch, read, decide, buy.” An effect that helps a page establish an identity may be less valuable on a page whose primary job is letting someone read.
Free tools Windows power users keep installed
One-click scans. No signup required.
How the post page decides whether to load the world
After the initial comparison, the author added a page-specific rule: a post page loads the animated world only when all three conditions are true:
Rank #3
- history, legend, lore, design, technology, and romance of lighthouses
- The viewport is at least 1024 pixels wide.
- The pointer is fine, rather than a coarse touch-style pointer.
- The reader has not requested reduced motion.
If any condition is false, the post page uses a still dark background instead. The author says the tests covered all eight combinations of those three yes-or-no conditions. This is a conditional loading choice, not simply a claim that every phone can be identified by its screen size.
What the follow-up runs showed
After applying the rule, the author reported a score of 97 on a phone with the animation withheld, and 98 on desktop with it loaded:
| Follow-up scenario | World | Lighthouse score | LCP | TBT | Page weight |
|---|---|---|---|---|---|
| Phone | Not loaded | 97 | 2.18 seconds | 0 ms | 191 KB |
| Desktop | Loaded | 98 | 0.98 seconds | 81 ms | 734 KB |
These, too, are the author’s 2026 Lighthouse results. They show that the conditional approach retained the background in the desktop run while the phone run used the still alternative; they do not establish how every device or network will perform.
The animation also affected text contrast
A day after changing the loading rule, the author noticed that the animated ring could pass behind text on desktop. At the worst measured spot, the author reported a contrast ratio of 1.59:1. After adding a dark, feathered veil behind the text column, the reported measurement was 7.33:1.
For ordinary text, WCAG 2.2 Success Criterion 1.4.3 (AA) sets a minimum contrast ratio of 4.5:1; large text has a 3:1 minimum, and the criterion includes exceptions such as incidental text and logotypes. See the W3C criterion. The author’s before-and-after readings describe the measured locations on this page; they are not, by themselves, a complete evaluation of WCAG conformance.
What this case study can—and cannot—tell you
The central lesson is about matching a visual effect to a page’s purpose, then checking both performance and readability. In this case, the author kept the animated world for the home page and made its use on posts depend on viewport width, pointer type, and reduced-motion preference. The measured results make the trade-off visible for this implementation, but they are not a guarantee that the same rule or outcome will fit another site.
If you are assessing a similar effect, compare the same page with and without it under a consistent Lighthouse setup, and consider the relevant metrics as well as the aggregate score. Check whether motion is appropriate for the reader’s preference and whether moving imagery can reduce text contrast. Lighthouse provides a controlled comparison, not a substitute for observing real users or reviewing accessibility requirements.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
