Front-end Performance - Speaker Deck

Slide 1

Slide 1 text

Front-end Performance Kornel Lesiński London Web Standards 2010

Slide 2

Slide 2 text

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?

Slide 3

Slide 3 text

Why performance?

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

Factor in Google ranking (affects 1%) Grain of salt needed for Webmaster Tools page speed and "Let's make web faster" site

Slide 6

Slide 6 text

Nielsen’s response time limits 100ms feels instantaneous 1s keeps ﬂow uninterrupted 10s is the limit (especially without feedback)

Slide 7

Slide 7 text

Enemy #1: Latency

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

Latency Since modems bandwidth improved 300 times Latency improved 3 times Latency isn't going away

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Reduce number of requests

Slide 13

Slide 13 text

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!

Slide 14

Slide 14 text

CSS sprites Merge many small images into one Use background-position Good for hover effects Not clipboard-friendly Avoid huge bitmaps Maintenance pain

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

Cache forever mod_expires ExpiresByType image/png “now plus 1 year” Change URL when content changes style-‐v1234.css Verify cacheability Mnot's cacheability engine redbot.org Webkit's audit web-sniffer.net

Slide 17

Slide 17 text

Scripts

Slide 18

Slide 18 text

document.write is evil Scripts are black box. Can affect rest of the document: document.write(“<!-‐-‐”); -‐-‐>

Slide 19

Slide 19 text

document.write 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 document.write(“

Slide 20

Slide 20 text

Scripts must be at end of body </body>

Slide 21

Slide 21 text

defer(function(){ do_stuff(); }); var _deferred; function defer(f) { var e=_deferred; _deferred=e?function(){e();f()}:f } defer=function(f){setTimeout(f,1)} defer(_deferred); _deferred=null; … …

Slide 22

Slide 22 text

Waiting for ad.doubleclick.net… Ads

Slide 23

Slide 23 text

Ads Use iframe otherwise SWFObject is great Remember embeds and buttons are same thing Place at very end of document and use position:absolute

Slide 24

Slide 24 text

Don't use defer attribute Few browsers support except IE Poor support in IE too Quirky and not really asynchronous document.write won't work anyway async is better, but beware of race conditions

Slide 25

Slide 25 text

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 ﬁle anyway

Slide 26

Slide 26 text

Waterfall

Slide 27

Slide 27 text

Waterfall

Slide 28

Slide 28 text

Waterfall Good Bad

Slide 29

Slide 29 text

Waterfall IE7 and Opera differ from everything else www.webpagetest.org Fiddler Enable "streaming mode"! WebKit inspector Firebug

Slide 30

Slide 30 text

YSlow Google PageSpeed

Slide 31

Slide 31 text

friend or foe? Progressive rendering

Slide 32

Slide 32 text

Makes slow pages faster Makes fast pages slower Rendering delay: load under 2s for greatness Specify image dimensions Specify ﬂoat widths

Slide 33

Slide 33 text

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.

Slide 34

Slide 34 text

Slide 35

Slide 35 text

Bandwidth

Slide 36

Slide 36 text

Gzip, gzip, gzip HTML, CSS, JS—everything text-based >50% savings Very fast, faster than network mod_deﬂate/mod_compress PHP ﬁlter Automatically negotiated

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

pornel.net/imagealpha ImageAlpha

Slide 40

Slide 40 text

Image optimisation Remove unused data: comments, EXIF metadata, colour proﬁles (use sRGB with gamma 2.2) Find optimal compression strategy (gzip levels and methods, PNG ﬁlters) No loss in quality

Slide 41

Slide 41 text

ImageOptim imageoptim.pornel.net