Front-End Performance (with audio)

1,393 views

Published on

Slides from London Web Standards talk April 2010 by Kornel Lesiński.

Last slide includes 40 minutes of Q&A audio!

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,393
On SlideShare
0
From Embeds
0
Number of Embeds
12
Actions
Shares
0
Downloads
16
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Front-End Performance (with audio)

  1. 1. Front-end Performance Kornel Lesi!ski London Web Standards 2010
  2. 2. Why front-end? Every site has one Same technologies everywhere Page generation time—milliseconds JavaScript execution time—milliseconds Page loading time—seconds
  3. 3. Why performance?
  4. 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. 5. Factor in Google ranking (affects 1%) Grain of salt needed for Webmaster Tools page speed and "Let's make web faster" site
  6. 6. Nielsen’s response time limits 100ms feels instantaneous 1s keeps flow uninterrupted 10s is the limit (especially without feedback)
  7. 7. Enemy #1: Latency
  8. 8. Latency Since modems bandwidth improved 300 times Latency improved 3 times Latency isn't going away
  9. 9. 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
  10. 10. Reduce number of requests
  11. 11. Merge all JavaScript files into one don’t forget to put newlines between files Merge all CSS files into one don’t use @import! Bu tn ot use @media print in P HP ! Auto mate this
  12. 12. CSS sprites Merge many small images into one Use background-position Good for hover effects Not clipboard-friendly Avoid huge bitmaps Maintenance pain
  13. 13. 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
  14. 14. Cache forever mod_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
  15. 15. Scripts
  16. 16. @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
  17. 17. @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
  18. 18. Scripts must be at end of body A'?%$#8+'%?B A/L2@)B
  19. 19. :-%+N@&H&%%&@F H50?8$20+@&H&%CHE+M ++:-%+&GN@&H&%%&@F ++N@&H&%%&@G&PH50?8$20CEM&CEFHCEOQH O … @&H&%CH50?8$20CEM ++@2N'85HHCEF OEF … @&H&%GH50?8$20CHEM'&8*$,&258CHR6EO+ @&H&%CN@&H&%%&@EF+ N@&H&%%&@G0544F
  20. 20. Waiting for ad.doubleclick.net… Ads
  21. 21. Ads Place at very end of document and use #2'$8$20Q-L'2458& Use $H%-,& otherwise SWFObject is great Remember embeds and buttons are same thing
  22. 22. 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
  23. 23. 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
  24. 24. Waterfall
  25. 25. Waterfall
  26. 26. Waterfall Bad Good
  27. 27. Waterfall IE7 and Opera differ from everything else www.webpagetest.org Fiddler Enable "streaming mode"! WebKit inspector Firebug
  28. 28. YSlow Google PageSpeed
  29. 29. Progressive rendering friend or foe?
  30. 30. Makes slow pages faster Makes fast pages slower Rendering delay: load under 2s for greatness Specify image dimensions Specify float widths
  31. 31. Avoid clearing divs or brs! 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 Use overflow:hidden 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 Use clearfix where 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 overflow can't be used 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
  32. 32. Avoid clearing divs or brs! 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 Use overflow:hidden 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 Use clearfix where 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 overflow can't be used 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 … !"#$%&'(#)(&&*
  33. 33. Bandwidth
  34. 34. Gzip, gzip, gzip HTML, CSS, JS—everything text-based >50% savings Very fast, faster than network mod_deflate/mod_compress PHP filter Automatically negotiated
  35. 35. 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
  36. 36. 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
  37. 37. ImageAlpha pornel.net/imagealpha
  38. 38. 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
  39. 39. ImageOptim imageoptim.pornel.net

×