Web Performance Optimization: Lessons from the Oodles Theater App

In the past year we focused on making the web faster and more efficient, sharing new tools, methods, and libraries. Using the Oodles Theater App as a case study, we applied Lighthouse audits to identify performance bottlenecks and implemented a series of optimizations.

Why performance matters – Mobile pages now average 1.5 MB, mostly JavaScript and images. Large page sizes, network latency, CPU limits, render‑blocking resources, and third‑party code create complex performance challenges that directly affect user experience.

Lighthouse – the foundation of our workflow – Lighthouse, part of Chrome DevTools, provides automated audits and actionable recommendations. Our initial Lighthouse report gave the app a 23 / 100 performance score, with a 15 s First Meaningful Paint on 3G.

Optimization opportunities

Remove unnecessary resources – minify and compress JavaScript/CSS using tools like UglifyJS; enable gzip/Brotli on the server (Firebase Hosting already does).

Use effective caching – set long max‑age headers and validate with ETags to avoid redundant downloads.

Delete unused code – analyze bundle size with webpack‑bundle‑analyzer, Import Cost, and BundlePhobia; eliminate large unused dependencies (e.g., a 1.6 MB Unicode package) and unused CSS/JS, reducing the CSS bundle 20×.

Avoid huge network payloads – identify and shrink large vendor bundles, replace heavy libraries with lighter alternatives.

Code splitting to reduce JavaScript startup time – By switching from static imports to dynamic imports (e.g., using React Loadable), we reduced the JavaScript startup time from 1.8 s to 0.78 s, a 56 % speed‑up.

Image optimization – Replace unoptimized PNG/JPEG assets with compressed versions using ImageOptim or imagemin; convert large GIF animations to MP4/WebM, cutting image payloads by >80 %.

Lazy‑load off‑screen images – Use the Lazysizes library to defer loading of images not immediately visible, improving initial paint.

Resource hints – Add link rel=preconnect , preload , and prefetch to prioritize critical resources such as Google Fonts, reducing connection latency and font load time.

Priority hints (experimental) – Use the new importance attribute (low, high, auto) to lower priority of non‑essential resources and raise priority of hero images, gaining seconds on slow networks.

Web‑font loading strategy – Avoid invisible text by using font-display to swap in fallback fonts instantly and switch to the web font when ready; consider self‑hosting fonts for better control.

Reduce render‑blocking scripts – Inline critical CSS with the Critical npm module and defer non‑essential scripts, improving the first paint.

Results – After applying all optimizations, the Lighthouse performance score rose from 23 to 91, with significant reductions in First Meaningful Paint and overall bundle size. The source code and PRs are available at http://github.com/google/oodle-demo .

Future work – data‑driven performance – We are experimenting with machine‑learning‑guided resource prioritization (Guess.js) that uses Google Analytics data to predict which assets to pre‑fetch, aiming for smarter, user‑centric performance improvements.