Video and slides synchronized, mp3 and slide download available at URL http://bit.ly/1pl2eb6 .
Andy Davies, Aaron Peters present how networks, browsers and the way sites are built affect user experience, and take a look at some of the latest techniques for measuring and improving performance.Filmed at qconlondon.com.
Aaron Peters has worked with the Web since 1997 in the areas of Product, Business Development, UI and Tech. In the past 3 years, Aaron worked as an independent web performance consultant and regularly speaks at Meetups and O'Reilly's Velocity conference. Andy Davies is Associate Director for Web Performance at NCC Group, helping companies to measure and improve the performance of their sites.
Videogame localization & technology_ how to enhance the power of translation.pdf
Mobile Web Performance - Getting & Staying Fast!
1. Mobile Web Performance
Getting and Staying Fast!
@aaronpeters, Turbobytes
@andydavies, NCC Group
2. Watch the video with slide
synchronization on InfoQ.com!
http://www.infoq.com/presentations
/mobile-web-performance
InfoQ.com: News & Community Site
• 750,000 unique visitors/month
• Published in 4 languages (English, Chinese, Japanese and Brazilian
Portuguese)
• Post content from our QCon conferences
• News 15-20 / week
• Articles 3-4 / week
• Presentations (videos) 12-15 / week
• Interviews 2-3 / week
• Books 1 / month
3. Presented at QCon London
www.qconlondon.com
Purpose of QCon
- to empower software development by facilitating the spread of
knowledge and innovation
Strategy
- practitioner-driven conference designed for YOU: influencers of
change and innovation in your teams
- speakers and topics driving the evolution and innovation
- connecting and catalyzing the influencers and innovators
Highlights
- attended by more than 12,000 delegates since 2007
- held in 9 cities worldwide
4. “At the beginning of 2013 mobile (excluding tablet)
accounted for 26% of our traffic, and we ended the
year with it contributing 33%.”!
Stuart McMillan, Schuh!
Mobile –
Everybody is Using
It
5. “Historically, mobile baskets have always been
lower value than desktop but just before
Christmas the difference was only about 6%”!
Stuart McMillan, Schuh!
And
Spending
More
6. “85% of mobile users expect sites to load at least
as fast or faster than sites on their desktop”!
Strangeloop Networks!
User
Expectations are
High
8. “We’ve remade the Internet in our
image… obese.” Jason Grigsby!
http://www.flickr.com/photos/mrtopher/1414159786!
9. We’re relying on ever faster
phones and networks!
http://www.flickr.com/photos/willposh/3825768273/!
10. 4G isn’t going to
bail us out!
Estimated 20% of connections will be LTE by end of
GSMA Intelligence + operators!
2017!
77.3M!
mobile
connections!
2-3M 4G!
connections!
15. Latency is a
huge issue!
“In 2012, the average worldwide RTT to
Google is still ~100ms, and ~50-60ms within
the US.”!
“we are looking at 100-1000ms RTT range
on mobile”!
Ilya Grigorik!
http://www.igvita.com/2012/07/19/latency-the-new-web-performance-bottleneck/!
17. 3G Radio
Resource
Control!
Idle for 12s!
IDLE! CELL_FACH!
1s delay!
CELL_DCH! Idle for 5s!
http://web.eecs.umich.edu/~fengqian/paper/3g_imc10.pdf!
1-2s delay!!
Exact timings vary and depend on carrier NOT device!
18. Measuring mobile web
performance!
http://www.flickr.com/photos/14516334@N00/286709039/
20. Resource
Timing API
http://goo.gl/afV9OD !
10+
DNS and
Connect
times are
broken
not on iPad
window.performance.getEntries();
21. First Paint
time
window.chrome.loadTimes().firstPaintTime;
window.performance.msFirstPaint;
firstPaintTime = ‘first time MozAfterPaint event fires’ -
window.performance.timing.navigationStart
9+
Works on IE
Mobile?
Don’t know
…
23. WebPag
etest
I built and
operate WPT.!
I am awesome.!
• Best tool to analyze web performance!
• Real browser, many locations around the globe!
• IE6-11, Firefox, Chrome, Android, iPhone, iPad…!
• Specify connection speeds, packet loss!
• Extensive API (eg. multi-page testing)!
• Run your own private instance!!
24. Appurify’s
WebPagetest!
Many devices!
Many carrier
profiles!
All located in San
Francisco!
http://appurify.webpagetest.org !
!
https://androidwpt.appurify.com !
!
36. Don’t send what is
not needed
apple.com on Nexus 7!
! 370 KB
above fold
hero image
Same image in
higher res,
now 442 KB.
So why send
that first one??
42. > Increase
initcwnd
initial congestion window is a server parameter!
initcwnd
=
10
means server sends initially 10
packets (~14KB) over a TCP connection!
Default value is 10 in Linux 2.6.39+!
Most CDNs use 10, but some as high as 26!
!
43. > Increase
initcwnd
A higher initcwnd really helps, especially with small
object delivery!
http://goo.gl/ee0xBs !
56. Provide hints before a
resource is discovered!
<link rel="dns-prefetch" href="other.hostname.com">
<link rel="subresource" href="/some_other_resource.js">
<link rel="prefetch" href="/some_other_resource.jpeg">
<link rel="prerender" href="//domain.com/next_page.html">
64. Embrace
Constraints… Set a
budget!
“Usable within 10 seconds on GPRS connection” - BBC News!
“SpeedIndex under 1000” - Paul Irish, Google!
Requests, page size etc. are easier to measure but may not
represent real world experience!
http://www.flickr.com/photos/communityfriend/2342578485!
65. For a faster
mobile site:!
" Measure
" Move less bytes
" Prioritise what you move
" Move them while no-one is looking
" Distract the visitor!!