Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

Slow websites SUCK

Slide 3

Slide 3 text

WEB PERFORMANCE IS AN ESSENTIAL PART OF THE USER EXPERIENCE

Slide 4

Slide 4 text

SLOW ~ DOWN

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

THROWING SERVERS AT THE PROBLEM

Slide 9

Slide 9 text

MO' MONEY MO' SERVERS MO' PROBLEMS

Slide 10

Slide 10 text

IDENTIFY SLOWEST PARTS

Slide 11

Slide 11 text

OPTIMIZE

Slide 12

Slide 12 text

AFTER A WHILE YOU HIT THE LIMITS

Slide 13

Slide 13 text

CACHE

Slide 14

Slide 14 text

HI, I'M THIJS

Slide 15

Slide 15 text

I'M AN EVANGELIST AT

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

4,800,000 WEBSITES 19% OF THE TOP 10K WEBSITES

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

I'M @THIJSFERYN

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

BEYOND BASIC WEB ACCELERATION?

Slide 23

Slide 23 text

BASIC

Slide 24

Slide 24 text

CONTENT DELIVERY CHALLENGES

Slide 25

Slide 25 text

REDUCE LATENCY

Slide 26

Slide 26 text

IMPACT ON YOUR SERVERS

Slide 27

Slide 27 text

COMPUTING POWER

Slide 28

Slide 28 text

NETWORK CAPACITY

Slide 29

Slide 29 text

DON’T RECOMPUTE IF THE DATA HASN’T CHANGED

Slide 30

Slide 30 text

REVERSE CACHING PROXY

Slide 31

Slide 31 text

NORMALLY USER SERVER

Slide 32

Slide 32 text

WITH REVERSE CACHING PROXY USER PROXY SERVER

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

WHY NOT USE A CDN?

Slide 36

Slide 36 text

VARNISH IS CDN SOFTWARE!

Slide 37

Slide 37 text

ORIGIN SHIELD

Slide 38

Slide 38 text

VARNISH CAN BE YOUR CDN

Slide 39

Slide 39 text

WHY IS VARNISH SO POWERFUL?

Slide 40

Slide 40 text

WHY IS VARNISH SO POWERFUL? ✓ EXTREMELY LOW RESOURCE ✓ EXTREMELY STABLE ✓ 100 GBIT PER SERVER ✓ NO DISK ACCESS AT RUNTIME ✓ REQUEST COALESCING ✓ VARNISH CONFIGURATION LANGUAGE ✓ VMODS ✓ COMPLIES TO HTTP BEST PRACTICES ✓ ENTERPRISE FEATURES*

Slide 41

Slide 41 text

ORIGIN VARNISH REQUEST COALESCING

Slide 42

Slide 42 text

POWER THE REASON WHY PEOPLE TRUST VARNISH

Slide 43

Slide 43 text

HTTP THE REASON WHY PEOPLE USE VARNISH

Slide 44

Slide 44 text

HTTP CACHING MECHANISMS Expires: Sat, 09 Sep 2017 14:30:00 GMT Cache-control: public, max-age=3600, s-maxage=86400 Cache-control: private, no-cache, no-store

Slide 45

Slide 45 text

CACHE VARIATIONS Vary: Accept-Language

Slide 46

Slide 46 text

CONDITIONAL REQUESTS HTTP/1.1 200 OK Host: localhost Etag: 7c9d70604c6061da9bb9377d3f00eb27 Content-type: text/html; charset=UTF-8 Hello world output GET / HTTP/1.1 Host: localhost

Slide 47

Slide 47 text

CONDITIONAL REQUESTS HTTP/1.1 304 Not Modified Host: localhost Etag: 7c9d70604c6061da9bb9377d3f00eb27 GET / HTTP/1.1 Host: localhost If-None-Match: 7c9d70604c6061da9bb9377d3f00eb27

Slide 48

Slide 48 text

STATE

Slide 49

Slide 49 text

COOKIES

Slide 50

Slide 50 text

IN AN IDEAL WORLD

Slide 51

Slide 51 text

✓STATELESS ✓WELL-DEFINED TTL ✓CACHE / NO-CACHE PER RESOURCE ✓CACHE VARIATIONS ✓CONDITIONAL REQUESTS ✓PLACEHOLDERS FOR NON-CACHEABLE CONTENT IN AN IDEAL WORLD

