Front End Performance

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    2 Favorites

    Front End Performance - Presentation Transcript

    1. Front End Performance Konstantin Käfer
    2. Render a usable version as early as possible. 3 Konstantin Käfer
    3. Firebug’s Net panel 4 Konstantin Käfer
    4. Waterfall graphs ‣ Visualizes load order ‣ Rules – descend as fast as possible – as shallow as possible – as narrow as possible 5 Konstantin Käfer
    5. YSlow ‣ Rates a webpage based on 13 criteria ‣ Determines overall load time ‣ Provides optimization suggestions ‣ Graphs, Numbers & Figures 6 Konstantin Käfer
    6. YSlow 7 Konstantin Käfer
    7. YSlow is not everything. 8 Konstantin Käfer
    8. Webpage Test ‣ Automated measurement using IE ‣ Shows when rendering starts ‣ Connection view: – http://webpagetest.org or local installation 9 Konstantin Käfer
    9. Other tools ‣ IBM Page Detailer http://www.alphaworks.ibm.com/tech/pagedetailer ‣ Pingdom http://tools.pingdom.com ‣ Episodes http://drupal.org/project/episodes ‣ Safari’s Web Inspector (Safari 4 and up) ‣ Web Debugging Proxies http://charlesproxy.com, http://fiddlertool.com 10 Konstantin Käfer
    10. Waterfall diagrams Start Connect First byte Last byte 11 Konstantin Käfer
    11. 1. Reduce requests ‣ Every file produces an HTTP request 60s 45s 30s Requests Size (KB) 15s 0s 0 10 20 30 ‣ Fewer requests is better than smaller size ‣ HTTP 1.1: 2 components per host in parallel 12 Konstantin Käfer
    12. 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 13 Konstantin Käfer
    13. 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); 14 Konstantin Käfer
    14. 1. Reduce requests ‣ Data URLs in Internet Explorer < 8: – MHTML: http://www.phpied.com/mhtml-when-you- need-data-uris-in-ie7-and-under/ – Include encoded images as Multipart HTML – url(mhtml:http://example.com/style.css!somestring); – Not a proven technology (fails on certain configs) 15 Konstantin Käfer
    15. 2. Use a CDN ‣ Content Delivery Network ‣ Place servers near users to reduce ping time ‣ More on that in a bit 16 Konstantin Käfer
    16. 3. Caching ? Disabled: Client Server Cache Full response ? Default: Client Server “Still fresh” Cache Partial response Aggressive: Client Server Cache 17 Konstantin Käfer
    17. 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 "access plus 1 year" </Location> ‣ Drupal default: 2 weeks ‣ Change filenames/URLs when updating 18 Konstantin Käfer
    18. 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 (often halfs) ‣ Compress scripts and styles as well 19 Konstantin Käfer
    19. 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/ 20 Konstantin Käfer
    20. 21 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
    21. 7. Minify CSS and JS ‣ Remove comments and whitespace ‣ Still savings, even with GZip ‣ Drupal’s aggregator or sf_cache.module 22 Konstantin Käfer
    22. 8. Parallelization ‣ “A single-user client SHOULD NOT maintain more than 2 connections with any server or proxy.” (RFC 2616, 8.1.4) ‣ Use multiple host names ➔ higher parallelization (Don’t overdo it) ‣ Most current browsers use > 2 connections ‣ http://stevesouders.com/ua/ 23 Konstantin Käfer
    23. 8. Parallelization ‣ Ensure proper distribution ‣ Webpage Test graphs: 24 Konstantin Käfer
    24. 9. Reduce image weight ‣ OptiPNG, PNGCrush, ... – Removes invisible content by lossless recompression ‣ JPEGtran/ImageMagick: Lossless JPEG operations – Remove color profiles, meta data, … ‣ ImageOptim: Batch compression ‣ smushit.com – now integrated into YSlow ‣ punypng.com – supposedly more efficient 25 Konstantin Käfer
    25. 10. 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 ‣ Don’t load invisible content (tabs) on page load 26 Konstantin Käfer
    26. 11. 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/) 27 Konstantin Käfer
    27. Render a usable version as early as possible. Konstantin Käfer mail@kkaefer.com — @kkaefer 28 Konstantin Käfer
    28. Resources – 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/ 29 Konstantin Käfer

    + Konstantin KäferKonstantin Käfer, 2 months ago

    custom

    236 views, 2 favs, 0 embeds more stats

    More info about this document

    CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

    Go to text version

    • Total Views 236
      • 236 on SlideShare
      • 0 from embeds
    • Comments 0
    • Favorites 2
    • Downloads 16
    Most viewed embeds

    more

    All embeds

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as inappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel
    File a copyright complaint
    Having problems? Go to our helpdesk?

    Categories