Faster Mobile Sites

Transcript

1. Wednesday, March 21, 12
   

   View Slide

2. Mobile
   Faster Mobile Sites
   Presented by Matt Farina
   Wednesday, March 21, 12
   

   View Slide

3. Hi, My name is Matt. You might
   know me as mfer.
   mattfarina.com
   @mattfarina
   Wednesday, March 21, 12
   

   View Slide

4. http://www.slideshare.net/mattfarina
   http://speakerdeck.com/u/mattfarina
   Download the slides...
   Wednesday, March 21, 12
   

   View Slide

5. http://www.flickr.com/photos/robinhamman/337969896/
   Wednesday, March 21, 12
   

   View Slide

6. 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.
   Take Aways
   Wednesday, March 21, 12
   

   View Slide

7. Before we talk about the fun and new stuff
   there’s are some things commonly talked
   about you should look into:
   • CDN
   • Varnish
   • APC
   Before We Get Started
   • Memcache
   • Lots of other cool stuff
   Wednesday, March 21, 12
   

   View Slide

8. Why is Front End
   Performance Important?
   Wednesday, March 21, 12
   

   View Slide

9. http://www.stevesouders.com/blog/2012/02/10/the-performance-golden-rule/
   13%
   87%
   Front End Back End
   The HTTP Archive measurement of where
   time spent generating a page happens for
   the top 50K sites.
   Wednesday, March 21, 12
   

   View Slide

10. 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
    Wednesday, March 21, 12
    

    View Slide

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-cem
    Wednesday, March 21, 12
    

    View Slide

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.html
    Wednesday, March 21, 12
    

    View Slide

13. “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
    * Google, Amazon, and others have found
    similar results.
    Wednesday, March 21, 12
    

    View Slide

14. SEO
    Google takes performance into
    account in search engine rankings.
    http://googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-search-ranking.html
    Wednesday, March 21, 12
    

    View Slide

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
    

    View Slide

16. Part 1: Bandwidth
    Wednesday, March 21, 12
    

    View Slide

17. http://www.flickr.com/photos/eliu500/5332240987/
    4G will solve our problems, right?
    Wednesday, March 21, 12
    

    View Slide

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.pdf
    Wednesday, March 21, 12
    

    View Slide

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
    

    View Slide

20. http://www.stevesouders.com/blog/2010/07/13/velocity-tcp-and-the-lower-bound-of-web-performance/
    TCP connections aren’t great for small
    files (all your non-media assets are small
    files). This is due to TCP slow start.
    Wednesday, March 21, 12
    

    View Slide

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
    

    View Slide

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/advagg
    Wednesday, March 21, 12
    

    View Slide

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
    

    View Slide

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
    

    View Slide

25. Original 41.3% Smaller
    Use Lossless compression
    on theme and module images.
    Wednesday, March 21, 12
    

    View Slide

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
    

    View Slide

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
    

    View Slide

28. Remove Image Styles Metadata
    ImageMagick advanced module has
    an option to strip out metadata.
    http://drupal.org/project/imagemagick
    Wednesday, March 21, 12
    

    View Slide

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
    

    View Slide

30. Part 2: RTT and
    Connections
    Wednesday, March 21, 12
    

    View Slide

31. 6
    The number of parallel connections to a domain
    across all tabs and windows in desktop browsers.
    Wednesday, March 21, 12
    

    View Slide

32. 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.
    Max Connections Per Host
    Wednesday, March 21, 12
    

    View Slide

33. Browser Server
    Round-trip Time (RTT)
    “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_time
    Wednesday, March 21, 12
    

    View Slide

34. http://www.slideshare.net/guest22d4179/latency-trumps-all
    Mobile phone network
    latency is 2-10x that of wired
    connections.
    Wednesday, March 21, 12
    

    View Slide

35. CSS Image Sprites
    http://www.famfamfam.com/lab/icons/silk/
    Wednesday, March 21, 12
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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 that's fairly typical. Go a step
    further and add it to scripts and stylesheets, too. This
    won't 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.php
    Wednesday, March 21, 12
    

    View Slide

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
    

    View Slide

40. Warning: While desktop
    browsers generally have large
    caches, mobile browsers
    typically have a cache only
    several MB in size.
    Wednesday, March 21, 12
    

    View Slide

41. Part 3: Mobile Devices
    Wednesday, March 21, 12
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

45. Let’s Get A Little
    Advanced
    Wednesday, March 21, 12
    

    View Slide

46. Alternatives To Caching
    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.
    If there isn’t much space to cache
    where else can we stick assets?
    Wednesday, March 21, 12
    

    View Slide

47. What Else Can We Compress?
    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.
    JavaScript, CSS, and images aren’t the
    only things that can be compressed.
    Wednesday, March 21, 12
    

    View Slide

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
    

    View Slide

49. Update Your Linux Kernel
    http://samsaffron.com/archive/2012/03/01/why-upgrading-your-linux-kernel-will-make-your-customers-much-happier
    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.
    Wednesday, March 21, 12
    

    View Slide

50. Tools and Resources
    Wednesday, March 21, 12
    

    View Slide

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
    

    View Slide

52. Chrome Developer Tools
    Wednesday, March 21, 12
    

    View Slide

53. webpagetest.org
    Wednesday, March 21, 12
    

    View Slide

54. Questions?
    Twitter: @mattfarina
    Blog: engineeredweb.com
    http://www.slideshare.net/mattfarina
    http://speakerdeck.com/u/mattfarina
    Wednesday, March 21, 12
    

    View Slide

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
    

    View Slide