Wednesday, March 21, 12
Mobile                          Faster Mobile Sites                          Presented by Matt FarinaWednesday, March 21, 12
Hi, My name is Matt.You might                          know me as mfer.                          mattfarina.com           ...
Download the slides...         http://www.slideshare.net/mattfarina                          http://speakerdeck.com/u/matt...
http://www.flickr.com/photos/robinhamman/337969896/Wednesday, March 21, 12
Take Aways               1. Why front end performance is important.               2. Where to look for performance issues....
Before We Get Started                 Before we talk about the fun and new stuff                 there’s are some things c...
Why is Front End                          Performance Important?Wednesday, March 21, 12
The HTTP Archive measurement of where                  time spent generating a page happens for                           ...
Front End        Back End                           Front End              Back End                          15%          ...
85% of mobile users expect sites                          to load at least as fast as using a                          des...
57% of online shoppers will wait                          three seconds or less before                          abandoning...
“Yahoo! reported that making                pages just 400 milliseconds                 slower resulted in a traffic       ...
SEO                       Google takes performance into                     account in search engine rankings.            ...
We aren’t just competing over                          user time and attention with                          other website...
Part 1: BandwidthWednesday, March 21, 12
4G will solve our problems, right?                           http://www.flickr.com/photos/eliu500/5332240987/Wednesday, Mar...
According to ITU (UN agency for                          information and communications                          technolog...
“Research done at Google shows                     that an increase from 5Mbps to                     10Mbps results in a ...
TCP connections aren’t great for small                    files (all your non-media assets are small                       ...
If you pay for bandwidth and you                     can use less bandwidth to send                     the same functiona...
Minify Production JavaScript                          • For example, minified drupal.js is 24%                           th...
Quick Note On Legal Issues                          • JavaScript downloaded to the browser                            is a...
Contrib Challenge: If a project in                    contrib is using un-minified                    JavaScript for produc...
Original   41.3% Smaller             Use Lossless compression            on theme and module images.Wednesday, March 21, 12
Compression Tools                     ImageOptim - for mac and what I use                      http://imageoptim.pornel.ne...
Responsive Images                          • Adaptive Image                           http://drupal.org/project/adaptive_i...
Remove Image Styles Metadata                            ImageMagick advanced module has                               an o...
Gzip Everything                          When you send assets to the browser Gzip                           everything. Mo...
Part 2: RTT and                           ConnectionsWednesday, March 21, 12
6        The number of parallel connections to a domain       across all tabs and windows in desktop browsers.Wednesday, M...
Max Connections Per Host                          iOS 5         Android 2.2      Android 2.3       Blackberry             ...
Round-trip Time (RTT)                      Browser                                                         Server         ...
Mobile phone network                latency is 2-10x that of wired                        connections.                    ...
CSS Image Sprites                           http://www.famfamfam.com/lab/icons/silk/Wednesday, March 21, 12
CSS Sprite Tools                           Glue                           http://glue.readthedocs.org/                    ...
Enable CSS and JavaScript                     Aggregation                In an unscientific random poll of DrupalCon attend...
“Adding an Expires header to your components with            a date in the future makes them cacheable, reducing          ...
What about caching and updating?                     So, you’ve updated an image or a sprite                     and you w...
Warning: While desktop            browsers generally have large            caches, mobile browsers            typically ha...
Part 3: Mobile DevicesWednesday, March 21, 12
10x                 JavaScript on mobile devices (high end               ones) takes about 10x as long to execute on      ...
512MB                The amount of RAM in the iPhone 4s and              iPad 2. Mobile devices typically have 1GB or     ...
What Can We Do About It?                          Nothing Fancy with JavaScript                          JS has less perfo...
Let’s Get A Little                             AdvancedWednesday, March 21, 12
Alternatives To Caching                          If there isn’t much space to cache                           where else c...
What Else Can We Compress?                      JavaScript, CSS, and images aren’t the                       only things t...
Delayed JavaScript Evaluation                            All JavaScript included in a page                          needs ...
Update Your Linux Kernel                The Linux 3.3 kernel increases the TCP                initial congestion window to...
Tools and ResourcesWednesday, March 21, 12
Tools and Resources                          Page Speed                          https://developers.google.com/pagespeed/ ...
Chrome Developer ToolsWednesday, March 21, 12
webpagetest.orgWednesday, March 21, 12
Questions?                          http://www.slideshare.net/mattfarina                          http://speakerdeck.com/u...
What did you think?                           Locate this session on the                           DrupalCon Denver websit...
Upcoming SlideShare
Loading in …5
×

Faster mobile sites

2,076 views
1,971 views

Published on

Published in: Technology, Design
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,076
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
28
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Faster mobile sites

  1. 1. Wednesday, March 21, 12
  2. 2. Mobile Faster Mobile Sites Presented by Matt FarinaWednesday, March 21, 12
  3. 3. Hi, My name is Matt.You might know me as mfer. mattfarina.com @mattfarinaWednesday, March 21, 12
  4. 4. Download the slides... http://www.slideshare.net/mattfarina http://speakerdeck.com/u/mattfarinaWednesday, March 21, 12
  5. 5. http://www.flickr.com/photos/robinhamman/337969896/Wednesday, March 21, 12
  6. 6. Take Aways 1. Why front end performance is important. 2. Where to look for performance issues. 3. Resources, tools, and stuff you can use. 4. Some actions you can take on your site.Wednesday, March 21, 12
  7. 7. Before We Get Started Before we talk about the fun and new stuff there’s are some things commonly talked about you should look into: • CDN • Memcache • Varnish • Lots of other cool stuff • APCWednesday, March 21, 12
  8. 8. Why is Front End Performance Important?Wednesday, March 21, 12
  9. 9. The HTTP Archive measurement of where time spent generating a page happens for the top 50K sites. Front End Back End 13% 87% http://www.stevesouders.com/blog/2012/02/10/the-performance-golden-rule/Wednesday, March 21, 12
  10. 10. Front End Back End Front End Back End 15% 3% 85% 97% Desktop Mobile http://www.readwriteweb.com/hack/2011/06/mobile-page-response.phpWednesday, March 21, 12
  11. 11. 85% of mobile users expect sites to load at least as fast as using a desktop or laptop computer. http://www.tealeaf.com/customer-experience-management/resource-center/register.php?doc=mobile-cemWednesday, March 21, 12
  12. 12. 57% of online shoppers will wait three seconds or less before abandoning the site. http://www.akamai.com/html/about/press/releases/2010/press_061410.htmlWednesday, March 21, 12
  13. 13. “Yahoo! reported that making pages just 400 milliseconds slower resulted in a traffic drop of up to 9%.” * Google, Amazon, and others have found similar results. http://www.slideshare.net/stoyan/yslow-20-presentationWednesday, March 21, 12
  14. 14. SEO Google takes performance into account in search engine rankings. http://googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-search-ranking.htmlWednesday, March 21, 12
  15. 15. We aren’t just competing over user time and attention with other websites. We’re also competing against native apps.Wednesday, March 21, 12
  16. 16. Part 1: BandwidthWednesday, March 21, 12
  17. 17. 4G will solve our problems, right? http://www.flickr.com/photos/eliu500/5332240987/Wednesday, March 21, 12
  18. 18. According to ITU (UN agency for information and communications technology) in 2011 we only had 45% of 3g or better coverage worldwide. http://www.itu.int/ITU-D/ict/facts/2011/material/ICTFactsFigures2011.pdfWednesday, March 21, 12
  19. 19. “Research done at Google shows that an increase from 5Mbps to 10Mbps results in a disappointing 5% improvement in page load times. Or put slightly differently, a 10Mbps connection, on average uses only 16% of its capacity.” http://www.igvita.com/2011/10/20/faster-web-vs-tcp-slow-start/Wednesday, March 21, 12
  20. 20. TCP connections aren’t great for small files (all your non-media assets are small files). This is due to TCP slow start. http://www.stevesouders.com/blog/2010/07/13/velocity-tcp-and-the-lower-bound-of-web-performance/Wednesday, March 21, 12
  21. 21. If you pay for bandwidth and you can use less bandwidth to send the same functionality you have a savings at the same usage level.Wednesday, March 21, 12
  22. 22. Minify Production JavaScript • For example, minified drupal.js is 24% the size of the original. • UglifyJS - a great minifier https://github.com/mishoo/UglifyJS • Speedy Module - minified core JS http://drupal.org/project/speedy • Advanced CSS/JS Aggregation (D 6.x) http://drupal.org/project/advaggWednesday, March 21, 12
  23. 23. Quick Note On Legal Issues • JavaScript downloaded to the browser is a form of distribution. • The source (non-minified) must be linked to or publicly available. This could be a link in a comment. • Preserve copyright / attribution comments. Note: I’m not a lawyer and this is not legal advice.Wednesday, March 21, 12
  24. 24. Contrib Challenge: If a project in contrib is using un-minified JavaScript for production file a bug. Remember, patches welcome.Wednesday, March 21, 12
  25. 25. Original 41.3% Smaller Use Lossless compression on theme and module images.Wednesday, March 21, 12
  26. 26. Compression Tools ImageOptim - for mac and what I use http://imageoptim.pornel.net/ SmushIt - a web service owned by Yahoo! http://www.smushit.com/ysmush.it/ RIOT - Recommended to me but never used http://luci.criosweb.ro/riot/Wednesday, March 21, 12
  27. 27. Responsive Images • Adaptive Image http://drupal.org/project/adaptive_image Note: Does not work with CDNs or reverse proxies. • Responsive Images http://drupal.org/project/responsive_images Uses a special field formatter for images. • Adaptive Image Styles http://drupal.org/project/ais Requires alterations to .htaccess and JS.Wednesday, March 21, 12
  28. 28. Remove Image Styles Metadata ImageMagick advanced module has an option to strip out metadata. http://drupal.org/project/imagemagickWednesday, March 21, 12
  29. 29. Gzip Everything When you send assets to the browser Gzip everything. Modern browsers (even IE 6) support accepting Gzip compression. • mod_deflate (for apache) • IIS (build in) • HttpGzipModule (nginx)Wednesday, March 21, 12
  30. 30. Part 2: RTT and ConnectionsWednesday, March 21, 12
  31. 31. 6 The number of parallel connections to a domain across all tabs and windows in desktop browsers.Wednesday, March 21, 12
  32. 32. Max Connections Per Host iOS 5 Android 2.2 Android 2.3 Blackberry 6 4 6 5 • Android 2.2 has a 27.8% Android market share. • Android 2.3 has a 58.6% Android market share. • Android 4.x (ICS) has 1% Android market share.Wednesday, March 21, 12
  33. 33. Round-trip Time (RTT) Browser Server “the length of time it takes for a signal to be sent plus the length of time it takes for an acknowledgment of that signal to be received.” https://en.wikipedia.org/wiki/Round-trip_delay_timeWednesday, March 21, 12
  34. 34. Mobile phone network latency is 2-10x that of wired connections. http://www.slideshare.net/guest22d4179/latency-trumps-allWednesday, March 21, 12
  35. 35. CSS Image Sprites http://www.famfamfam.com/lab/icons/silk/Wednesday, March 21, 12
  36. 36. CSS Sprite Tools Glue http://glue.readthedocs.org/ Compass http://compass-style.org/ Sprite Cow http://www.spritecow.com/ SpritePad http://spritepad.wearekiss.com/Wednesday, March 21, 12
  37. 37. Enable CSS and JavaScript Aggregation In an unscientific random poll of DrupalCon attenders websites these were not enabled half the time. Not the first conference I’ve observed this at.Wednesday, March 21, 12
  38. 38. “Adding an Expires header to your components with a date in the future makes them cacheable, reducing the load time of your pages. Certainly this should be done with images, but thats fairly typical. Go a step further and add it to scripts and stylesheets, too. This wont affect performance the first time users hit your page, but on subsequent page views it could reduce response times by 50% or more.” http://stevesouders.com/hpws/rule-expires.phpWednesday, March 21, 12
  39. 39. What about caching and updating? So, you’ve updated an image or a sprite and you want that to download but your images are set to cache. Solution: Use a custom name for each update. For example append a character you increment or a date. Or, use a query string. This is what Google, Yahoo, and many others do.Wednesday, March 21, 12
  40. 40. Warning: While desktop browsers generally have large caches, mobile browsers typically have a cache only several MB in size.Wednesday, March 21, 12
  41. 41. Part 3: Mobile DevicesWednesday, March 21, 12
  42. 42. 10x JavaScript on mobile devices (high end ones) takes about 10x as long to execute on mobile devices compared to desktop computers.Wednesday, March 21, 12
  43. 43. 512MB The amount of RAM in the iPhone 4s and iPad 2. Mobile devices typically have 1GB or less of RAM. This helps extend battery life.Wednesday, March 21, 12
  44. 44. What Can We Do About It? Nothing Fancy with JavaScript JS has less performance and memory to work with. Simpler DOM A complicated DOM (divitis) uses more system resources. A simpler DOM has less objects in memory. Mobile Optimized Images They use less resources to render, manipulate, and keep in memory.Wednesday, March 21, 12
  45. 45. Let’s Get A Little AdvancedWednesday, March 21, 12
  46. 46. Alternatives To Caching If there isn’t much space to cache where else can we stick assets? Local Storage Google, Bing, and others put assets in local storage. Manifest Appcache Designed for html5 apps these can tell a browser to store assets for long periods.Wednesday, March 21, 12
  47. 47. What Else Can We Compress? JavaScript, CSS, and images aren’t the only things that can be compressed. HTMLCompressor http://code.google.com/p/htmlcompressor/ Minify HTML. In Drupal see hook_page_delivery_callback_alter and drupal_deliver_html_page. mod_pagespeed Apache module that automatically optimizes web pages and resources on them.Wednesday, March 21, 12
  48. 48. Delayed JavaScript Evaluation All JavaScript included in a page needs to parsed and evaluated before it becomes available. jQuery on iPhone 4 takes 320ms to parse and evaluate. Lazy Evaluation waits until JS is needed to evaluate it.Wednesday, March 21, 12
  49. 49. Update Your Linux Kernel The Linux 3.3 kernel increases the TCP initial congestion window to 10. This can cut down the number of round trips to get data. Google and Microsoft already do this. http://samsaffron.com/archive/2012/03/01/why-upgrading-your-linux-kernel-will-make-your-customers-much-happierWednesday, March 21, 12
  50. 50. Tools and ResourcesWednesday, March 21, 12
  51. 51. Tools and Resources Page Speed https://developers.google.com/pagespeed/ Analyzes a website and generates suggestions. A website or browser plugin. Documentation details on suggestions. Mobile Perf Bookmarklet http://stevesouders.com/mobileperf/mobileperfbkm.php Tools to analyze on mobile and store data to analyze on desktop. Performance Articles http://code.google.com/speed/articles/ https://github.com/h5bp/mobile-boilerplate/wiki/Blog-and-Articles Articles about technologies related to performance.Wednesday, March 21, 12
  52. 52. Chrome Developer ToolsWednesday, March 21, 12
  53. 53. webpagetest.orgWednesday, March 21, 12
  54. 54. Questions? http://www.slideshare.net/mattfarina http://speakerdeck.com/u/mattfarina Twitter: @mattfarina Blog: engineeredweb.comWednesday, March 21, 12
  55. 55. What did you think? Locate this session on the DrupalCon Denver website http://denver2012.drupal.org/program Click the “Take the Survey” link. Thank You!Wednesday, March 21, 12

×