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

1. Nobody Wants
a Slow Website
September 12, 2015

2. Sang-Min Yoon
Front End Engineer

3. Nobody likes
anything that is Slow

4. Credit: http://www.inklingsnews.com/c/2010/03/30/dmv-delaying-my-voyage-bureaucracy-in-the-department-of-motor-vehicles-2/

5. Credit: http://www.dawgshed.com/threads/you-need-to-stop-by-the-dmv-get-in-line-with-the-millions-of-illegals.137874/

6. Credit: http://www.etagsdirect.com/blog/goodbye-florida-dmvs-hello-tax-collector/

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

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

12. Same for Websites

13. Nobody wants to visit
a slow website

14. “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/

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

16. “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/

17. We know all this but…

19. The average webpage is over 2mb
Source: http://www.soasta.com/blog/page-bloat-average-web-page-2-mb/

20. Source: http://www.soasta.com/blog/page-bloat-average-web-page-2-mb/

21. Source: https://css-tricks.com/new-poll-on-performance-culture/

22. Performance is especially
important because….

23. Credit: www.flickr.com/photos/lukew

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

25. About 20% of Americans depend on
smartphones almost exclusively for internet
access…
and out of those, 30% frequently reach
their Max Monthly Data Allowance

26. My Experiences…

30. Measuring Performance

31. WebPageTest
http://www.webpagetest.org/

32. WebPageTest
http://www.webpagetest.org/

33. PageSpeed Insights
https://developers.google.com/speed/pagespeed/insights/

34. Chrome DevTools

35. Minimize Requests
Optimize Requests
Reduce Size

36. Minimize Request

37. Provide only the goods
that the users need

38. “The fastest HTTP request is the one not made.”
-Steve Sounders

40. Concatenate
Combine Files

41. Video Concatenate
JavaScript

42. Video Concatenate
CSS… Just use a preprocessor (Sass)

43. Use code instead of graphics/images

44. Use Icon Fonts or SVGs

45. Optimize Requests

46. Caching

47. Some hosting companies
automatically does this for you

48. W3 Total Cache
https://wordpress.org/plugins/w3-total-cache/

49. WP Super Cache
https://wordpress.org/plugins/wp-super-cache/

50. Gzip
Turn on HTTP Compression

51. Check GZIP Compression
http://checkgzipcompression.com/

52. Manually via .htaccess
Source: https://css-tricks.com/snippets/htaccess/active-gzip-compression/

53. W3 Total Cache

54. WP Super Cache

55. Some hosting companies
automatically does this for you

56. Reduce Size

57. Minify

58. Video Concatenate
Minifying CSS

59. Video Concatenate
Minifying JavaScript

60. WordPress Plugins
• Better WordPress Minify
https://wordpress.org/plugins/bwp-minify/
• MinQueue
https://wordpress.org/plugins/minqueue/

61. Images

62. Source: http://www.soasta.com/blog/page-bloat-average-web-page-2-mb/

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

65. Resize
Optimize
Responsive Images

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

68. Optimize (losslessly) Images
• Apps
• GruntTasks
• WordPress Plugins

69. ImageOptim

70. 175 KB

71. 145 KB

72. contrib-imagemin Grunt task
https://github.com/gruntjs/grunt-contrib-imagemin

74. WordPress Plugins
• Kraken Image Optimizer
https://wordpress.org/plugins/kraken-image-
optimizer/
• EWWW Image Optimizer
https://wordpress.org/plugins/ewww-image-
optimizer/

75. Responsive Images

76. RICG Responsive Images
https://wordpress.org/plugins/ricg-responsive-images/

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

80. There are more…
Other techniques that I’m currently looking into:
• Critical CSS
• Improving render times (like animation and fonts)
• Prefetching, Preloading and Prebrowsing

81. Non-Technical Challenges

82. Source: https://css-tricks.com/new-poll-on-performance-culture/

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

84. Recommendations
• Include Performance during discovery
(competitive analysis)
• Performance budget
(want something new? kill something else)
• Styleguide driven development
• Keep talking about it

85. Thank You
Email: info@SangMinYoon.com
Twitter: @SMY315