Slide 52

Slide 52 text

REALITY SUCKS

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

TIME TO LIVE

Slide 56

Slide 56 text

CACHE VARIATIONS

Slide 57

Slide 57 text

LEGACY

Slide 58

Slide 58 text

VCL THE REASON WHY PEOPLE ❤ VARNISH

Slide 59

Slide 59 text

No content

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

sub vcl_recv { if (req.url ~ "^/status\.php$" || req.url ~ "^/update\.php$" || req.url ~ "^/admin$" || req.url ~ "^/admin/.*$" || req.url ~ "^/flag/.*$" || req.url ~ "^.*/ajax/.*$" || req.url ~ "^.*/ahah/.*$") { return (pass); } } URL blacklist example

Slide 62

Slide 62 text

sub vcl_recv { if (req.url ~ "^/some-page" return (hash); } } URL whitelist example

Slide 63

Slide 63 text

vcl 4.0; sub vcl_recv { if (req.http.Cookie) { set req.http.Cookie = ";" + req.http.Cookie; set req.http.Cookie = regsuball(req.http.Cookie, "; +", ";"); set req.http.Cookie = regsuball(req.http.Cookie, ";(SESS[a-z0-9]+|SSESS[a-z0-9]+|NO_CACHE)=", "; \1="); set req.http.Cookie = regsuball(req.http.Cookie, ";[^ ][^;]*", ""); set req.http.Cookie = regsuball(req.http.Cookie, "^[; ]+|[; ]+$", ""); if (req.http.Cookie == "") { unset req.http.Cookie; } else { return (pass); } } } Only keep certain cookies

Slide 64

Slide 64 text

sub vcl_recv { if (req.http.Cookie) { set req.http.Cookie = ";" + req.http.Cookie; set req.http.Cookie = regsuball(req.http.Cookie, "; +", ";"); set req.http.Cookie = regsuball(req.http.Cookie, ";(language)=", "; \1="); set req.http.Cookie = regsuball(req.http.Cookie, ";[^ ][^;]*", ""); set req.http.Cookie = regsuball(req.http.Cookie, "^[; ]+|[; ]+$", ""); if (req.http.cookie ~ "^\s*$") { unset req.http.cookie; return(pass); } return(hash); } } sub vcl_hash { hash_data(regsub( req.http.Cookie, "^.*language=([^;]*);*.*$", "\1" )); } Cookie cache variation

Slide 65

Slide 65 text

THE VMOD ECOSYSTEM HTTPS://VARNISH-CACHE.ORG/VMODS/ HTTPS://DOCS.VARNISH-SOFTWARE.COM/VARNISH-CACHE-PLUS/VMODS/

Slide 66

Slide 66 text

NEXT LEVEL

Slide 67

Slide 67 text

NOT JUST A CACHE NOT JUST "TAKE IT OR LEAVE IT"

Slide 68

Slide 68 text

AN HTTP LOGIC BOX

Slide 69

Slide 69 text

DECISION MAKING AT THE EDGE

Slide 70

Slide 70 text

import accept; sub vcl_init { new format = accept.rule("text/plain"); format.add("text/html"); format.add("application/json"); new lang = accept.rule("en"); lang.add("fr"); } sub vcl_recv { set req.http.accept = format.filter(req.http.accept); set req.http.accept-language = lang.filter(req.http.accept-language); } Sanitize accept headers

Slide 71

Slide 71 text

CACHE VARIATIONS VARY: ACCEPT-LANGUAGE VARY: ACCEPT ✓ EN ✓ FR ✓ TEXT/HTML ✓ APPLICATION/JSON

Slide 72

Slide 72 text

import crypto; import edgestash; import xbody; sub vcl_backend_response{ if (beresp.http.Content-Type ~ "html") { xbody.regsub("", "<script nonce={{nonce}}>"); edgestash.parse_response(); } } sub vcl_deliver { if (edgestash.is_edgestash()) { set req.http.X-nonce = crypto.hex_encode(crypto.urandom(16)); set resp.http.Content-Security-Policy = "script-src 'nonce-" + req.http.X-nonce + "'"; edgestash.add_json({" { "nonce":""} + req.http.X-nonce + {"" } "}); edgestash.execute(); } } Personalized Javascript CSP nonce

