Web UI Performance Tuning

Web UI Performance Tuning
Cross platform tools and techniques
Andy Pemberton,
Tuesday, November 2, 2010

Miniﬁcation
/**
* 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.")}}};

Miniﬁcation
/**
* This, friends, is a very important function.
*/
var be = true;
if(be){
}else if(!be){
}
}
function exampleFunction(){var be=true;if(be)
{confirm("You sure about that?")}else{if(!be)
{confirm("Apparently not.")}}};
Original: 205Minified: 121
41%

Obfuscation
var aLongerThanNecessaryVariableName = true;
if(aLongerThanNecessaryVariableName){
}else if(!aLongerThanNecessaryVariableName){
}
}
var a = true;
if(a){
confirm("You sure about that?");
}else if(!a){
confirm("Apparently not.")
}
}

Obfuscation
var aLongerThanNecessaryVariableName = true;
if(aLongerThanNecessaryVariableName){
}else if(!aLongerThanNecessaryVariableName){
}
}
var a = true;
if(a){
confirm("You sure about that?");
}else if(!a){
confirm("Apparently not.")
}
}
Original: 238Obfuscated: 145
39%

Compression
Content-Encoding: text/javascript
...
<script type="text/javascript" src="http://
code.jquery.com/jquery-1.4.3.js" />
Content-Encoding: gzip
...

Compression
Content-Encoding: text/javascript
...
Content-Encoding: gzip
...
Original: 180,459Obfuscated: 51,155
72%

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”>

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

How the web works

Steve Souders
http://developer.yahoo.com/performance/rules.html

So what can we do?
• Cross-platform
• Java
• .NET
• PHP

Cross-platform

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" />
media="all" href="forms.css" />

Source Order
<head>
<script type="text/javascript"
src="jquery.js">
<script type="text/javascript"
src="client.js">
</head>
<body>
...
</body>
<head>
</head>
<body>
...
</body>

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

CSS Image Sprites

Parallelize Downloads

CDN
• Multiple domain names
• Global load balancing or “edge” servers
• Other advanced features

Browser-based Tools

YSlow
http://developer.yahoo.com/yslow/

Page Speed
http://code.google.com/speed/page-speed/

Others
• FireBug (Net tab)
• Firecookie
• Live HTTP Headers
• Chrome, Safari, IE developer tools

Web-based Tools

Cuzillion
http://stevesouders.com/cuzillion/

smush.it
http://smush.it/

SpriteMe
http://spriteme.org/

Java

pack:tag
<%@ page %>
...
<link type="text/css" rel="stylesheet" media="all"
href="styles.css" />
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/

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"%>
...

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>

.NET

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>

jscssconsolidate
href="styles.css" />
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>

phpminify
http://code.google.com/p/minify/

Drupal

Wait... why?
http://tinyurl.com/google-sitespeed
http://tinyurl.com/ﬁrefox-sitespeed

In the wild...
• large non functional scripts
(omniture, foresee, etc.)
• large, unoptimized images
• vast number of javascript includes

Web UI Performance Tuning

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Web UI Performance Tuning

Similar to Web UI Performance Tuning (20)

More from Andy Pemberton

More from Andy Pemberton (12)

Recently uploaded

Recently uploaded (20)

Web UI Performance Tuning