Slide 1

Slide 1 text

Front-end optimization Make it fast! rj zaworski · @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

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. ★ That was 2011. What’s changed? (http://blog.kissmetrics.com/loading-time/)

Slide 7

Slide 7 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 8

Slide 8 text

How do we know our site is slow?

Slide 9

Slide 9 text

Measurement Tools ★ Chrome DevTools ★ Google PageSpeed ★ YSlow (

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

Bandwidth ★ Build bigger pipes? ★ ...best use of what we have?

Slide 15

Slide 15 text

Obstruction: is the pipe clogged? ★ Concurrent connections are limited per host ★ Browser mileage may vary Connection Limit per Host - Chrome : 6 - Firefox : 6 - Safari : 6 - IE9 : 6 - IE10 : 8 - IE11 : 13 (http://www.browserscope.org/?category=network)

Slide 16

Slide 16 text

Script elements ...can either reference external scripts... $('h1').inflateText();

Hello, world!

Slide 17

Slide 17 text

Script elements ...or inline scripts.. $('h1').inflateText();

Hello, world!

Slide 18

Slide 18 text

Script elements ...both will block! $('h1').inflateText();

Hello, world!

Slide 19

Slide 19 text

Well, that’s not good.

Slide 20

Slide 20 text

Script elements ★ Place scripts at bottom of page

Hello, world!

$('h1').inflateText();

Slide 21

Slide 21 text

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

Hello, world!

</... <script> $('h1').inflateText();

Slide 22

Slide 22 text

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

Hello, world!

</... <script> $('h1').inflateText();

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

Wait for predictable events function load () { $('h1').inflateText(); } // Wait for everything to load window.addEventListener('load', load); // Wait for DOM + scripts to load document.addEventListener('DOMContentLoaded', load);

Slide 25

Slide 25 text

Slide 26

Slide 26 text

But we’re still making a lot of requests.

Slide 27

Slide 27 text

HTTP isn’t free HTTP/1.1 200 OK Content-Type: text/html; charset=UTF-8 Content-Length: 100 Cookie: [...] Host: www.example.com ... HTTP/1.1 200 OK Content-Type: text/css; charset=UTF-8 Content-Length: 500 Cookie: [...] ★ Every request has headers

Slide 28

Slide 28 text

Slide 29

Slide 29 text

Slide 30

Slide 30 text

Concatenate external files ★ Reduce HTTP overhead ★ Reduce concurrent requests // use up four connections in a hurry

Slide 31

Slide 31 text

Concatenate external files ★ Reduce HTTP overhead ★ Reduce concurrent requests // use up four connections in a hurry $ cat a.js b.js c.js d.js > abcd.js // one request to serve them all

Slide 32

Slide 32 text

And small is beautiful.

Slide 33

Slide 33 text

Minify files $ cat a.js b.js c.js d.js \ | uglifyjs > abcd.js ---- // Include concatenated file ★ uglifyjs is pretty good ★ closure compiler is really good ★ Hint: build tools support these

Slide 34

Slide 34 text

Serve compressed content GET /abcd.js HTTP/1.1 Host: www.myapp.com Accept-Encoding: gzip, deflate ★ Browsers support gzip

Slide 35

Slide 35 text

Serve compressed content GET /encrypted-area HTTP/1.1 Host: www.example.com Accept-Encoding: gzip, deflate HTTP/1.1 200 OK Date: mon, 18 Jun 2014 22:38:34 GMT Server: Apache/1.3.3.7 (Unix) Content-Length: 438 Connection: close Content-Type: text/html; charset=UTF-8 Content-Encoding: gzip ★ Browsers support gzip ★ Servers do, too!

Slide 36

Slide 36 text

Stylesheets? Same tricks. $ cat a.css b.css c.css > abc.css ---- // Include concatenated style ★ style won’t block ★ each link triggers a request ★ cssmin is pretty good

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Hello, world!

</... <script> $('h1').inflateText();

Slide 39

Slide 39 text

Did someone say caching?

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

Enable browser caching ★ HTTP can help

Slide 43

Slide 43 text

Enable browser caching ★ HTTP can help ★ Use cache-control header HTTP/1.1 200 OK Cache-Control: no-transform,public,max-age=300 Content-Type: text/html; charset=UTF-8 Date: Mon, 29 Apr 2013 16:38:15 GMT ETag: "bbea5db7e1785119a7f94fdd504c546e" Last-Modified: Sat, 27 Apr 2013 00:44:54 GMT Vary: Accept-Encoding (http://www.mobify.com/blog/beginners-guide-to-http-cache-headers/)

Slide 44

Slide 44 text

Enable browser caching ★ HTTP can help ★ Use cache-control header ★ Set ETag if content will change HTTP/1.1 200 OK Cache-Control: no-transform,public,max-age=300 Content-Type: text/html; charset=UTF-8 Date: Mon, 29 Apr 2013 16:38:15 GMT ETag: "bbea5db7e1785119a7f94fdd504c546e" Last-Modified: Sat, 27 Apr 2013 00:44:54 GMT Vary: Accept-Encoding

Slide 45

Slide 45 text

What about content that always changes?

Slide 46

Slide 46 text

Enable browser caching ★ HTTP can help ★ Use cache-control header ★ Set ETag if content will change ★ no-cache identifies dynamic content HTTP/1.1 200 OK Cache-Control: no-cache Content-Type: text/html; charset=UTF-8 Date: Mon, 29 Apr 2013 16:38:15 GMT Last-Modified: Sat, 27 Apr 2013 00:44:54 GMT Vary: Accept-Encoding

Slide 47

Slide 47 text

Browser caching ★ ServiceWorker spec for granular caching ★ Replaces deprecated AppCache ★ Is it ready?

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

Use a Content Delivery Network ★ Failure happens

Slide 51

Slide 51 text

Use a Content Delivery Network ★ Failure happens ★ So keep a local fallback handy jQuery || document.write('<script src="jquery.js"><\/script>');

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

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

Slide 56 text

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