Slide 73

Slide 73 text

import cookieplus; import edgestash; import kvstore; import xbody; sub vcl_init { new session_json = kvstore.init(); } sub vcl_recv { unset req.http.X-do-capture; unset req.http.X-session; if (req.method != "HEAD" && req.method != "GET") { return (pass); } if (!session_json.get(cookieplus.get("session"))) { return (pass); } return (hash); } CACHE PERSONALIZATION

Slide 74

Slide 74 text

sub vcl_pass { set req.http.X-do-capture = "true"; } sub vcl_backend_response { if (beresp.http.Content-Type ~ "text") { if (bereq.http.X-do-capture) { xbody.capture("name", "Hello (\S+)", "\1"); } else { xbody.regsub("Hello \S+", "Hello {{name}}"); edgestash.parse_response(); } } } sub vcl_deliver { if (cookieplus.get("session")) { set req.http.X-session = cookieplus.get("session"); } else if (cookieplus.setcookie_get("session")) { set req.http.X-session = cookieplus.setcookie_get("session"); } if (req.http.X-session && xbody.get("name")) { session_json.set(req.http.X-session, xbody.get_all(), 24h); } if (edgestash.is_edgestash()) { edgestash.add_json(session_json.get(req.http.X-session)); edgestash.execute(); } } Capture value Turn value into placeholder Store value in K/V store Parse value into placeholder

Slide 75

Slide 75 text

import deviceatlas; sub vcl_recv { set req.http.MobilePhone = "no"; if (deviceatlas.lookup_int(req.http.User-Agent, "isMobilePhone")) { set req.http.MobilePhone = "yes"; } } Device detection

Slide 76

Slide 76 text

vcl 4.0; import mmdb; backend default { .host = "192.0.2.11"; .port = "8080"; } # create a database object sub vcl_init { new geodb = mmdb.init("/path/to/db"); } sub vcl_recv { # retrieve the name of the request's origin set req.http.Country-Name = geodb.country_name(client.ip); # if the country doesn't come from Germany or Belgium, deny access if (req.http.Country-Name != "Germany" || req.http.Country-Name != "Belgium") { return (synth(403, "Sorry, only available in Germany and Belgium")); } } Geo blocking

Slide 77

Slide 77 text

vcl 4.0; import http; backend default { .host = "origin"; .port = "80"; } sub vcl_recv { set req.http.X-prefetch = http.varnish_url("/"); } sub vcl_backend_response { if (beresp.http.Link ~ "<.+>.*(prefetch|next)") { set bereq.http.X-link = regsub(beresp.http.Link, "^.*<([^>]*)>.*$", "\1"); set bereq.http.X-prefetch = regsub(bereq.http.X-prefetch, "/$", bereq.http.X-link); http.init(0); http.req_copy_headers(0); http.req_set_url(0, bereq.http.X-prefetch); http.req_send_and_finish(0); } } Pre-fetching

Slide 78

Slide 78 text

VARNISH DOESN'T JUST ACCELERATE WEB PAGES

Slide 79

Slide 79 text

ONLINE VIDEO STREAMING

Slide 80

Slide 80 text

No content

Slide 81

Slide 81 text

PACKAGING

Slide 82

Slide 82 text

HTTP LIVE STREAMING (HLS)

Slide 83

Slide 83 text

VIDEO.MP4 STREAM.M3U8 STREAM_01.TS STREAM_02.TS STREAM_03.TS ENCODING & PACKAGING VIDEO: H264 AUDIO: AAC

Slide 84

Slide 84 text

#EXTM3U #EXT-X-VERSION:3 #EXT-X-TARGETDURATION:6 #EXT-X-MEDIA-SEQUENCE:0 #EXT-X-PLAYLIST-TYPE:VOD #EXTINF:6.000000, stream_00.ts #EXTINF:6.000000, stream_01.ts #EXTINF:6.000000, stream_02.ts #EXTINF:6.000000, stream_03.ts #EXTINF:6.000000, stream_04.ts #EXTINF:6.000000, stream_05.ts #EXTINF:6.000000, stream_06.ts #EXTINF:6.000000, stream_07.ts #EXTINF:6.000000, stream_08.ts #EXTINF:6.000000, stream_09.ts #EXTINF:5.280000, stream_010.ts #EXT-X-ENDLIST STREAM.M3U8

