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, fontweight: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