I recently built a web app and discovered that it was painfully slow for visitors, even though it felt fast locally because I was using a React development server and cached assets. A mobile performance test reported a first contentful paint of roughly 36 seconds, which was a serious wake-up call.
Since then, I've learned a lot about the small optimizations that can make a major difference. I've tried subsetting fonts, converting images to WebP or AVIF, compressing videos, dynamically importing JavaScript, conditionally rendering components instead of hiding them, removing unused dependencies, adding explicit image dimensions, replacing autoplay videos with clickable preview images, deferring noncritical CSS and third-party scripts, moving expensive work to web workers, setting appropriate fetch priorities, and reducing unused CSS.
The right approach depends heavily on the site and the user flow, so there isn't a universal checklist. After several rounds of changes, the app now loads in roughly a second or two, and the performance score has reached 94, with one test reaching 98. I know lab scores can vary, though. What less-obvious techniques have helped you improve page speed and the actual user experience?
4 Answers
Your image-to-video idea is especially effective because it avoids sending a large video to visitors who never press play. I’d also add preconnecting to the origins you genuinely need, such as a font provider or CDN. It can reduce connection setup time, although it’s best not to add hints for services every page may not use.
The lab score is useful for finding problems, but it shouldn’t be treated as the whole story. Real-user Core Web Vitals are generally more meaningful than a single simulated score, and some recommendations can have tradeoffs. For example, aggressive font subsetting may reduce cache reuse across pages, while lazy-loading a component can sometimes make interaction feel slower. Optimize based on actual user behavior and measurements rather than chasing 100 blindly.
Frameworks aren’t automatically the problem, but understanding plain HTML, CSS, and JavaScript is a strong foundation for making good performance decisions. Once you know what the browser is actually doing, it becomes easier to decide whether a component should be rendered immediately, deferred, or removed entirely.
Test with caching disabled in the browser’s network tools and also try a realistic mobile connection. A local development server with warm caches can hide slow requests, oversized bundles, and third-party delays. Explicit image dimensions are another underrated improvement because preventing layout shifts makes the page feel much faster even when the transfer size stays the same.
That’s a good distinction. I’ve been using the lab tests to identify opportunities, but I’ll pay more attention to real-user metrics and whether an optimization actually improves the experience.