Your SlideShare is downloading. ×
0
Front
    End
Performance
          Konstantin
          Käfer
Render a usable version
      as early as possible.



3                             Konstantin Käfer
Firebug’s Net panel




4                         Konstantin Käfer
Waterfall graphs
              ‣   Visualizes load order
              ‣   Rules
                  – descend as fast as po...
YSlow
    ‣   Rates a webpage based on 13 criteria
    ‣   Determines overall load time
    ‣   Provides optimization sugg...
YSlow




7           Konstantin Käfer
YSlow is not everything.



8                              Konstantin Käfer
Webpage Test
    ‣   Automated measurement using IE
    ‣   Shows when rendering starts
    ‣   Connection view:




     ...
Other tools
     ‣   IBM Page Detailer
         http://www.alphaworks.ibm.com/tech/pagedetailer
     ‣   Pingdom
         ...
Waterfall diagrams




     Start   Connect   First byte   Last byte
11                                     Konstantin Käf...
1. Reduce requests
     ‣   Every file produces an HTTP request
          60s

          45s

          30s               ...
1. Reduce requests
     ‣   Sprites
         – Many images into one file
         – Shift into view with background-positi...
1. Reduce requests
     ‣   Caching (see 3.)
     ‣   Use CSS instead of images
             -moz-border-radius:4px;
     ...
1. Reduce requests
     ‣   Data URLs in Internet Explorer < 8:
         – MHTML: http://www.phpied.com/mhtml-when-you-
  ...
2. Use a CDN
     ‣   Content Delivery Network
     ‣   Place servers near users to reduce ping time
     ‣   More on that...
3. Caching
                             ?
     Disabled:     Client                    Server
                    Cache

 ...
3. Caching
     ‣   Controlled by HTTP headers
     ‣   Browsers check whether content is fresh
     ‣   Set Expires heade...
4. GZip
     ‣   Compress text content (don’t use for images!)
         – <IfModule mod_deflate.c>
           	 AddOutputF...
5. CSS to the top
     ‣   == in <head>
     ‣   Page renders when all header CSS is loaded
     ‣   Loading CSS later cau...
21                                               Konstantin Käfer




     ‣   == right before </body>
     ‣   Loading sc...
7. Minify CSS and JS
     ‣   Remove comments and whitespace
     ‣   Still savings, even with GZip
     ‣   Drupal’s aggr...
8. Parallelization
     ‣   “A single-user client SHOULD NOT maintain
         more than 2 connections with any server
   ...
8. Parallelization
     ‣   Ensure proper distribution
     ‣   Webpage Test graphs:




24                               ...
9. Reduce image weight
     ‣   OptiPNG, PNGCrush, ...
         – Removes invisible content by lossless recompression

   ...
10. Lazy initialization
     ‣   JavaScript takes time to initialize
         – Libraries such as jQuery also count
      ...
11. Other optimizations
     ‣   “Premature optimization is the root of all evil”
                                        ...
Render a usable version
       as early as possible.


           Konstantin Käfer
          mail@kkaefer.com — @kkaefer

...
Resources
     – High Performance Websites, Steve Souders, 2007.
     – http://stevesouders.com/examples/rules.php
     – ...
Front End Performance
Upcoming SlideShare
Loading in...5
×

Front End Performance

1,705

Published on

Published in: Technology, Business

Transcript of "Front End Performance"

  1. 1. Front End Performance Konstantin Käfer
  2. 2. Render a usable version as early as possible. 3 Konstantin Käfer
  3. 3. Firebug’s Net panel 4 Konstantin Käfer
  4. 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. 5. YSlow ‣ Rates a webpage based on 13 criteria ‣ Determines overall load time ‣ Provides optimization suggestions ‣ Graphs, Numbers & Figures 6 Konstantin Käfer
  6. 6. YSlow 7 Konstantin Käfer
  7. 7. YSlow is not everything. 8 Konstantin Käfer
  8. 8. Webpage Test ‣ Automated measurement using IE ‣ Shows when rendering starts ‣ Connection view: – http://webpagetest.org or local installation 9 Konstantin Käfer
  9. 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. 10. Waterfall diagrams Start Connect First byte Last byte 11 Konstantin Käfer
  11. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 23. 8. Parallelization ‣ Ensure proper distribution ‣ Webpage Test graphs: 24 Konstantin Käfer
  24. 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. 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. 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. 27. Render a usable version as early as possible. Konstantin Käfer mail@kkaefer.com — @kkaefer 28 Konstantin Käfer
  28. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×