Speed is Essential for a Great Web Experience

0 %
100 %
Information about Speed is Essential for a Great Web Experience

Published on May 25, 2012

Author: AndyDavies

Source: slideshare.net


Audio of the talk is available here - http://blog.port80events.co.uk/2012/07/05/2012-talk-andy-davies/

Speed is Essential for aGreat Web Experience@andydaviesPort 80 (#p80N)May 2012 http://www.flickr.com/photos/44442915@N00/5214810596

But sometimes other concerns take priority... http://www.flickr.com/photos/randomidea/247994072

“Are we there yet?” http://www.flickr.com/photos/sharynmorrow/643126727

Our perception of response time Instant Seamless Yawn!100ms 1s 10s Response Time in Man-computer Conversational Transactions Robert B. Miller, 1968

Our perception of response time Instant Seamless Yawn!100ms 1s 10s 3s - Recommended 7s - Fortune 500 Load Time Average (2010) Response Time in Man-computer Conversational Transactions Robert B. Miller, 1968

“50% more concentration when using badly performing web sites” Foviance http://www.flickr.com/photos/yourdon/3366991042

Effect of delay on abandonment rate... Abandonment rate over 200+ sites / 177+ million page views over 2 weeks - http://www.measureworks.nl / Gomez

Google conducted an experiment +400ms -0.6%

Bing did some experiments too +1s $/ - 2.8% +

Shopzilla cut page load time by 5 seconds! +12% +25% -50% $$$ http://velocityconf.com/velocity2009/public/schedule/detail/7709

Measuring page load time...

Measure Real Users’ Experience 27% 24%Visitors (%) 13% 8% 8% 6% 6% 3% 3% 2% 1% 1 2 3 4 5 6 7 8 9 10 > 10 Load Time (s)

Measuring Real Users - Google AnalyticsRelies on Navigation Timing API, can add extra timing calls to page

Measuring Real Users - Torbit Insight

Measuring Real Users - Torbit Insight (Check out at Log Normal too)

Measuring Real Users - New Relic


Waterfall for bbc.co.uk/news


Bigger, Faster Servers? http://www.flickr.com/photos/br1dotcom/4297736794

80% plus of page load time is on front-end Backend news.bbc.co.uk Frontend ebay.co.ukdebenhams.co.uk direct.gov.uk amazon.co.uk mumsnet.com guardian.co.uk 0 1.25 2.5 3.75 5 Measured on residential ADSL line using Chrome 19

Fix slow server responses first 4 seconds!

Bandwidth (often) isn’t the bottleneck2. 0s 5s 10s news.bbc.co.uk tested via webpagetest.org throttled at 1.5Mbps (bursts over 1.5Mbps are artifact of testing)

Minimum round trips to download a file (TCP Segments)285kB214kB143kB 71kB Size 1 2 3 4 5 6 7 8 9 10 11 Round Trips TCP and the Lower Bound of Web Performance John Rauser

Speeding Things Up - The Basics CSS at top Compress Consilidate Minify Reduce Requests Cache Forever JS at bottom

Proportion of URLs that can be compressed ☺ ☹ http://zoompf.com/blog/2012/05/http-compression-use-by-alexa-top-1000

What’s the web made of? Images Scripts Stylesheets HTML Flash Other Composition of ‘average’ web page via httparchive.org

Bitmapped Images JPEG PNG GIF Optimise, Optimise, Optimise! (jpegmini, pngmini, Smush.it, ImageOptim, Gifsicle etc.)

CSS Sprites + background-position: -408px 0; width: 128px; height: 128px; =

Data-URIs<img width="128" height="128"src="data:image/PNG;base64,iVBORw0KGgoAAAANSUhEUgAAAIAA ... =GAA39eV7u4AAAAAElFTkSuQ" /> Should be served with GZIP

New Devices, New Challenges... 2 x Resolution = 4 x Pixels! http://www.flickr.com/photos/roopaw/6985954465

Look Ma, No Images!border-radius: 20px;background: linear-gradient(left, #f06, #ff0); Watch mobile performance. Remember vendor prefixes!

Vector Graphics FTW? SVG: 12 KB vs PNG: 86KB

What about icon / pictogram fonts? &#x2605; ★ &#x2606; ☆ &#x2665; ♥ &#x2601; ☁ Heydings by Heydon Works “Bog Standard Font”

display:none - still downloads images “‪#p80n‬ you do get adverts on the smashingmag site on smaller viewports. They just hideously display:none; so you still down load them :-/” @sturobson ‬

Don’t forget about favicon.ico 1.4 seconds for favicon!

Don’t forget about favicon.ico 1.4 seconds for favicon! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Don’t block the browser... http://www.flickr.com/photos/barteko/6128499314

news.bbcimg.co.uk static.bbc.co.ukBrowsers can download resources in parallel

But Sometimes... The Waterfall of Doom! 2 seconds! (nearly)

Social buttons break... http://bit.ly/yRjX63

Social buttons break... http://bit.ly/yRjX63

Load Third Party scripts asynchronously <script type="text/javascript"> function() var js = document.createElement(script); js.async = true; js.src = myscript.js var e = document.getElementsByTagName(script)[0]; e.parentNode.insertBefore(js, first); })(); </script>

Argh... My brain hurts! http://www.flickr.com/photos/corneveaux/3248566797

Don’t have to do it all by hand http://www.flickr.com/photos/simeon_barkas/2557059247

Performance isn’t just for Christmas Measure Optimise Analyse


@andydavies andy@asteno.comhttp://www.slideshare.net/andydavies http://www.flickr.com/photos/auntiep/5024494612

CreditsAll photographs copyright original owners on flickr.comFollowing pictograms courtesy of The Noun Project

Add a comment

Related pages

Andy Davies: Speed is essential for a great web experience ...

Slides available at http://www.slideshare.net/AndyDavies/... NCC Group Presentation by Andy Davies on Speed is essential for a great web ...
Read more

Performance Matters: Optimizing for Mobile - YouTube

... most reliable mobile web experience as the stakes—and ... Speed is essential for a great web experience ... "Web Performance, Why it ...
Read more

Why You Need a Seriously Fast Website - Copyblogger

A faster web site means a better visitor experience. ... Great post. My site’s speed is ... browser Copyblogger site because this web browser is ...
Read more

MacBook Light. Years ahead. - Apple

With the new MacBook comes a whole new way to experience a ... you can connect to the web, ... It also comes with a collection of great apps for ...
Read more

Speed Is A Killer - Why Decreasing Page Load Time Can ...

... called Page Speed Online. It’s available as a web-based tool as ... the page load speed was ... I thing speed optimizing a website is essential ...
Read more

Experience Essential Oils

To get great benefits it's important to use therapeutic grade essential oils that are NOT ... only search Experience Essential Oils: Experience Essential ...
Read more

11 Rules For Great UX Design, Adapted From An Original Mad ...

Collaboration across disciplines is essential to remaining ... If you provide a great experience, ... If only "UX" were limited to building web sites and ...
Read more

4 Ways Great Customer Service Will Grow Your Business

... and that's investing in your customer service ... This type of great service is essential to building a loyal ... The Next Web is hiring ...
Read more