WEB SITE OPTIMIZATION TECHNIQUES

Nourah Mohammed AL­Oboud
King Saud University 
Riyadh
Saudi Arabia
all_nona@hotmail.com

ABSTRACT
Building a Web site is worthless if your targeted audience cannot find it or if they switch to another website  
because it's takes a lot of time to open. This document will highlight the importance and techniques for  
optimize web sites. After this session, participants will know better:

• Speed up the load time on your site. 

• Learn how to use a variety of techniques to minimize the size of your Web pages, including HTML,  
CSS, JavaScript and XHTML.

• How to achieve good SEO results.

Keywords: WSO, HTML optimization, XHTML optimization, CSS optimization, JavaScript optimization, 
search engine optimization.

1.INTRODUCTION
If you build a Web site but your targeted audience switch to another one because they feel bored of waiting 
the web page to open or they can't find it, then it is, in a word, worthless. Why? The page size and complexity 
are the real problem, even if the impact of the server load and network bottlenecks. No matter how nicely laid 
out, content­rich and useful your Web site may be if it has not been designed taking  website optimization  
techniques  (WSO)  techniques  into   consideration,   it  won’t   get   sufficient   traffic.   This  paper  provides  useful 
WSO   techniques   that   you   can   apply   to   improve   your   Web   site.The   structure   of   the   paper   is   as   follows: 
Section 2 illustrates the definition of WSO, section 3, 4, 5 and 6 illustrate HTML optimization techniques, 
XHTML optimization techniques, CSS optimization techniques,  JavaScript optimization techniques,  Search 
engine optimization techniques, respectively. Section 7 present conclusions.

Background/related work.
XSSI is Abbreviation of Extended Server­Side Includes and it's is implemented by Apache HTTP Server.

"Web site optimization (WSO)  is the process of reducing web site size and complexity to maximize 
website   performance.   Website   optimization   can   also   include   search   engine   optimization,   pay   per   click 
optimization, and  conversion rate optimization (getting  more traffic and sales) as part of your overall site 
redesign process." [1]
Here are some of techniques that can maximize the display speed:

HTML optimization
Permission to make digital or hard copies of all or part of this work for personal or classroom use is granted without fee provided that copies 
are not made or distributed for profit or commercial advantage and that copies bear this notice and the full citation on the first page. To copy 
otherwise, to republish, to post on servers or to redistribute to lists, requires prior specific permission.
The First Mini­Conference in Web Technologies and Trends (WTT)
© 2009 Information Technology Department, CCIS, King Saud University, Riyadh, Saudi Arabia
Tighten Up Comma­Delimited Attributes 
"Some tags allow a comma­delimited list attribute values. The most common are the <keywords> Meta tag, 
the <map> coordinate attribute, and the <style> tag. Browsers and search engines ignore leading spaces 
before comma­delimited attributes. You can save space by omitting spaces when using comma or omitting 
commas altogether for the <keywords> Meta tag.
Instead of this: 
<style type="text/css">
<!—
body {
         font­family: Arial, Helvetica, sans­serif;
        font­size: 1.1 em;}
­­>
</style>
Do this:
<style type="text/css"><!— body {font­family:Arial,Helvetica,sans­serif;font­size:1.1 em;} ­­></style> "[2]

XHTML optimization 
Remove white space
  "Browsers don't care how pretty your markup is; they're just looking between tags—real or implied. Extra 
spaces, tabs, and return make your markup easier to read but slower to display. Space between and inside 
tags can also be removed."1 [2]Thus you can shave off up to, or even over 10% of its file size.
Use
<table   border="1"   cellspacing="10"   cellpadding="5"> <tr><th>State</th><th>State Tree</th></tr></table> 
[2]
…Instead of
<table border="1" cellspacing="10" cellpadding="5">
     <tr>
          <th>state bird</th>
          <th>State Tree</th>
     </tr>
</table>

