DrupalCamp Stockholm 2009

1. Front
End
Performance
Konstantin
Käfer

2. What’s Performance?
Loading
Perception Measurement
Using
2 Konstantin Käfer

3. Styles, scripts and images
account for
over 80% of load time.
3 Konstantin Käfer

4. Back- Other
grounds Images 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. Overall load time?
6 Konstantin Käfer

7. Page size?
7 Konstantin Käfer

8. Time until DOM is loaded?
8 Konstantin Käfer

9. Time until page is rendered?
9 Konstantin Käfer

10. Time until page
is functional?
10 Konstantin Käfer

11. Render a usable version
as early as possible.
11 Konstantin Käfer

12. 1 Introduction ✔
2 Tools & Measurement
3 Speed optimization
4 Beyond YSlow
12 Konstantin Käfer

13. Measure to prove
optimization success.
13 Konstantin Käfer

14. Firebug’s Net panel
14 Konstantin Käfer

15. YSlow
‣ Rates a webpage based on 13 criteria
‣ Determines overall load time
‣ Provides optimization suggestions
‣ Graphs, Numbers & Figures
15 Konstantin Käfer

16. YSlow
16 Konstantin Käfer

17. YSlow is not everything.
17 Konstantin Käfer

18. Episodes
‣ Measure timing for Web 2.0 applications
‣ More granular measurement
‣ Drupal module!
http://drupal.org/project/episodes
18 Konstantin Käfer

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. Waterfall diagrams
Start Connect First byte Last byte
20 Konstantin Käfer

21. 1 Introduction ✔
2 Tools & Measurement ✔
3 Speed optimization
4 Beyond YSlow
21 Konstantin Käfer

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. 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. 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. 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. 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. 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. 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. 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. 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 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. 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. 1 Introduction ✔
2 Tools & Measurement ✔
3 Speed optimization ✔
4 Beyond YSlow
33 Konstantin Käfer

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. 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. 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. 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. 10. Persistent HTTP
‣ AOL Pagetest has connection view
38 Konstantin Käfer

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. 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. Thanks! Questions?
Konstantin Käfer
mail@kkaefer.com
41 Konstantin Käfer

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