Upgrade to Pro — share decks privately, control downloads, hide ads and more …

We're Breaking the Mobile Web - Bristol Webperf Meetup

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

Bf8ea4b5c4f3d94db2bb16dff9ca626b?s=128

Simon Hearne

July 21, 2016
Tweet

More Decks by Simon Hearne

Other Decks in Technology

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