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. 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
Wednesday, March 21, 12
8. Why is Front End
Performance Important?
Wednesday, March 21, 12
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. 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
Wednesday, March 21, 12
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
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
13. ā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
Wednesday, March 21, 12
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
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
17. 4G will solve our problems, right?
http://www.ļ¬ickr.com/photos/eliu500/5332240987/
Wednesday, March 21, 12
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
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. 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/
Wednesday, March 21, 12
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. Minify Production JavaScript
ā¢ For example, miniļ¬ed drupal.js is 24%
the size of the original.
ā¢ UglifyJS - a great miniļ¬er
https://github.com/mishoo/UglifyJS
ā¢ Speedy Module - miniļ¬ed core JS
http://drupal.org/project/speedy
ā¢ Advanced CSS/JS Aggregation (D 6.x)
http://drupal.org/project/advagg
Wednesday, March 21, 12
23. 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.
Wednesday, March 21, 12
24. Contrib Challenge: If a project in
contrib is using un-miniļ¬ed
JavaScript for production ļ¬le a bug.
Remember, patches welcome.
Wednesday, March 21, 12
25. Original 41.3% Smaller
Use Lossless compression
on theme and module images.
Wednesday, March 21, 12
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. 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.
Wednesday, March 21, 12
28. Remove Image Styles Metadata
ImageMagick advanced module has
an option to strip out metadata.
http://drupal.org/project/imagemagick
Wednesday, March 21, 12
29. 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)
Wednesday, March 21, 12
30. Part 2: RTT and
Connections
Wednesday, March 21, 12
31. 6
The number of parallel connections to a domain
across all tabs and windows in desktop browsers.
Wednesday, March 21, 12
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. 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
Wednesday, March 21, 12
34. Mobile phone network
latency is 2-10x that of wired
connections.
http://www.slideshare.net/guest22d4179/latency-trumps-all
Wednesday, March 21, 12
35. CSS Image Sprites
http://www.famfamfam.com/lab/icons/silk/
Wednesday, March 21, 12
37. 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.
Wednesday, March 21, 12
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 ļ¬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
Wednesday, March 21, 12
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. Warning: While desktop
browsers generally have large
caches, mobile browsers
typically have a cache only
several MB in size.
Wednesday, March 21, 12
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. 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. 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. Letās Get A Little
Advanced
Wednesday, March 21, 12
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. 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. 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. 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
Wednesday, March 21, 12
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
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
