Front End Performance

Part II: Front End Performance Konstantin Käfer

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

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

Back- Other Images grounds Media HTML CSS Scripts 4 Konstantin Käfer

Distribution (time) Images HTML Back- CSS Scripts + grounds Media Time spent generating the page in Drupal 5 Konstantin Käfer

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

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 ‣ Provides optimization suggestions ‣ Graphs, Numbers & Figures ‣ 14 Konstantin Käfer

YSlow is not everything. 15 Konstantin Käfer

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

Waterfall diagrams Start Connect First byte Last byte 17 Konstantin Käfer

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

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

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

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

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

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

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

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

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

== 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

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

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

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

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

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

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

10. Persistent HTTP AOL Pagetest has connection view ‣ 34 Konstantin Käfer

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

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

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

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 – 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

Front End Performance

0 comments

Notes on slide 1

7 Favorites