Optimizing Your Frontend Performance
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Optimizing Your Frontend Performance

  • 3,028 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,028
On Slideshare
2,767
From Embeds
261
Number of Embeds
10

Actions

Shares
Downloads
59
Comments
0
Likes
1

Embeds 261

http://www.a-basketful-of-papayas.net 184
http://www.abasketfulofpapayas.de 47
http://pacocalheiros.arquivo.cm-pontedelima.pt 16
http://localhost 5
http://www.slideshare.net 4
http://www.planet-php.net 1
http://www.directrss.co.il 1
http://devel11 1
http://192.168.1.131 1
http://mrgray.com 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Optimizing Your Frontend Performance Thomas Weinert
  • 2. About Me  Application Developer ▹ PHP ▹ XSLT/XPath ▹ (some) Javascript  papaya CMS ▹ PHP based Content Management System ▹ uses XSLT for Templates Thomas Weinert, papaya Software GmbH
  • 3. How to scale you webpage?  Hardware  Backend  Frontend Thomas Weinert, papaya Software GmbH
  • 4. Hardware  More hardware  Better hardware  Moores Law ▹ Transistors doubling every 18 months ▹ Transistors != Performance  Distributed systems are complex  Think about environment Thomas Weinert, papaya Software GmbH
  • 5. Backend  External data sources are slow ▹ SQL ▹ Files ▹ Network  Locking is slower  Memory is faster ▹ but less secure Thomas Weinert, papaya Software GmbH
  • 6. Mini/Micro Optimisations  Myths ▹ echo vs. print ▹ ' vs. quot;  Objects vs. functions vs. linear source  Template systems Thomas Weinert, papaya Software GmbH
  • 7. Mini/Micro Optimisations DON'T DO IT Thomas Weinert, papaya Software GmbH
  • 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/ Thomas Weinert, papaya Software GmbH
  • 9. Results  80% of the end-user response time is spent on the front-end. Thomas Weinert, papaya Software GmbH
  • 10. Firebug  Firefox extension  Analyze and manipulate ▹ requests, page structure, CSS  Javascript debugger Thomas Weinert, papaya Software GmbH
  • 11. YSlow  Why (is your web page) slow  Set of rules  Firebug extension Thomas Weinert, papaya Software GmbH
  • 12. Yslow: Performance View Thomas Weinert, papaya Software GmbH
  • 13. Yslow: Stats Thomas Weinert, papaya Software GmbH
  • 14. Yslow: Components Thomas Weinert, papaya Software GmbH
  • 15. Yslow: Tools  Print View  JSLint Thomas Weinert, papaya Software GmbH
  • 16. Make Fewer HTTP Requests  Combined files ▹ CSS ▹ JavaScript  CSS sprites Thomas Weinert, papaya Software GmbH
  • 17. Combined files  Release process  CSS ▹ Consider URLs  JavaScript ▹ Minify ▹ Obfuscate Thomas Weinert, papaya Software GmbH
  • 18. CSS Sprites  Elements with fixed size  Background image  Disable repeat  Negative positions Thomas Weinert, papaya Software GmbH
  • 19. CSS Icons  Raster of icons  No repeat  Fixed size <div> or <span> Thomas Weinert, papaya Software GmbH
  • 20. CSS Backgrounds  Gradient  Repeat in one direction Thomas Weinert, papaya Software GmbH
  • 21. 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/ Thomas Weinert, papaya Software GmbH
  • 22. #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 Thomas Weinert, papaya Software GmbH
  • 23. Headers  Expires  Cache-Control ▹ Session-Management  304 Not Modified Thomas Weinert, papaya Software GmbH
  • 24. Expires  Apache mod_expire <IfModule mod_expires.c> ExpiresDefault quot;access plus 1 monthquot; ExpiresActive on </IfModule> Thomas Weinert, papaya Software GmbH
  • 25. Cache-Control  nocache ▹ no caching ▹ default for sessions  private ▹ cacheable in browser cache  public ▹ cacheable in browser cache and proxies Thomas Weinert, papaya Software GmbH
  • 26. 304 Not Modified  Send Etag and Modfication date ▹ Etag: quot;some hashquot; ▹ 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: quot;some hashquot;  Response headers ▹ HTTP/1.1 304 Not Modified Thomas Weinert, papaya Software GmbH
  • 27. HTTPFox  Firefox Extension  Log of all HTTP requests  Not only displayed content Thomas Weinert, papaya Software GmbH
  • 28. Gzip Components  Gzip != Zip ▹ only compression ▹ no packaging ▹ tar.gz  Good browser support ▹ Accept-Encoding: gzip, deflate ▹ Content-Encoding: gzip Thomas Weinert, papaya Software GmbH
  • 29. 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 Thomas Weinert, papaya Software GmbH
  • 30. Gzip In PHP 5 <?php ob_start('ob_gzhandler'); ... Thomas Weinert, papaya Software GmbH
  • 31. Gzip In PHP 5 <?php if (function_exists('ob_gzhandler')) { ob_start('ob_gzhandler'); } ... Thomas Weinert, papaya Software GmbH
  • 32. Configure ETags  Browser still asks webserver  Server specific ▹ CDN ▹ Load balancer with multiple servers  Apache ▹ FileETag none  IIS ▹ http://support.microsoft.com/?id=922733 Thomas Weinert, papaya Software GmbH
  • 33. 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 Thomas Weinert, papaya Software GmbH
  • 34. Reduce DNS Lookups  DNS maps host names to ips  Needs time ▹ 20-120 milliseconds  Cached in browser Thomas Weinert, papaya Software GmbH
  • 35. Avoid Redirects  Obviously additional requests  Only cached with explicit headers ▹ depends on webserver configuration  http://www.domain.tld ▹ http://www.domain.tld/ Thomas Weinert, papaya Software GmbH
  • 36. Put Stylesheets at the Top  Progressive display of the page  Page appears to load faster  W3C specifications Thomas Weinert, papaya Software GmbH
  • 37. Put Scripts at the Bottom  Scripts block parallel downloads ▹ defer attribute in MSIE  onload() event ▹ used by most libraries  Problem: document.write() ▹ Counter ▹ Banners Thomas Weinert, papaya Software GmbH
  • 38. Avoid CSS Expressions  MSIE from version 5 ▹ cross browser experience  JavaScript inside CSS  Evaluated ▹ page render ▹ resize ▹ scrolling ▹ mouse movements (hover) Thomas Weinert, papaya Software GmbH
  • 39. JavaScript And CSS Files  Do not embed JS/CSS in your pages ▹ No <script>...</script> ▹ No <style>...</style>  Separate caching headers  Revision parameter (style.css?rev=1234) ▹ Get parameter ▹ Unique URL for browser Thomas Weinert, papaya Software GmbH
  • 40. Remove Duplicate Scripts  Team size  Standard scripts ▹ XMLRPC, JQuery, Prototype  Script module for your template system  $templatesystem->addScript('foo.js'); Thomas Weinert, papaya Software GmbH
  • 41. Make Ajax Cacheable  Often AJAX applications avoid caching ▹ http://some.domain.tld/ajax.file?t=randomvalue  A lot of requests  Use more static URLs Thomas Weinert, papaya Software GmbH
  • 42. References  Slides: http://www.abasketfulofpapayas.de/  Yahoo Performance Team ▹ http://developer.yahoo.com/performance/  JS minimize ▹ http://developer.yahoo.com/yui/compressor/ ▹ http://dean.edwards.name/packer/  Apache GZIP ▹ http://httpd.apache.org/docs/2.2/mod/mod_deflate.html  No Etag in IIS ▹ http://support.microsoft.com/?id=922733 Thomas Weinert, papaya Software GmbH