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

    7 Favorites

    Front End Performance - Presentation Transcript

    1. Part II: Front End Performance Konstantin Käfer
    2. What’s Performance? Loading Perception Measurement Running 2 Konstantin Käfer
    3. Styles, scripts and images account for over 80% of load time. 3 Konstantin Käfer
    4. Back- Other Images grounds Media HTML CSS Scripts 4 Konstantin Käfer
    5. Distribution (time) Images HTML Back- CSS Scripts + grounds Media Time spent generating the page in Drupal 5 Konstantin Käfer
    6. 1 Introduction ✔ 2 Tools & Measurement 3 Speed optimization 4 Beyond YSlow 6 Konstantin Käfer
    7. Measure to prove optimization success. 7 Konstantin Käfer
    8. Overall load time? 8 Konstantin Käfer
    9. Page size? 9 Konstantin Käfer
    10. Time until DOM is loaded? 10 Konstantin Käfer
    11. Time until page is rendered? 11 Konstantin Käfer
    12. Time until page is functional? 12 Konstantin Käfer
    13. Firebug’s Net panel 13 Konstantin Käfer
    14. YSlow Rates a webpage based on 13 criteria ‣ Determines overall load time ‣ Provides optimization suggestions ‣ Graphs, Numbers & Figures ‣ 14 Konstantin Käfer
    15. YSlow is not everything. 15 Konstantin Käfer
    16. 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 16 Konstantin Käfer
    17. Waterfall diagrams Start Connect First byte Last byte 17 Konstantin Käfer
    18. 1 Introduction ✔ 2 Tools & Measurement ✔ 3 Speed optimization 4 Beyond YSlow 18 Konstantin Käfer
    19. 1. Reduce requests Every file produces an HTTP request ‣ 60s 45s Requests 30s Size 15s 0s 0 10 20 30 Fewer requests is better than smaller size ‣ HTTP 1.1: 2 components per host in parallel ‣ 19 Konstantin Käfer
    20. 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 ‣ 20 Konstantin Käfer
    21. 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); 21 Konstantin Käfer
    22. 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 22 Konstantin Käfer
    23. Round Trip Time HTTP is usually done over TCP/IP ‣ Transmission Control Protocol ‣ Stateful: Three Way Handshakes ‣ Round trip time has high effect ‣ 23 Konstantin Käfer
    24. 3. Caching Controlled by HTTP headers ‣ Browsers check whether content is fresh ‣ Set Expires header to a date in the far future ‣ Change filenames/URLs when updating ‣ 24 Konstantin Käfer
    25. 4. GZip Compress text content (don’t use for images!) ‣ Vastly reduces page size ‣ NowPublic.com: 700 KB ➔ 300 KB ‣ Compress scripts and styles as well ‣ 25 Konstantin Käfer
    26. 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 26 Konstantin Käfer
    27. == 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 27 Konstantin Käfer
    28. 7. Minify CSS and JS Remove comments and whitespace ‣ Still savings, even with GZip ‣ Drupal’s aggregator or sf_cache.module ‣ 28 Konstantin Käfer
    29. 1 Introduction ✔ 2 Tools & Measurement ✔ 3 Speed optimization ✔ 4 Beyond YSlow 29 Konstantin Käfer
    30. 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/ ‣ 30 Konstantin Käfer
    31. HTTP connections “A single-user client SHOULD NOT maintain ‣ more than 2 connections with any server or proxy.” (RFC 2616, 8.1.4) 1 2 3 4 5 31 Konstantin Käfer
    32. 9. Reduce image weight OptiPNG, PNGCrush, ... ‣ – Removes invisible content – Lossless recompression JPEGtran/ImageMagick ‣ – Remove color profiles, meta data, ... – Lossless JPEG operations http://smushit.com ‣ 32 Konstantin Käfer
    33. 10. Persistent HTTP HTTP supports persistent connections ‣ multiple connections persistent connection server client server client open open close open time close open close close 33 Konstantin Käfer
    34. 10. Persistent HTTP AOL Pagetest has connection view ‣ 34 Konstantin Käfer
    35. 10. Persistent HTTP no pipelining pipelining server server client client open open time close close Most web browsers don’t support it ‣ 35 Konstantin Käfer
    36. 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 – Useful on image-heavy sites 36 Konstantin Käfer
    37. 12. Microoptimization “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/) 37 Konstantin Käfer
    38. Thanks! Questions? Konstantin Käfer mail@kkaefer.com 38 Konstantin Käfer
    39. 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 39 Konstantin Käfer

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

    custom

    1024 views, 7 favs, 2 embeds more stats

    Tweaking Drupal to squeeze out the last drop is a g more

    More info about this document

    © All Rights Reserved

    Go to text version

    • Total Views 1024
      • 1018 on SlideShare
      • 6 from embeds
    • Comments 0
    • Favorites 7
    • Downloads 52
    Most viewed embeds
    • 4 views on http://www.interdependentweb.com
    • 2 views on http://interdependentweb.com

    more

    All embeds
    • 4 views on http://www.interdependentweb.com
    • 2 views on http://interdependentweb.com

    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