Successfully reported this slideshow.

Nobody Wants a Slow Website

1

Share

Loading in …3
×
1 of 85
1 of 85

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Related Audiobooks

Free with a 14 day trial from Scribd

See all

Nobody Wants a Slow Website

  1. 1. Nobody Wants 
 a Slow Website 
 September 12, 2015
  2. 2. Sang-Min Yoon Front End Engineer
  3. 3. Nobody likes 
 anything that is Slow
  4. 4. Credit: http://www.inklingsnews.com/c/2010/03/30/dmv-delaying-my-voyage-bureaucracy-in-the-department-of-motor-vehicles-2/
  5. 5. Credit: http://www.dawgshed.com/threads/you-need-to-stop-by-the-dmv-get-in-line-with-the-millions-of-illegals.137874/
  6. 6. Credit: http://www.etagsdirect.com/blog/goodbye-florida-dmvs-hello-tax-collector/
  7. 7. Credit: http://www.elkharttruth.com/news/michigan/2015/07/25/DMV-ends-remote-check-in-but-is-it-to-blame-for-long-waits.html
  8. 8. Credit: http://www.northernvatimes.com/gainesville/news/i-95-express-lanes-open &
 https://www.washingtonpost.com/local/trafficandcommuting/virginias-hot-lanes-could-be-the-future-of-us-transportation/2015/01/20/ feaccfc2-973f-11e4-927a-4fa2638cd1b0_story.html
  9. 9. Same for Websites
  10. 10. Nobody wants to visit 
 a slow website
  11. 11. “1 in 4 visitors will abandon a website if it takes longer than 4 seconds to load.” Source: http://loadstorm.com/2014/04/infographic-web-performance-impacts-conversion-rates/
  12. 12. “1 second delay in page load time could cost Amazon $1.6 billion in annual sales” Source: http://www.fastcompany.com/1825005/how-one-second-could-cost-amazon-16-billion-sales
  13. 13. “Obama’s 2011 fundraising campaign raised an additional $34 million when the Obama for America website shrunk page load time from 
 5 seconds to 2 seconds” Source: http://kylerush.net/blog/meet-the-obama-campaigns-250-million-fundraising-platform/
  14. 14. We know all this but…
  15. 15. The average webpage is over 2mb Source: http://www.soasta.com/blog/page-bloat-average-web-page-2-mb/
  16. 16. Source: http://www.soasta.com/blog/page-bloat-average-web-page-2-mb/
  17. 17. Source: https://css-tricks.com/new-poll-on-performance-culture/
  18. 18. Performance is especially important because….
  19. 19. Credit: www.flickr.com/photos/lukew
  20. 20. About 75% of mobile users consider
 mobile slower than desktop About 40% of mobile users are unhappy 
 with their experience Source: https://content.akamai.com/PG1526-PerformanceMatters.html
  21. 21. About 20% of Americans depend on smartphones almost exclusively for internet access… and out of those, 30% frequently reach their Max Monthly Data Allowance
  22. 22. My Experiences…
  23. 23. Measuring Performance
  24. 24. WebPageTest http://www.webpagetest.org/
  25. 25. WebPageTest http://www.webpagetest.org/
  26. 26. PageSpeed Insights https://developers.google.com/speed/pagespeed/insights/
  27. 27. Chrome DevTools
  28. 28. Minimize Requests 
 Optimize Requests 
 Reduce Size
  29. 29. Minimize Request
  30. 30. Provide only the goods 
 that the users need
  31. 31. “The fastest HTTP request is the one not made.” -Steve Sounders
  32. 32. Concatenate Combine Files
  33. 33. Video Concatenate JavaScript
  34. 34. Video Concatenate CSS… Just use a preprocessor (Sass)
  35. 35. Use code instead of graphics/images
  36. 36. Use Icon Fonts or SVGs
  37. 37. Optimize Requests
  38. 38. Caching
  39. 39. Some hosting companies automatically does this for you
  40. 40. W3 Total Cache https://wordpress.org/plugins/w3-total-cache/
  41. 41. WP Super Cache https://wordpress.org/plugins/wp-super-cache/
  42. 42. Gzip Turn on HTTP Compression
  43. 43. Check GZIP Compression http://checkgzipcompression.com/
  44. 44. Manually via .htaccess Source: https://css-tricks.com/snippets/htaccess/active-gzip-compression/
  45. 45. W3 Total Cache
  46. 46. WP Super Cache
  47. 47. Some hosting companies automatically does this for you
  48. 48. Reduce Size
  49. 49. Minify
  50. 50. Video Concatenate Minifying CSS
  51. 51. Video Concatenate Minifying JavaScript
  52. 52. WordPress Plugins • Better WordPress Minify
 https://wordpress.org/plugins/bwp-minify/ • MinQueue
 https://wordpress.org/plugins/minqueue/
  53. 53. Images
  54. 54. Source: http://www.soasta.com/blog/page-bloat-average-web-page-2-mb/
  55. 55. Average webpage is little over 2mb and 60% is because of Images Source: http://www.soasta.com/blog/page-bloat-average-web-page-2-mb/
  56. 56. Resize
 Optimize 
 Responsive Images
  57. 57. Resize Images • Do not upload raw images on the web • Find the max width of the content area and use that width to resize your images • Resize them in bulk
  58. 58. Optimize (losslessly) Images • Apps • GruntTasks • WordPress Plugins
  59. 59. ImageOptim
  60. 60. 175 KB
  61. 61. 145 KB
  62. 62. contrib-imagemin Grunt task https://github.com/gruntjs/grunt-contrib-imagemin
  63. 63. WordPress Plugins • Kraken Image Optimizer
 https://wordpress.org/plugins/kraken-image- optimizer/ • EWWW Image Optimizer
 https://wordpress.org/plugins/ewww-image- optimizer/
  64. 64. Responsive Images
  65. 65. RICG Responsive Images https://wordpress.org/plugins/ricg-responsive-images/
  66. 66. Recap • Measure Performance • Minimize request (less request, concatenate, and use CSS/ svg/icon fonts instead of graphics) • Optimize request (cache and Gzip) • Reduce size (minify and resize/optimize images) • Automate (use tools like Grunt)
  67. 67. There are more… Other techniques that I’m currently looking into: • Critical CSS • Improving render times (like animation and fonts) • Prefetching, Preloading and Prebrowsing
  68. 68. Non-Technical Challenges
  69. 69. Source: https://css-tricks.com/new-poll-on-performance-culture/
  70. 70. Non-Technical Challenges • Hard to measure (what is considered fast for a project?) • Having a fast website is a given (never on a RFP or SOW) • Getting buy-ins from client • Dealing with “pretty” designs • “Surprises” during development
  71. 71. Recommendations • Include Performance during discovery 
 (competitive analysis) • Performance budget 
 (want something new? kill something else) • Styleguide driven development • Keep talking about it
  72. 72. Thank You Email: info@SangMinYoon.com Twitter: @SMY315

×