Tweet
Tweet

Slide 1

Slide 1 text

Front-end optimization Make it fast! rj zaworski, versal inc. · @rjzaworski · github.com/rjz

Slide 2

Slide 2 text

Any questions?

Slide 3

Slide 3 text

The First Rule of Optimization Don’t.

Slide 4

Slide 4 text

The Second Rule of Optimization Optimize for dev time.

Slide 5

Slide 5 text

So why do we care? ★ 47% of consumers expect a web page to load in 2 seconds or less. ★ 40% of people abandon a website that takes more than 3 seconds to load. (http://blog.kissmetrics.com/loading-time/)

Slide 6

Slide 6 text

It's even worse for mobile. “73% of mobile internet users say that they’ve encountered a website that was too slow to load.” (http://blog.kissmetrics.com/loading-time/)

Slide 7

Slide 7 text

How do we know our site is slow?

Slide 8

Slide 8 text

Measurement Tools ★ Chrome DevTools ★ Google PageSpeed ★ YSlow (

Slide 9

Slide 9 text

The internet is pretty much a garden hose.

Slide 10

Slide 10 text

Why is it slow? ★ Bandwidth: how big is the pipe?

Slide 11

Slide 11 text

Why is it slow? ★ Bandwidth: how big is the pipe? ★ Volume: how much needs to be delivered?

Slide 12

Slide 12 text

Why is it slow? ★ Bandwidth: how big is the pipe? ★ Volume: how much needs to be delivered? ★ Proximity: how far away are the ends?

Slide 13

Slide 13 text

So how do we make it faster?

Slide 14

Slide 14 text

Is the pipe clogged? ★ Concurrent connections are limited per host ★ Browser mileage may vary (http://www.browserscope.org/?category=network)

Slide 15

Slide 15 text

Script elements ...can either reference external scripts...

Slide 16

Slide 16 text

Script elements ...or inline scripts..

Slide 17

Slide 17 text

Script elements ...but either use will exhibit blocking!

Slide 18

Slide 18 text

Well, that’s not good.

Slide 19

Slide 19 text

Script elements ★ Place scripts at bottom of page

Slide 20

Slide 20 text

Script elements ★ Place scripts at bottom of page ★ Set and for external scripts

Slide 21

Slide 21 text

Async ain’t everything ★ Browsers will prefetch when possible ★ Execution is still deferred

Slide 22

Slide 22 text

When will async scripts run? ¯\_(ツ)_/¯

Slide 23

Slide 23 text

Wait for predictable events

Slide 24

Slide 24 text

Wait for predictable events

Slide 25

Slide 25 text

But we’re still making a lot of requests.

Slide 26

Slide 26 text

HTTP isn’t free ★ Every request has headers

Slide 27

Slide 27 text

HTTP isn’t free ★ Every request has headers ★ Keep an eye on that !

Slide 28

Slide 28 text

HTTP isn’t free ★ Every request has headers ★ Keep an eye on that ! ★ Batch overhead where possible

Slide 29

Slide 29 text

Concatenate external files ★ Reduce HTTP overhead ★ Reduce concurrent requests

Slide 30

Slide 30 text

Concatenate external files ★ Reduce HTTP overhead ★ Reduce concurrent requests

Slide 31

Slide 31 text

And small is beautiful.

Slide 32

Slide 32 text

Minify concatenated files ★ uglifyjs is pretty good ★ closure compiler is really good ★ Hint: build tools support these

Slide 33

Slide 33 text

Serve compressed content ★ Browsers support gzip

Slide 34

Slide 34 text

Serve compressed content ★ Browsers support gzip ★ Servers do, too!

Slide 35

Slide 35 text

Stylesheets? Same tricks. ★ won’t block ★ each triggers a request ★ cssmin is pretty good

Slide 36

Slide 36 text

Preprocessing ★ Use a preprocessor (SASS, Stylus, LESS) ★ Concatenation, minification are free Optimize for dev time!

Slide 37

Slide 37 text

Inline small scripts ★ Bundle HTTP overhead with page request ★ The price: caching

Slide 38

Slide 38 text

Did someone say caching?

Slide 39

Slide 39 text

Caching: the Big Idea ★ Less distance == faster ★ Keep content as close as possible

Slide 40

Slide 40 text

Caching: the bad news There are only two hard things in Computer Science: cache invalidation and naming things. —Phil Karlton

Slide 41

Slide 41 text

Enable browser caching ★ HTTP can help

Slide 42

Slide 42 text

Enable browser caching ★ HTTP can help ★ Use header (http://www.mobify.com/blog/beginners-guide-to-http-cache-headers/)

Slide 43

Slide 43 text

Enable browser caching ★ HTTP can help ★ Use header ★ Set if content will change

Slide 44

Slide 44 text

What about content that always changes?

Slide 45

Slide 45 text

Enable browser caching ★ HTTP can help ★ Use header ★ Set if content will change ★ Use with dynamic content

Slide 46

Slide 46 text

We can tell the browser even more.

Slide 47

Slide 47 text

Browser caching Describe app dependencies in a manifest

Slide 48

Slide 48 text

Browser caching Describe app dependencies in a manifest (https://developer.mozilla.org/en-US/docs/Web/HTML/Using_the_application_cache)

Slide 49

Slide 49 text

Browser caching ★ static assets

Slide 50

Slide 50 text

Browser caching ★ static assets ★ declare paths that require access

Slide 51

Slide 51 text

Browser caching ★ static assets ★ declare paths that require access ★ provide a

Slide 52

Slide 52 text

Use a Content Delivery Network ★ located near the users ★ replicate automagically ★ == fast

Slide 53

Slide 53 text

Use a Content Delivery Network Share common assets with everyone else ★ cdnjs.com ★ jsDelivr.com ★ Google Hosted Libraries

Slide 54

Slide 54 text

Use a Content Delivery Network ★ Failure happens

Slide 55

Slide 55 text

Use a Content Delivery Network ★ Failure happens ★ So keep a local fallback handy

Slide 56

Slide 56 text

Server-side caching On the application server ★ Minimize disk I/O ★ Cache popular files in memory Optimize for dev time!

Slide 57

Slide 57 text

Summing up ★ Bandwidth: how big is the pipe? ★ Volume: how much needs to be delivered? ★ Proximity: how far away are the ends?

Slide 58

Slide 58 text

Summing up ★ Bandwidth: avoid blocking behaviors ★ Volume: minimize request count and size ★ Proximity: use browser caching and a CDN

Slide 59

Slide 59 text

Summing up ★ Bandwidth: avoid blocking behaviors ★ Volume: minimize request count and size ★ Proximity: use browser caching and a CDN ★ Optimize for dev time!

Slide 60

Slide 60 text

Thank you! rj zaworski, versal inc. · @rjzaworski · github.com/rjz