Fixing a slow catalog, starting with the audit

E-commerce

About

ChemPanda was a US online catalog of chemical building blocks for research, covering families such as amines, bromides, ethers and pyridines. Researchers browse large catalog pages to find compounds, so slow loading, especially on mobile, made the site harder to use and less visible in search than a specialist catalog needs to be.

Client Review

Review

40/100

Starting mobile performance score

23.1 s

Mobile largest contentful paint

~14 s

Estimated saving from text compression, per Lighthouse

4.6 MB

Page payload to trim

2 formats

Brotli and gzip assets

Challenge

ChemPanda’s catalog loaded slowly, especially on mobile. A Lighthouse audit scored mobile performance 40 out of 100, with the largest page element taking 23.1 seconds to appear, 22.9 seconds before the page became interactive and a 4.6 MB payload. Visitors waiting that long leave before finding a compound, and slow pages rank lower in search, so the speed problem cost both traffic and inquiries.

Solution

We started from a measured baseline, then worked through the biggest opportunities the audit found, ranked by seconds saved.

Audit

Ran Lighthouse audits on mobile and desktop
Ranked fixes by estimated time saved
Reviewed the codebase for quality issues slowing delivery
Logged the audit’s key issues: unused JavaScript, unused CSS, slow server response

Optimization

Added Brotli compression for JavaScript, CSS and HTML
Added gzip fallbacks generated at build time
Targeted the audit’s largest opportunity, about 14 seconds on mobile
Set up server-side rendering in Docker
Built and deployed the SSR app through Google Cloud Build
Prepared the build to serve pre-compressed files from the server

Code Quality

Cleaned up the Nx workspace for easier maintenance
Improved loading across mobile and desktop platforms

The Results

Outcome Summary

ChemPanda went from guessing about speed to a measured baseline and a build pipeline aimed at its biggest bottlenecks. Compression, server-side rendering and a cleaner codebase targeted the issues costing the most seconds on mobile first, to give researchers a faster catalog and the site a better chance of being found in search.