The first of its kind Web Technology Conference on Open Source Technology, WebOSS '07 was being organised in Kolkata today and spoke at the event as one of the participants and thought I will share my presentation here. As download requires you to register at the forum I am sharing the content of the presentation here as well.

"Expires" Header

A first-time visitor to your page may have to make several HTTP requests, avoids unnecessary HTTP requests on subsequent page views.

Expires headers are most often used with images, but they should be used on all components including scripts, stylesheets, and Flash components.

The major disadvantage of using it is you have to change the component's filename whenever the component changes and the best way of doing is to make the name based on version number of the file or the date on which it was last modified to be added with the file name.

Using Expires header has an advantage if you have returning users but for the new visitors you have no added advantage.

Gzip your output

Use of latest browsers helps you send the page content in the zipped format.

Browser sees the headers and unzips the content and then render it to the screen.

Gzip is supported by almost all browsers and web servers are also responding to the same and are going hand in hand.

Gzipping as many file types as possible is an easy way to reduce page weight and accelerate the user experience.

The disadvantage of using such things is you may not be able to see the web page correctly if you are using a very old browser.

CSS at the Top

Used correctly most of the time.

Putting CSS in the HEAD element allows progressively display of web page and the web page itself can behave as a progress indicator.

Also the layout of the page can change dramatically with the final CSS and so many browser do not render the pages progressively if CSS is at the bottom.

Scripts at the Bottom

Used incorrectly most of the time.

Moving scripts as low in the page as possible means there's more content above the script that is rendered sooner.

The disadvantage is its not always possible to b able to push the JavaScript down and you may have some content in the JavaScript which updates the page (like document.write) and so it should be at the top of the page

The DEFER attribute specify that though the JavaScript is at the top of the page it can continue rendering and defer the load of the java script file but unfortunately, all browser doesn't support the DEFER attribute.

Avoid CSS Expressions

Internet explorer supports expressions in CSS which based on some JavaScript expression you can set some values.

JSMin is a filter that omits or modifies some characters. This does not change the behavior of the program that it is minifying. The result may be harder to debug. It will definitely be harder to read.

JSMin removes comments and white space from the code.

Obfuscation is an alternative optimization method that can be applied to source code which converts function and variable names into smaller strings making the code more compact as well as harder to read.

The most famous example is iGoogle:-

Look at the source code of iGoogle page and you will see that lots of JavaScript but you are unable to read or debug it and the reason behind it is that its reduced and is uncommented.

Avoid Redirects

Avoid HTML code linking to the site without the trailing slash to avoid un-necessary redirects on your server.

Duplicate Scripts

Manage your script module such that you do not include the same JavaScript file into the web page more than once.

Some browsers make duplicate requests to the server and thus you make an additional HTTP request.

Configure ETags

ETags helps understand the browser to understand if the cache version of the file is same on the server or modified.

ETags are created based on file information and server.

ETags won't match when a browser gets the original component from one server and later tries to validate that component on a different server, a situation that is all too common on Web sites that use a cluster of servers to handle requests.

If you're not taking advantage of the flexible validation model that ETags provide, it's better to just remove the ETag altogether. The Last-Modified header validates based on the component's timestamp. And removing the ETag reduces the size of the HTTP headers in both the response and subsequent requests.

General code optimization tips

Avoid using regular expression where possible.

Avoid declaring variable inside the loops.

Always go through the documentation of the API’s for optimal use of them.

Some languages allow you can do away with variable declaration. Try avoiding use of such automatic variable declaration system.

PHP allows you to have the header files inclusion when you need. Do that. Do not go for including all the header files at the beginning.

Remember OO programming is for better maintainability and not for optimal performance but the performance lost is worth the gain.

PDF version of the presentation is available to download as an attachment.

thank for this
but if you keep your code clean, thats also optimize the page load time

shabbir

7Dec2007 09:03

Re: Speed up your web pages

Nope. Clean code means lots of formatting and lots of formatted code in HTML / JavaScript means more bytes need to be transfered and so it will not be optimal. Now if you have clean server side code that hardly makes a difference.

