Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

1,671 views

Published on

Talk including tips and tricks on how to bring up a performance culture showing of various tools to monitor performance related metrics.

Published in: Technology
  • Be the first to comment

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

  1. 1. STAYING IN THE FAST LANE TOOLS TO KEEP YOUR SITE SPEEDY AND LIGHT @stefanjudis
  2. 2. DOING NERDY STUFF FOR 4 YEARS MOSTLY ECOMMERCE NOW ENTERING THE WORLD OF SPA’S
  3. 3. https://github.com/stefanjudis
  4. 4. http://4waisenkinder.de/
  5. 5. USING IT EVERYWHERE
 AND ALL THE TIME
  6. 6. 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
  7. 7. DATA LIMIT IN GERMANY CURRENTLY 1GB PER MONTH DAILY MADNESS IN A FOREIGN
 COUNTRY
  8. 8. PERFORMANCE 
 IS A HOT TOPIC NOT ONLY ON MOBILE
 BUT ESPECIALLY ON MOBILE
  9. 9. 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/
  10. 10. GOOGLE INCREASED PAGE LOAD TIME BY 500 MILLISECONDS GOT 25% FEWER SEARCHES http://glinden.blogspot.de/2006/11/marissa-mayer-at-web-20.html
  11. 11. 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
  12. 12. PERFORMANCE AFFECTS
 YOUR BOTTOM LINE
  13. 13. BUILD UP A PERFORMANCE CULTURE SET A BUDGET BECOME FAST STAY FAST
  14. 14. HOW TO SET A BUDGET
  15. 15. EVERBODY HAS TO BE ON BOARD
  16. 16. DEFINE YOUR KPI’S PAGE LOAD TIME PAGE WEIGHT NUMBER OF REQUESTS
 FIRST PAINT SPEED INDEX GOOGLE PSI SCORE VISUALLY COMPLETE
  17. 17. SPEED INDEX
  18. 18. YOU KNOW BEST WHAT IS IMPORTANT
 FOR YOUR USERS TWITTER KPI: TIME TO FIRST TWEET
  19. 19. CHECK WHAT YOU HAVE DON’T MAKE IT WORSE
  20. 20. MY ANSWER TO HOW FAST IS FAST ENOUGH? A SPEED INDEX OF UNDER 1000. “ “ @paul_irish
  21. 21. WHAT HAPPENS IF SOMETHING DOES NOT FIT WITHIN THE BUDGET
  22. 22. OPTIMIZE AN EXISTING FEATURE OR ASSET ON THE PAGE
  23. 23. REMOVE AN EXISTING FEATURE OR ASSET ON THE PAGE
  24. 24. DO NOT ADD THE NEW FEATURE OR ASSET
  25. 25. http://vimeo.com/108328247
  26. 26. HOW TO BECOME FAST
  27. 27. CONCAT MINIFY ABOVE THE FOLD
 UGLIFY COMPRESS SPRITE INLINE
  28. 28. BUILD ALL THE THINGS
  29. 29. “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!
  30. 30. HOW TO STAY FAST
  31. 31. AUTOMATE MONITOR VISUALIZE
  32. 32. REAL USER MEASUREMENT - RUM - SYNTHETIC PERFORMANCE TESTING vs http://www.soasta.com/the-performance-beacon/synthetic-real-user-measurement-monitoring-rum/
  33. 33. - RUM -
  34. 34. WHAT ARE YOUR USERS’ ENVIRONMENTS? HOW DO USERS MOVE THROUGH YOUR SITE? WHAT IMPACT DOES PERFORMANCE HAVE ON YOUR ACTUAL BUSINESS?
  35. 35. http://www.google.com/analytics/ R U M
  36. 36. R U M
  37. 37. YOU CAN’T MEASURE COMPETITORS YOU CAN’T MEASURE PRE-PRODUCTION SITES DIVING DEEP INTO PERFORMANCE ANALYSIS CAN BE TRICKY
  38. 38. SYNTHETIC PERFORMANCE TESTING
  39. 39. 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?
  40. 40. PERFECT FOR
 AUTOMATION!
  41. 41. https://developers.google.com/speed/pagespeed/insights/ SPT
  42. 42. SPT
  43. 43. http://www.webpagetest.org/ SPT
  44. 44. SPT
  45. 45. SPT
  46. 46. https://github.com/tkadlec/grunt-perfbudget SPT
  47. 47. SPT
  48. 48. http://calendar.perfplanet.com/2014/driving-webpagetest-from-a-google-docs-spreadsheet/ SPT
  49. 49. THERE IS ONE THING TO MENTION THE PUBLIC WEBPAGETEST API IS LIMITED
  50. 50. http://calendar.perfplanet.com/2014/free-webpagetest-api-keys/
  51. 51. http://speedcurve.com SPT
  52. 52. SPT
  53. 53. https://calibreapp.com/ SPT
  54. 54. SPT
  55. 55. http://www.sitespeed.io/ SPT
  56. 56. SPT
  57. 57. SPT
  58. 58. SPT
  59. 59. $ sitespeed.io -u http://www.smashingmagazine.com -b firefox --budget budget.json SPT
  60. 60. SPT
  61. 61. SPT http://www.peterhedenskog.com/blog/2015/04/open-source-performance-dashboard/
  62. 62. https://github.com/stefanjudis/grunt-phantomas SPT
  63. 63. SPT
  64. 64. THERE ARE TONS OF RESOURCES OUT THERE AND IT IS HARD TO KEEP
 TRACK OF ALL OF THEM
  65. 65. http://perf-tooling.today/
  66. 66. WE ARE EXCITED ABOUT YOUR CONTRIBUTIONS.
  67. 67. GO STEP BY STEP START MONITORING IMPROVE
  68. 68. DON’T RELY ON WHAT YOU THINK YOU KNOW.
 PROVE IT. “ “ @benschwarz @stefanjudis & SHARE IT. SHOW IT.
  69. 69. THANKS. QUESTIONS? http://bit.ly/staying-in-the-fast-lane

×