Omit Redundant Classes and Default Attributes
There are cases, attribute or tags are redundant then they can be eliminated.
Case1: Omit Default Attributes 
Because the default for table data cells is to be aligned to the left, it can be eliminate from your web page. For 
example:

1
<table><tr><td align="left">the default is left !!</td></tr></table>
Becomes:
<table><tr><td>better</td></tr></table>2[2]

"If you style your tables to be aligned otherwise, aligning individual exceptions may be necessary. In this 
case,   style   the   most   common   alignment   globally   and   individually   style   the   exceptions.   Even   better,   use 
classes (.alignleft, .center) or contextual selectors (table.top th) to style your cells."[2]

Case 2: Omit Redundant Classes
''Another redundant example is when styling a list of items. Rather than placing an identical class within each 
item, you can use the same class within the list tag and use a contextual selector. So this:''[2]
<ul>
<li class="big">cap 311</li>
<li class="big">cap 322</li>
</ul>

Becomes this:
ul.big li{big style here;}
...
<ul class="big">
<li>cap 311</li>
<li>cap 311</li>
</ul> [2]

 Cut the Comments
  "Comments in code can be safely abbreviated or eliminated without any change in functionality. Comments 
make it easier for developers and editors to maintain content. However, users must download your comments 
each time they load your page. An example:
<!-- main navigation header goes here -->

One solution is to abbreviate comments to save bandwidth, but still give editors
clear checkpoints.
<!-- main nav bar -->" [2]

CSS optimization
  "CSS optimization is the process of minimizing your Markup and CSS files for maximum speed."[2]
Minimize HTTP Request 
tag: content
Each   unique   HTTP   request   requires   a   round   trip   to   a   server,   introducing   indeterminate   delays.   Thus   by 
combining   external  files   and   embedding   CSS   within   your   HTML   you   can   minimize   the   number  of   HTTP 
requests required to render your page. [2]
"So this:
< <link rel="stylesheet" type="text/css" href="/css/fonts.css" />
<link rel="stylesheet" type="text/css" href="/css/nav.css" />
Becomes this:
<link rel="stylesheet" type="text/css" href="/css/combined.css" />

2
Even better, XSSI these files directly into high traffic pages, like this:
<style type="text/css">
<!--
<!--#include virtual="/css/combined.css" -->
-->
</style>
The SSI technique included above should only be used on high traffic pages, like home pages" [2]

Don't use images to display text
There's no need to use images to display text as so much can be accomplished through CSS. [2]
Defaults CSS 
CSS also has defaults that you can use to optimize your code. For examples if you omit Itr (property value for 
direction) CSS­compliant browsers will automatically set an initial default value that is from left to right. [2]

".main{font-size:2.2em, font-family:arial,helvetica,sans-serif, font-

weight:normal...}
becomes this instead (using the font shorthand property and omitting defaults):
.main{font:1.1em arial,helvetica,sans-serif;}"[2]

