Speeding Up NerdWallet 🚗💨

Time To Visually Complete (3G)

Removing Unused Global CSS/JS

I’m not going to point fingers but ☝ is a problem. A real, real problem.
  • 50kb (gzipped) of JS (190kb parsed) removed
  • 30kb (gzipped) of CSS (200kb parsed) removed

Web Font Optimization

Server Side React Render Cache

Psuedocode of a least-recently-used cache around renderToString
Nearly 50% reduction in overall server side render pre/post

Centralized Build Tool

Example of the interface producing a ready-to-go browser webpack config

Images

Lazyloading an image with a low-res placeholder inlined.

Codesplitting

At this point `CodeSplitRoute` is just a normal React component 👍

CDN in front of nerdwallet.com

Time to first byte (milliseconds)
All critical assets are downloaded faster 🚗💨

Asset Prioritization

Building a Culture of Performance

Site-wide 3G SpeedIndex (via https://github.com/parshap/speedcurve-data)

Upcoming

  • Inline CSS under a minimum threshold via Google’s Nginx pagespeed module
  • Improve our image processing pipeline — support requiring an image require('../my-image.png')from within JS and generate responsive image sizes either at build or on the fly
  • Service Workers for better offline support
  • Upgrade versions of some of our key packages (webpack 4, React 16)

Software Engineer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

JavaScript Starter Architecture, Part 3: Webpack Browser List, Reduction of Transpilation and…

How to refresh a Repeating Group in Bubble.io that uses AirTable.

create at field

JavaScript, Classes and Prototypal Inheritance

npm install and npm ci: In what aspect they differ

npm install and npm ci

React-Native: A one-way road you don’t want to go back!

What’s a Pipeline Style in JavaScript?

Two pipes

Optional Chaining — Using it already

Should I learn React Or AngularJS?

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Francis John

Francis John

Software Engineer

More from Medium

Avoid crash due unexpected null or undefined properties or variable.

Type-safety while incrementally migrating a large app from Flow to TypeScript

Farewell mouse/touch events, welcome pointer events

How to test a React App, with Jest and react-testing-library