• Like
Front-End Performance
Upcoming SlideShare
Loading in...5
×

Front-End Performance

  • 2,113 views
Uploaded on

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • There's version with audio:
    http://www.slideshare.net/uiokmnbvcfg/frontend-performance-4000338
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
2,113
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
84
Comments
1
Likes
12

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

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
  • 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
  • 8. Latency Since modems bandwidth improved 300 times Latency improved 3 times Latency isn't going away
  • 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. Reduce number of requests
  • 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. CSS sprites Merge many small images into one Use background-position Good for hover effects Not clipboard-friendly Avoid huge bitmaps Maintenance pain
  • 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. 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. Scripts
  • 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. @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. Scripts must be at end of body A'?%$#8+'%?B A/L2@)B
  • 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. Waiting for ad.doubleclick.net… Ads
  • 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. 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. 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. Waterfall
  • 25. Waterfall
  • 26. Waterfall Bad Good
  • 27. Waterfall IE7 and Opera differ from everything else www.webpagetest.org Fiddler Enable "streaming mode"! WebKit inspector Firebug
  • 28. YSlow Google PageSpeed
  • 29. Progressive rendering friend or foe?
  • 30. Makes slow pages faster Makes fast pages slower Rendering delay: load under 2s for greatness Specify image dimensions Specify float widths
  • 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. 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. Bandwidth
  • 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. 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. 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. ImageAlpha pornel.net/imagealpha
  • 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. ImageOptim imageoptim.pornel.net