Building Faster Websites

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

13. None

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

23. None

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

38. None
39. None
40. None

41. Questions?