A post page in Yap Pat Yih’s local, simulated-mobile Lighthouse test scored 39 with its animated Three.js background and 97 without it. The comparison led to a more selective solution: keep the animation where it supports the home page’s visual identity, but load it on post pages only when the display and motion settings make it appropriate.
What the 39 score measured
In an article published October 2, 2026, Yap Pat Yih described comparing a post page with and without the animated particle world behind the site. The 39 was the Lighthouse performance score for the version with the animation in a simulated-mobile run on a local preview—not a universal score for the site or a measurement of real-world performance for every visitor.
As an Amazon Associate I earn from qualifying purchases.
In the author’s comparison, withholding the animation raised the score to 97 and improved the reported metrics:
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →Scan for outdated or missing drivers - takes under a minuteDriver Scan →| Post-page version | Lighthouse 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 test results, not independently reproduced benchmarks. The article does not state the full Lighthouse version or configuration, device model, or provide a raw report artifact.
#1 Best Overall
Why the score is not the whole story
Lighthouse produces lab scores from weighted combinations of performance metrics, and results can vary with test conditions. Chrome’s performance scoring documentation explains how the score is composed. That makes 39 versus 97 useful as a comparison within the author’s test setup, not a durable rating of the site or a field-user metric.
The reported Total Blocking Time (TBT) also needs context. Chrome defines TBT as the sum of the blocking portions of long tasks between First Contentful Paint and Time to Interactive. A long task is more than 50 milliseconds, and its blocking portion is the time beyond those first 50 milliseconds. The 3636 ms figure is the author’s Lighthouse lab result; it does not establish that every phone user was unable to interact for exactly that long. See Chrome’s TBT explanation.
Rank #2
Why the animation stayed on some pages
The particle world was central to the home page’s visual identity, but a post page’s primary job is reading. Removing the animation everywhere would have improved this particular post-page test, but it would also have removed an effect the author considered valuable on the home page. The author’s distinction was about the purpose of each page, not a blanket rule that animation is always good or bad.
Recommended Free Tools
A useful way to make the same decision on another site is to name the page’s main job in one verb—such as “watch,” “read,” “decide,” or “buy”—then ask whether the effect helps with that job enough to justify loading it.
Rank #3
How the post-page loading rule worked
Rather than load the animated world on every post page or remove it from the whole site, the author made it conditional. The post page loads the world only if all three conditions are met:
- The viewport is at least 1024 pixels wide.
- The pointer is fine.
- The reader has not requested reduced motion.
If any condition fails, the page uses a still dark background instead. The author says the change was checked across all eight possible combinations of those three conditions.
Rank #4
| Follow-up scenario | World loaded? | Score | LCP | TBT | Page weight |
|---|---|---|---|---|---|
| Phone | No | 97 | 2.18 seconds | 0 ms | 191 KB |
| Desktop | Yes | 98 | 0.98 seconds | 81 ms | 734 KB |
Those are the author’s reported results after the conditional rule. They show the animation withheld in the phone test and retained in the desktop test; they should not be read as a guarantee that another implementation will produce the same scores.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
The animation also changed text contrast
After changing the loading behavior, the author noticed that the animated ring could cross text on desktop. At the worst measured location, the text contrast was reported as 1.59:1. Adding a dark, feathered veil behind the text column raised that page-specific measurement to 7.33:1.
Best Value
WCAG 2.2 Success Criterion 1.4.3 (AA) sets a minimum contrast ratio of 4.5:1 for ordinary text and 3:1 for large text, with exceptions that include incidental text and logotypes. See the W3C criterion. The author’s before-and-after measurements describe the reported spot on this page; they are not a general determination that the page conforms to WCAG.
What this case study shows
The reported results make the cost of the animation visible on the tested post page, while the conditional rule preserves it in the desktop scenario and on the home page where the author felt it served a clearer purpose. The useful lesson is not “remove Three.js” or “keep animation on desktop,” but to consider page purpose, loading conditions, reduced-motion preferences, and text readability together.
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.
