Faster mobile sites

Wednesday, March 21, 12

Mobile

Faster Mobile SitesPresented by Matt Farina


Hi, My name is Matt. You might know me as mfer. mattfarina.com@mattfarina


http://www.slideshare.net/mattfarinahttp://speakerdeck.com/u/mattfarina

Download the slides...


http://www.slideshare.net/mattfarina




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

http://www.flickr.com/photos/robinhamman/337969896/

http://www.flickr.com/photos/robinhamman/337969896/

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


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


Why is Front EndPerformance Important?


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.




15%

85%

Front End Back End

3%

97%

Front End Back End

Desktop Mobile

http://www.readwriteweb.com/hack/2011/06/mobile-page-response.phpWednesday, March 21, 12

http://www.akamai.com/html/about/press/releases/2010/press_061410.html


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

http://www.slideshare.net/Gomez_Inc/gomez-mobile-web-experience-survey-why-the-mobile-web-is-disappointing-end-users

http://www.slideshare.net/Gomez_Inc/gomez-mobile-web-experience-survey-why-the-mobile-web-is-disappointing-end-users

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



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




SEOGoogle 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



We aren’t just competing over user time and attention with other websites. We’re also competing against native apps.


Part 1: Bandwidth


http://www.flickr.com/photos/eliu500/5332240987/

4G will solve our problems, right?




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



“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

http://www.igvita.com/2011/10/20/faster-web-vs-tcp-slow-start/

http://www.igvita.com/2011/10/20/faster-web-vs-tcp-slow-start/

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.




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.


Minify Production JavaScript

• For example, minified drupal.js is 24% the size of the original.

• UglifyJS - a great minifierhttps://github.com/mishoo/UglifyJS

• Speedy Module - minified core JShttp://drupal.org/project/speedy

• Advanced CSS/JS Aggregation (D 6.x)http://drupal.org/project/advagg


https://github.com/mishoo/UglifyJS

https://github.com/mishoo/UglifyJS

http://learnboost.github.com/stylus/

http://learnboost.github.com/stylus/

http://drupal.org/project/advagg

http://drupal.org/project/advagg

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.


Contrib Challenge: If a project in contrib is using un-minified JavaScript for production file a bug. Remember, patches welcome.


Original 41.3% Smaller

Use Lossless compressionon theme and module images.


Compression Tools

ImageOptim - for mac and what I usehttp://imageoptim.pornel.net/

SmushIt - a web service owned by Yahoo!http://www.smushit.com/ysmush.it/

RIOT - Recommended to me but never usedhttp://luci.criosweb.ro/riot/


http://imageoptim.pornel.net/

http://imageoptim.pornel.net/

http://www.smushit.com/ysmush.it/

http://www.smushit.com/ysmush.it/

http://luci.criosweb.ro/riot/

http://luci.criosweb.ro/riot/

Responsive Images

• Adaptive Imagehttp://drupal.org/project/adaptive_imageNote: Does not work with CDNs or reverse proxies.

• Responsive Imageshttp://drupal.org/project/responsive_imagesUses a special field formatter for images.

• Adaptive Image Styleshttp://drupal.org/project/aisRequires alterations to .htaccess and JS.


http://drupal.org/project/adaptive_image

http://drupal.org/project/adaptive_image

http://drupal.org/project/responsive_images

http://drupal.org/project/responsive_images

http://drupal.org/project/ais

http://drupal.org/project/ais

Remove Image Styles Metadata

ImageMagick advanced module has an option to strip out metadata.

http://drupal.org/project/imagemagick




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)


Part 2: RTT and Connections


6The number of parallel connections to a domain

across all tabs and windows in desktop browsers.


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


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

https://en.wikipedia.org/wiki/Round-trip_delay_time

https://en.wikipedia.org/wiki/Round-trip_delay_time

http://www.slideshare.net/guest22d4179/latency-trumps-all

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

http://www.famfamfam.com/lab/icons/silk/

http://www.famfamfam.com/lab/icons/silk/

CSS Sprite ToolsGluehttp://glue.readthedocs.org/

Compasshttp://compass-style.org/

Sprite Cowhttp://www.spritecow.com/

SpritePadhttp://spritepad.wearekiss.com/


http://glue.readthedocs.org/en/latest/index.html

http://glue.readthedocs.org/en/latest/index.html

http://compass-style.org/

http://compass-style.org/

http://www.spritecow.com/

http://www.spritecow.com/

http://spritepad.wearekiss.com/

http://spritepad.wearekiss.com/

Enable CSS and JavaScriptAggregation

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.


“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.phpWednesday, March 21, 12

http://stevesouders.com/hpws/rule-expires.php

http://stevesouders.com/hpws/rule-expires.php

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.


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


Part 3: Mobile Devices


10xJavaScript on mobile devices (high end

ones) takes about 10x as long to execute on mobile devices compared to desktop

computers.


512MBThe amount of RAM in the iPhone 4s and

iPad 2. Mobile devices typically have 1GB or less of RAM. This helps extend battery life.


What Can We Do About It?

Nothing Fancy with JavaScriptJS has less performance and memory to work with.

Simpler DOMA complicated DOM (divitis) uses more system resources. A simpler DOM has less objects in memory.

Mobile Optimized ImagesThey use less resources to render, manipulate, and keep in memory.


Let’s Get A LittleAdvanced


Alternatives To Caching

Local StorageGoogle, Bing, and others put assets in local storage.

Manifest AppcacheDesigned 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?


What Else Can We Compress?

HTMLCompressorhttp://code.google.com/p/htmlcompressor/Minify HTML. In Drupal see hook_page_delivery_callback_alter and drupal_deliver_html_page.

mod_pagespeedApache module that automatically optimizes web pages and resources on them.

JavaScript, CSS, and images aren’t the only things that can be compressed.


http://code.google.com/p/htmlcompressor/

http://code.google.com/p/htmlcompressor/

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.


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.




Tools and Resources


Tools and ResourcesPage Speedhttps://developers.google.com/pagespeed/Analyzes a website and generates suggestions. A website or browser plugin. Documentation details on suggestions.

Mobile Perf Bookmarklethttp://stevesouders.com/mobileperf/mobileperfbkm.phpTools to analyze on mobile and store data to analyze on desktop.

Performance Articleshttp://code.google.com/speed/articles/https://github.com/h5bp/mobile-boilerplate/wiki/Blog-and-ArticlesArticles about technologies related to performance.


https://developers.google.com/pagespeed/

https://developers.google.com/pagespeed/

http://stevesouders.com/mobileperf/mobileperfbkm.php

http://stevesouders.com/mobileperf/mobileperfbkm.php

http://code.google.com/speed/articles/

http://code.google.com/speed/articles/

https://github.com/h5bp/mobile-boilerplate/wiki/Blog-and-Articles

https://github.com/h5bp/mobile-boilerplate/wiki/Blog-and-Articles

Chrome Developer Tools


webpagetest.org


Questions?

Twitter: @mattfarinaBlog: engineeredweb.com

http://www.slideshare.net/mattfarinahttp://speakerdeck.com/u/mattfarina




http://speakerdeck.com/u/mattfarina

http://speakerdeck.com/u/mattfarina

What did you think?Locate this session on theDrupalCon Denver website

http://denver2012.drupal.org/program

Click the “Take the Survey” link.

Thank You!




Technology

Faster mobile sites