Staying in the fast lane - tools to keep your site speedy and light

STAYING IN THE
FAST LANE
TOOLS TO KEEP YOUR
SITE SPEEDY AND LIGHT
@stefanjudis

DOING NERDY STUFF FOR 4 YEARS
MOSTLY ECOMMERCE
NOW ENTERING THE WORLD OF SPA’S

https://github.com/stefanjudis

USING IT EVERYWHERE 
AND ALL THE TIME

MOBILE IS A THING
https://www.flickr.com/photos/31004024@N04/15248248489/in/photostream/
https://www.flickr.com/photos/johnragai/16173931605
https://www.flickr.com/photos/kk/6863172432

DATA LIMIT IN
GERMANY CURRENTLY
1GB PER MONTH
DAILY MADNESS
IN A FOREIGN 
COUNTRY

PERFORMANCE  
IS A HOT TOPIC
NOT ONLY
ON MOBILE 
BUT ESPECIALLY
ON MOBILE

FIREFOX REDUCED
AVERAGE LOAD TIME
BY 2.2 SECONDS
AND INCREASED
DOWNLOADS BY 15.4%
10.28 MILLION ADDITIONAL
DOWNLOADS PER YEAR
http://blog.mozilla.org/metrics/2010/04/05/ﬁrefox-page-load-speed-%E2%80%93-part-ii/

GOOGLE INCREASED
PAGE LOAD TIME
BY 500 MILLISECONDS
GOT 25% FEWER SEARCHES
http://glinden.blogspot.de/2006/11/marissa-mayer-at-web-20.html

THE GUARDIAN SURVEYED 3000 USERS
AND THEY RATED SPEED
SECOND MOST IMPORTANT,
ONLY AFTER EASY TO FIND CONTENT
https://speakerdeck.com/patrickhamann/breaking-news-at-1000ms-front-trends-2014

PERFORMANCE AFFECTS 
YOUR BOTTOM LINE

BUILD UP A
PERFORMANCE CULTURE
SET A BUDGET
BECOME FAST
STAY FAST

DEFINE YOUR KPI’S
PAGE LOAD TIME
PAGE WEIGHT
NUMBER OF REQUESTS 
FIRST PAINT
SPEED INDEX
GOOGLE PSI SCORE
VISUALLY COMPLETE

YOU KNOW BEST
WHAT IS IMPORTANT 
FOR YOUR USERS
TWITTER KPI:
TIME TO FIRST TWEET

CHECK WHAT YOU HAVE
DON’T MAKE IT WORSE

MY ANSWER TO HOW
FAST IS FAST ENOUGH?
A SPEED INDEX
OF UNDER 1000.
“
“
@paul_irish

WHAT HAPPENS
IF SOMETHING
DOES NOT FIT
WITHIN THE
BUDGET

OPTIMIZE AN EXISTING
FEATURE OR ASSET
ON THE PAGE

REMOVE AN EXISTING
FEATURE OR ASSET
ON THE PAGE

DO NOT ADD
THE NEW
FEATURE OR ASSET

CONCAT MINIFY
ABOVE THE FOLD 
UGLIFY COMPRESS
SPRITE INLINE

“YAY, WE SAVED 200KB
DOING THIS AND THAT!”
“HMM, WE’VE GOT A SUPER 
SLOW LANDING PAGE THERE. 
WHEN DID THAT HAPPEN?”
IT’S A NEVER 
ENDING STORY!

REAL USER
MEASUREMENT
- RUM -
SYNTHETIC
PERFORMANCE
TESTING
vs
http://www.soasta.com/the-performance-beacon/synthetic-real-user-measurement-monitoring-rum/

WHAT ARE YOUR
USERS’ ENVIRONMENTS?
HOW DO USERS MOVE
THROUGH YOUR SITE?
WHAT IMPACT DOES PERFORMANCE
HAVE ON YOUR ACTUAL BUSINESS?

http://www.google.com/analytics/
R
U
M

YOU CAN’T MEASURE COMPETITORS
YOU CAN’T MEASURE
PRE-PRODUCTION SITES
DIVING DEEP INTO
PERFORMANCE ANALYSIS
CAN BE TRICKY

HOW DO YOU COMPARE
TO YOUR COMPETITORS?
HOW DOES THE NEWEST
VERSION OF YOUR SITE
COMPARE TO PREVIOUS VERSIONS?
HOW WELL ARE YOU STICKING
TO YOUR PERFORMANCE BUDGET?

https://developers.google.com/speed/pagespeed/insights/
SPT

http://www.webpagetest.org/
SPT

https://github.com/tkadlec/grunt-perfbudget
SPT

http://calendar.perfplanet.com/2014/driving-webpagetest-from-a-google-docs-spreadsheet/
SPT

THERE IS ONE
THING TO MENTION
THE PUBLIC WEBPAGETEST
API IS LIMITED

http://calendar.perfplanet.com/2014/free-webpagetest-api-keys/

$ sitespeed.io -u http://www.smashingmagazine.com -b firefox --budget budget.json
SPT

SPT
http://www.peterhedenskog.com/blog/2015/04/open-source-performance-dashboard/

https://github.com/stefanjudis/grunt-phantomas
SPT

THERE ARE TONS OF
RESOURCES OUT THERE
AND IT IS HARD TO KEEP 
TRACK OF ALL OF THEM

WE ARE EXCITED
ABOUT YOUR
CONTRIBUTIONS.

GO STEP BY STEP
START MONITORING
IMPROVE

DON’T RELY ON WHAT
YOU THINK YOU KNOW. 
PROVE IT.
“
“
@benschwarz
@stefanjudis
&
SHARE IT.
SHOW IT.

THANKS.
QUESTIONS?
http://bit.ly/staying-in-the-fast-lane

Staying in the fast lane - tools to keep your site speedy and light

Recommended

Recommended

More Related Content

What's hot

What's hot (19)

Viewers also liked

Viewers also liked (20)

Similar to Staying in the fast lane - tools to keep your site speedy and light

Similar to Staying in the fast lane - tools to keep your site speedy and light (20)

Recently uploaded

Recently uploaded (20)

Staying in the fast lane - tools to keep your site speedy and light