Tag: Google Analytics

Categories
Backend eCommerce Frontend Performance Engineering Process

What To Do With a 9s Page Load?

(Decorist : 9/18-12/19)

Challenge

Inherited a two-fold challenge: 1) less-than-optimal user experience of 9.01s Avg. Page Load Speed and 2) a culture that did not yet value performance engineering.

Action

Idenfitied initial frontend and backend low-hanging fruit (e.g. page structure, image resolutions, N+1 queries, lazy-loading, etc.) Identifed and delegated KRs to FE leads. Introduced process to methodically follow up each week, pressing the case for performance engineering over months.

Below, a sampling …

Some initial efforts shaved ~3s of the Homepage:

Lighthouse score soared from 5 to 61:

There were multiple speed improvements of up to 50% on various pages across the site as a result of backend query improvements and a +300% bump YoY in SEO traffic (verified by 3rd party SEO consultant)

After Dec 2019, we shifted focus to non-converted UXes after having addressed low-hanging fruit for all UXes.
Sept 2018 to Dec 2019

Results

  • Record Avg. Site Page Load Speed of prevous four years : 9.03s (Sep 2018) to 4.13s (Dec 2019.)
Categories
Analytics Troubleshooting

Improving Our Data Collection

(Decorist : 6/19-6/19)

Challenge

Anytime instrumentation changes were made, different engineers applied different standards of implementation, causing discrepencies in data collection.

Action

Created templatized checklist in Jira (in conjunction with Dir of Data Sci) to improve analytics instrumentation.

Results

  • Introduced checklist leading to consistent data analytics collection, growing trust with non-technical stakeholders.
Categories
Building buy-in Distributed Teams Frontend Optimization Performance Engineering

Making an Operations Excellence Frontend Excellent

(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.