(Bluxome Labs : 4/18-4/18)
For the client, I probed their UX using multiple tools to determine low-hanging fruit, worked with the CTO and VP PROD to understand resourcing constraints given the product roadmap, and enumerate several tactics in a (prioritized) phased approach towards improving performance.
Heuristic discoveries included FE perf bottlenecks such as:
- multiple inline JS snippets causing slowdowns
- un-optimized JS libs, including of React components
- multiple 3rd party JS libs that were no longer necessary
- JS libs that loaded neither async nor defer
- retrieval of multiple styling resources
I found that the greatest opportunity to optimize existed for two key user experiences at ~6s avg page load and ~4.5s average page load respectively.
During one iteration, changes lead to a 52% reduction in the Webpack bundle of React components, improving page speed by 10% or better across four key user experiences.
During another iteration, one key UX was sped up by 39.4% without Cache, 53.8% with Cache.
During a final iteration, changes lead to a 20% page speed improvement on one key user experience and 10% or better on two others.
Results
- Introduced Performance Engineering mindset leading to 20% page-load speedup.