FrOSCon 2017 talk about vutuv

Slide 1

Slide 1 text

fast, free and secure business networking https://www.vutuv.de

Slide 2

Slide 2 text

A Business Network Think LinkedIn or XING but open-source (MIT). Free, fast and secure.

Slide 3

Slide 3 text

Why would one need an other business network?

Slide 4

Slide 4 text

Nobody likes LinkedIn or XING. Too many annoying emails and pop-ups. Nobody likes to pay for premium accounts. But those are First World problems!

Slide 5

Slide 5 text

LinkedIn and XING only work well   in a few countries (but still slow).

Slide 6

Slide 6 text

The majority of potential business networking users use low bandwidth feature phones which don’t support JavaScript. They have no access to LinkedIn at all.   And they can’t pay for a premium account.

Slide 7

Slide 7 text

Some users need extra security. Not just HTTPS but Tor. Think oppressive governments and companies which use proxies to sniff if their employees hunt for new jobs.

Slide 8

Slide 8 text

Unique Selling Points • vutuv accounts are free.  Revenue is generated with ads and human resources features. • vutuv is available.  LinkedIn can’t be used in most parts of the world. vutuv is part of internet.org and can cover the whole world. • vutuv is fast.  3-8 times faster than LinkedIn. • vutuv is secure.  Your boss or government can’t see if you are hunting for a new job. Not just https but Tor.  Bonus: We don’t store passwords. We don’t use cookies for non logged in users. • vutuv profiles have a better Google ranking  Because of the side’s speed an average profile gets a better Google ranking.  For many users it’s there first business networking account at all which results in unique content.

Slide 9

Slide 9 text

Traction Number of accounts 0 250.000 500.000 750.000 1.000.000 Nov. 2016 Dec. 2016 Jan. 2017 Feb. 2017 Mar. 2017 Apr. 2017 April: > 5.000.000 unique visitors per month

Slide 10

Slide 10 text

> 1,000,000 users?! WOW! Did you get VC money?  Did you buy a new car?

Slide 11

Slide 11 text

No, I did not get any VC money.    By now I have given up on it and don’t search for investors any more.

Slide 12

Slide 12 text

Technology Today • Phoenix Framework  Runs on the Erlang-BEAM like WhatsApp. • MySQL • No JavaScript  Runs on all devises! Source-Code: https://github.com/vutuv/vutuv/

Slide 13

Slide 13 text

vutuv differentiates itself from other business networks by speed.

Slide 14

Slide 14 text

WebPerformance Fully Loaded on the browser: 700 ms (DSL in Germany)

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

Why is WebPerformance important?

Slide 17

Slide 17 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 18

Slide 18 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 19

Slide 19 text

Numbers by SOASTA

Slide 20

Slide 20 text

Numbers by SOASTA

Slide 21

Slide 21 text

Network latency is our biggest problem. Why?

Slide 22

Slide 22 text

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

Slide 23

Slide 23 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 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 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 28

Slide 28 text

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

Slide 29

Slide 29 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 30

Slide 30 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 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

How do we tackle WebPerformance?

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

Start Render Document Complete

Slide 36

Slide 36 text

Important: We can not control the network!

Slide 37

Slide 37 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 38

Slide 38 text

No content

Slide 39

Slide 39 text

File size Time on the server

Slide 40

Slide 40 text

The Servers

Slide 41

Slide 41 text

We use NGINX, MySQL and Phoenix Framework. Bare metal. Debian Linux.

Slide 42

Slide 42 text

Phoenix is about   10 times faster   than Ruby on Rails. Yes, I did a proof of concept of vutuv with Ruby on Rails.

Slide 43

Slide 43 text

But just a fast programming language is not good enough! Remember: We have to run vutuv.de on a dime.

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

NGINX is our gatekeeper. It checks for cookies and routes accordingly. I did think of Varnish but hard drive is cheaper than RAM.

Slide 46

Slide 46 text

/var/www/vutuv/ cache - index.html - index.html.gz users - xyz.html - xyz.html.gz No Cookie = Static Content Cross-Site Request Forgery (CSRF)

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

The Avatars A little bit more than just https://github.com/stavro/arc

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

No content

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 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 57

Slide 57 text

By that we save 15-20% of ﬁle size. We use https://github.com/stavro/arc for uploading and initial conversion and optimize during off peak times.

Slide 58

Slide 58 text

Compression

Slide 59

Slide 59 text

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

Slide 60

Slide 60 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 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

Inlining

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

We inline a lot.

Slide 66

Slide 66 text

We inline all the CSS. Obviously we don’t use Twitter Bootstrap.

Slide 67

Slide 67 text

We inline many images.

Slide 68

Slide 68 text

No content

Slide 69

Slide 69 text

No content

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

Prefetch

Slide 72

Slide 72 text

Analyse your workﬂow and prefetch stuff that you’ll need in the next step. […] <%= if @conn.assigns[:prefetch] do %> <% end %>

Slide 73

Slide 73 text

No content

Slide 74

Slide 74 text

The future of vutuv?

Slide 75

Slide 75 text

Obviously money is the biggest problem. Because we don’t use JavaScript we can’t use the classic Google Ads system to earn money. And charging for accounts is a no go either.

Slide 76

Slide 76 text

Potential Future Technology • Phoenix Framework  Runs on the Erlang-BEAM like WhatsApp. • CouchDB  Syncs over continents. Super fast anywhere. • No JavaScript  Runs on all devises! • Cheap servers  The world is our data center (blue dots). We are not affected by catastrophes. DNS will reroute to other continents. • Short distance to the browser  This ensures the best browsing experience.

Slide 77

Slide 77 text

You can help! Please create an account and tell your friends about www.vutuv.de

Slide 78

Slide 78 text

www.wintermeyer-consulting.de Ruby on Rails, Phoenix und WebPerformance. twitter.com/wintermeyer