Faster mobile sites

Mobile

Faster Mobile Sites
Presented by Matt Farina

Wednesday, March 21, 12

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


Download the slides...
http://www.slideshare.net/mattfarina
http://speakerdeck.com/u/mattfarina


http://www.ﬂickr.com/photos/robinhamman/337969896/

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.


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


Why is Front End
Performance Important?


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/

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

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

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

“Yahoo! reported that making
pages just 400 milliseconds
slower resulted in a trafﬁc
drop of up to 9%.”
* Google, Amazon, and others have found
similar results.

http://www.slideshare.net/stoyan/yslow-20-presentation

SEO
Google takes performance into
account in search engine rankings.

http://googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-search-ranking.html

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


Part 1: Bandwidth


4G will solve our problems, right?

http://www.ﬂickr.com/photos/eliu500/5332240987/

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

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

TCP connections aren’t great for small
ﬁles (all your non-media assets are small
ﬁles). This is due to TCP slow start.

http://www.stevesouders.com/blog/2010/07/13/velocity-tcp-and-the-lower-bound-of-web-performance/

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


Quick Note On Legal Issues

• JavaScript downloaded to the browser
is a form of distribution.

• The source (non-miniﬁed) 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-miniﬁed
JavaScript for production ﬁle a bug.
Remember, patches welcome.


Original 41.3% Smaller

Use Lossless compression
on theme and module images.


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/


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 ﬁeld formatter for images.

• Adaptive Image Styles
http://drupal.org/project/ais
Requires alterations to .htaccess and JS.


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_deﬂate (for apache)
• IIS (build in)
• HttpGzipModule (nginx)


Part 2: RTT and
Connections


6
The number of parallel connections to a domain
across all tabs and windows in desktop browsers.


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.


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_time

Mobile phone network
latency is 2-10x that of wired
connections.

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

CSS Image Sprites

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

CSS Sprite Tools
Glue
http://glue.readthedocs.org/

Compass
http://compass-style.org/

Sprite Cow
http://www.spritecow.com/

SpritePad
http://spritepad.wearekiss.com/


Enable CSS and JavaScript
Aggregation

In an unscientiﬁc random poll of DrupalCon attenders websites these were
not enabled half the time. Not the ﬁrst 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 ﬁrst 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

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


10x
JavaScript on mobile devices (high end
ones) takes about 10x as long to execute on
mobile devices compared to desktop
computers.


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.


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.


Let’s Get A Little
Advanced


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.


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.


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

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

Tools and Resources


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.


Chrome Developer Tools


webpagetest.org


Questions?
http://www.slideshare.net/mattfarina
http://speakerdeck.com/u/mattfarina

Twitter: @mattfarina
Blog: engineeredweb.com


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!

Faster mobile sites

More Related Content

Similar to Faster mobile sites

More from Matthew Farina

Recently uploaded

Faster mobile sites