Part II: Front
                End
             Performance



Konstantin
Käfer
What’s Performance?


                  Loading


     Perception             Measurement


                  Running


2 ...
Styles, scripts and images
            account for
     over 80% of load time.


3                          Konstantin Käf...
Back-             Other
              Images
    grounds            Media



     HTML      CSS     Scripts




4         ...
Distribution (time)

                                              Images
     HTML


                                    ...
1   Introduction ✔

    2   Tools & Measurement

    3   Speed optimization

    4   Beyond YSlow


6                     ...
Measure to prove
    optimization success.



7                           Konstantin Käfer
Overall load time?



8                        Konstantin Käfer
Page size?



9                Konstantin Käfer
Time until DOM is loaded?



10                           Konstantin Käfer
Time until page is rendered?



11                             Konstantin Käfer
Time until page
      is functional?



12                     Konstantin Käfer
Firebug’s Net panel




13                         Konstantin Käfer
YSlow
         Rates a webpage based on 13 criteria
     ‣

         Determines overall load time
     ‣

         Provide...
YSlow is not everything.



15                              Konstantin Käfer
Other tools
         AOL Page Test
     ‣
         online version: http://webpagetest.org

         IBM Page Detailer
    ...
Waterfall diagrams




     Start   Connect   First byte   Last byte
17                                     Konstantin Käf...
1   Introduction ✔

     2   Tools & Measurement ✔

     3   Speed optimization

     4   Beyond YSlow


18               ...
1. Reduce requests
         Every file produces an HTTP request
     ‣

          60s

          45s

                    ...
1. Reduce requests
         Sprites
     ‣

         – Many images into one file
         – Shift into view with backgroun...
1. Reduce requests
         Caching (see 3.)
     ‣

         Use CSS instead of images
     ‣

             -moz-border-r...
2. Use a CDN
         Content Delivery Network
     ‣

         Lots of servers scattered around the world
     ‣

       ...
Round Trip Time
         HTTP is usually done over TCP/IP
     ‣

         Transmission Control Protocol
     ‣

         ...
3. Caching
         Controlled by HTTP headers
     ‣

         Browsers check whether content is fresh
     ‣

         S...
4. GZip
         Compress text content (don’t use for images!)
     ‣

         Vastly reduces page size
     ‣

         ...
5. CSS to the top
         == in <head>
     ‣

         Page renders when all header CSS is loaded
     ‣

         Loadi...
== right before </body>
     ‣

         Loading scripts blocks page rendering
     ‣

         Scripts are loaded sequent...
7. Minify CSS and JS
         Remove comments and whitespace
     ‣

         Still savings, even with GZip
     ‣

      ...
1   Introduction ✔

     2   Tools & Measurement ✔

     3   Speed optimization ✔

     4   Beyond YSlow


29             ...
8. Parallelization
         RFC: 2 requests per host name in parallel
     ‣

         Use multiple host names ➔ higher
  ...
HTTP connections
         “A single-user client SHOULD NOT maintain
     ‣
         more than 2 connections with any serve...
9. Reduce image weight
         OptiPNG, PNGCrush, ...
     ‣

         – Removes invisible content
         – Lossless re...
10. Persistent HTTP
         HTTP supports persistent connections
     ‣

             multiple connections      persisten...
10. Persistent HTTP
         AOL Pagetest has connection view
     ‣




34                                          Konst...
10. Persistent HTTP
                    no pipelining              pipelining
                                            ...
11. Lazy initialization
         JavaScript takes time to initialize
     ‣

         – Libraries such as jQuery also coun...
12. Microoptimization
         “Premature optimization is the root of all evil”
     ‣
                                   ...
Thanks! Questions?



        Konstantin Käfer
          mail@kkaefer.com




38                           Konstantin Käfer
Ressources
     – High Performance Websites, Steve Souders, 2007.
     – http://stevesouders.com/examples/rules.php
     –...
Upcoming SlideShare
Loading in...5
×

Front End Performance

2,875

Published on

Tweaking Drupal to squeeze out the last drop is a good idea, but the biggest part of a website's loading time is spent on retrieving CSS, JavaScript and images. To get a truly zippy website, it is therefore vital to drastically reduce the time spent here. In this session, you’ll get to know why sites are slow and learn techniques to identify and resolve bottlenecks: From simple Apache tweaks to rethinking your theme so that it can be loaded faster there's something for everyone.

Published in: Technology
0 Comments
13 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,875
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
143
Comments
0
Likes
13
Embeds 0
No embeds

No notes for slide

Front End Performance

  1. 1. Part II: Front End Performance Konstantin Käfer
  2. 2. What’s Performance? Loading Perception Measurement Running 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 Images grounds 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. 1 Introduction ✔ 2 Tools & Measurement 3 Speed optimization 4 Beyond YSlow 6 Konstantin Käfer
  7. 7. Measure to prove optimization success. 7 Konstantin Käfer
  8. 8. Overall load time? 8 Konstantin Käfer
  9. 9. Page size? 9 Konstantin Käfer
  10. 10. Time until DOM is loaded? 10 Konstantin Käfer
  11. 11. Time until page is rendered? 11 Konstantin Käfer
  12. 12. Time until page is functional? 12 Konstantin Käfer
  13. 13. Firebug’s Net panel 13 Konstantin Käfer
  14. 14. YSlow Rates a webpage based on 13 criteria ‣ Determines overall load time ‣ Provides optimization suggestions ‣ Graphs, Numbers & Figures ‣ 14 Konstantin Käfer
  15. 15. YSlow is not everything. 15 Konstantin Käfer
  16. 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. 17. Waterfall diagrams Start Connect First byte Last byte 17 Konstantin Käfer
  18. 18. 1 Introduction ✔ 2 Tools & Measurement ✔ 3 Speed optimization 4 Beyond YSlow 18 Konstantin Käfer
  19. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 29. 1 Introduction ✔ 2 Tools & Measurement ✔ 3 Speed optimization ✔ 4 Beyond YSlow 29 Konstantin Käfer
  30. 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. 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. 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. 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. 34. 10. Persistent HTTP AOL Pagetest has connection view ‣ 34 Konstantin Käfer
  35. 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. 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. 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. 38. Thanks! Questions? Konstantin Käfer mail@kkaefer.com 38 Konstantin Käfer
  39. 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
  1. A particular slide catching your eye?

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

×