extomas

27May2009 19:18

Re: Speed up your web pages

Ouch, how nice :) Thank You
Thank You

msn90

6Aug2009 17:01

Re: Speed up your web pages

Excellent post. your post is very informative and very useful for me.

Thanks for the great post.

Seema786

6Aug2009 22:50

Re: Speed up your web pages

one prb i got stuck wid is in css, editors suggest to use like formate type: likedis, likedat;

but i found in dis article as not to use if. wat's d diff?

shabbir

7Aug2009 03:52

Re: Speed up your web pages

Quote:

Originally Posted by Seema786
(Post 54398)

one prb i got stuck wid is in css, editors suggest to use like formate type: likedis, likedat;

but i found in dis article as not to use if. wat's d diff?

If some condition should be avoided but CSS is always in the format you have it.

babaabbas

21Oct2009 01:47

Re: Speed up your web pages

I have never this kind of post elsewhere, so it is an education by itself.

Thanks

parryzensg

19Aug2010 14:37

Re: Speed up your web pages

hi...

Thanks many to share the site optimization in speed up process...!!! meet again.

kien_vn

31Aug2010 19:16

Re: Speed up your web pages

the tips is very simple but very useful and necessary.

Max2010

14Oct2010 14:33

Re: Speed up your web pages

thanks for sharing, very well done. I use pagespeed plugin in firefox and yslow, but your tips are easier to understand

jacktom

4Apr2011 14:57

Re: Speed up your web pages

Very informative post.

Kingson

26Jul2011 17:48

Re: Speed up your web pages

A fast loading web page is an important factor that heavily weighs into a user’s experience on your web site. And it’s not just your audience taking notice of how quickly a page loads into their browser, Google uses this metric as part of their PageRank algorithm. Web designers and developers who are creating web sites will want to take this into consideration, and usually do by optimizing image filesizes, using semantic HTML and CSS, and controlling the amount of content that appears on any given page. However, web designers and developers can decrease their page load times even more by forcing the browser to cache specific types of content via the Expires header. In fact, both Google and Yahoo recommend implementing browser caching by setting the Expires header.

......................................

adammarleymtts

26Jul2011 23:46

Re: Speed up your web pages

This is the great post. The tip is very informative and very helpful. Thanks for the tip given here.

kartarsingh015

15Sep2011 19:08

These are great ways of speeding up my web pages

tanyagarg9695

15Sep2011 23:16

Re: Speed up your web pages

fantastic information

hanleyhansen

22Sep2011 01:15

Re: Speed up your web pages

Good stuff! Thanks for sharing.

mirandu85

3Oct2011 16:03

Re: Speed up your web pages

i think in a page the scripts are the ones that burden it

jhon786

13Oct2011 11:25

Re: Speed up your web pages

Thanks for this useful information. You explained all the things finely with examples. Nice.

rozerdun

22Nov2011 12:59

Re: Speed up your web pages

Very informatics thread speed is very important for web pages because if it takes time to open, no body waits they switch to another website.

alanson

2Jan2012 17:36

Re: Speed up your web pages

Thanks for the information you provided here. great

parvez.pathan1

7Jul2012 13:40

Re: Speed up your web pages

thanks buddy

j.smith1981

25Jul2012 15:51

Re: Speed up your web pages

Very good post about the start of normalisation though on the practical part it's not actually in mysql's view actually joning tables. Just as a bit of a tip you lose allot of the good features of joining in MySQL if you just use FROM table1, table2, table3...

What you need to be doing to adhere to formally be joining tables is something like so:

SELECT *
FROM students
JOIN attendance ON students.studentid = attendance.studentid

There's other kinds of joints like 'INNER JOIN', 'OUTER JOIN', 'LEFT JOIN' and 'RIGHT JOIN' on the contrast FROM keyword/command will work, just it's more like using 'JOIN' but you do lose allot of MySQL's performance (i.e.when you want to omit any rows completely if the relational table you are joining has no data for the row on the primary table tuples/entities/rows).