Front End Performance
6 likes908 views
The document discusses various techniques for improving front-end website performance, including reducing the number of HTTP requests, using content delivery networks and caching, gzip compression, optimizing CSS and JavaScript loading, image optimization, and lazy loading of content not visible initially. Specific techniques mentioned include combining files, setting long cache expiration headers, minifying files, parallelizing downloads, and deferring non-critical JavaScript initialization. The goal is to render an initial version as fast as possible through optimizations that reduce page load time.
Front End Performance
- 1. Front End Performance Konstantin Käfer
- 3. Render a usable version as early as possible. 3 Konstantin Käfer
- 4. Firebug’s Net panel 4 Konstantin Käfer
- 5. Waterfall graphs ‣ Visualizes load order ‣ Rules – descend as fast as possible – as shallow as possible – as narrow as possible 5 Konstantin Käfer
- 6. YSlow ‣ Rates a webpage based on 13 criteria ‣ Determines overall load time ‣ Provides optimization suggestions ‣ Graphs, Numbers & Figures 6 Konstantin Käfer
- 7. YSlow 7 Konstantin Käfer
- 8. YSlow is not everything. 8 Konstantin Käfer
- 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