Slide 1

Slide 1 text

Browser Perf 101

Slide 2

Slide 2 text

About Albert Casademont ulabox.com @acasademont (no me busquéis en Linkedin)

Slide 3

Slide 3 text

why perf matters?

Slide 4

Slide 4 text

speed = money

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

but i'm a developer!

Slide 7

Slide 7 text

DevOps

Slide 8

Slide 8 text

source: wikipedia.org

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

3-way TCP handshake source: http://www.admin-magazine.com

Slide 11

Slide 11 text

TCP Flow control source: High Performace Networking (I. Grigorik)

Slide 12

Slide 12 text

Performance check-list low latency is king! keep-alive initcwnd >= 10 disable slow start after idle tcp fast open (kernel >= 3.6)

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

critical rendering path

Slide 15

Slide 15 text

critical rendering path source: http://http://www.sitepoint.com

Slide 16

Slide 16 text

critical rendering path source: http://http://www.sitepoint.com

Slide 17

Slide 17 text

Performance check-list cache! keep bytes low (minimize, gzip) inline above the fold css make async js when possible lazy-load below the fold images

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

https = http + tls

Slide 20

Slide 20 text

TLS Handshake source: https://devcentral.f5.com/articles/ssl-profiles-part-1

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

SPDY HTTP 2.0

Slide 23

Slide 23 text

GoogleBot HTTPS

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

http vs NICE https

Slide 26

Slide 26 text

Resources

Slide 27

Slide 27 text

Resources http://www.webpagetest.org https://blog.cloudflare.com https://igvita.com https://insouciant.org https://imperialviolet.org https://ssllabs.com/ssltest

Slide 28

Slide 28 text

gràcies ;)