Using shorthand hexadecimal colors
The two competent ways to specify color are hexadecimal and named color [2]."Shorthand hex notation 
substitutes 3­character color values for 6­character colors when each of the color channels is identical in an 
RRGGBB hex triplet. Shorthand hexadecimal colors can help optimize your style sheets, especially when 
combined with shorthand properties and grouping."[2] 
So instead of:
.blue {color:#0000ff;}
Do this:
.blue {color:#00f;}
Note almost all browsers (version 3 and above, except IE3 Mac) support shorthand hex colors this taken from 
[2].
 Named color: there are some cases named colors become shorter than their hex equivalents for examples 
using purple as named color is better than using #800080 hex numbers. [2] 

JavaScript optimization 
Minimize HTTP Request
Also we can minimize HTTP request by combining external files and embedding JavaScript within your HTML 
page. "So this:
<script src="/js/functions.js" type="text/javascript"></script>
<script src="/js/validation.js" type="text/javascript"></script>
Becomes this:
<script src="/js/combined.js" type="text/javascript"></script>
Even better, XSSI these files directly into high traffic pages, like this:
<script type="text/javascript">
<--
<!--#include virtual="/js/combined.js" -->
// -->
</script>

Maximize object resolution speed and minimize scope chain
"Do this
var url=window.location.href;
Not this
var url=location.href;
or this
url=location;" [3]
JavaScript: Delay loading 
You can make your content display faster if you delay or defer the loading of your external JavaScript files. 
JavaScript's are executed as they are loaded. Any external JavaScript's referenced within the head of your 
XHTML documents must be executed before any body content is displayed. One way around this is to delay 
the loading of your external JavaScript by using empty "stub" functions, and redefining these functions later 
on.
Delay   loading   your   external   JavaScript   files   to   speed   up   your   content   display.   The   external   JavaScript 
positioned in the head of your XHTML documents should be executed before any body content is displayed.  
You can certify that your content displays rapidly by redefining empty stub functions with scripts loaded late in 
your page. [2] This is an example taken from [2]: 

<script ...>
<!--
function stub(){};
// -->
</script>
</head>
<body>
...
<script src="/scripts/stub.js" type="text/javascript"></script>
</body>

"The empty stub function(s) allow users to interact with your page without generated "undefined" JavaScript 
errors. The scripts loaded just before the closing body tag redefines the stub function once the body content 
has displayed."[2] 
Note that you must be careful with this approach because large JavaScript files, specially those that execute 
slowly, can flood the response time of your page after it has loaded.[2]

Search engine optimization
SEO   is   the   ability  to  improve   your   organic  ranking   on   search   engines   by  changing   your   Web   site   using 
various actions/techniques based on the search engines’ crawler algorithm (ranking criteria).[4]
SEO Activities are:

Information Technology (IT) Team
Limit page size
Because some search engines index only the first 100K of the page, better limit the size of the HTML code to 
less than 100k. Also limit the number of links to about 100 per page. [4]
Build a custom error page (404)
"A standard 404 error page will make crawlers leave the site. A custom 404 page with a site map, navigation 
and search will be helpful to users who land on a missing page, and will keep crawlers from leaving the site. " 
[4]
Have a site map accessible from every page of your site
"Text­based site maps are another way to help spiders navigate your site." [4]
Add a navigation footer
Put text navigator footer on your page to provide another link exit for the crawler to continue navigating the 
site. [4]

Content Team
Select the right keywords
"Keyword selection should be based on:
• Your targeted audience: which keywords are they using? 
• Popularity of the keyword: how often is this keyword searched? 
• The competition: how many search results are there for this keyword? "[4]

Have unique title tags on every page
"Search engines often use content of the title tags as the text for the link in search results pages. Each page 
should have a unique title and should be limited to between seven and 10 words." [4]

Conclusion
This paper is intended to give practical guidance in web site optimization techniques:
• HTML optimization techniques.
• XHTML optimization techniques.
• CSS optimization techniques.
• JavaScript optimization techniques.
• Search engine optimization.
 If you follow the techniques outlined in the paper, learn from your experience then this will result in Reduce  
the   download   time,   maximum   speed,   increase   the   number   of   visits   from   organic   searches.The   more  
optimization's you have, the more optimization's you will give to culture in general ­ and we will all benefit in  
the end. [4]

References
[1] Website   Optimization:   Speed,   Search   Engine   &   Conversion   Rate   Secrets,   a   book   about   WSO   from 
O'Reilly 
[2] Andy King, Speed Up Your Site: Web Site Optimization, 1st Edition, (New Riders) King is the founder and 
newsletter   editor   of   WebReference.com.   The   companion   Web   site   for   his   book   can   be   found   at:
www.websiteoptimization.com 
[3] Mi Islita. Located on the Internet at  www.miislita.com/searchito/javascript­optimization.html. Last visited: 
16 December, 2008
[4] Search   Engine  Optimization   (SEO)   Essentials   for   Cultural   Web   Sites  Located   on   the   Internet   at 
http://www.archimuse.com/mw2006/papers/arsenault/arsenault.html. Last visited: 16 December, 2008