The document discusses how websites are getting slower and larger in size, negatively impacting the user experience. It notes that by 2015, mobile internet usage will surpass desktop usage. Users expect fast loading mobile sites. The document provides several techniques to optimize website performance, such as image and code minification, compression, caching, reducing connections and HTTP requests, image sprites, and optimizing for mobile hardware constraints.

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

14. 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

15. Bandwidth and Speed

16. Original 33% Smaller
Smaller Images

17. ImageOptim (mac)
smushit.com

18. Original 24% the Size
Minify JS

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 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>

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. 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);
})();

37. Tools

41. Questions?