Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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.

Zack Tollman

June 28, 2014
Tweet

More Decks by Zack Tollman

Other Decks in Technology

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
  6. None
  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

  12. None
  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

  17. None
  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