WebPerformance für Reiseblogger - Speaker Deck

Tweet

Tweet

Slide 1

Slide 1 text

W E B P E R F F Ü R R E I S E B L O G S S T E FA N W I N T E R M E Y E R Mt. Everest

Slide 2

Slide 2 text

Ich beschäftige mich seit über 20 Jahren mit Tourismus und Webseiten. Achtung: Gleich kommt ein Screenshot von 1996.

Slide 3

Slide 3 text

Stefan Wintermeyer • 1993 - 1998: SW Reisedienst • 1998 - 2001: SuSE Linux AG • 2001 - 2003: Lufthansa AG • 2003 - 2005: OTRS GmbH • 2005 - 2017: amooma GmbH • Ab 2017: Wintermeyer Consulting

Slide 4

Slide 4 text

Meine erste kommerzielle Webseite: 1996

Slide 5

Slide 5 text

Heute verdiene ich mein Geld mit Consulting und Training rund um WebPerformance, Rails und Phoenix. Aber das Thema Reisen beschäftigt mich immer noch.

Slide 6

Slide 6 text

Aber das Thema Reisen beschäftigt mich immer noch. reisepassnummer.de mehr-schulferien.de

Slide 7

Slide 7 text

mehr-schulferien.de

Slide 8

Slide 8 text

Warum sind schnelle Webseiten wichtig?

Slide 9

Slide 9 text

Yo ho ho and a few billion pages of RUM How speed affects bounce rate @igrigorik

Slide 10

Slide 10 text

Usability Engineering 101 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... Stay under 250 ms to feel "fast". Stay under 1000 ms to keep users attention. @igrigorik

Slide 11

Slide 11 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 12

Slide 12 text

For many, mobile is the one and only internet device! Country Mobile-only users Egypt 70% India 59% South Africa 57% Indonesia 44% United States 25% onDevice Research @igrigorik

Slide 13

Slide 13 text

< 1.000 ms Page Loading Time on G3 ist der Mount Everest.

Slide 14

Slide 14 text

The (short) life of our 1000 ms budget 3G (200 ms RTT) 4G(80 ms RTT) Control plane (200-2500 ms) (50-100 ms) DNS lookup 200 ms 80 ms TCP Connection 200 ms 80 ms TLS handshake (200-400 ms) (80-160 ms) HTTP request 200 ms 80 ms Leftover budget 0-400 ms 500-760 ms Network overhead of one HTTP request! @igrigorik

Slide 15

Slide 15 text

SEO

Slide 16

Slide 16 text

Grundregel: Google bevorzugt schnelle Webseiten.

Slide 17

Slide 17 text

Aber: Wenn man eine Webseite mit den Lottozahlen der nächsten Woche hat, dann kann diese Seite noch so langsam sein. Sie hätte immer ein gutes Ranking.

Slide 18

Slide 18 text

Ein Reiseblog über New York muss schnell sein. Ein Reiseblog über Mandang in Papua Neuguinea nicht zwingend.

Slide 19

Slide 19 text

Webpage Rendering Basics

Slide 20

Slide 20 text

Network HTML DOM CSS CSSOM JavaScript Render tree Layout Paint

Slide 21

Slide 21 text

Network HTML DOM CSS CSSOM JavaScript Render tree Layout Paint

Slide 22

Slide 22 text

Network HTML DOM CSS CSSOM JavaScript Render tree Layout Paint

Slide 23

Slide 23 text

Network HTML DOM CSS CSSOM JavaScript Render tree Layout Paint

Slide 24

Slide 24 text

Network HTML DOM CSS CSSOM JavaScript Render tree Layout Paint

Slide 25

Slide 25 text

The rendering process takes a minimum of 100 ms which we have to subtract from the 1,000 ms.

Slide 26

Slide 26 text

Download a ﬁle with HTTP/TCP

Slide 27

Slide 27 text

