Front-end PerformanceKornel Lesi!skiLondon Web Standards 2010

Why front-end?

Every site has one

Same technologies everywhere

Page generation time—milliseconds

JavaScript execution time—milliseconds

Page loading time—seconds

Why front-end?

Why performance?

Google/Bing speed test

Delays under half a second impact business metrics

The cost of delay increases over time and persists

Number of bytes in response is less important than what they are and when they are sent

Use progressive rendering

Factor in Google ranking (affects 1%)

Grain of salt needed for Webmaster Tools page speed and "Let's make web faster" site

Nielsen’s response time limits

100ms feels instantaneous

1s keeps flow uninterrupted

10s is the limit (especially without feedback)

Enemy #1: Latency

Latency

Since modems bandwidth improved 300 times

Latency improved 3 times

Latency isn't going away

HTTP & TCP/IP latency

Three-way handshake: SYN, SYN-ACK, ACK

2 ping times to download anything

Pipelining unreliable

Slow start = unused bandwidth

HTTPS is much much worse

Reduce number of requests

Reduce number of requests

Merge all JavaScript files into one

don’t forget to put newlines between files

Merge all CSS files into one

don’t use @import!

use @media print

Automate this

But not in PHP!

CSS spritesMerge many small images into one

Use background-position

Good for hover effects

Not clipboard-friendly

Avoid huge bitmaps

Maintenance pain

Parallelise!

IE7 has 2 connections limit per hostname (not server)

That's what RFC2616 suggests

Use cookie-less assets sever (CDN)

Serve CSS from same host as HTML

Cache forevermod_expires

!"#$%&'()*)#&+$,-.&/#0.+1023+#45'+6+)&-%7

Change URL when content changes

'8)4&9:6;<=>?''

Verify cacheability

Mnot's cacheability engine redbot.org

Webkit's audit

web-sniffer.net

Scripts

@2?5,&08>3%$8& is evil

Scripts are black box. Can affect rest of the document:

A'?%$#8B

++@2?5,&08>3%$8&C1AD997EF

A/'?%$#8B

A'?%$#8+'%?G1H227BA/'?%$#8B

99B

@2?5,&08>3%$8& is evil

Makes parser wait for scripts

WebKit, Firefox and IE8 parse page twice

IE7 and Opera don't!

There’s no hope for scripts that write scripts

@2?5,&08>3%$8&C1A'?%$#8+'%?GI@$'-'8&%JK

Scripts must be at end of body

A'?%$#8+'%?B

A/L2@)B

@&H&%CH50?8$20CEM++@2N'85HHCEFOEF

:-%+N@&H&%%&@FH50?8$20+@&H&%CHE+M++:-%+&GN@&H&%%&@F++N@&H&%%&@G&PH50?8$20CEM&CEFHCEOQHO

@&H&%GH50?8$20CHEM'&8*$,&258CHR6EO+@&H&%CN@&H&%%&@EF+N@&H&%%&@G0544F

…

…

Waiting for ad.doubleclick.net…

Ads

Ads

Use $H%-,& otherwise

SWFObject is great

Remember embeds and buttons are same thing

Place at very end of document and use #2'$8$20Q-L'2458&

Don't use @&H&% attribute

Few browsers support except IE

Poor support in IE too

Quirky and not really asynchronous

@2?5,&08>3%$8& won't work anyway

-')0? is better, but beware of race conditions

Hosted libraries don't help

Few users have same version cached

Extra penalty if they don't

Caches are not as persistent as you think

You’ll need your own scripts file anyway

Waterfall

Waterfall

Waterfall

Good

Bad

Waterfall

IE7 and Opera differ from everything else

www.webpagetest.org

Fiddler

Enable "streaming mode"!

WebKit inspector

Firebug

YSlow Google PageSpeed

friend or foe?Progressive rendering

Makes slow pages faster

Makes fast pages slower

Rendering delay: load under 2s for greatness

Specify image dimensions

Specify float widths

Avoid clearing divs or brs!

Use overflow:hidden

Use clearfix where

overflow can't be used

Lorem ipsum. This is subliminal message. You love this presentation. Kornel is the best. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum. This is subliminal message. You love this presentation. Kornel is the best. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum. This is subliminal message. You love this presentation. Kornel is the best. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

AL%+?4&-%G-44B

Avoid clearing divs or brs!

Use overflow:hidden

Use clearfix where

overflow can't be used

Lorem ipsum. This is subliminal message. You love this presentation. Kornel is the best. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum. This is subliminal message. You love this presentation. Kornel is the best. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est …

Lorem ipsum. This is subliminal message. You

!"#$%&'(#)(&&*

Bandwidth

Gzip, gzip, gzip

HTML, CSS, JS—everything text-based >50% savings

Very fast, faster than network

mod_deflate/mod_compress

PHP filter

Automatically negotiated

Minify

10-15% users might not ask for gzip (lousy proxies, antivirs, corporate firewalls)

Makes gzipped files even smaller

YUI Compressor for CSS and JS

Google Closure Compiler advanced optimisations

Makefile is a good idea

Image reduction

Lowest number of colours

Don't use PNG24. If you do, try posterize

Use PNG8+alpha (Photoshop sucks. Fireworks rocks)

Don't use GIF

JPEG likes blur and 8x8 boundaries

pornel.net/imagealpha

ImageAlpha

Image optimisation

Remove unused data: comments, EXIF metadata, colour profiles (use sRGB with gamma 2.2)

Find optimal compression strategy (gzip levels and methods, PNG filters)

No loss in quality

ImageOptimimageoptim.pornel.net