Front End Performance Optimization Techniques
•
13 gefällt mir•1,424 views
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.
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (17)
Andere mochten auch
Andere mochten auch (9)
Ähnlich wie Front End Performance Optimization Techniques
Ähnlich wie Front End Performance Optimization Techniques (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Front End Performance Optimization Techniques
- 1. Part II: Front End Performance Konstantin Käfer
- 2. What’s Performance? Loading Perception Measurement Running 2 Konstantin Käfer
- 3. Styles, scripts and images account for over 80% of load time. 3 Konstantin Käfer
- 4. Back- Other Images grounds 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. 1 Introduction ✔ 2 Tools & Measurement 3 Speed optimization 4 Beyond YSlow 6 Konstantin Käfer
- 7. Measure to prove optimization success. 7 Konstantin Käfer
- 8. Overall load time? 8 Konstantin Käfer
- 9. Page size? 9 Konstantin Käfer
- 10. Time until DOM is loaded? 10 Konstantin Käfer
- 11. Time until page is rendered? 11 Konstantin Käfer
- 12. Time until page is functional? 12 Konstantin Käfer
- 13. Firebug’s Net panel 13 Konstantin Käfer
- 14. YSlow Rates a webpage based on 13 criteria ‣ Determines overall load time ‣ Provides optimization suggestions ‣ Graphs, Numbers & Figures ‣ 14 Konstantin Käfer
- 15. YSlow is not everything. 15 Konstantin Käfer
- 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. Waterfall diagrams Start Connect First byte Last byte 17 Konstantin Käfer
- 18. 1 Introduction ✔ 2 Tools & Measurement ✔ 3 Speed optimization 4 Beyond YSlow 18 Konstantin Käfer
- 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. 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. 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. 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. 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. 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. 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. 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. == 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. 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. 1 Introduction ✔ 2 Tools & Measurement ✔ 3 Speed optimization ✔ 4 Beyond YSlow 29 Konstantin Käfer
- 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. 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. 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. 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. 10. Persistent HTTP AOL Pagetest has connection view ‣ 34 Konstantin Käfer
- 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. 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. 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. Thanks! Questions? Konstantin Käfer mail@kkaefer.com 38 Konstantin Käfer
- 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