Latency client Zeit 0 ms 80 ms 160 ms 240 ms 320 ms 10 TCP Segmente (14.600 Bytes) 20 TCP Segmente (29.200 Bytes) 40 TCP Segmente (15.592 Bytes) server SYN ACK ACK GET SYN,ACK ACK ACK

Slide 28

Slide 28 text

TCP Slow-Start KB 0 55 110 165 220 Roundtrip 1. 2. 3. 4. 214KB 100KB 43KB 14KB 114KB 57KB 29KB 14KB

Slide 29

Slide 29 text

Waterfall www.webpagetest.org https://reisebloggercamp.de

Slide 30

Slide 30 text

3G Run => https://www.webpagetest.org/result/ 180413_KR_013db9231a7322fbf13cc121f0893d40/

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

LTE Run => https://www.webpagetest.org/result/ 180413_7R_b2d5c2a1dab34bda18ba79ea15d9d4e6/

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

Was ist technisch in Deutschland machbar?

Slide 38

Slide 38 text

LTE run => https://www.webpagetest.org/result/ 180316_5B_de436fb724593d7b746b9c1f89ff3c2d/

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

HTTP/1.2 vs. HTTP/2

Slide 43

Slide 43 text

HTTP/2 provides an average WebPerformance improvement of 20%. It’s a no-brainer. You have to use it!

Slide 44

Slide 44 text

CDNs and HTTP/2

Slide 45

Slide 45 text

Long story short:  In many cases where a CDN made sense with HTTP/1.1 it doesn’t make sense any more. Try to deliver everything from your server.

Slide 46

Slide 46 text

Apache vs. Nginx

Slide 47

Slide 47 text

It doesn’t matter!  Use the one you like most.

Slide 48

Slide 48 text

Brotli vs. gzip

Slide 49

Slide 49 text

Always offer both. Brotli can be used to save bandwidth and CPU-Resources.

Slide 50

Slide 50 text

P R E L O A D I N G U N D P R E F E T C H I N G

Slide 51

Slide 51 text

P R E L O A D I N G U N D P R E F E T C H I N G

Slide 52

Slide 52 text

M A N U A L D N S - P R E F E T C H http://www.chromium.org/developers/design-documents/dns-prefetching „Most common names like google.com and yahoo.com are resolved so often that most local ISP's name resolvers can answer in closer to 80-120ms. If the domain name in question is an uncommon name, then a query may have to go through numerous resolvers up and down the hierarchy, and the delay can average closer to 200-300ms.“

Slide 53

Slide 53 text

P R E F E T C H http://www.whatwg.org/specs/web-apps/current-work/#link-type-prefetch „The prefetch keyword indicates that preemptively fetching and caching the specified resource is likely to be beneficial, as it is highly likely that the user will require this resource.“ T I P P : " A C C E P T - R A N G E S : B Y T E S “ H E A D E R

Slide 54

Slide 54 text

P R E R E N D E R

Slide 55

Slide 55 text

Y O U C A N T E L L N G I N X T O P U S H T H O S E F I L E S V I A H T T P / 2 .

Slide 56

Slide 56 text

AMP

Slide 57

Slide 57 text

www.ampproject.org

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

No content

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

The Most Important Tool?

Slide 62

Slide 62 text

Set a Time Budget! If you run out of your time budget you have to cancel features on your website.

Slide 63

Slide 63 text

Is WebPerformance really so hard?

Slide 64

Slide 64 text

The WebPerf Bible. => https://hpbn.co

Slide 65

Slide 65 text

http://www.heise.de/ix/inhalt/2015/8/102/

Slide 66

Slide 66 text

@wintermeyer

Slide 67

Slide 67 text

Kann ich mir das einkaufen?

Slide 68

Slide 68 text

Wordpress und wenig Geld? https://www.ﬁverr.com/gigs/amp

Slide 69

Slide 69 text

Wordpress und gerne alles auf Deutsch? http://www.richertproduction.de

Slide 70

Slide 70 text

sw@wintermeyer-consulting.de last name | twitter | github e-mail