Don't make me wait! or Building High-Performance Web Applications

“Don’t make me wait”

Building High-Performance

Web Apps

Stoyan Stefanov, Yahoo! Brownbag at eBay August 11, 2009

About me •  Yahoo! Search •  Yahoo! Exceptional Performance •  YSlow 2.0 architect •  http://smush.it •  Books, articles •  http://phpied.com

Importance of performance

•  Is it dev? QA? Afterthought? •  Developers love it •  But is it good for business?

•  Self-regulating system •  Slow down = lose users •  We all hate slow pages

1sec = -2.8% revenue

Gets worse with time

After-effect

•  Yahoo!: 400 ms slower = 5-9% drop in full-page traffic

Slower pages get less traffic

From 4-6 seconds to 1.5 seconds

“The premature optimization…

•  … is the root of all evil” Knuth •  “Make it right before you make it fast” Crockford

Measure, measure, measure

•  measure •  profile •  monitor

On trade-offs

“…everything has its drawbacks, as the man said when his mother-in-law died, and they came upon him for the funeral expenses”

Jerome K. Jerome Three man in a boat

request HTML sent

onload page settles

conception birth graduation marriage? R.I.P.

User perceived “onload” happens somewhere here

request

The Life of Page 2.0

The waterfall

The Waterfall

1.  Less stuff 2.  Smaller stuff 3.  Out of the way 4.  Start early

The Waterfall

Less HTTP requests

•  Combine components

Less HTTP requests

•  Before:

Less HTTP requests

•  After:

<script

src="all.js" type="text/javascript">

</script>

Less HTTP requests

•  Saved 3 HTTP requests

Less HTTP requests

•  repeat for CSS:

href="all.css" rel="stylesheet" type="text/css”

Less HTTP requests

•  CSS sprites for background images

background‐position: ‐22px ‐0px; width: 12px; height: 10px;

Less HTTP requests

CSS sprites •  Before: 15 requests, 6.8 K •  After: 1 request, 1.4 K

Less HTTP requests

•  CSS sprites – a pain, but there are tools

http://csssprites.com http://spritegen.website‐performance.org/

Less HTTP requests

•  Inline images with data: scheme

Less HTTP requests

•  data: URI scheme

$ php ‐r "echo base64_encode(file_get_contents('my.png'));” iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC

Less HTTP requests

background‐image: url("data:image/png;base64,iVBORw0KG...");

Less HTTP requests

Less HTTP requests

•  data: URI scheme •  works in IE!...

Less HTTP requests

•  data: URI scheme •  works in IE8!

Less HTTP requests

•  data: URI scheme •  MHTML for IE < 8

http://www.phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-under/ http://www.hedgerwow.com/360/dhtml/base64-image/demo.php

Less HTTP requests - drawback

•  atomic components •  invalidated by small changes

•  need to schedule changes

Less stuff? Cache

•  Cache is less universal than we think •  You can help

http://yuiblog.com/blog/2007/01/04/performance-research-part-2/

“never expire” policy

•  Static components with far-future Expires header •  JS, CSS, img

ExpiresActive On ExpiresByType image/png "access plus 10 years"

Inline vs. external

•  a.k.a. less http vs. more cache •  how about both?

Inline vs. external

•  First visit:

1. Inline 2. Lazy-load the external file 3. Write a cookie

Inline vs. external

•  Later visits:

1. Read cookie 2. Refer to the external file

Less stuff – duh!

•  No 404s •  No duplicates •  No near-duplicates

Duplicates

•  2903384828078080_1.jpg •  2204648665418080_1.jpg •  3801476378448080_1.jpg •  3801476377438080_1.jpg

Near duplicates

•  30x30 vs. 49x49

•  Rounded corners, shadows

The Waterfall

1.  Less stuff ✔ 2.  Smaller stuff 3.  Out of the way 4.  Start early

The Waterfall

•  What to gzip?

HTML, XHTML, XML, W00TChaMaCallitML, CSS, JS, JSON, HTC,

plain text… all but binary

• (btw, check those older SWFs too)

•  How to gzip?

AddOutputFilterByType DEFLATE text/html text/… Header append Vary Accept‐Encoding

