Front-end Performance

London Web Standards presentation, April 2010.

Video: http://pornel.net/performance

Transcript

1. Front-end Performance Kornel Lesiński London Web Standards 2010
2. 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?
3. Why performance?
4. 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
5. Factor in Google ranking (affects 1%) Grain of salt needed for Webmaster Tools page speed and "Let's make web faster" site
6. Nielsen’s response time limits 100ms feels instantaneous 1s keeps flow uninterrupted 10s is the limit (especially without feedback)
7. Enemy #1: Latency
10. Latency Since modems bandwidth improved 300 times Latency improved 3 times Latency isn't going away
11. 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
12. Reduce number of requests
13. 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!
14. CSS sprites Merge many small images into one Use background-position Good for hover effects Not clipboard-friendly Avoid huge bitmaps Maintenance pain
15. 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
16. 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
17. Scripts
18. document.write is evil Scripts are black box. Can affect rest of the document: <script>    document.write(“<!-­‐-­‐”); </script> <script  src=“foo”></script> -­‐-­‐>
19. 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(“<script  src=‘disaster’…
20. Scripts must be at end of body <script  src> </body>
21. 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; … …
22. Waiting for ad.doubleclick.net… Ads
23. Ads Use iframe otherwise SWFObject is great Remember embeds and buttons are same thing Place at very end of document and use position:absolute
24. 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
25. 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
26. Waterfall
27. Waterfall
28. Waterfall Good Bad
29. Waterfall IE7 and Opera differ from everything else www.webpagetest.org Fiddler Enable "streaming mode"! WebKit inspector Firebug
30. YSlow Google PageSpeed
31. friend or foe? Progressive rendering
32. Makes slow pages faster Makes fast pages slower Rendering delay: load under 2s for greatness Specify image dimensions Specify float widths
33. 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. <br  clear=all>
34. 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 <br  clear=all>
35. Bandwidth
36. Gzip, gzip, gzip HTML, CSS, JS—everything text-based >50% savings Very fast, faster than network mod_deflate/mod_compress PHP filter Automatically negotiated
37. 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
38. 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
39. pornel.net/imagealpha ImageAlpha
40. 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
41. ImageOptim imageoptim.pornel.net