Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Front End Performance

1,764 views

Published on

DrupalCamp Stockholm 2009

Published in: Technology
  • Great presentation and performance this weekend Konstantin!
    /Tomas
    Cybercom
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Front End Performance

  1. 1. Front End Performance Konstantin Käfer
  2. 2. What’s Performance? Loading Perception Measurement Using 2 Konstantin Käfer
  3. 3. Styles, scripts and images account for over 80% of load time. 3 Konstantin Käfer
  4. 4. Back- Other grounds Images Media HTML CSS Scripts 4 Konstantin Käfer
  5. 5. Distribution (time) Images HTML Back- CSS Scripts grounds + Media Time spent generating the page in Drupal 5 Konstantin Käfer
  6. 6. Overall load time? 6 Konstantin Käfer
  7. 7. Page size? 7 Konstantin Käfer
  8. 8. Time until DOM is loaded? 8 Konstantin Käfer
  9. 9. Time until page is rendered? 9 Konstantin Käfer
  10. 10. Time until page is functional? 10 Konstantin Käfer
  11. 11. Render a usable version as early as possible. 11 Konstantin Käfer
  12. 12. 1 Introduction ✔ 2 Tools & Measurement 3 Speed optimization 4 Beyond YSlow 12 Konstantin Käfer
  13. 13. Measure to prove optimization success. 13 Konstantin Käfer
  14. 14. Firebug’s Net panel 14 Konstantin Käfer
  15. 15. YSlow ‣ Rates a webpage based on 13 criteria ‣ Determines overall load time ‣ Provides optimization suggestions ‣ Graphs, Numbers & Figures 15 Konstantin Käfer
  16. 16. YSlow 16 Konstantin Käfer
  17. 17. YSlow is not everything. 17 Konstantin Käfer
  18. 18. Episodes ‣ Measure timing for Web 2.0 applications ‣ More granular measurement ‣ Drupal module! http://drupal.org/project/episodes 18 Konstantin Käfer
  19. 19. Other tools ‣ AOL Page Test online version: http://webpagetest.org ‣ IBM Page Detailer http://www.alphaworks.ibm.com/tech/pagedetailer ‣ Pingdom http://tools.pingdom.com ‣ WebKit’s Web Inspector Safari 4 Beta or WebKit nightly from http://webkit.org ‣ Web Debugging Proxies http://charlesproxy.com, http://fiddlertool.com 19 Konstantin Käfer
  20. 20. Waterfall diagrams Start Connect First byte Last byte 20 Konstantin Käfer
  21. 21. 1 Introduction ✔ 2 Tools & Measurement ✔ 3 Speed optimization 4 Beyond YSlow 21 Konstantin Käfer
  22. 22. 1. Reduce requests ‣ Every file produces an HTTP request 60s 45s 30s Requests Size 15s 0s 0 10 20 30 ‣ Fewer requests is better than smaller size ‣ HTTP 1.1: 2 components per host in parallel 22 Konstantin Käfer
  23. 23. 1. Reduce requests ‣ Sprites – Many images into one file – Shift into view with background-position ‣ Aggregate scripts and styles – Built into Drupal – Sophisticated: http://drupal.org/project/sf_cache ‣ No redirects 23 Konstantin Käfer
  24. 24. 1. Reduce requests ‣ Caching (see 3.) ‣ Use CSS instead of images -moz-border-radius:4px; -webkit-border-radius: 4px; border-radius: 4px; ‣ data: URLs in style sheets – url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAAGXRFWHRTb2Z 0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAR9JREFUeNrEk02ORUAUhRVNJEgYsgdGbIHFsSGmhhjZAzFCR CLx906io3UROu8N+g7vPR9V95wi67oy79bXuTXP8zAMfdP48jzvCRJoihyHPcA4xRd1+V5HoZhmqZ1XWuaZ tu267qWZSmKQghhKGCrZVmqqgqCQNd16g/ooI8pNOuhfuC2bX3fFwTh8nroYwrNBTxNUxzHhmHcrAf/hwb KHWa3ATYURVFRFDdwWZbYBZR75xvGbpMkefQmyzIoaRiuNE3zCGP/UNIw/FRV9RGGBkoaRhLg5yPsOA6U tM/vbfuXz0jCjc+YXvu8JwxJOCcMJ9oShtgfYXJ8VedsY0O4p+d5pmnKssyy7PGj5Pwk//6qyCfvmWU+qP+DXw IMADReKA+zC0X8AAAAAElFTkSuQmCC); 24 Konstantin Käfer
  25. 25. 2. Use a CDN ‣ Content Delivery Network ‣ Lots of servers scattered around the world ‣ Reduces roundtrip times (ping) ‣ Comparably cheap: $0.07 - $0.80 per GB – http://www.simplecdn.com – http://pantherexpress.com – http://cachefly.com – http://aws.amazon.com/cloudfront – http://www.limelightnetworks.com – http://www.akamai.com 25 Konstantin Käfer
  26. 26. Round Trip Time ‣ HTTP is usually done over TCP/IP ‣ Stateful: Three Way Handshakes ‣ Round trip time (ping) has high effect Request Client Server Response 26 Konstantin Käfer
  27. 27. 3. Caching ? Disabled: Client Server Cache Full response ? Default: Client Server “Still fresh” Cache Partial response Aggressive: Client Server Cache 27 Konstantin Käfer
  28. 28. 3. Caching ‣ Controlled by HTTP headers ‣ Browsers check whether content is fresh ‣ Set Expires header to a date in the far future – <Location /css> ExpiresActive On ExpiresDefault quot;access plus 1 yearquot; </Location> ‣ Change filenames/URLs when updating 28 Konstantin Käfer
  29. 29. 4. GZip ‣ Compress text content (don’t use for images!) – <IfModule mod_deflate.c> AddOutputFilterByType DEFLATE text/css application/x-javascript </IfModule> ‣ Vastly reduces page size ‣ NowPublic.com: 700 KB ➔ 300 KB ‣ Compress scripts and styles as well 29 Konstantin Käfer
  30. 30. 5. CSS to the top ‣ == in <head> ‣ Page renders when all header CSS is loaded ‣ Loading CSS later causes re-rendering and Flash of Unstyled Content ‣ Use <link> instead of @import http://www.stevesouders.com/blog/2009/04/09/dont-use-import/ 30 Konstantin Käfer
  31. 31. 31 Konstantin Käfer ‣ == right before </body> ‣ Loading scripts blocks page rendering ‣ Scripts are loaded sequentially! (At least in most current browsers) ‣ Don’t use onfoo handlers in HTML code ‣ Graceful degradation 6. Scripts to the bottom
  32. 32. 7. Minify CSS and JS ‣ Remove comments and whitespace ‣ Still savings, even with GZip ‣ Drupal’s aggregator or sf_cache.module 32 Konstantin Käfer
  33. 33. 1 Introduction ✔ 2 Tools & Measurement ✔ 3 Speed optimization ✔ 4 Beyond YSlow 33 Konstantin Käfer
  34. 34. 8. Parallelization ‣ RFC: 2 requests per host name in parallel ‣ Use multiple host names ➔ higher parallelization (Don’t overdo it) ‣ Most current browsers use > 2 connections ‣ http://stevesouders.com/ua/ 34 Konstantin Käfer
  35. 35. HTTP connections ‣ “A single-user client SHOULD NOT maintain more than 2 connections with any server or proxy.” (RFC 2616, 8.1.4) 35 1 2 3 4 5 Konstantin Käfer
  36. 36. 9. Reduce image weight ‣ OptiPNG, PNGCrush, ... – Removes invisible content – Lossless recompression – for i in `find . -name quot;*.pngquot;` ; do optipng -o7 $i ; done ‣ JPEGtran/ImageMagick – Remove color profiles, meta data, … – Lossless JPEG operations ‣ http://smushit.com – now integrated into YSlow 36 Konstantin Käfer
  37. 37. 10. Persistent HTTP ‣ HTTP supports persistent connections multiple connections persistent connection client server client server open open close open time close open close close ‣ Make sure KeepAlive is not turned off 37 Konstantin Käfer
  38. 38. 10. Persistent HTTP ‣ AOL Pagetest has connection view 38 Konstantin Käfer
  39. 39. 11. Lazy initialization ‣ JavaScript takes time to initialize – Libraries such as jQuery also count – Defer setup work ‣ Only load content above the fold – jQuery plugin: http://bit.ly/NpZPn – Useful on image-heavy sites 39 Konstantin Käfer
  40. 40. 12. Other optimizations ‣ “Premature optimization is the root of all evil” —Donald Knuth ‣ Only if you have optimized everything else ‣ Strategies – Move components to cookieless host – Remove ETags – Load order (see http://stevesouders.com/cuzillion/) 40 Konstantin Käfer
  41. 41. Thanks! Questions? Konstantin Käfer mail@kkaefer.com 41 Konstantin Käfer
  42. 42. Ressources – High Performance Websites, Steve Souders, 2007. – http://stevesouders.com/examples/rules.php – http://developer.yahoo.com/performance/ – http://yuiblog.com/blog/category/performance – http://sites.google.com/site/io/even-faster-web-sites – http://slideshare.net/jeresig/performance-improvements- in-browsers – http://www.stevesouders.com/blog/2009/04/09/dont- use-import/ 42 Konstantin Käfer

×