http://www.sitepoint.com/article/web‐site‐optimization‐steps

Minify

•  Before /** * The dom module provides helper methods for * manipulating Dom elements. * @module dom * */

(function() { var Y = YAHOO.util, // internal shorthand getStyle, // for load time browser branching setStyle, // ditto propertyCache = {}, // for faster hyphen converts reClassNameCache = {}, // cache regexes for className document = window.document; // cache for faster lookups

YAHOO.env._id_counter = YAHOO.env._id_counter || 0;

Minify

•  After (function(){var B=YAHOO.util,K,I,J={},F={},M=window.document;YAHOO.env._id_counter=YAHOO.env._id_counter||0;

Minify

•  YUI Compressor •  Minifies JS and CSS •  Tolerates * and _ hacks •  More than minification

Minify

•  Minify inline code too

Gzip or minification?

•  62,885 bytes - original jQuery (back in Aug 2007)

•  31,822 - minified with the YUI Compressor •  19,758 - original gzipped

•  10,818 - minified and gzipped

http://www.julienlecomte.net/blog/2007/08/13/

Minify

•  minify HTML? •  dangerous •  write minified HTML

echo '<div class="my">', '<p>', $db‐>get('name'), '</p>', '<div>';

Minify

•  Strip quotes? No closing tags? •  Some sites do

Minify

•  Relative URLs

Relative URLs on my blog

>>> document.links.length 204 >>> … loop … indexOf(‘http://www.phpied.com’) 130 >>> ‘http://www.phpied.com’.length 21 >>> 21*130/1024 2.666015625

Relative URLs on my blog

•  Compare: •  2.66K - absolute links •  1.4K - sprite of 15 elements

Images

•  http://smush.it

Images

1.  No GIFs, PNG8 2.  Crush PNGs 3.  run JPEGs through jpegtran 4.  Gifsicle for animations

http://yuiblog.com/blog/2008/11/14/imageopt-3/

Loss- less

Images – progressive JPEG

•  for images ~10K+

Images

•  eBay homepage could save 20% image sizes

•  Search –> 10%+ •  Item -> 30% (50K+)

Images – duh!

1.  Don’t scale in HTML 2.  Generated images should

be crushed PNGs too

Images

•  It’s only human to forget •  All you need is a process so

you don’t have to remember

•  The world’s smallest component? •  204 No Content

<?php header("HTTP/1.0 204 No Content"); // .... do your job, e.g. logging ?>

http://www.phpied.com/204-no-content/

The Waterfall

1.  Less stuff ✔ 2.  Smaller stuff ✔ 3.  Out of the way 4.  Start early

The Waterfall

Free-falling waterfalls

•  Less DNS lookups – fetch components from not more than 2-4 domains

•  Less redirects •  Blocking JavaScript/CSS

Not free-falling

JavaScript rocks!

•  But also blocks

Non-blocking JavaScript

•  Include via DOM

var js = document.createElement('script'); js.src = 'myscript.js'; var h = document.getElementsByTagName('head')[0]; h.appendChild(js);

Non-blocking JavaScript

•  And what about my inline scripts?

•  Setup a collection (registry) of inline scripts

Step 1

•  Inline in the <head>:

var myapp = { stuff: [], };

Step 2

•  Add to the registry

Instead of: <script>alert('boo!');</script> Do: <script> myapp.stuff.push(function(){

alert('boo!'); }); </script>

Step 3

•  Execute all

var l = myapp.stuff.length; for(var i = 0, i < l; i++) { myapp.stuff[i](); }

Blocking CSS?

But they do block: •  In FF2 •  When followed by

an inline script

The Waterfall

1.  Less stuff ✔ 2.  Smaller stuff ✔ 3.  Out of the way ✔ 4.  Start early

The Waterfall

Cookies

•  less cookies

•  no cookies

•  www vs. non-www

3000 bytes of cookies cost 78ms

flush() early

flush() <html> <head> <script src="my.js"

type="text/javascript"></script> <link href="my.css"

type="text/css" rel="stylesheet" /> </head> <?php flush() ?> <body> ....

Chunked encoding

HTTP/1.1 200 OK Content‐Type: text/plain Transfer‐Encoding: chunked

25 This is the data in the first chunk

1C and this is the second one

Chunked encoding

•  Progressive rendering

- Semantic app chunks

- Server-level chunks

Progressive rendering Chunk #1

Chunk #2

Chunk #3

Progressive rendering

•  Server-level flush:

bing.com – every 1 or 2K

google (ungzip) – every 4K

Progressive + source order 1

The Waterfall

1.  Less stuff ✔ 2.  Smaller stuff ✔ 3.  Out of the way ✔ 4.  Start early ✔

Waterfall ✓

Life after onload

1.  Lazy-load 2.  Pre-load 3.  XHR 4.  JavaScript optimizations 5.  Rendering

Lazy-load

•  bells & whistles

•  badges & widgets

Preload

•  to help next page’s waterfall

•  img, CSS, JS, DNS lookups

XHR (Ajax)

•  small – gzip, JSON

•  less – Expires

•  GET over POST

GET vs. POST for XHR

var url = 'test.php';

var request = new XMLHttpRequest();

request.open("POST", url, false);

// …

request.send('test=1');

GET vs. POST for XHR

JavaScript optimizations

•  Number of DOM elements •  DOM access •  Event delegation

Touching the DOM

function foo() {

for (var count = 0; count < 1000; count++) {

document.body.innerHTML += 1;

Touching the DOM

function foo() {

var inner = '';

for (var count = 0; count < 1000; count++) {

inner += 1;

document.body.innerHTML += inner;

} 1000 times faster

Rendering

•  CSS on top •  No separate print CSS •  CSS refactoring •  No AlphaImageLoader •  Expensive elements •  No CSS expressions •  Image dimensions

CSS early on •  No separate print CSS file

/* screen styles */ #nav {...} .banner {...} /* print styles */ @media print { #nav {display: none} .banner {display: none;} }

CSS refactoring

•  CSS tends to grow •  Find unused selectors –

DustMeSelectors extension •  Cleanup things like: #header #menu {...} div#menu {...} ul li {...}

No AlphaImageLoader #some‐element {

background: url(image.png); _background: none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='image.png', sizingMethod='crop');

http://yuiblog.com/blog/2008/12/08/imageopt-5/

Expensive elements

•  Avoid or limit <applet> <object> (IE) <iframe>

Life after onload

1.  Lazy-load ✔ 2.  Pre-load ✔ 3.  XHR ✔ 4.  JavaScript optimizations ✔

5.  Rendering ✔

Life after onload ✓

YSlow 2.0

•  Firebug extension

•  Why (is my page) slow?

http://developer.yahoo.com/yslow/

Yahoo! performance rules 1.  Make Fewer HTTP Requests 2.  Use a Content Delivery Network 3.  Add an Expires or a Cache-Control Header 4.  Gzip Components 5.  Put Stylesheets at the Top 6.  Put Scripts at the Bottom

7.  Avoid CSS Expressions 8.  Make JavaScript and CSS External 9.  Reduce DNS Lookups 10.  Minify JavaScript and CSS

11.  Avoid Redirects 12.  Remove Duplicate JS and CSS 13.  Configure ETags 14.  Make Ajax Cacheable

15.  Flush the Buffer Early 16.  Use GET for AJAX Requests 17.  Post-load Components 18.  Preload Components

19.  Reduce the Number of DOM Elements 20.  Split Components Across Domains 21.  Minimize the Number of iframes

22.  No 404s 23.  Reduce Cookie Size 24.  Use Cookie-free Domains for Components

25.  Minimize DOM Access 26.  Develop Smart Event Handlers 27.  Choose <link> over @import 28.  Avoid Filters

29.  Optimize Images 30.  Optimize CSS Sprites 31.  Don't Scale Images in HTML 32.  Make favicon.ico Small and Cacheable 33.  Keep Components under 25K 34.  Pack Components into a Multipart Document

YSlow 1.0. rules 1.  Make Fewer HTTP Requests 2.  Use a Content Delivery Network 3.  Add an Expires or a Cache-Control Header 4.  Gzip Components 5.  Put Stylesheets at the Top 6.  Put Scripts at the Bottom

YSlow 2.0. rules 1.  Make Fewer HTTP Requests 2.  Use a Content Delivery Network 3.  Add an Expires or a Cache-Control Header 4.  Gzip Components 5.  Put Stylesheets at the Top 6.  Put Scripts at the Bottom

YSlow 1.0. rule weights 1.  Make Fewer HTTP Requests 8 2.  Use a Content Delivery Network 6 3.  Add an Expires or a Cache-Control Header 10

4.  Gzip Components 8 5.  Put Stylesheets at the Top 4 6.  Put Scripts at the Bottom 4 7.  Avoid CSS Expressions 3

8.  Make JavaScript and CSS External 4 9.  Reduce DNS Lookups 3 10.  Minify JavaScript 4 11.  Avoid Redirects 4

12.  Remove Duplicate JS 4 13.  Configure Etags 2

YSlow 2.0. rule weights 1.  Make Fewer HTTP Requests 8

2.  Use a Content Delivery Network 6

3.  Add an Expires or a Cache-Control Header 10

4.  Gzip Components 8

5.  Put Stylesheets at the Top 4

6.  Put Scripts at the Bottom 4

7.  Avoid CSS Expressions 3

8.  Make JavaScript and CSS External 4

9.  Reduce DNS Lookups 3

10.  Minify JavaScript and CSS 4

11.  Avoid Redirects 4

12.  Remove Duplicate JS and CSS 4

13.  Configure Etags 2

14.  Make Ajax Cacheable 4

16.  Use GET for AJAX Requests 3

19.  Reduce the Number of DOM Elements 3

22.  No 404s 4

23.  Reduce Cookie Size 3

24.  Use Cookie-free Domains for Components 3

28.  Avoid Filters 4

31.  Don't Scale Images in HTML 3

32.  Make favicon.ico Small and Cacheable 2

YSlow score

foreach rule total += rule score * rule weight end foreach score = total / sum of rule weights

YSlow letter score

•  (A) 90 – 100 •  (B) 80 – 89 •  (C) 70 – 79 •  (D) 60 – 69 •  (E) 50 – 59 •  (F) under 50

Custom rule 1.  Add an Expires Header 2.  Configure Etags

Score = 1100 / 12 = 91.66 (A) Note: max weight is 10, min rule score is 0

Rule Weight Rule score *

Expires header 10 100 (A) 1000

ETags 2 50 (E) 100

Total 12 1100

Rule scores

•  Start from 100 •  Penalty for every offence

Rule penalties 1.  Make Fewer HTTP Requests 2.  Use a Content Delivery Network

3.  Add an Expires or a Cache-Control Header

4.  Gzip Components

5.  Put Stylesheets at the Top

6.  Put Scripts at the Bottom

7.  Avoid CSS Expressions

8.  Make JavaScript and CSS External

9.  Reduce DNS Lookups

10.  Minify JavaScript and CSS

11.  Avoid Redirects

12.  Remove Duplicate JS and CSS

13.  Configure Etags

14.  Make Ajax Cacheable

16.  Use GET for AJAX Requests

19.  Reduce the Number of DOM Elements

22.  No 404s

23.  Reduce Cookie Size

24.  Use Cookie-free Domains for Components

28.  Avoid Filters

31.  Don't Scale Images in HTML

32.  Make favicon.ico Small and Cacheable

# ok -points

JS 3 -4/off

CSS 2 -4/off

img 6 -3/off

Rule penalties 1.  Make Fewer HTTP Requests

2.  Use a Content Delivery Network 3.  Add an Expires or a Cache-Control Header

22.  No 404s

-10 points per

offending component

2.  Use a Content Delivery Network

3.  Add Expires Headers 4.  Gzip Components

22.  No 404s

If expiration is less than

2 days subtract -11 points per

component

4.  Gzip Components 5.  Put Stylesheets at the Top

22.  No 404s

-11 points per

offending component bigger than

500 bytes

5.  Put Stylesheets at the Top 6.  Put Scripts at the Bottom

22.  No 404s

-10 points per

offending component

6.  Put Scripts at the Bottom 7.  Avoid CSS Expressions

22.  No 404s

-5 points per

offending component

7.  Avoid CSS Expressions 8.  Make JavaScript and CSS External

22.  No 404s

-2 points per

expression

8.  Make JS and CSS External 9.  Reduce DNS Lookups

22.  No 404s

Score is always n/a

9.  Reduce DNS Lookups 10.  Minify JavaScript and CSS

22.  No 404s

4 domains ok

-5 points per domain

otherwise

10.  Minify 11.  Avoid Redirects

22.  No 404s

-10 points per

offender, including

inline

11.  Avoid Redirects 12.  Remove Duplicate JS and CSS

22.  No 404s

-10 points per redirect

12.  No Duplicates 13.  Configure Etags

22.  No 404s

-5 points per

duplicate JS or CSS

13.  Configure ETags 14.  Make Ajax Cacheable

22.  No 404s

-11 points per

offending component

14.  Make Ajax Cacheable 16.  Use GET for AJAX Requests

22.  No 404s

-5 points per XHR

without at least 1 hour expiration

16.  Use GET for AJAX Requests 19.  Reduce the Number of DOM Elements

22.  No 404s

-5 points per

non-GET XHR

19.  Reduce # of DOM Elements 22.  No 404s

-10 points for every

250 elements over 900

22.  No 404s 23.  Reduce Cookie Size

-5 points per

offending component

22.  No 404s

23.  Reduce Cookie Size 24.  Use Cookie-free Domains for Components

-10 points per

component requested with over

1000 bytes of cookies

22.  No 404s

24.  Cookie-free Domains 28.  Avoid Filters

-5 points per

component requested

with a cookie

22.  No 404s

28.  Avoid Filters 31.  Don't Scale Images in HTML

-5 points per offense

or -2 if using _filter hack

22.  No 404s

31.  Don't Scale Images in HTML 32.  Make favicon.ico Small and Cacheable

-5 points per scaled

down image

22.  No 404s

32.  Small cacheable favicon

-5 points if size is over 2000 bytes and -5 if no expiration

YSlow 2.0 ✓

Words of Wisdom

Performance matters

•  It affects the user happiness •  It affects the bottom line

Front-end

•  That’s where most of the time is spent

It’s a marathon

•  Not a sprint •  Measure, monitor, link to business metrics •  Bugs are expensive as the time passes, performance bugs even more so

What’s a low-hanging fruit?

•  Takes one engineer •  Takes 15 minutes

Steve Krug

For non-low-hanging fruits?

1.  Pick 2 or 3 2.  Fix, measure one by one 3.  Come back and iterate

Thank you!

Stoyan Stefanov @stoyanstefanov http://www.phpied.com

Don't make me wait! or Building High-Performance Web Applications

Technology

Don't Kill Me

Black Hat 2014 - Wait! Wait! Don't Pwn Me!

DevNexus 2016: Wait! Wait! Don't pwn me!

Put a STOP to Bullying. Don't Laugh At Me Don't Laugh At Me

Don't wait for an oracle audit - Be proactive!

Robot Journalism: Don't Wait 'Til it's Too Late

2015 AppSecUSA 2015 - Wait wait... dont pwn me!

Don't Wait - Apply Now

Don't Bug Me!

Sales Triggers: Don't Wait - Create

secure.sweetadelineintl.orgsecure.sweetadelineintl.org/members_online/images/1_MA0092prev.pdfMoonlight Serenade 32 ten - der - ly in the in the don't June night. let me stand wait

Wait, Wait… Don’t Tell Me!

Don't wait

Don't fail me now

Don't wait until tomorrow

Grzegorz Albrecht - STARTUP WAY - DON'T WAIT FOR THE WEEKEND!

detrytmiskeselskab.dkdetrytmiskeselskab.dk/wordpress/wp-content/uploads/Dont-Stop-Me … · Cm 44 don't don't don't don't Cm stop stop stop stop me Cm now, ing a Cm don't stop me

Don't Make Me Think

It can wait - DON'T TEXT AND DRIVE - Sprint

Don't manage me, understand me!