The performance of a website on the internet is determined by many factors amongst which speed is the most important one. Now days, Google and other search giants are on a way to rank the website on the basis of their speeds. So, let us try to figure out the issues that we can fix from our end so that the speed of the website increases. We can optimize the CSS by shrinking it as well as reduce the size of the HTML and reduce server requests with sprites and suturing.
Optimizing and streamlining our web contents helps to increase the speed of display of all the elements.
To maximize the display speed we can do the following tasks:
- Minimize HTTP requests.
- Resize and optimize images.
- Optimize multimedia.
- Convert JavaScript behavior to CSS.
- Use server-side sniffing.
- Optimize JavaScript for execution speed and file size.
- Convert table layout to CSS layout.
- Replace inline style with CSS rules.
- Minimize initial display time.
- Load JavaScript wisely.
1. Some of the steps are mentioned in detail as follows:
Use container cells for descendant selectors:
<style><!--#nav ul, #nav ul li {list-style:none;}#nav ul li {font-weight:bold;}--></style>...<div><ul><li>Burma</li><li>Shave</li></ul></div>
and the result:
- Burma
- Shave
2. Convert graphical text to CSS text to save HTTP requests. So this:
<div align="center"><img src="graphictext.gif" width="115" height="24" alt="graphic text example"></div>
Becomes this:
<h1>CSS Text</h1>CSS Text
3. A common practice is to use spacer cells with a single-pixel GIF that is stretched to enforce the spacing distance. Here is an example from Nasa.gov:
<! -- Empty spacer row --><table><tr><td colspan="2" width="223"><img border="0" alt="" height="10" width="223" src="/images/common/spacer.gif"></td></tr>
Even rocket scientists can use some help with their HTML. A better way would be to use CSS to add spacing between cells:
<style><!--.vmargin {margin-top:10px;} --></style></head><body><table><tr><td colspan="2" width="223">Content goes here</td></tr>
Even better is to use relative “em” spacing to allow for changes in font size made by the user and div elements:
<style><!--.vmargin {margin-top:1em;} --></style></head><body><div>Content goes here</div>
4. You can reduce the number of HTTP requests that your pages require by combining adjacent images into one composite image and mapping any links using an image map. Instead of multiple HTTP requests, this technique requires only one.
5. By minimizing the HTTP request load, you can maximize the initial display speed of your content. So, this:
<link rel="stylesheet" href="/css/fonts.css" /><link rel="stylesheet" href="/css/nav.css" /><script src="/js/functions.js"></script><script src="/js/validation.js"></script>
becomes this, by combining the CSS files into one file and the JavaScript files into one file:
<link rel="stylesheet" href="/css/combined.css" /><script src="/js/combined.js"></script>
6. Cache Dynamic Files
header('Cache-control: must-revalidate');header('Expires: ' . gmdate('D, d M Y H:i:s', time( ) + 10800) . ' GMT');
7. Eliminate JavaScript Includes:
For advertising, you can eliminate the extra HTTP requests required by the preceding methods by using a server-side include-based ad delivery system such as 24/7 Real Media’s Open AdStream
8. This technique uses server-side includes (SSIs) to include the banner ad directly into the page, saving an HTTP request.
Thesis Report of a Web Researcher:
Reference: http://www.websiteoptimization.com/speed/tweak/web-page-performance-thesis/
Web Page Performance Vs. Server Performance
Unlike most research into web performance that deals with server and network issues, Chiew’s thesis focused on the performance analysis of web pages themselves. The key metric with web pages is response time. Instead of being the result of server and network conditions, Chiew treats response time as an attribute of web pages. To address response time, Chiew proposes a framework of measurement, modeling, and monitoring. These “3Ms” were addressed with corresponding software modules. Using this framework, web developers can assess that web pages can meet or reduce tolerable wait times to ensure higher user satisfaction with web sites.
The thesis tests the following hypothesis:
- The response time of downloading a Web page can be decomposed into its constituent components.
- The particular Web page response time will be affected by identifiable characteristics of the Web pages.
- It is possible to provide recommendations for resolving or relieving some of the identified performance problems that may cause poor response time based on the identified characteristics that affect Web page response time.
