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

a Slow Website


September 12, 2015
Sang-Min Yoon
Front End Engineer
Nobody likes 

anything that is Slow
Credit: http://www.inklingsnews.com/c/2010/03/30/dmv-delaying-my-voyage-bureaucracy-in-the-department-of-motor-vehicles-2/
Credit: http://www.dawgshed.com/threads/you-need-to-stop-by-the-dmv-get-in-line-with-the-millions-of-illegals.137874/
Credit: http://www.etagsdirect.com/blog/goodbye-florida-dmvs-hello-tax-collector/
Credit: http://www.elkharttruth.com/news/michigan/2015/07/25/DMV-ends-remote-check-in-but-is-it-to-blame-for-long-waits.ht...
Credit: http://www.northernvatimes.com/gainesville/news/i-95-express-lanes-open &

https://www.washingtonpost.com/local/tr...
Same for Websites
Nobody wants to visit 

a slow website
“1 in 4 visitors will abandon a
website if it takes longer than 4
seconds to load.”
Source: http://loadstorm.com/2014/04/i...
“1 second delay in page load time
could cost Amazon $1.6 billion in
annual sales”
Source: http://www.fastcompany.com/18250...
“Obama’s 2011 fundraising campaign raised an
additional $34 million when the Obama for
America website shrunk page load ti...
We know all this but…
The average webpage is over 2mb
Source: http://www.soasta.com/blog/page-bloat-average-web-page-2-mb/
Source: http://www.soasta.com/blog/page-bloat-average-web-page-2-mb/
Source: https://css-tricks.com/new-poll-on-performance-culture/
Performance is especially
important because….
Credit: www.flickr.com/photos/lukew
About 75% of mobile users consider

mobile slower than desktop
About 40% of mobile users are unhappy 

with their experien...
About 20% of Americans depend on
smartphones almost exclusively for internet
access…
and out of those, 30% frequently reac...
My Experiences…
Measuring Performance
WebPageTest
http://www.webpagetest.org/
WebPageTest
http://www.webpagetest.org/
PageSpeed Insights
https://developers.google.com/speed/pagespeed/insights/
Chrome DevTools
Minimize Requests 

Optimize Requests 

Reduce Size
Minimize Request
Provide only the goods 

that the users need
“The fastest HTTP request is the one not made.”
-Steve Sounders
Concatenate
Combine Files
Video Concatenate
JavaScript
Video Concatenate
CSS… Just use a preprocessor (Sass)
Use code instead of graphics/images
Use Icon Fonts or SVGs
Optimize Requests
Caching
Some hosting companies
automatically does this for you
W3 Total Cache
https://wordpress.org/plugins/w3-total-cache/
WP Super Cache
https://wordpress.org/plugins/wp-super-cache/
Gzip
Turn on HTTP Compression
Check GZIP Compression
http://checkgzipcompression.com/
Manually via .htaccess
Source: https://css-tricks.com/snippets/htaccess/active-gzip-compression/
W3 Total Cache
WP Super Cache
Some hosting companies
automatically does this for you
Reduce Size
Minify
Video Concatenate
Minifying CSS
Video Concatenate
Minifying JavaScript
WordPress Plugins
• Better WordPress Minify

https://wordpress.org/plugins/bwp-minify/
• MinQueue

https://wordpress.org/p...
Images
Source: http://www.soasta.com/blog/page-bloat-average-web-page-2-mb/
Average webpage is little over 2mb
and 60% is because of Images
Source: http://www.soasta.com/blog/page-bloat-average-web-...
Resize

Optimize 

Responsive Images
Resize Images
• Do not upload raw images on the web
• Find the max width of the content area and use
that width to resize ...
Optimize (losslessly) Images
• Apps
• GruntTasks
• WordPress Plugins
ImageOptim
175 KB
145 KB
contrib-imagemin Grunt task
https://github.com/gruntjs/grunt-contrib-imagemin
WordPress Plugins
• Kraken Image Optimizer

https://wordpress.org/plugins/kraken-image-
optimizer/
• EWWW Image Optimizer
...
Responsive Images
RICG Responsive Images
https://wordpress.org/plugins/ricg-responsive-images/
Recap
• Measure Performance
• Minimize request (less request, concatenate, and use CSS/
svg/icon fonts instead of graphics...
There are more…
Other techniques that I’m currently looking into:
• Critical CSS
• Improving render times (like animation ...
Non-Technical Challenges
Source: https://css-tricks.com/new-poll-on-performance-culture/
Non-Technical Challenges
• Hard to measure (what is considered fast for a project?)
• Having a fast website is a given (ne...
Recommendations
• Include Performance during discovery 

(competitive analysis)
• Performance budget 

(want something new...
Thank You
Email: info@SangMinYoon.com
Twitter: @SMY315
Nobody Wants a Slow Website
Nobody Wants a Slow Website
Nobody Wants a Slow Website
Nobody Wants a Slow Website
Nobody Wants a Slow Website
Nobody Wants a Slow Website
Nobody Wants a Slow Website
Nobody Wants a Slow Website
Nobody Wants a Slow Website
Nobody Wants a Slow Website
Nobody Wants a Slow Website
Nobody Wants a Slow Website
Nobody Wants a Slow Website
Upcoming SlideShare
Loading in …5
×

Nobody Wants a Slow Website

2,356 views

Published on

WordCamp Baltimore 2015: https://baltimore.wordcamp.org/2015/speakers/#wcorg-speaker-sang-min-yoon

Published in: Technology
  • Be the first to comment

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

×