Speed as a Feature: Getting a Handle on Page Load Time

Understanding why your page is rendering slowly is the first step to improving your page load speed. The faster your pages load, the better the site will convert and the happier your clients will be! In this talk, Zack will introduce you to concepts that affect your site’s performance, including network connectivity, CSS rendering, and latency. Comprehension of these core performance concepts will then be used to inform sensible recommendations for overcoming these problems. Throughout the discussion, tools for exploring your site’s performance will be demonstrated to show how to optimize your site through proper measurement.

Transcript

1. Speed as a Feature: Getting a Handle on Page Load Time Zack Tollman | The Theme Foundry | @tollmanz
2. 20% 80%
3. Server Side
4. Client Side
5. Time to transmit signal to server and receive a response Latency
7. CSSOM Blocks Rendering
8. JS Blocks DOM Construction
9. JS Blocks DOM Construction CSSOM Blocks Rendering
10. https://core.trac.wordpress.org/ticket/28426 http://www.webpagetest.org/result/140601_78_5e0b2a188cfe0c8c79811ab12be2ad2b/
11. 34 requests (647kb) 3.8s start render 4.3s visually complete
13. 1472ms to receive full HTML
14. 1472ms to receive full HTML 39 ms DNS | 110 ms TCP | 267 ms SSL
15. Subtract out the 1.4 s HTML load time 2.4s start render 2.9s visually complete
16. https://core.trac.wordpress.org/ticket/28426
18. 1.6s 3.8s
19. wordpress.org openatd.svn.wordpress.org 1.6s 3.8s
20. wordpress.org 768 ms Total Connection Time 546ms DNS | 102ms TCP | 120ms SSL openatd.svn.wordpress.org 1311 ms Total Connection Time 548ms DNS | 102ms TCP | 661ms SSL 1.6s 3.8s
21. CSSOM Construction is Blocking Rendering
22. Recommendation Move assets to same domain
23. DNS TCP SSL Total Before 546 102 120 768 After 33 34 121 188 wp-trac.css After: http://www.webpagetest.org/result/140621_DF_473de51635dee46ce4b30daecec83dbd/1/details/
24. ~0.5s reduction in Latency
25. Start Render Visually Complete Before HTML (1.472s) 3.789s 4.300s After HTML (1.216s) 2.542s 3.300s
26. 1 second improvement in Start Render
27. It is a must that you should always never listen to dogma
28. Understand the problem before solving it
29. Your Next Steps ! High Performance Browser Networking Ilya Grigorik ! High Performance Web Sites Steve Souders ! Web Performance Andy Davies Technical Non-Technical