Web Applications Development » Miscellaneous

ID #1002

How to make web applications faster?

One of the biggest hurdles of web applications is that they are considered slow. Gmail is faster than Squirrelmail, but Opera M2 is faster than Gmail. Yet, web applications are experiencing a real boom and rapid adoption. Web applications are more and more snappy, the Internet is faster and faster with broadband, and web application slowness is less and less an issue to the point that more and more users are switching their desktop applications for web applications because:

  • Web applications can be accessed anywhere with a connection to the Internet
  • They can be used is various browsers and platforms
  • You don't have duplication of data, all your data is concentrated on your server
  • You don't have to worry about backing up your data, it is backed up by your web host

This said, as a developer, you may find interesting to design fast applications for the web used as a development platform. Designing great web applications is above all using javascript and common sense extensively. We can distinguish client-side scripting and server-side technologies. Let's analyze both of them.

Client-side optimization

As a rule of thumb, load as much information as you can when the person is loading the web application. Load even the content and the windows that the user will not see in the beginning and hide them. When you need to show this content and these windows, just change their CSS property on the fly to be visible, it'll take one tenth of a second instead of 2-3 seconds.

Use as much Javascript (aka. Ajax) as you can, especially when loading remote content: instead of having your user waiting and wondering if he should click one more time on the button, disable the button right after clicking, and change the text of the button from "Submit" to "Sending...". Your user will understand that he can't click one more time, and that the application is not frozen, it's just querying some data:

<input type="button" value="Submit" onclick="this.value='Sending...' this.disabled='true' return false;" />

 

This doesn't turn your web application faster, but it makes the wait acceptable, and it makes the application more user-friendly, this is what in important.

Querying the server as low as possible is crucial in web applications. Only query what you need and when you need it. Don't reload the whole page every time there is new content, but rather use xmlHttpRequest to query the new content and put it only in the area of your window where it is supposed to be.

Use Javascript alert, confirm and prompt boxes for user interaction instead of opening a pop-up window, it's faster and easier to implement:

<input type="button" value="Alert box" onclick="alert('This is an alert box'); return false;" />
<input type="button" value="Confirm box" onclick="confirm('Would you like to continue after this confirm box?'); return false;" />
<input type="button" value="Prompt box" onclick="prompt('Please enter your name','Enter your name here'); return false;" />

When you are waiting for the server output after a query, or right after sending a query, it is a good idea to let your user know what is going on. A little message in the top-right corner of the window in bold with white text and a red background ŕ la Gmail will do the trick to display messages such as "Sending..." or "Loading...":

Loading...

Optimizing your CSS code is very important as well. Using CSS doesn't necessarily mean your page will load much faster than using legacy table-based code, if you have lots of useless or redundant lines of CSS code. CSS has a myriad of shortcuts that can be used. Yesterday I converted a 12KB bloated CSS file into an optimized 2K CSS code that had the same rules, but optimized. Import your CSS code from an external file instead of including the code inside your web page - You'll need to load the CSS code just once. Also, for each selector, just use one line of code, you'll save a few bits. Every bit helps, in the end you may save on download time and bandwidth. These are a few tips for you to optimize your CSS files:

p {
margin: 0px 0px 0px 0px;
}
p {
margin-top:	0px;
margin-right:	0px;
margin-bottom:	0px;
margin-left:	0px;
}

In this case, you have the same value for all directions, and the value is 0px, in other words "0", be it in pixels, in ems or in pts is still "0", so the above can be abreviated to:

p { margin: 0; }

Here's another shortcut. Suppose you have:

p {
margin: 0px 5px 0px 5px;
}

The above means you have no margin on top and at the bottom, and you have a 5px margin on both sides. When you have the same value on top and at the bottom, on the one hand, on both sides, on the other hand, you can define only 2 values, the first being to define the value for top & bottom, and the 2nd value being for left & right. Additionally, "0px" can be changed to just "0". The above can be changed to:

p { margin:	0 5px; }

These shortcuts are true for both padding and margin. Here's one more shortcut. Suppose you have a top padding of "0", a right and a left padding of 10px, and a bottom padding of 5px. You could do:

p {
margin: 0px 10px 5px 10px;
}

But you can save a few bits! If you declare only 3 values, the first value goes for the top, the second value goes for both left and right, and the third value is used for the bottom. The above declaration can be summed up to:

p { margin: 0px 10px 5px; }

The font property also can be simplified dramatically. The following snippet:

body {
font-family: Arial, 'Nimbus Sans L' sans-serif;
font-size: 12px;
font-style: italic;
font-weight: bold;
}

Can be summed up to

body { font: italic bold 12px Arial, 'Nimbus Sans L' sans-serif; }

That simple :) Let's see how we can simplify a background property. The following example:

body {
background-color: #CCFF00;
background-image: url(map.png);
background-position: left center;
background-repeat: repeat-x;
}

Can be simplified too. First, the color has 3 sets of 2 similar letters that can be simplified from #CCFF00 to #cf0, left can be changed to 0, as the distance from the left boundary will be "0", center can be changed to 50%, as the distance will be 50% from the top, and the background declarations can be merged into just one single line:

