Resource scheduling
•Als PPTX, PDF herunterladen•
2 gefällt mir•935 views
Slides from the December 2018 London Web Performance Meetup.
Empfohlen
Weitere ähnliche Inhalte
Mehr von Patrick Meenan
Mehr von Patrick Meenan (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Resource scheduling
- 1. Prioritization and the Web Pat Meenan @patmeenan
- 2. 600KB foreground image (visible) 1s download @5 Mbps 600KB image (not-visible) 1s download @5 Mbps 60KB font 0.1s download @5 Mbps 600KB (compressed) JS - head 1s download @5 Mbps 1s eval/execute 600KB (compressed) CSS 1s download @5 Mbps 0.5s layout 600KB (compressed) JS – body 1s download @5 Mbps 1s eval/execute 2 x 2 x 1 x 2 x 2 x 1 x
- 3. • 9.1s of content download (after HTML) • 4s of Script Parse/eval • 0.5s layout 13.6 seconds to load?
- 4. 987 10 11 12 13
- 5. 987 10 11 12 13 <head> Finished – 11s
- 6. 987 10 11 12 13 First Paint – 11.5s
- 7. 987 10 11 12 13 First Contentful Paint (FCP) – 11.5s
- 8. 987 10 11 12 13 Text Paint - 11.6s
- 9. 987 10 11 12 13 DOM Content Loaded (DCL) – 13.5s
- 10. 987 10 11 12 13 onload– 13.5s
- 11. 987 10 11 12 13 Time to Interactive (TTI)– 13.5s
- 12. 987 10 11 12 13 CPU Idle Network Idle
- 14. 1 2 3 4 5 First Paint – 4.5s (vs 11.5s)
- 15. 1 2 3 4 5 Text Paint – 4.6s (vs 11.6s)
- 16. 1 2 3 4 5 Text Paint – 4.5s (vs 11.6s) Preload font
- 18. 1 2 3 4 5 Time to Interactive (TTI)– 6.1s (vs 13.5s) 6
- 20. 1 2 3 4 5 6 importance = “high”
- 22. HTTP/2
- 25. Browsers
- 26. Chrome
- 27. Firefox
- 28. Safari
- 29. Edge/IE
- 30. ¯_(ツ)_/¯
- 31. •Order things in the HTML •Hint for “hidden” critical requests •Hide low-priority resources?
- 32. Servers Most (all?) HTTP/2 servers support prioritization!
- 34. Buffers….buffers….and more buffers https://blog.cloudflare.com/http-2-prioritization-with-nginx/
- 35. net.ipv4.tcp_notsent_lowat = 16384 TCP Send Buffers
- 36. net.core.default_qdisc = fq net.ipv4.tcp_congestion_control = bbr Network Bufferbloat
- 37. Internal Server Buffers • Write Buffers • Read Buffers • SSL Buffers • …oh my!
- 40. How Is My Server? (or CDN or Load Balancer)?
- 42. 4 Late-loaded high-priority requests • 1 blocking script in the head (100 KB). • 30 images late in the body (100KB each). • 1 Web font (100 KB) – triggered by layout. • 1 Background image (100 KB) – triggered by layout. • Visible image inserted into DOM by script at top of document. • Document.write at end of body for 100 KB blocking script.
- 44. • Test on a 3G connection (300ms RTT, 1.6 Mbps) • Packet-level traffic-shaping (NOT dev tools) • Network Link Conditioner (Mac) • Winshaper (Windows) • Netem/tc (Linux)
- 45. Good Waterfall
- 46. Not so much…
- 49. ¯_(ツ)_/¯