WebPerformance für Reiseblogger

Vortrag den ich auf https://reisebloggercamp.de 2018 gehalten habe.

Transcript

1. 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
2. Ich beschäftige mich seit über 20 Jahren mit Tourismus und Webseiten. Achtung: Gleich kommt ein Screenshot von 1996.
3. 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
4. Meine erste kommerzielle Webseite: 1996
5. Heute verdiene ich mein Geld mit Consulting und Training rund um WebPerformance, Rails und Phoenix. Aber das Thema Reisen beschäftigt mich immer noch.
6. Aber das Thema Reisen beschäftigt mich immer noch. reisepassnummer.de mehr-schulferien.de
7. mehr-schulferien.de
8. Warum sind schnelle Webseiten wichtig?
9. Yo ho ho and a few billion pages of RUM How speed affects bounce rate @igrigorik
10. 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
11. 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
12. 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
13. < 1.000 ms Page Loading Time on G3 ist der Mount Everest.
14. 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
15. SEO
16. Grundregel: Google bevorzugt schnelle Webseiten.
17. 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.
18. Ein Reiseblog über New York muss schnell sein. Ein Reiseblog über Mandang in Papua Neuguinea nicht zwingend.
19. Webpage Rendering Basics
20. Network HTML DOM CSS CSSOM JavaScript Render tree Layout Paint
21. Network HTML DOM CSS CSSOM JavaScript Render tree Layout Paint
22. Network HTML DOM CSS CSSOM JavaScript Render tree Layout Paint
23. Network HTML DOM CSS CSSOM JavaScript Render tree Layout Paint
24. Network HTML DOM CSS CSSOM JavaScript Render tree Layout Paint
25. The rendering process takes a minimum of 100 ms which we have to subtract from the 1,000 ms.
26. Download a file with HTTP/TCP
27. 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
28. TCP Slow-Start KB 0 55 110 165 220 Roundtrip 1. 2. 3. 4. 214KB 100KB 43KB 14KB 114KB 57KB 29KB 14KB
29. Waterfall www.webpagetest.org https://reisebloggercamp.de
30. 3G Run => https://www.webpagetest.org/result/ 180413_KR_013db9231a7322fbf13cc121f0893d40/
34. LTE Run => https://www.webpagetest.org/result/ 180413_7R_b2d5c2a1dab34bda18ba79ea15d9d4e6/
37. Was ist technisch in Deutschland machbar?
38. LTE run => https://www.webpagetest.org/result/ 180316_5B_de436fb724593d7b746b9c1f89ff3c2d/
42. HTTP/1.2 vs. HTTP/2
43. HTTP/2 provides an average WebPerformance improvement of 20%. It’s a no-brainer. You have to use it!
44. CDNs and HTTP/2
45. 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.
46. Apache vs. Nginx
47. It doesn’t matter!
 Use the one you like most.
48. Brotli vs. gzip
49. Always offer both. Brotli can be used to save bandwidth and CPU-Resources.
50. P R E L O A D I N G U N D P R E F E T C H I N G
51. P R E L O A D I N G U N D P R E F E T C H I N G <link rel="dns-prefetch"... <link rel="prefetch"... <link rel="prerender"... DNS pre-resolution TCP pre-connect prefresh preloader
52. M A N U A L D N S - P R E F E T C H <link rel="dns-prefetch" href="//abc.com"> 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.“
53. P R E F E T C H <link rel="prefetch" href=„http://abc.com/important.js"> 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
54. P R E R E N D E R <link rel="prerender" href=„http://abc.com/faq.html“>
55. 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 .
56. AMP
57. www.ampproject.org
61. The Most Important Tool?
62. Set a Time Budget! If you run out of your time budget you have to cancel features on your website.
63. Is WebPerformance really so hard?
64. The WebPerf Bible. => https://hpbn.co
65. http://www.heise.de/ix/inhalt/2015/8/102/
66. @wintermeyer
67. Kann ich mir das einkaufen?
68. Wordpress und wenig Geld? https://www.fiverr.com/gigs/amp
69. Wordpress und gerne alles auf Deutsch? http://www.richertproduction.de
70. sw@wintermeyer-consulting.de last name | twitter | github e-mail