body { background: #cf0 url(map.png) 0 50% repeat-x; }

And last, but not least, let's give the border property a diet. Here's a big, big declaration that has a lot of redundant code:

body {
border-top-width: 1px;
border-top-style: solid;
border-top-color: #000000;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #000000;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #000000;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #000000;
}

The above amount of code that you will find in a number of web sites can be summed up into a single line:

body { border: 1px solid #000; }

If you follow these simple rules and if you don't use many images and graphics, you should have a pretty fast web application. For web applications, the effort is really focused on the client-side because what really makes it an application is the fact that it acts as such, and not as a web page that loads one page after the other. Server-side optimization is important too, but if you don't optimize your server-side technology and application, you still can invest into a more robust server. If you can avoid this, better yet, so let's see how you can get the most out of your server.

Client-side optimization

Optimizing your code is important. It has been discussed which server-side technology is faster. Truth is that they are are pretty close to each other. Code in what you feel more comfortable, and your application will probably benefit from your expertise and be faster. Java (JSP) is known to be resource-hungry while mod_php and mod_python are very lightweight and fast.

Apache and LightTPD (aka. Lighty) are the two most robust web servers, LightTPD using less memory. If you use PHP, you can either use:

  • mod_php and Apache
  • php-cgi and LightTPD both compiled with FastCGI support

Both have very similar performance under heavy load. An alternative to FastCGI is SCGI, they both keep code in cache and make execution much faster. These are the most common configurations these days with more recent technologies such as:

Your choice for the database can be either PostgreSQL or MySQL. PostgreSQL is know to outperform MySQL under heavy load, while MySQL is know to work great in a cluster environment. Both share the same standard SQL synthax. With either of these server-side technologies, you should be good to go. Fast web sites use these technologies - They're free of charge and open-source, with excellent support on forums and mailing lists, you can't go wrong.

With all this in mind, you can go one step further improving the speed and quality of your web applications and more and more users will hardly feel any difference between a desktop application and your web application.

Go further!

Tags: -

Related entries:

Last update: 2008-09-01 06:11
Author: Charles A. Landemaine
Revision: 1.2

Digg it! Print this record Send to a friend Show this as PDF file
Propose a translation for Propose a translation for
Please rate this entry:

Average rating: 2.67 out of 5 (12 Votes )

completely useless 1 2 3 4 5 most valuable

You cannot comment on this entry

Comment of Siddhartha:
Good article, and, your pages load really fast. Keep it up.
Added at: 2006-09-05 20:20

Comment of BFaYIZqWXjUcs:
Walking in the presecne of giants here. Cool thinking all around!
Added at: 2011-09-27 03:06

Comment of smmEzJEpITnO:
RyNf32 , [url=http://sbekfjeayffs.com/]sbekfjeayffs[/url], [link=http://slqjajntbbmh.com/]slqjajntbbmh[/link], http://iakdvsttoebg.com/
Added at: 2011-09-30 07:46

Comment of MmSKtSLsPEyJU:
1vtUdj kytifjrvbkff
Added at: 2011-10-01 12:50

Comment of MbYprxju:
MD55vF , [url=http://bzlwqkbvlfyh.com/]bzlwqkbvlfyh[/url], [link=http://uaurvvmsbfnh.com/]uaurvvmsbfnh[/link], http://agfrapkeqqno.com/
Added at: 2011-10-05 05:52

Comment of hxNciBBwoXUaSpzcGU:
Du kan ha så stor hdeear som du selv ønsker. Det er ikke problemet, men med dette designet så passer en hdeear med 840px i bredde best. Høyden kan selvfølgelig endres etter eget ønske.
Added at: 2012-02-13 00:00

Comment of MaofixqWvuGIdmDMPa:
GnCbxp lstbembrxpbe
Added at: 2012-02-14 02:42

Comment of BFGHDAcUiJbicGMx:
BkP4Wy , [url=http://pumvwkgshjfc.com/]pumvwkgshjfc[/url], [link=http://ghkexwvmjrof.com/]ghkexwvmjrof[/link], http://lyblfukynivy.com/
Added at: 2012-02-14 07:43

Comment of aGnQLTolPjSrgMCOSL:
vJoRn4 , [url=http://nfrqgioeaugf.com/]nfrqgioeaugf[/url], [link=http://eejhpaywcwpe.com/]eejhpaywcwpe[/link], http://rpqsedboywbe.com/
Added at: 2012-02-16 06:56

Comment of gHvdVmAVp:
Location voiture Tanger Nice to bocmee visiting your blog again, it continues to be months for me. Well this article that ive been waited for so long. I will need this post to total my assignment within the college, and it has same subject with your Nice to bocmee visiting your blog again, it continues to be months for me. Well this article that ive been waited for so long. I will need this post to total my assignment within the college, and it has same subject with your post. Thanks, wonderful sh
Added at: 2012-10-26 06:51

Comment of PdGgoLgoBaiuPkgGpQb:
GJv8H4 , [url=http://ovjlqttmvlnt.com/]ovjlqttmvlnt[/url], [link=http://balcarmgjucx.com/]balcarmgjucx[/link], http://rlluhstyqujw.com/
Added at: 2012-10-27 12:48

Comment of AvlTQekyMLBRKWwNi:
4sxHWM ihelgbaqlioz
Added at: 2012-10-28 17:20

Comment of xlKdrVuGDFvwIjxqJ:
taZgYv , [url=http://wpjvakhlmkge.com/]wpjvakhlmkge[/url], [link=http://pbdhpjefvrdp.com/]pbdhpjefvrdp[/link], http://llcxkwjkkmoa.com/
Added at: 2012-10-28 22:04

Comment of ofotXIyS:
PjF3Bd iskpsbiafcjr
Added at: 2013-01-29 18:16

Comment of tXknTjzJiKPGkuFa:
U6U3mL trlfvvnuuton
Added at: 2013-01-29 18:18