![Page 1: Scaling Front-End Performance - Velocity 2016](https://reader031.vdocuments.site/reader031/viewer/2022013013/58a611481a28ab57488b4979/html5/thumbnails/1.jpg)
Scaling Front-End Performance
Patrick Meenan@PatMeenan
![Page 2: Scaling Front-End Performance - Velocity 2016](https://reader031.vdocuments.site/reader031/viewer/2022013013/58a611481a28ab57488b4979/html5/thumbnails/2.jpg)
http://www.internetworldstats.com/top20.htm
![Page 3: Scaling Front-End Performance - Velocity 2016](https://reader031.vdocuments.site/reader031/viewer/2022013013/58a611481a28ab57488b4979/html5/thumbnails/3.jpg)
http://www.internetworldstats.com/top20.htm
![Page 4: Scaling Front-End Performance - Velocity 2016](https://reader031.vdocuments.site/reader031/viewer/2022013013/58a611481a28ab57488b4979/html5/thumbnails/4.jpg)
Increasing Usage
Get More Users- Mostly coming from emerging markets- Mostly mobile-only- Mostly with highly variable connectivity
- REALLY long tails
Increase usage of existing users- Faster = more usage
![Page 5: Scaling Front-End Performance - Velocity 2016](https://reader031.vdocuments.site/reader031/viewer/2022013013/58a611481a28ab57488b4979/html5/thumbnails/5.jpg)
FCC 2016 Broadband Progress Report
https://www.fcc.gov/reports-research/reports/broadband-progress-reports/2016-broadband-progress-report
![Page 6: Scaling Front-End Performance - Velocity 2016](https://reader031.vdocuments.site/reader031/viewer/2022013013/58a611481a28ab57488b4979/html5/thumbnails/6.jpg)
FCC 2016 Broadband Progress Report
https://www.fcc.gov/reports-research/reports/broadband-progress-reports/2016-broadband-progress-report
![Page 7: Scaling Front-End Performance - Velocity 2016](https://reader031.vdocuments.site/reader031/viewer/2022013013/58a611481a28ab57488b4979/html5/thumbnails/7.jpg)
“non-fixed” broadband
Mostly Satellite or Cellular
All with low data caps
Most with HUGE latencies- 1s RTT satellite not uncommon- 100+ms cellular is “good”, can be MUCH higher
![Page 8: Scaling Front-End Performance - Velocity 2016](https://reader031.vdocuments.site/reader031/viewer/2022013013/58a611481a28ab57488b4979/html5/thumbnails/8.jpg)
![Page 9: Scaling Front-End Performance - Velocity 2016](https://reader031.vdocuments.site/reader031/viewer/2022013013/58a611481a28ab57488b4979/html5/thumbnails/9.jpg)
Traditional development – mocks and feature lists
https://www.smashingmagazine.com/2015/04/using-sketch-for-responsive-web-design-case-study/
![Page 10: Scaling Front-End Performance - Velocity 2016](https://reader031.vdocuments.site/reader031/viewer/2022013013/58a611481a28ab57488b4979/html5/thumbnails/10.jpg)
![Page 11: Scaling Front-End Performance - Velocity 2016](https://reader031.vdocuments.site/reader031/viewer/2022013013/58a611481a28ab57488b4979/html5/thumbnails/11.jpg)
Loading is an experience – treat it like one
What should they see while loading? On slow connections, what are acceptable blank page times? Can the content move/relayout?
- Hint, the answer should always be NO! How should text load/display, how long is blank text acceptable for? What order should the images load? Can content be displayed incrementally?
![Page 12: Scaling Front-End Performance - Velocity 2016](https://reader031.vdocuments.site/reader031/viewer/2022013013/58a611481a28ab57488b4979/html5/thumbnails/12.jpg)
Search Lite
http://searchengineland.com/google-launches-streamlined-lite-version-of-mobile-search-interface-for-slower-connections-218269
![Page 13: Scaling Front-End Performance - Velocity 2016](https://reader031.vdocuments.site/reader031/viewer/2022013013/58a611481a28ab57488b4979/html5/thumbnails/13.jpg)
Search “Interventions” Weblight – transcoded pages on slow mobile connections in select countries
- 4x Faster page loads- 80% Less Data- 50% Increase in page views
http://indianexpress.com/article/technology/tech-news-technology/google-brings-in-search-lite-to-load-pages-4x-faster-on-slower-networks/
![Page 14: Scaling Front-End Performance - Velocity 2016](https://reader031.vdocuments.site/reader031/viewer/2022013013/58a611481a28ab57488b4979/html5/thumbnails/14.jpg)
How Fast is your site?
![Page 15: Scaling Front-End Performance - Velocity 2016](https://reader031.vdocuments.site/reader031/viewer/2022013013/58a611481a28ab57488b4979/html5/thumbnails/15.jpg)
![Page 16: Scaling Front-End Performance - Velocity 2016](https://reader031.vdocuments.site/reader031/viewer/2022013013/58a611481a28ab57488b4979/html5/thumbnails/16.jpg)
![Page 17: Scaling Front-End Performance - Velocity 2016](https://reader031.vdocuments.site/reader031/viewer/2022013013/58a611481a28ab57488b4979/html5/thumbnails/17.jpg)
Willing to put money on that?
![Page 18: Scaling Front-End Performance - Velocity 2016](https://reader031.vdocuments.site/reader031/viewer/2022013013/58a611481a28ab57488b4979/html5/thumbnails/18.jpg)
Runtime content decisions
Reduce number of ads Fall back to text ad placements Eliminate tag manager or A/B testing calls Lazy image loading Single domain HTTP/2 Serving
![Page 19: Scaling Front-End Performance - Velocity 2016](https://reader031.vdocuments.site/reader031/viewer/2022013013/58a611481a28ab57488b4979/html5/thumbnails/19.jpg)
Client-side Decisions – Javascript timings Start of the head
performance.now() performance.timing.responseStart - performance.timing.navigationStart
End of the head
Before each optional external resource/script (ads, widgets, whatever)
Defeats preload scanner
![Page 20: Scaling Front-End Performance - Velocity 2016](https://reader031.vdocuments.site/reader031/viewer/2022013013/58a611481a28ab57488b4979/html5/thumbnails/20.jpg)
Client-side Decisions Slow connection?
navigator.connection.downlinkMax < 2.0
Low Battery? navigator.getBattery()
![Page 21: Scaling Front-End Performance - Velocity 2016](https://reader031.vdocuments.site/reader031/viewer/2022013013/58a611481a28ab57488b4979/html5/thumbnails/21.jpg)
Client-side Decisions – Service Worker
Observe request/response times Dynamically adjust
Block 3rd-party requests Alter image requests to low quality Fetch “lite” version of modules
Track/store over time
![Page 22: Scaling Front-End Performance - Velocity 2016](https://reader031.vdocuments.site/reader031/viewer/2022013013/58a611481a28ab57488b4979/html5/thumbnails/22.jpg)
Server-side Decisions – Save-Data header HTTP Request header
save-data: on Chrome 49+, Opera 35+, Yandex 16.2+
Disable transformations: Cache-Control: no-transform
![Page 23: Scaling Front-End Performance - Velocity 2016](https://reader031.vdocuments.site/reader031/viewer/2022013013/58a611481a28ab57488b4979/html5/thumbnails/23.jpg)
Server-side Decisions – Connection RTT
Reasonable proxy for connection speed/experience
getsockopt(fd, IPPROTO_TCP, TCP_INFO, &ti, &tisize); ti.tcpi_rtt
Nginx: $tcpinfo_rtt (as of 1.1.18)
Apache Traffic Server: TCPInfo plugin
![Page 24: Scaling Front-End Performance - Velocity 2016](https://reader031.vdocuments.site/reader031/viewer/2022013013/58a611481a28ab57488b4979/html5/thumbnails/24.jpg)
Server-side Decisions – Tracking CIDR blocks
Based on historical performance
Slow reaction time
Accounts for full experience
![Page 25: Scaling Front-End Performance - Velocity 2016](https://reader031.vdocuments.site/reader031/viewer/2022013013/58a611481a28ab57488b4979/html5/thumbnails/25.jpg)
Watch out for usage shifts
YouTube Feather Aggregate performance stats showed slower Due to new users who could not previously use it at all
Chrome Resource Priorities Change Aggregate performance stats showed no change Slight increase in population Adjusted stats showed expected 5-10% improvement in tail
![Page 26: Scaling Front-End Performance - Velocity 2016](https://reader031.vdocuments.site/reader031/viewer/2022013013/58a611481a28ab57488b4979/html5/thumbnails/26.jpg)
Browser “Interventions”
Data saver mode
Mini/Proxy Browsers
Ad Blocking
Browsers becoming more agressive
![Page 27: Scaling Front-End Performance - Velocity 2016](https://reader031.vdocuments.site/reader031/viewer/2022013013/58a611481a28ab57488b4979/html5/thumbnails/27.jpg)
Browser “Interventions” https://groups.google.com/a/chromium.org/forum/#!forum/intervention-dev
Removing active scroll listeners Blocking document.write Throttling timers in background frames Immediately fall back to system fonts (shipped in 49) Lazy load images Cleaning up navigation history
Anything that can make the web better for users, regardless of specs
![Page 28: Scaling Front-End Performance - Velocity 2016](https://reader031.vdocuments.site/reader031/viewer/2022013013/58a611481a28ab57488b4979/html5/thumbnails/28.jpg)
Thank YouPatrick Meenan@PatMeenan