Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Building Faster Websites

4,208 views

Published on

Intro to Web Performance Optimization in Drupal.

Published in: Technology, Design
  • cvb v
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Great refresher on what I usually need to remember to do ;-)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Building Faster Websites

  1. Building Faster Websites
  2. http://www.slideshare.net/mattfarina
  3. Matt Farina (mfer) HP CloudCo-Author of Drupal 7Module Development Core Contributor Over 6.5 Years With Drupal
  4. Company NameCENSORED
  5. “The web is getting fatter, asmuch 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 tohave 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 shopperswill 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. SEOhttp://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. UglifyJShttps://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 Compressionmod_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_expireshttp://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 DAYExpiresActive On 259200 = 3 DAY 604800 = 1 WEEKExpiresByType image/gif A604800 2419200 = 1 MONTHExpiresByType image/png A604800 29030400 = 12 MONTHExpiresByType 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 rememberwhen Facebook took down the Internet?
  34. sync asyncvar 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?

×