The challenge
PMK sells auto parts online: a catalog of almost 700 products on WooCommerce. On top of that foundation sat three layers of CSS that the browser had to download and process before showing anything: the theme, WooCommerce and the Elementor headers. The bottleneck wasn’t on the server, so instead of adding another caching layer, the way forward was to decide, for each page type, which CSS is truly critical.
What I did
I used my own Python tools to extract the critical CSS for each page type, instead of a generic automatic optimization plugin:
- Critical CSS per page type: home, catalog, category and product, each with its own variant
- Removal of render-blocking CSS from WooCommerce and the theme
- Product grid optimization to eliminate layout shifts
- Elementor headers optimized through direct templates
Result
Mobile LCP dropped from 11.0s to 6.14s: 44% less waiting before the product page shows its content.
The speed work is one chapter in a relationship that goes back to 2022, when the brand redesign and the development of this same website replaced a PHP site that had become outdated. After that came ongoing maintenance and development, a wholesale channel separate from retail with its own prices, and today a full site migration that is in progress.
The starting point
An auto parts store with almost 700 products and an 11-second mobile LCP: the page finished painting when a good share of visitors had already left. Caching wasn't enough because the problem was render-blocking CSS.
