Category: Optimization

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.
Categories
Optimization

Optimizing @ TRR

(The RealReal : 9/16-9/17)

Intro’d technical design reviews : as part of initiative kick-offs towards improving scoping and architecture earlier in the product lifecycle.

Intro’d heart-beat deploys and a release calendar : for mitigating release risk while shepherding cultural shift towards feature deploys.

Integrated Zendesk, Pivotal, and Pager Duty : for improving escalation process.

Automated creation of Release Notes.

Coordinated development efforts with Marketing to facilitate Optimizely/OptimizelyX-powered third-party A/B Testing.

Increased velocity 13 to 30pts/sprint (Q4/2017.)

Decreased sprint Volatility by 62% (to 11%) and Standard Deviation by 15.5pts (to 4.8pts.)

Achieved improved productivity/engineer of 4.47 to 6.54pts/sprint (H1/2017.)

Intro’d idea of managing issues by severity (minor, major, critical.)

Established gold and silver tier browsers for effective due-diligence around ensuring quality desktop and mobile web experiences based on usage data from Google Analytics.

Templatized (and socialized) bug and feature story creation to improve information collection, team coordination, and hand-off of stories.

Mentored junior and Lead QA Engineers.

Reduced 35% of JS errors logged in Bugsnag (by updating config to not report 3rd party errs.)

Results

  • Quantitatively and qualitatively improved performance around people, quality, and process.
Categories
Leadership Optimization Performance Engineering supply-side

Improving Speed and Conversions

With no-one on staff having formal performance engineering experience or training, I led the effort to address a 6s sitewide page load average. Over approx. 6 months, stealing time from each sprint as I could given other responsbilities, I assessed bottlenecks using performance tools, including procuring a contract for Insights, Browser Pro, and Synthetics.

In a nutshell, assessing some of the pages having a roughly 13s page load, skewing the overall site’s average, I determined that the bulk of the performance issues were in blocking JS libs and then crafted a remediation strategy and established SMART goals for baselining/measuring impact of changes quarter-over-quarter with intent to drop from 6s to 3.5s by the end of 2017. Below you’ll see a spreadsheet I kept, noting the average Page Load Speed every Monday morning. Finally, in May, we address the bulk of the blocking JS libs and reversed the upwards trend.

The CEO was amazed at how much faster the site felt.

Results

  • Intro’d performance engineering, leading to page load speed reduction by one full second and 11% bump in mobile web conversions.
Categories
Building buy-in Frontend Optimization Process

Shifting Mindset

(Bluxome Labs : 4/16-6/16)

Prior to Q2 2016, the team had supported Product’s goals for delivering feature-value without ever considering engineering goals (better code quality/maintainability, page performance, workflow improvement, etc.) I took initiative to flesh out high-level deliverables for the quarter.

Below is an example of a set of performance metrics around the most-highly-trafficked page on the platform.

Though we didn’t meet this particular goal for the quarter – mostly because of a move to Webpack from RequireJS in late-April and then the introduction of React on the page in mid-May – the simple fact that the data was being tracked represented a major paradigm shift towards that of being a data-driven team, whether around page performance OR engineering deliverables.

Results

  • Introduced quarterly, data-driven, engineering KPIs.
Categories
Agile Leadership Optimization Process

Filling Shoes of Scrum Master

Adopting Agile methodologies and nomencalture, our team chose to make sprint commitments in points (using Fibonacci numbers.)

Seeing an opportunity to use discipline towards making our performance go up-and-to-the-right, I began tracking some key metrics in a spreadsheet, some of which are displayed below

Figuring that the data would resonately at a gut level if visualized, I charted it as well

Results

  • Took on Scrum Master role (in addition to IC and Tech Lead responsibilities) and used a data-driven paradigm to achieve a 69% trailing-3-sprint-average improvement.