STAYING IN THE FAST LANETOOLS TO KEEP YOUR SITE SPEEDY AND LIGHT

@stefanjudis

DOING NERDY STUFF FOR 4 YEARSMOSTLY ECOMMERCENOW ENTERING THE WORLD OF SPA’S

https://github.com/stefanjudis

http://4waisenkinder.de/

USING IT EVERYWHEREAND ALL THE TIME

MOBILE IS A THINGhttps://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 CURRENTLY1GB PER MONTH

DAILY MADNESSIN A FOREIGN COUNTRY

PERFORMANCE IS A HOT TOPIC

NOT ONLY ON MOBILE BUT ESPECIALLYON MOBILE

FIREFOX REDUCED AVERAGE LOAD TIME BY 2.2 SECONDSAND INCREASEDDOWNLOADS BY 15.4%10.28 MILLION ADDITIONALDOWNLOADS PER YEAR

http://blog.mozilla.org/metrics/2010/04/05/firefox-page-load-speed-%E2%80%93-part-ii/

GOOGLE INCREASED PAGE LOAD TIME BY 500 MILLISECONDSGOT 25% FEWER SEARCHES

http://glinden.blogspot.de/2006/11/marissa-mayer-at-web-20.html

THE GUARDIAN SURVEYED 3000 USERSAND THEY RATED SPEEDSECOND 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 BUDGETBECOME FASTSTAY FAST

HOW TOSET A BUDGET

EVERBODYHAS TO BEON BOARD

DEFINE YOUR KPI’SPAGE LOAD TIMEPAGE WEIGHTNUMBER OF REQUESTSFIRST PAINTSPEED INDEXGOOGLE PSI SCOREVISUALLY COMPLETE

SPEED INDEX

YOU KNOW BESTWHAT IS IMPORTANTFOR YOUR USERS

TWITTER KPI:TIME TO FIRST TWEET

CHECK WHAT YOU HAVEDON’T MAKE IT WORSE

MY ANSWER TO HOWFAST IS FAST ENOUGH?

A SPEED INDEXOF UNDER 1000.

“

“

@paul_irish

WHAT HAPPENSIF SOMETHINGDOES NOT FITWITHIN THEBUDGET

OPTIMIZE AN EXISTING FEATURE OR ASSET ON THE PAGE

REMOVE AN EXISTING FEATURE OR ASSET ON THE PAGE

DO NOT ADD THE NEWFEATURE OR ASSET

http://vimeo.com/108328247

HOW TOBECOME FAST

CONCAT MINIFYABOVE THE FOLD UGLIFY COMPRESSSPRITE INLINE

BUILD ALLTHE THINGS

“YAY, WE SAVED 200KBDOING THIS AND THAT!”

“HMM, WE’VE GOT A SUPER SLOW LANDING PAGE THERE.WHEN DID THAT HAPPEN?”

IT’S A NEVER ENDING STORY!

HOW TOSTAY FAST

AUTOMATEMONITORVISUALIZE

REAL USERMEASUREMENT

- RUM -SYNTHETIC PERFORMANCETESTING

vs

http://www.soasta.com/the-performance-beacon/synthetic-real-user-measurement-monitoring-rum/

- RUM -

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

http://www.google.com/analytics/

RUM

RUM

YOU CAN’T MEASURE COMPETITORS

YOU CAN’T MEASUREPRE-PRODUCTION SITESDIVING DEEP INTOPERFORMANCE ANALYSISCAN BE TRICKY

SYNTHETIC PERFORMANCE

TESTING

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

PERFECT FOR

AUTOMATION!

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

SPT

SPT

http://www.webpagetest.org/

SPT

SPT

SPT

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

SPT

SPT

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

SPT

THERE IS ONETHING TO MENTIONTHE PUBLIC WEBPAGETEST

API IS LIMITED

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

http://speedcurve.com

SPT

SPT

https://calibreapp.com/

SPT

SPT

http://www.sitespeed.io/

SPT

SPT

SPT

SPT

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

SPT

SPT

SPT

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

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

SPT

SPT

THERE ARE TONS OFRESOURCES OUT THEREAND IT IS HARD TO KEEP

TRACK OF ALL OF THEM

http://perf-tooling.today/

WE ARE EXCITEDABOUT YOUR CONTRIBUTIONS.

GO STEP BY STEPSTART MONITORING

IMPROVE

DON’T RELY ON WHATYOU THINK YOU KNOW.

PROVE IT.“

“

@benschwarz@stefanjudis

&

SHARE IT.SHOW IT.

THANKS.QUESTIONS?

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