Front End Performance

1,498
-1

Published on

DrupalCamp Stockholm 2009

Published in: Technology
1 Comment
4 Likes
Statistics
Notes
  • Great presentation and performance this weekend Konstantin!
    /Tomas
    Cybercom
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
1,498
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
65
Comments
1
Likes
4
Embeds 0
No embeds

No notes for slide

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

×