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

Slide 1

Slide 1 text

Speed as a Feature: Getting a Handle on Page Load Time Zack Tollman | The Theme Foundry | @tollmanz

Slide 2

Slide 2 text

20% 80%

Slide 3

Slide 3 text

Server Side

Slide 4

Slide 4 text

Client Side

Slide 5

Slide 5 text

Time to transmit signal to server and receive a response Latency

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

CSSOM Blocks Rendering

Slide 8

Slide 8 text

JS Blocks DOM Construction

Slide 9

Slide 9 text

JS Blocks DOM Construction CSSOM Blocks Rendering

Slide 10

Slide 10 text

https://core.trac.wordpress.org/ticket/28426 http://www.webpagetest.org/result/140601_78_5e0b2a188cfe0c8c79811ab12be2ad2b/

Slide 11

Slide 11 text

34 requests (647kb) 3.8s start render 4.3s visually complete

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

1472ms to receive full HTML

Slide 14

Slide 14 text

1472ms to receive full HTML 39 ms DNS | 110 ms TCP | 267 ms SSL

Slide 15

Slide 15 text

Subtract out the 1.4 s HTML load time 2.4s start render 2.9s visually complete

Slide 16

Slide 16 text

https://core.trac.wordpress.org/ticket/28426

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

1.6s 3.8s

Slide 19

Slide 19 text

wordpress.org openatd.svn.wordpress.org 1.6s 3.8s

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

CSSOM Construction is Blocking Rendering

Slide 22

Slide 22 text

Recommendation Move assets to same domain

Slide 23

Slide 23 text

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/

Slide 24

Slide 24 text

~0.5s reduction in Latency

Slide 25

Slide 25 text

Start Render Visually Complete Before HTML (1.472s) 3.789s 4.300s After HTML (1.216s) 2.542s 3.300s

Slide 26

Slide 26 text

1 second improvement in Start Render

Slide 27

Slide 27 text

It is a must that you should always never listen to dogma

Slide 28

Slide 28 text

Understand the problem before solving it

Slide 29

Slide 29 text

Your Next Steps ! High Performance Browser Networking Ilya Grigorik ! High Performance Web Sites Steve Souders ! Web Performance Andy Davies Technical Non-Technical