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

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.
Same for Websites

10.
Nobody wants to visit
a slow website

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.
“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.
“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.
We know all this but…

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

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

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

18.
Performance is especially
important because….

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

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.
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.
My Experiences…

23.
Measuring Performance

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

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

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

27.
Chrome DevTools

28.
Minimize Requests
Optimize Requests
Reduce Size

29.
Minimize Request

30.
Provide only the goods
that the users need

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

32.
Concatenate
Combine Files

33.
Video Concatenate
JavaScript

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

35.
Use code instead of graphics/images

36.
Use Icon Fonts or SVGs

37.
Optimize Requests

38.
Caching

39.
Some hosting companies
automatically does this for you

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

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

42.
Gzip
Turn on HTTP Compression

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

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

45.
W3 Total Cache

46.
WP Super Cache

47.
Some hosting companies
automatically does this for you

48.
Reduce Size

49.
Minify

50.
Video Concatenate
Minifying CSS

51.
Video Concatenate
Minifying JavaScript

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

53.
Images

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

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.
Resize
Optimize
Responsive Images

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.
Optimize (losslessly) Images
• Apps
• GruntTasks
• WordPress Plugins

59.
ImageOptim

60.
175 KB

61.
145 KB

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

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

64.
Responsive Images

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

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.
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.
Non-Technical Challenges

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

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.
Recommendations
• Include Performance during discovery
(competitive analysis)
• Performance budget
(want something new? kill something else)
• Styleguide driven development
• Keep talking about it

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