Slide 85

Slide 85 text

Slide 86

Slide 86 text

MORE VIDEO FEATURES ✓ GEOIP ✓ DIGITAL RIGHTS MANAGEMENT ✓ AUTHENTICATION ✓ THROTTLING & RATE LIMITING ✓ ADAPTIVE BITRATE FILTERING

Slide 87

Slide 87 text

vcl 4.1; import http; import std; backend default { .host = "origin"; .port = "80"; } sub vcl_recv { if (req.url ~ "^/vod/.+\.ts$") { http.init(0); http.req_set_max_loops(0,1); http.req_copy_headers(0); http.req_set_method(0, "HEAD"); set req.http.x-next-url = http.prefetch_next_url(); std.log("Prefetching " + req.http.x-next-url); http.req_set_url(0, req.http.x-next-url); http.req_send_and_finish(0); } }

Slide 88

Slide 88 text

OUR BIGGEST CLIENTS ARE IN BROADCASTING

Slide 89

Slide 89 text

vcl 4.0; import cookieplus; import redis; import synthbackend; sub vcl_init { new db = redis.db( location="redis:6379", type=master, connection_timeout=500, shared_connections=false, max_connections=1); } sub vcl_recv { set req.http.X-Login = "false"; set req.http.x-session = cookieplus.get("PHPSESSID","guest"); if(req.http.x-session != "guest") { db.command("EXISTS"); db.push("sf_s"+cookieplus.get("PHPSESSID")); db.execute(); if(db.get_integer_reply() == 1) { set req.http.X-Login = "true"; } } } Synthetic HTTP

Slide 90

Slide 90 text

sub vcl_backend_fetch { if(bereq.url == "/session") { if(bereq.http.X-Login != "true") { set bereq.backend = synthbackend.from_string("{}"); return(fetch); } db.command("EVAL"); db.push({" local session = redis.call('GET', KEYS[1]) if session == nil then return '{}' end local result = string.gsub(session, '[%c]', '') local username = string.gsub(result,'.+Userusername\";s:[0-9]+:\"([^\"]+)\";.+','%1') if username == nil then return '{}' end return '{"username":"'.. username ..'"}' "}); db.push(1); db.push("sf_s"+cookieplus.get("PHPSESSID")); db.execute(); set bereq.backend = synthbackend.from_string(db.get_string_reply()); } } sub vcl_backend_response { if(bereq.url == "/session") { set beresp.http.Content-Type = "application/json; charset=utf-8"; set beresp.ttl = 3600s; set beresp.http.vary = "x-session"; } } Synthetic HTTP

Slide 91

Slide 91 text

No content

Slide 92

Slide 92 text

VARNISH ENTERPRISE ✓ CLIENT SSL TERMINATION ✓ BACKEND SSL CONNECTIONS ✓ PARALLEL ESI ✓ MASSIVE STORAGE ENGINE ✓ ENCRYPTION ✓ THROTTLING ✓ RATE LIMITING ✓ PREFETCHING ✓ GEOLOCATION ✓ AUTHENTICATION ✓ EDGESTASH ✓ CUSTOM STATISTICS ✓ ADMIN MODULE ✓ SUPPORT ✓ HIGH AVAILABILITY ✓ MOBILE APP

Slide 93

Slide 93 text

No content

Slide 94

Slide 94 text

No content

Slide 95

Slide 95 text

HTTPS://GITHUB.COM/THIJSFERYN/EDGESTASHTWIGBUNDLE

Slide 96

Slide 96 text

COMPOSER REQUIRE THIJSFERYN/EDGESTASH-TWIG-BUNDLE

Slide 97

Slide 97 text

{{ edgestash('username','/session') }}
{{ username | edgestash('username','/session') }}

Slide 98

Slide 98 text

No content

Slide 99

Slide 99 text

No content

Slide 100

Slide 100 text

HTTPS://FERYN.EU HTTPS://TWITTER.COM/THIJSFERYN HTTPS://INSTAGRAM.COM/THIJSFERYN