We're Breaking the Mobile Web - Bristol Webperf Meetup

We rely on our customer's browser to process large JavaScript applications, communicate in real-time and execute code from tens of third-parties. The increasing diversity of customer devices and network connections means that ensuring a fast experience for all customers is nearly impossible: we understand web performance over the network, but in 2016 the CPU is our biggest challenge.

In this talk Simon demonstrates the impact of device diversity on site speed on live sites and shares tips and tools that he uses when diagnosing these issues..

Transcript

1. WE’RE BREAKING THE MOBILE WEB Aw, Snap! @SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup
2. Simon Hearne @SimonHearne Senior Performance Consultant NCC Group
3. a brief history of web performance
4. Sept 21st 2007 web performance was ‘invented’ @SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup
5. my phone in 2007
6. Sept 21st 2007 web performance was invented @SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup
7. 14 Steps to Faster-Loading Web Sites Because in 2007, developers didn’t get it @SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup
8. “optimisation” was done on the server @SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup
9. because the application was on the server @SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup
10. even web2.0 was pretty static @SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup
11. May 13th 2013 I started work in web performance @SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup
12. @SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup My induction…
13. @SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup My induction…
14. LIFE WAS EASY “Reduce blocking JavaScript” “Use gzip compression” “Compress images” “Reduce TTFB” … @SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup
15. but the way we consume the web has changed 2007 2016 @SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup
16. 2007 2016 and the way we develop for the web has changed @SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup
17. 0% 10% 20% 30% 40% 50% 60% 70% 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016 Non-Desktop Traffic Single Page Apps * this is totally made up Solution: Responsive Web Design @SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup
18. ” “ Responsive web design is a fluid grid, flexible images and media queries Ethan Marcotte @SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup
19. i.e. cram a desktop site into a mobile viewport @SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup
20. Unless your site is an application Which is fine. @SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup
21. we increasingly rely on JavaScript, while our users increasingly use mobile devices @SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup
22. ” “ Among our 5,400 panelists, approximately 15% do not have Javascript-enabled devices. http://www.pewresearch.org/2015/04/08/results-2/#javascript @SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup
23. ” “ Website visitors tend to care more about speed than all the bells and whistles we want to add to our websites KISS Metrics @SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup
24. mobile web = web
25. ” “ Mobile applications are a bridging technology. Like Flash. Bruce Lawson @SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup
26. @SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup people would rather uninstall an app than delete photos
27. @SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup
28. @SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup
29. @SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup
30. SELECT COUNT(*) FROM [httparchive:runs.latest_requests_mobile] WHERE firstHtml IS TRUE AND url like "%://m.%" 85% of websites are ‘responsive’ @SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup
31. SELECT COUNT(DISTINCT pageid) FROM [httparchive:runs.latest_requests_mobile] WHERE url LIKE "%modernizr%" 11% of mobile pages use Modernizr @SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup
32. SELECT COUNT(DISTINCT pageid) FROM [httparchive:runs.latest_requests_mobile] WHERE url LIKE "%angular%" OR url LIKE "%react%" OR url LIKE "%ember%" OR url LIKE "%meteor%" 10% of mobile pages are SPAs @SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup >
33. SELECT COUNT(DISTINCT pageid) FROM [httparchive:runs.latest_requests_mobile] WHERE url LIKE "%optimizely%" or url LIKE "%maxymiser%" or url LIKE "%zarget%" or url LIKE "%visualwebsiteoptimizer%" 10% of mobile pages have A/B testing @SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup
34. http://mobile.httparchive.org/trends.php#bytesJS&reqJS 422kB average mobile JS payload @SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup
35. http://mobile.httparchive.org/trends.php#bytesJS&reqJS 422kB average mobile JS payload @SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup
36. mobile web = slow
37. In the beginning, there was the network @SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup
38. ” “ the U.K. ranks near the bottom of the list of 4G countries in terms of coverage Open Signal State of Mobile Networks 2016 @SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup
39. then there was the cheap device @SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup
40. @SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup https://meta.discourse.org/t/the-state-of-javascript-on-android-in-2015-is-poor/33889 ” “ we bet heavily on near-desktop JavaScript performance on mobile devices. That is clearly happening on iOS but it is quite disastrously the opposite on Android.
41. @SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup iOS ~3s Android ~6s Android is consistently ~two times slower than iOS
42. @SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup
43. JetStream JavaScript Benchmark (bigger = better) Galaxy S6 Moto G (3rd Ed.) 48 14 -71% @SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup
44. @SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup
45. then there were the cores @SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup
46. JetStream JavaScript Benchmark (bigger = better) Galaxy S6 Moto G (3rd Ed.) 48 14 -71% @SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup Galaxy S6 (power saving) 37 -23%
47. JetStream JavaScript Benchmark (bigger = better) iPhone 6 iPhone 5S iPhone 5C 63 21 -17% -67% @SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup 52
48. We are developing for people like us, with devices like ours @SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup
49. ” “ Most low- and moderate-income families … are under-connected, with mobile-only access Opportunity for all? Victoria Rideout & Vikki S. Katz Winter 2016 @SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup
50. knowing your performance
51. WebPageTest @SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup https://sites.google.com/a/webpagetest.org/docs/advanced-features/raw-test-results
52. Fast Phone / Slow Phone @SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup
53. FastPhone / SlowPhone @SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup http://bit.ly/29QGQ97
54. @SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup http://larahogan.me/devicelab/
55. @SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup
56. back to m. ?
57. @SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup https://eev.ee/blog/2016/03/06/maybe-we-could-tone-down-the-javascript/ ” “ Maybe we could tone down the JavaScript
58. @SimonHearne | We’re breaking the mobile web | Bristol Web Performance Meetup Progressive Enhancement FTW (that means it works without JavaScript)
59. Stay in touch! @SimonHearne webperf.ninja Thank you