WebPerformance Meetup in Cologne (Feb. 2017)

Slide 1

Slide 1 text

[email protected]

Slide 2

Slide 2 text

I’m not going to cover all the basics. I’m going to cherry pick 4 topics. To cover the basics:  http://hpbn.co

Slide 3

Slide 3 text

vutuv differentiates itself from other business networks by speed.

Slide 4

Slide 4 text

Fully Loaded: 700 ms (DSL in Germany)

Slide 5

Slide 5 text

We jump through hoops to achieve this. Make no mistake: This is not easy. Spoiler alert: We don’t use JavaScript.

Slide 6

Slide 6 text

Why is speed important?

Slide 7

Slide 7 text

Jakob Nielsen’s book „Usability Engineering“ from 1993 Delay User reaction 0 - 100 ms Instant 100 - 300 ms Feels sluggish 300 - 1000 ms Machine is working… 1 s+ Mental context switch 10 s+ I’ll come back later…

Slide 8

Slide 8 text

Web Search Delay Experiment Type of Delay Delay (ms) Duration (weeks) Impact on Avg. Daily Searches Pre-header 100 4 -0.20 % Pre-header 200 6 -0.59% Post-header 400 6 0.59% Post-ads 200 4 0.30% Source: https://www.igvita.com/slides/2012/webperf-crash-course.pdf

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

Network latency is paramount. Why?

Slide 12

Slide 12 text

TCP Source: http://en.wikipedia.org/wiki/Transmission_Control_Protocol Latenz

Slide 13

Slide 13 text

Download a 58 kB file from a US east cost server to a client in Frankfurt. Protocol: HTTP Roundtrip Time: 80 ms Zeit client server 0 ms SYN --> <-- SYN,ACK 80 ms ACK --> GET --> <-- 10 TCP Segmente (14.600 Bytes) 160 ms ACK --> <-- 20 TCP Segmente (29.200 Bytes) 240 ms ACK --> <-- 40 TCP Segmente (15.592 Bytes) 320 ms ACK --> Time to download a 58 kB file: 320 ms

Slide 14

Slide 14 text

TCP Slow-Start KB 0 55 110 165 220 Roundtrip 1. 2. 3. 4. 213 99 42 14 114 57 28 14

Slide 15

Slide 15 text

SSL adds at least   one roundtrip.    HTTP/2.0 needs SSL.

Slide 16

Slide 16 text

HTTPS KB 0 50 100 150 200 Roundtrip 1. 2. 3. 4. 199 85 28 0 114 57 28 14 SSL

Slide 17

Slide 17 text

Above the fold target: 28 KB KB 0 50 100 150 200 Roundtrip 1. 2. 3. 4. 199 85 28 0 114 57 28 14 SSL

Slide 18

Slide 18 text

Latency is king! Bandwidth is not important for normal websites.

Slide 19

Slide 19 text

Frankfurt, Germany Sydney, Australia Sydney: https://www.webpagetest.org/result/170130_3H_S13/  Frankfurt: https://www.webpagetest.org/result/170130_YJ_SRS/ DSL

Slide 20

Slide 20 text

Frankfurt, Germany Sydney, Australia Frankfurt: https://www.webpagetest.org/result/170131_CX_B7D/  Sydney: https://www.webpagetest.org/result/170131_XZ_B7P/ 3G

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

Dulles, VA, USA https://www.webpagetest.org/video/compare.php?tests=170131_QQ_BHG,170131_9F_BHH,170131_49_BHJ DSL

Slide 23

Slide 23 text

How it’s done?

Slide 24

Slide 24 text

Set a time budget and stick to it! Our time budget is 1 second for Germany.

Slide 25

Slide 25 text

Start Render Document Complete

Slide 26

Slide 26 text

Important: We can not control the network!

Slide 27

Slide 27 text

What we can control: • Transfer Protocol (e.g. HTTP/1.1 vs. HTTP/2.0) • Compression (e.g. gzip vs. zopﬂi vs. brotli) • Amount of ﬁles • File size • Time the server needs to generate the HTML • Content (e.g. HTML, CSS, JavaScript, Images)

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

File size Time on the server

Slide 30

Slide 30 text

The Server

Slide 31

Slide 31 text

We use the Phoenix Framework.   www.phoenixframework.org

Slide 32

Slide 32 text

Phoenix is about   10 times faster   than Ruby on Rails or Django. The functional programming language Elixir has a lot of more advantages, but today I’m only talking about speed.

Slide 33

Slide 33 text

We avoid serving freshly generated HTML when not needed. Hard Drives are much cheaper than CPU.

Slide 34

Slide 34 text

/var/www/vutuv/ cache - index.html - index.html.gz users - xyz.html - xyz.html.gz No Cookie = Static Content

Slide 35

Slide 35 text

1,000,000 users x 28 KB = 26 GB

Slide 36

Slide 36 text

Rendering a user’s proﬁle: 50 ms. Serving a static ﬁle: less than 1 ms.

Slide 37

Slide 37 text

The Avatars

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

guetzli -quality 75 a.jpg /tmp/q75-a.jpg convert a.jpg /tmp/q75-a.jpg -fx 'hypot(65-i, 65-j) < 65 ? u : v' new_a.jpg https://github.com/google/guetzli

Slide 45

Slide 45 text

By that we save 15-20% of ﬁle size. BTW: We optimize during off peak times.

Slide 46

Slide 46 text

Compression

Slide 47

Slide 47 text

/var/www/vutuv/ cache - index.html - index.html.gz users - xyz.html - xyz.html.gz Always provide a compressed version of a static ﬁle.

Slide 48

Slide 48 text

html-miniﬁer --case-sensitive --collapse-boolean-attributes --collapse-whitespace --remove-comments --remove-optional-tags --remove-tag-whitespace --sort-attributes --sort-class-name --collapse-inline-tag-whitespace --conservative-collapse a.html > b.html Optimize before compress

Slide 49

Slide 49 text

Use zopﬂi instead of gzip. https://github.com/google/zopﬂi

Slide 50

Slide 50 text

For live content use brotli. https://github.com/google/brotli

Slide 51

Slide 51 text

Inlining

Slide 52

Slide 52 text

HTTP caching is good but for our time budget not good enough.

Slide 53

Slide 53 text

We inline a lot.

Slide 54

Slide 54 text

We inline all the CSS.

Slide 55

Slide 55 text

We inline many images.

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

Fill the Steps KB 0 50 100 150 200 Roundtrip 1. 2. 3. 4. 199 85 28 0 114 57 28 14 SSL