Successfully reported this slideshow.
Your SlideShare is downloading. ×

Building Faster Websites

More Related Content

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Building Faster Websites

  1. Building Faster Websites
  2. http://www.slideshare.net/mattfarina
  3. Matt Farina (mfer) HP Cloud Co-Author of Drupal 7 Module Development Core Contributor Over 6.5 Years With Drupal
  4. Company Name CENSORED
  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. Front End Back End Front End Back End 15% 3% 85% 97% Desktop Mobile http://www.readwriteweb.com/hack/2011/06/mobile-page-response.php
  14. Bandwidth and Speed
  15. Original 33% Smaller Smaller Images
  16. ImageOptim (mac) smushit.com
  17. Original 24% the Size Minify JS
  18. UglifyJS https://github.com/mishoo/UglifyJS/
  19. 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.
  20. GZIP Compression mod_deflate - http://httpd.apache.org/docs/2.2/mod/ mod_deflate.html
  21. RTT and Connections
  22. 6 Connections Per Domain
  23. IE 6/7 Two Per Domain
  24. iOS 5 Android 2.2 Android 2.3 Blackberry 6 4 6 5 Max Connections per Host
  25. Image Sprites
  26. spritecow.com
  27. JS and CSS Aggregation }
  28. Expires Header
  29. mod_expires http://httpd.apache.org/docs/2.2/mod/mod_expires.html
  30. # Begin Cache Control 300 = 5 Minute 3600 = 1 Hour <IfModule mod_expires.c> 86400 = 1 DAY ExpiresActive On 259200 = 3 DAY 604800 = 1 WEEK ExpiresByType image/gif A604800 2419200 = 1 MONTH ExpiresByType image/png A604800 29030400 = 12 MONTH ExpiresByType image/jpeg A604800 </IfModule>
  31. 10x
  32. Mobile Hardware • Maybe a 1 Ghz mobile processor • 500 Mb - 1 Gb RAM (shared) • 7 - 90 Million Triangles per Second Drawing
  33. Do you remember when Facebook took down the Internet?
  34. sync async var gaJsHost = (("https:" == var _gaq = _gaq || []; document.location.protocol) ? "https://ssl." : "http:// _gaq.push(['_setAccount', 'UA-XXXXX-X']); www.");document.write(unescape("%3Cscript src='" + _gaq.push(['_trackPageview']); gaJsHost + "google-analytics.com/ga.js' type='text/ javascript'%3E%3C/script%3E")); (function() { var ga = document.createElement('script'); try{ ga.src = ('https:' == document.location.protocol ? var pageTracker = 'https://ssl' : 'http://www') + _gat._getTracker("UA-1362581-1");pageTracker._trackP '.google-analytics.com/ga.js'; ageview(); ga.setAttribute('async', 'true'); } catch(err) {} document.documentElement.firstChild.appendChild(ga); })();
  35. Tools
  36. Questions?

Editor's Notes

  • \n
  • \n
  • \n
  • \n
  • Bigger isn&amp;#x2019;t bad, is it?\nBroadband is going everywhere, right?\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Today I&amp;#x2019;m going to give a crash course. I&amp;#x2019;m going to break it down by technical area.\n
  • \n
  • \n
  • 3G (which is everywhere) ... 384 kbps is 3G... and common.\n
  • Images and lossless compression\n
  • These are better than Photoshop export for mobile and web.\n
  • \n
  • \n
  • \n
  • \n
  • Browsers only have 6 connections to a single host at same time.\nNot efficient with managing connections.\nMobile networks are high latency.\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • I looked at your sites. There were enough that didn&amp;#x2019;t use aggregation I feel I need to point this out.\n
  • Notice the sprite w/ ending\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

×