9. Webpage Test
‣ Automated measurement using IE
‣ Shows when rendering starts
‣ Connection view:
– http://webpagetest.org or local installation
9 Konstantin Käfer
10. 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
11. Waterfall diagrams
Start Connect First byte Last byte
11 Konstantin Käfer
12. 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
13. 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
14. 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
15. 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
16. 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
17. 3. Caching
?
Disabled: Client Server
Cache
Full response
?
Default: Client Server
“Still fresh”
Cache
Partial response
Aggressive: Client Server
Cache
17 Konstantin Käfer
18. 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
19. 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
20. 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
21. 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
22. 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
23. 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
24. 8. Parallelization
‣ Ensure proper distribution
‣ Webpage Test graphs:
24 Konstantin Käfer
25. 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
26. 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
27. 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
28. Render a usable version
as early as possible.
Konstantin Käfer
mail@kkaefer.com — @kkaefer
28 Konstantin Käfer
29. 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
