Optimizing Your Frontend Performance

2,413 views
2,316 views

Published on

0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,413
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
3
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide

Optimizing Your Frontend Performance

  1. 1. PHPNW09 Thomas Weinert Optimizing Your Frontend Performance
  2. 2. About Me ● Application Developer – PHP – XSLT/XPath – (some) Javascript ● papaya CMS – PHP based Content Management System – uses XSLT for Templates
  3. 3. How to scale you webpage? ● Hardware ● Backend ● Frontend
  4. 4. Hardware ● More hardware ● Better hardware ● Moores Law – Transistors doubling every 18 months – Transistors != Performance ● Distributed systems are complex ● Think about environment
  5. 5. Backend ● External data sources are slow – SQL – Files – Network ● Locking is slower ● Memory is faster – but less secure
  6. 6. Mini/Micro Optimisations ● Myths – echo vs. print – ' vs. " ● Objects vs. functions vs. linear source ● Template systems
  7. 7. Mini/Micro Optimisations DON'T DO IT
  8. 8. Yahoo! ● Yahoo!'s Exceptional Performance team – Yahoo!'s Exceptional Performance team evangelizes best practices for improving web performance. They conduct research, build tools, write articles and blogs, and speak at conferences. Their best practices center around the rules for high performance web sites. – http://developer.yahoo.com/performance/
  9. 9. Results ● 80% of the end-user response time is spent on the front-end.
  10. 10. Firebug ● Firefox extension ● Analyze and manipulate – requests, page structure, CSS ● Javascript debugger
  11. 11. Firebug Requests
  12. 12. Firebug Request II
  13. 13. HTTPFox ● Firefox Extension ● Log of all HTTP requests – Redirects – Cached requests
  14. 14. YSlow ● Why (is your web page) slow ● Set of rules ● Firebug extension
  15. 15. Yslow: Performance View
  16. 16. Yslow: Stats
  17. 17. Yslow: Components
  18. 18. Yslow: Tools
  19. 19. Google Page Speed ● Firebug extension ● CSS complexitiy
  20. 20. Google Page Speed Screenshot
  21. 21. Make Fewer HTTP Requests ● Combined files – CSS – JavaScript ● CSS sprites
  22. 22. Combined files ● Release process ● CSS – Consider URLs ● JavaScript – Minify – Obfuscate
  23. 23. CSS Sprites ● Elements with fixed size ● Background image ● Disable repeat ● Negative positions
  24. 24. CSS Icons ● Raster of icons ● No repeat ● Fixed size <div> or <span>
  25. 25. CSS Backgrounds ● Gradient ● Repeat in one direction
  26. 26. Minify Javascript ● Most JS libraries provide a minified version ● YUI Compressor: http://developer.yahoo.com/yui/compressor/ – JS and CSS ● Packer – Webpage, .Net, Perl, PHP – http://dean.edwards.name/packer/
  27. 27. #2 Use A CDN ● Content Delivery Network – Akamai Technologies – Mirror Image Internet – Limelight Networks ● Bring the content to your users – Geographic distance – Physics is still here ● Only for large sites ● Dynamic content is complex
  28. 28. Headers ● Expires ● Cache-Control – Session-Management ● 304 Not Modified
  29. 29. Expires ● Apache mod_expire ● ● <IfModule mod_expires.c> ● ExpiresDefault "access plus 1 month" ● ExpiresActive on ● </IfModule>
  30. 30. Cache-Control ● None – no caching – default for sessions ● Private – cacheable in browser cache ● Public – cacheable in browser cache and proxies
  31. 31. 304 Not Modified ● Send Etag and Modfication date – Etag: "some hash" – Last-Modified: Thu, 12 Sep 2008 11:00:00 GMT ● Request headers – If-Modified-Since: Tue, 12 Sep 2008 11:00:00 GMT – If-None-Match: "some hash" ● Response headers – HTTP/1.1 304 Not Modified
  32. 32. Gzip Components ● Gzip != Zip – only compression – no packaging – tar.gz ● Good browser support – Accept-Encoding: gzip, deflate – Content-Encoding: gzip –
  33. 33. Gzip in Apache ● mod_gzip ● mod_deflate – filter chain, works on dynamic content, too ● – http://httpd.apache.org/docs/2.2/mod/mod_deflate.html
  34. 34. Gzip In PHP 5 <?php ob_start('ob_gzhandler'); ...
  35. 35. Gzip In PHP 5 <?php if (function_exists('ob_gzhandler')) { ob_start('ob_gzhandler'); } ...
  36. 36. Gzip Problems ● Not supported: – Transfer-Encoding: chunked – HTTP 1.0 client (old Squids)
  37. 37. Configure ETags ● Browser still asks webserver ● Server specific – CDN – Load balancer with multiple servers ● Apache – FileETag none ● IIS – http://support.microsoft.com/?id=922733
  38. 38. Split requests across domains ● HTTP 1.1 suggests 2 parallel requests per domain ● Separate content by function – www.domain.tld – themes.domain.tld – usercontent.domain.tld (security) ● Optimisation tools change the option ● Consider cookie domains
  39. 39. Reduce DNS Lookups ● DNS maps host names to ips ● Needs time – 20-120 milliseconds ● Cached in browser
  40. 40. Avoid Redirects ● Obviously addition requests ● Only cached with explicit headers ● http://www.domain.tld – → http://www.domain.tld/
  41. 41. Put Stylesheets at the Top ● Progressive display of the page ● Page appears to load faster ● W3C specifications
  42. 42. Put Scripts at the Bottom ● Scripts block parallel downloads – defer attribute in MSIE ● onload() event – used by most libraries ● Problem: document.write() – Counter – Banners
  43. 43. Avoid CSS Expressions ● MSIE from version 5 – cross browser experience ● JavaScript inside CSS ● Evaluated – page render – resize – scrolling – mouse movements (hover)
  44. 44. JavaScript And CSS Files ● Do not embed JS/CSS in your pages – No <script>...</script> – No <style>...</style> ● Seperate caching headers ● Revision parameter (style.css?rev=1234) – Get parameter – Unique URL for browser – Possibly in path/filename
  45. 45. Remove Duplicate Scripts ● Team size ● Standard scripts – XMLRPC, JQuery, Prototype ● Script module for your template system ● $templatesystem->addScript('foo.js');
  46. 46. Make Ajax Cacheable ● Often AJAX applications avoid caching – http://some.domain.tld/ajax.file?t=randomvalue ● A lot of requests ● Use more static URLs
  47. 47. References ● Slides: http://www.a-basketful-of-papayas.net/ ● Yahoo Performance Team – http://developer.yahoo.com/performance/ ● Google Page Speed – http://code.google.com/intl/en-UK/speed/page-speed/ ● Apache GZIP – http://httpd.apache.org/docs/2.2/mod/mod_deflate.html ● No Etag in IIS – http://support.microsoft.com/?id=922733

×