Building Faster Websites

An introduction into components of Web Performance Optimization commonly looked over. This presentation focuses on Front End Performance. It was given at DrupalCamp MI on December 3, 2011.

Transcript

1. Building Faster Websites
2. http://www.slideshare.net/mattfarina
3. Matt Farina HP Cloud Co-Author of Drupal 7 Module Development Core Contributor Over 6.5 Years With Drupal (mfer)
4. CENSORED Company Name
5. “The web is getting fatter, as much as 25 percent fatter in the last year alone.” http://www.webmonkey.com/2011/11/latest-stats-say-were-building-a-fatter-slower-web/
6. “size optimization seems to have gone out the window.” http://www.webmonkey.com/2011/11/latest-stats-say-were-building-a-fatter-slower-web/
7. Why Does It Matter?
8. By 2015 Mobile will pass Desktop for Internet Usage http://mashable.com/2010/04/13/mobile-web-stats/
9. “57 percent of online shoppers will wait three seconds or less before abandoning the site” http://www.akamai.com/html/about/press/releases/2010/press_061410.html
10. “85% of mobile users expect sites to load as fast or faster than sites on the desktop.” http://www.strangeloopnetworks.com/resources/infographics/web-performance-and-user-expectations/mobile-device-users-expect-sites-to-load-fast/
11. “Yahoo! reported that making pages just 400 milliseconds slower resulted in a traffic drop of up to 9%.” http://www.slideshare.net/stoyan/yslow-20-presentation
12. SEO http://googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-search-ranking.html
14. 15% 85% Front End Back End 3% 97% Front End Back End Desktop Mobile http://www.readwriteweb.com/hack/2011/06/mobile-page-response.php
15. Bandwidth and Speed
16. Smaller Images Original 33% Smaller
17. ImageOptim (mac) smushit.com
18. Minify JS Original 24% the Size
19. UglifyJS https://github.com/mishoo/UglifyJS/
20. Legalities of Minifying GPL • I’m NO Lawyer! This is not legal advice. • JS downloaded to the browser is a form of distribution. • The source (non-minified) must be linked to or available. This could be a link in a comment in a minifed file. • Preserve copyright / attribution comments.
21. GZIP Compression mod_deflate - http://httpd.apache.org/docs/2.2/mod/ mod_deflate.html
22. RTT and Connections
24. 6 Connections Per Domain
25. IE 6/7 Two Per Domain
26. iOS 5 Android 2.2 Android 2.3 Blackberry 6 4 6 5 Max Connections per Host
27. Image Sprites
28. spritecow.com
29. JS and CSS Aggregation }
30. Expires Header
31. mod_expires http://httpd.apache.org/docs/2.2/mod/mod_expires.html
32. # Begin Cache Control <IfModule mod_expires.c> ExpiresActive On ExpiresByType image/gif A604800 ExpiresByType image/png A604800 ExpiresByType image/jpeg A604800 </IfModule> 300 = 5 Minute 3600 = 1 Hour 86400 = 1 DAY 259200 = 3 DAY 604800 = 1 WEEK 2419200 = 1 MONTH 29030400 = 12 MONTH
33. 10x
34. Mobile Hardware • Maybe a 1 Ghz mobile processor • 500 Mb - 1 Gb RAM (shared) • 7 - 90 Million Triangles per Second Drawing
35. Do you remember when Facebook took down the Internet?
36. var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-XXXXX-X']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; ga.setAttribute('async', 'true'); document.documentElement.firstChild.appendChild(ga); })(); async var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http:// www.");document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/ javascript'%3E%3C/script%3E")); try{ var pageTracker = _gat._getTracker("UA-1362581-1");pageTracker._trackP ageview(); } catch(err) {} sync
37. Tools
41. Questions?