Web UI performance tuning

4,994 views

Published on

Published in: Technology, Business
4 Comments
3 Likes
Statistics
Notes
No Downloads
Views
Total views
4,994
On SlideShare
0
From Embeds
0
Number of Embeds
21
Actions
Shares
0
Downloads
0
Comments
4
Likes
3
Embeds 0
No embeds

No notes for slide

Web UI performance tuning

  1. 1. Web UI Performance Tuning Cross platform tools and techniques Andy Pemberton, Tuesday, November 2, 2010
  2. 2. Minification /** * This, friends, is a very important function. */ function exampleFunction(){ var be = true; if(be){ confirm(“You sure about that?”); }else if(!be){ confirm(“Apparently not.”); } } function exampleFunction(){var be=true;if(be) {confirm("You sure about that?")}else{if(!be) {confirm("Apparently not.")}}}; Tuesday, November 2, 2010
  3. 3. Minification /** * This, friends, is a very important function. */ function exampleFunction(){ var be = true; if(be){ confirm(“You sure about that?”); }else if(!be){ confirm(“Apparently not.”); } } function exampleFunction(){var be=true;if(be) {confirm("You sure about that?")}else{if(!be) {confirm("Apparently not.")}}}; Original: 205Minified: 121 41% Tuesday, November 2, 2010
  4. 4. Obfuscation function exampleFunction(){ var aLongerThanNecessaryVariableName = true; if(aLongerThanNecessaryVariableName){ confirm(“You sure about that?”); }else if(!aLongerThanNecessaryVariableName){ confirm(“Apparently not.”); } } function exampleFunction(){ var a = true; if(a){ confirm("You sure about that?"); }else if(!a){ confirm("Apparently not.") } } Tuesday, November 2, 2010
  5. 5. Obfuscation function exampleFunction(){ var aLongerThanNecessaryVariableName = true; if(aLongerThanNecessaryVariableName){ confirm(“You sure about that?”); }else if(!aLongerThanNecessaryVariableName){ confirm(“Apparently not.”); } } function exampleFunction(){ var a = true; if(a){ confirm("You sure about that?"); }else if(!a){ confirm("Apparently not.") } } Original: 238Obfuscated: 145 39% Tuesday, November 2, 2010
  6. 6. Compression Content-Encoding: text/javascript ... <script type="text/javascript" src="http:// code.jquery.com/jquery-1.4.3.js" /> Content-Encoding: gzip ... <script type="text/javascript" src="http:// code.jquery.com/jquery-1.4.3.js" /> Tuesday, November 2, 2010
  7. 7. Compression Content-Encoding: text/javascript ... <script type="text/javascript" src="http:// code.jquery.com/jquery-1.4.3.js" /> Content-Encoding: gzip ... <script type="text/javascript" src="http:// code.jquery.com/jquery-1.4.3.js" /> Original: 180,459Obfuscated: 51,155 72% Tuesday, November 2, 2010
  8. 8. Combination <script type=”text/javascript” src=”jquery.js”> <script type=”text/javascript” src=”client.js”> <script type=”text/javascript” src=”events.js”> <script type=”text/javascript” src=”combined.js”> Tuesday, November 2, 2010
  9. 9. Combination <script type=”text/javascript” src=”jquery.js”> <script type=”text/javascript” src=”client.js”> <script type=”text/javascript” src=”events.js”> <script type=”text/javascript” src=”combined.js”> Reduction Tuesday, November 2, 2010
  10. 10. How the web works Tuesday, November 2, 2010
  11. 11. How the web works Tuesday, November 2, 2010
  12. 12. How the web works Tuesday, November 2, 2010
  13. 13. How the web works Tuesday, November 2, 2010
  14. 14. How the web works Tuesday, November 2, 2010
  15. 15. Steve Souders http://developer.yahoo.com/performance/rules.html Tuesday, November 2, 2010
  16. 16. So what can we do? • Cross-platform • Java • .NET • PHP Tuesday, November 2, 2010
  17. 17. Cross-platform Tuesday, November 2, 2010
  18. 18. Source Order <script type="text/javascript" src="jquery.js"> <script type="text/javascript" src="client.js"> <link type="text/css" rel="stylesheet" media="all" href="styles.css" /> <link type="text/css" rel="stylesheet" media="all" href="forms.css" /> <link type="text/css" rel="stylesheet" media="all" href="styles.css" /> <link type="text/css" rel="stylesheet" media="all" href="forms.css" /> <script type="text/javascript" src="jquery.js"> <script type="text/javascript" src="client.js"> Tuesday, November 2, 2010
  19. 19. Source Order <head> <script type="text/javascript" src="jquery.js"> <script type="text/javascript" src="client.js"> <link type="text/css" rel="stylesheet" media="all" href="styles.css" /> <link type="text/css" rel="stylesheet" media="all" href="forms.css" /> </head> <body> ... </body> <head> <link type="text/css" rel="stylesheet" media="all" href="styles.css" /> <link type="text/css" rel="stylesheet" media="all" href="forms.css" /> </head> <body> ... <script type="text/javascript" src="jquery.js"> <script type="text/javascript" src="client.js"> </body> Tuesday, November 2, 2010
  20. 20. Expires Header GET /sites/all/themes/captech/ styles/images/logo-captech-r.png HTTP/1.1 Host: www.captechconsulting.com HTTP/1.1 200 OK Date: Tue, 02 Nov 2010 14:42:58 GMT Last-Modified: Mon, 30 Aug 2010 12:21:25 GMT Expires: Tue, 16 Nov 2010 14:42:58 GMT Content-Type: image/png GET /sites/all/themes/captech/ styles/images/logo-captech-r.png HTTP/1.1 Host: www.captechconsulting.com User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.6; en-US; rv:1.9.2.12) Gecko/ 20101026 Firefox/3.6.12 If-Modified-Since: Mon, 30 Aug 2010 12:21:25 GMT HTTP/1.1 304 Not Modified Date: Tue, 02 Nov 2010 14:43:00 GMT Expires: Tue, 16 Nov 2010 14:43:00 GMT Tuesday, November 2, 2010
  21. 21. CSS Image Sprites Tuesday, November 2, 2010
  22. 22. Parallelize Downloads Tuesday, November 2, 2010
  23. 23. CDN • Multiple domain names • Global load balancing or “edge” servers • Other advanced features Tuesday, November 2, 2010
  24. 24. Browser-based Tools Tuesday, November 2, 2010
  25. 25. YSlow http://developer.yahoo.com/yslow/ Tuesday, November 2, 2010
  26. 26. Page Speed http://code.google.com/speed/page-speed/ Tuesday, November 2, 2010
  27. 27. Others • FireBug (Net tab) • Firecookie • Live HTTP Headers • Chrome, Safari, IE developer tools Tuesday, November 2, 2010
  28. 28. Web-based Tools Tuesday, November 2, 2010
  29. 29. Cuzillion http://stevesouders.com/cuzillion/ Tuesday, November 2, 2010
  30. 30. smush.it http://smush.it/ Tuesday, November 2, 2010
  31. 31. SpriteMe http://spriteme.org/ Tuesday, November 2, 2010
  32. 32. Java Tuesday, November 2, 2010
  33. 33. pack:tag <%@ page %> ... <script type="text/javascript" src="jquery.js"> <script type="text/javascript" src="client.js"> <link type="text/css" rel="stylesheet" media="all" href="styles.css" /> <link type="text/css" rel="stylesheet" media="all" href="forms.css" /> <%@ page %> <%@ taglib uri="http://packtag.sf.net" prefix="pack" %> ... <pack:style> <src>styles.css</src> <src>forms.css</src> </pack:style> <pack:script> <src>jquery.js</src> <src>client.js</src> </pack:script> http://sourceforge.net/projects/packtag/ Tuesday, November 2, 2010
  34. 34. Tomcat Pre-Tomcat 6: tomcat/conf/web.xml: <servlet> <servlet-name>jsp</servlet-name> <servlet-class>org.apache.jasper.servlet.JspServlet</servlet-class> ... <init-param> <param-name>trimSpaces</param-name> <param-value>true</param-value> </init-param> ... </servlet> Post-Tomcat 6 <%@ page trimDirectiveWhitespaces=”true"%> ... Tuesday, November 2, 2010
  35. 35. Tomcat Tomcat 7: ExpiresFilter <filter-name>ExpiresFilter</filter-name> <filter-class>org.apache.catalina.filters.ExpiresFilter</filter-class> <init-param> <param-name>ExpiresByType image/jpeg</param-name> <param-value>access plus 52 weeks</param-value> </init-param> Tuesday, November 2, 2010
  36. 36. .NET Tuesday, November 2, 2010
  37. 37. ASP.NET <asp:scriptmanager runat="server"> <compositescript> <scripts> <asp:scriptreference name="WebForms.js" assembly="System.Web, Version=2.0.0.0, Culture=neutral”"> <asp:scriptreference name="MicrosoftAjaxWebForms.js" assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral"> <asp:scriptreference name="MicrosoftAjax.js" assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral"> </asp:scriptreference></asp:scriptreference></asp:scriptreference></scripts> </compositescript> </asp:scriptmanager> Tuesday, November 2, 2010
  38. 38. jscssconsolidate <script type="text/javascript" src="jquery.js"> <script type="text/javascript" src="client.js"> <link type="text/css" rel="stylesheet" media="all" href="styles.css" /> <link type="text/css" rel="stylesheet" media="all" href="forms.css" /> http://jscssconsolidate.codeplex.com/ <almWitt.web.resourceManagement consolidate="true"> <clientScripts compress="true"> <group consolidatedUrl="~/scripts.js"> <include> <add pattern=".js"/> </include> </group> </clientScripts> <cssFiles> <group consolidatedUrl="~/styles.css"> <include> <add pattern=".css"/> </include> </group> </cssFiles> </almWitt.web.resourceManagement> Tuesday, November 2, 2010
  39. 39. PHP Tuesday, November 2, 2010
  40. 40. phpminify http://code.google.com/p/minify/ Tuesday, November 2, 2010
  41. 41. Drupal Tuesday, November 2, 2010
  42. 42. Wait... why? http://tinyurl.com/google-sitespeed http://tinyurl.com/firefox-sitespeed Tuesday, November 2, 2010
  43. 43. In the wild... • large non functional scripts (omniture, foresee, etc.) • large, unoptimized images • vast number of javascript includes Tuesday, November 2, 2010

×