Speed vs. Speed to Market
twitter: @malchata  —  Blog: jeremywagner.me
Slides: bit.ly/speed-vs-speed-to-market

Hi, I'm Jeremy

High-fiving a cartoon dog
  • I work for General Mills in Minnesota (Canada Junior)
  • I wrote a book for Manning last year on web performance (giveaway at the end of the talk!)
  • Hobbies include writing, guitar, running, and high-fiving cartoon dogs

On Hornets and Honeybees

Meet the Asian Giant Hornet

Meet the Asian Giant Hornet

Giant Hornet Stats

Roughly the size of your thumb

.63 cm (.25 in) stinger

Sting can dissolve human tissue

Leaves pheromones to alert other hornets

Top speed of 40 km/h (25 mph)

Giant Hornets Love Honeybees

Giant Hornets Love Honeybees

Giant hornets don't mess around

One giant hornet can kill up to 40 honeybees per minute

30 giant hornets can dispatch a hive of 30,000 honeybees within a half hour

The Honeybee Defense

The Scout Arrives

The hornet scout arrives

The Scout Arrives

The scout is engulfed

(and cooked alive)


Saves the day

Web performance

is hard

Average Total Page Size

Average Total Page Size
Source: httparchive.org

Average Total Page Size vs

Average Internet Speed (North America)

Average Total Page Size vs Average Internet Speed (North America)
Source: httparchive.org, Akamai State of the Internet report

How big is DOOM?

DOOM Shareware

Installer size:

2.39 MB

How does this happen?

Speed vs Speed to Market

How it all goes down

Project funding/contract procured

Timeline/project greenlit set

IA and design created

Development begins

Site launches

Client finds performance problems

Everyone's unhappy

How do we fix this?

Discuss Performance


What's the worst that could happen?

The Worst The Worst Pt. II

Web Performance is a

User Experience


Until first paint...

Blank browser window

There is no user experience

We've become


From our users

Crucial questions to ask

"Who am I developing for?"

"How fast is the internet for my users?"

"Who am I Developing For?"

Different Users Have
Different Experiences

Guy on MacBook Guy on Phone

"How fast is the internet for my users?"

Mobile may be slower than you think

Not so LTE

Make Data-driven Decisions

Google Analytics

HTTP Archive

Akamai State of the Internet Connectivity Report


Developer Convenience


The User Experience

"Remember it's about user experience, not developer experience. Performance matters!" — Estelle Weyl

CSS Framework Overhead

18.9 KB
12.1 KB
2.3 KB
0.93 KB
Meyer Reset
0.48 KB

All Sizes Minified+gzip

JS Library Overhead

54.7 KB
39.0 KB
29.6 KB
27.7 KB
12.1 KB
3.3 KB

All Sizes Minified+gzip

It's not just about file size

Parse time
matters, too!

Ask yourself

Am I over-engineering a solution?

Do I need [JS library] when in-browser methods exist?

Do I even need a CSS framework?

If you insist on a library/framework

Look for smaller API-compatible options (e.g., Zepto, Preact)

Customize if possible (e.g., Bootstrap, Modernizr)

Ensure it adds value for users, not just for you

Ensure your site fails well without it (can you curl it?)

For good measure...

Measure performance!

Performance problems

are invisible

in development

Testing Tips

Test multiple times in a session to build average metrics

Use a throttling profile to simulate actual connections

Build throttling profiles based on real data

Dev Testing (Easy Mode)

Chrome Dev Tools

Chrome Dev Tools

Dev Testing (Normal Mode)

npm install -g sitespeed.io
sitespeed.io -b chrome -n 25 -d 1 -m 1 -c custom --latency 50 --downstreamKbps 750 --upstreamKbps 250 https://cindex.co


Dev Testing (Hard Mode)


sitespeed.io & Graphite + Grafana

Resource/Navigation Timing APIs

Exposes resource timings in the browser

Available in window.performance

Use the Navigation Timing API for page timings

Use the Resource Timing API for asset timings

Beacon timing data to a server for collection

Browser Support

Navigation Timing API

Navigation Timing API

Resource Timing API

Resource Timing API


I'm in prod!

Optimize Images!

Simple bulk image optimization in bash

Optimize JPEGs (jpeg-recompress)

npm install -g jpeg-recompress-bin
find ./ -type f -name '*.jpg' -exec jpeg-recompress {} {} \;

Optimize PNGs (optipng)

npm install -g optipng-bin
find ./ -type f -name '*.png' -exec optipng {} \;

Optimize SVGs (svgo)

npm install -g svgo
find ./ -type f -name '*.svg' -exec svgo {} \;

A Quick Test Case

A Wordpress-powered recipe website with 493 JPEG images (36.5 MB total)

find ./ -type f -name '*.jpg' -exec jpeg-recompress --min 30 --max 70 --strip --method smallfry --loops 12 --accurate {} {} \;

with jpeg-recompress, image library size was reduced 72% to 10.2 MB in approximately 3 minutes of CPU time

Quality differences were negligible


Unoptimized Image Test Case

182 KB


Optimized Image Test Case

25 KB (-86%)

Image Optimization Works

Results of Image Optimization in Test Case

Use Resource Hints

Use preconnect to open connections to other servers ahead of time:

Link: <https://cdnjs.com>; rel=preconnect; crossorigin
<link rel="preconnect" rel="https://cdnjs.com" crossorigin>

Give the browser a head start on loading assets with preload:

Link: </css/styles.css>; rel=preload; as=style
<link rel="preload" href="/css/styles.css" as="style">

Prune your CSS

Go beyond mere minification with cssnano:

npm install -g cssnano-cli
cssnano styles.css styles.optimized.css

Find redundancies with csscss:

gem install csscss
csscss --verbose --no-match-shorthand styles.css

Segment your CSS

Large, monolithic stylesheets are perfect candidates

Keep one stylesheet with global CSS and place template-specific CSS into separate style sheets

Segmented CSS

If only one instance of a specific template exists, considering inlining its CSS

Check Code Coverage

with Chrome Dev Tools

You probably won't fix everything



More about Giant Hornets:

Connectivity Index:

Akamai State of the Internet Reports:

More resources


Bulk image optimization in bash:

Resource hints specification:

Even more resources

Speed vs. Speed to Market (Performance Calendar):

Talk slides:

Web Performance in Action:

The End

Thank you!

twitter: @malchata  —  Blog: jeremywagner.me

Web Performance in Action


Web Performance in Action

Save 42% with code sswagner