Adam Moore
Web Developer
Web Performance
ajax { }
assemble
Web Performance
SVG
Define Speed...
The average time at which "visible parts" of the page are displayed, expressed in milliseconds and dependent on size of the viewport.
Measuring tools...
webpagetest.org
https://developers.google.com/speed/pagespeed/insights/
chrome dev tools
Web Page Test
Google PageSpeed Insights
Chrome DevTools
Things that make a big difference
- Image Optimization
- Browser Caching
- Above the fold JS and CSS
- Minify JS / CSS / HTML
- Limit HTTP requests
ajax { }
assemble
Web Performance
SVG
Number of requests
vs.
Page Size...?
HTTP Request
TCP Handshake
TCP Slow Start Ramp-up
HTTP Request
Most of the HTTP data flows consist of small, bursty data transfers, whereas TCP is optimized for long-lived connections and bulk data transfers. Network roundtrip time is the limiting factor in TCP throughput and performance in most cases.
Consequently, latency is the performance bottleneck for HTTP and well… most of the web.
Dig into Web Page Test
Number of requests
vs.
Page Size...?
Goals
Serving above the fold content in the first second... or first 14k of the response...
Speed Index Score under 1,000
Questions?
Web Performance
By Adam Moore
