The Web We Weave :: How Web Developers Think About Performance
0 likes322 views
The document discusses how web developers think about performance optimization. It explains that client render time, not page load time, is a more important metric. Page load does not indicate when the full page is visible, as rendering continues after load. The document recommends using tools like Webpagetest and Chrome Timeline to identify opportunities like unused JavaScript that could significantly improve render speed and user experience. Overall performance optimization requires understanding how the browser loads assets and renders pages to target changes that make the largest impact.
The Web We Weave :: How Web Developers Think About Performance
- 4. Seriously…whenyouwalkout…grok/do ● Performance is more about rendering than page load ● Use Webpagetest and Chrome’s Timeline to improve performance ● Optimize areas where changes are large enough to be noticeable
- 5. Whatwe’lltalkabout 1. Speed! 2. “Client Render Time” 3. Page load. It isn’t what you think. 4. Enter Patrick Meenan 5. Get. Do. 6. Page load redux 7. All together now 8. Best practices don’t guarantee best optimizations
- 6. 1 Speed!
- 7. What’sFast?
- 11. Howlongdoesittaketo... ● Getfirstbyte? ● loadapage? ● Render? ● Paint? ● Etc.
- 14. Definition Found on go/speedhelp client_render_time: from receiving first byte of base page html data to page onload (loadEventEnd - responseStart)
- 15. Fromw3c
- 16. Fromme
- 20. Nope
- 22. Orthis
- 23. Orworse
- 24. Orevenworse
- 25. Why?
- 26. Pageloadisallmostlyaboutdownloadingstuff* ● JavaScript ● Images ● Fonts ● HTML ● CSS ● etc. *stuff==“assets”
- 37. SpeedIndex The average time at which visible parts of the page are displayed
- 39. 5 Get.Do.
- 41. Yourbrowserusesasinglethreadto ● paint ● render ● execute JavaScript Thisiscalledthe“Mainthreadofexecution”
- 43. Voyager
- 44. AndHomepage
- 45. AndConnectHub
- 46. AndGuestHomepage
- 50. 6 Pageloadredux
- 54. Thethreemarkers 1. First paint 2. DOMContentLoaded 3. Page load
- 59. 7 Alltogethernow
- 64. Noticeplateaus
- 82. IlyaGrigorik
- 83. SteveSouders
- 94. WithoutJavaScript,faster ● First paint by 25% ● DOMContentLoaded by 45% ● Page load by 23% ● Speed Index by 30% ( from 2.0s to 1.4s )
- 100. Questions?