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

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

4. https://github.com/stefanjudis

5. http://4waisenkinder.de/

6. USING IT EVERYWHERE
AND ALL THE TIME

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

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

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

10. 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/firefox-page-load-speed-%E2%80%93-part-ii/

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

12. 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

13. PERFORMANCE AFFECTS
YOUR BOTTOM LINE

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

15. HOW TO
SET A BUDGET

16. EVERBODY
HAS TO BE
ON BOARD

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

18. SPEED INDEX

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

20. CHECK WHAT YOU HAVE
DON’T MAKE IT WORSE

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

22. WHAT HAPPENS
IF SOMETHING
DOES NOT FIT
WITHIN THE
BUDGET

23. OPTIMIZE AN EXISTING
FEATURE OR ASSET
ON THE PAGE

24. REMOVE AN EXISTING
FEATURE OR ASSET
ON THE PAGE

25. DO NOT ADD
THE NEW
FEATURE OR ASSET

26. http://vimeo.com/108328247

27. HOW TO
BECOME FAST

28. CONCAT MINIFY
ABOVE THE FOLD
UGLIFY COMPRESS
SPRITE INLINE

30. BUILD ALL
THE THINGS

31. “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!

32. HOW TO
STAY FAST

33. AUTOMATE
MONITOR
VISUALIZE

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

35. - RUM -

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

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

38. R
U
M

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

40. SYNTHETIC
PERFORMANCE
TESTING

41. 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?

42. PERFECT FOR
AUTOMATION!

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

44. SPT

45. http://www.webpagetest.org/
SPT

46. SPT

47. SPT

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

49. SPT

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

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

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

53. http://speedcurve.com
SPT

54. SPT

55. https://calibreapp.com/
SPT

56. SPT

57. http://www.sitespeed.io/
SPT

58. SPT

59. SPT

60. SPT

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

62. SPT

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

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

65. SPT

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

67. http://perf-tooling.today/

68. WE ARE EXCITED
ABOUT YOUR
CONTRIBUTIONS.

69. GO STEP BY STEP
START MONITORING
IMPROVE

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

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