Website Optimization
Web Development
|
This article will give you tips and facts about how you can make your website lighter and faster. Website optimization is often underestimated by web programmers but it is very important for 3 reasons:
-> User Experience
By optimizing your website, it will be downloaded faster and use the cache of the user's web browser to provide a more comfortable user experience while browsing the website.
-> Bandwidth
Making your website smaller will save you upload bandwidth and your users will save download bandwidth. It's always good to save money and performance by using a smarter code and techniques.
-> Search Engine Optimization
Search Engines are very happy when they see a page optimized which allow them to analyze the pages much quicker. Search Engines are one of the best way to attract new users.
To optimize your website, there are 5 things to take care of:
-> HTML
-> CSS
-> JavaScript
-> Images
-> Number of Requests
One thing to know to optimize a website, is that every character is 1 byte, so removing all the spaces and "new line" characters when "publishing" your website is a quick way to optimize. Removing comments in your code is another good way to start.
HTML
Your HTML pages, in most cases, will be downloaded at every request (even if the user already saw that page), which means that it should contain as less code as possible to allow a faster download. The architecture of your HTML code is also very important, if you need a table that contains few columns, say 2 columns, on your page, you could easily replace the <table> tag with either 1 or 2 <div> tags with a given CSS class to position them properly.
If you put JavaScript or CSS code that is used on multiple pages within your HTML code, the users will download them again and again. By putting them in an external file, it will minimize the number of bytes to download. Although doing so will give you another problem that is discussed in the section Number of Requests.
Using the right tags will also help the Search Engine to know what is being shown on the screen. Instead of using <div> for paragraphs or simply writing the text and using <br /> to make paragraphs, use <p> tags, it will not only make the download size smaller, but it will also help the search engines and be rendered faster in some cases.
CSS
To have an optimized CSS, it requires a lot of planning before you even start programming. Knowing in advance all the different fonts, spaces, sections, images, actions, etc., that your entire website will contain will allow you to create as less CSS classes as possible, which will be easier for maintenance and provide smaller download size.
Use CSS properly, look at what is provided and understand it. Let's take the following code as an example:
|
CODE:
|
Copy / Restore :: Remove Scroll Bars
|
border-top-style:solid; border-top-width:1px; border-top-color:#000000;
Select what you want to copy and in doing so you will keep the formatting when pasting it.
|
|
That example could easily be rewritten this way:
|
CODE:
|
Copy / Restore :: Remove Scroll Bars
|
border-top:solid 1px #000;
Select what you want to copy and in doing so you will keep the formatting when pasting it.
|
|
In this example, we optimized 2 things:
-> We used border-top to replace 3 lines of code.
-> When the color code is repetitive, you can write it in a smaller way (#000000 -> #000).
In some cases, it can also be good to put multiple classes together to avoid repeating lines of code again and again:
|
CODE:
|
Copy / Restore :: Remove Scroll Bars
|
.content { font-size:14px; text-decoration:underline; color:#AAA; border:solid 1px #999; } .content2 { font-size:14px; text-decoration:underline; color:#000; }
Select what you want to copy and in doing so you will keep the formatting when pasting it.
|
|
|
CODE:
|
Copy / Restore :: Remove Scroll Bars
|
.content, .content2 { font-size:14px; text-decoration:underline; } .content { color:#AAA; border:solid 1px #999; } .content2 { color:#000; }
Select what you want to copy and in doing so you will keep the formatting when pasting it.
|
|
JavaScript
JavaScript can be used to make your pages dynamic, but it shouldn't be used for crucial parts of your website. Making sure that the important parts of your website can be used with and without JavaScript is a mark of quality.
JavaScript can be quite hard to optimize compared to CSS because it requires a mind that is more developed into programming. First of all, make sure that every variables (be it global or local) and functions are used somewhere on your website. During development, you might frequently add new functions to replace older ones or creating new variables to replace others.
JavaScript optimization is mostly focused on designing the most efficient algorithm using as less code as possible and that is executed as fast as possible. If you take the following example:
|
CODE:
|
Copy / Restore :: Remove Scroll Bars
|
for(var i = 0; i < parseInt(document.getElementById("text").value); i++) { //Do Something }
Select what you want to copy and in doing so you will keep the formatting when pasting it.
|
|
|
CODE:
|
Copy / Restore :: Remove Scroll Bars
|
var max = parseInt(document.getElementById("text").value); for(var i = 0; i < max; i++) { //Do Something }
Select what you want to copy and in doing so you will keep the formatting when pasting it.
|
|
When you write loops, every time the web browser loops it, it will recalculate the condition. In the "Bad JavaScript", the web browser would parse to Int the text written in the textbox called "text". Since that value never changes through the entire loop, it will be executed faster if you create a variable containing the value and including that variable in your loop's condition.
When comparing boolean values, you can consider those variables/values as flags which allow you to compare them like in the example below:
|
CODE:
|
Copy / Restore :: Remove Scroll Bars
|
var ok = false; if(ok == false) //do something
Select what you want to copy and in doing so you will keep the formatting when pasting it.
|
|
|
CODE:
|
Copy / Restore :: Remove Scroll Bars
|
var ok = false; if(!ok) //do something
Select what you want to copy and in doing so you will keep the formatting when pasting it.
|
|
Doing so will make the JavaScript smaller. In this case, we saved 8 bytes, and we still have the same result and performance.
Images
Images can be very heavy on a website, but we use them because they can either fill empty spaces, make the website more beautiful and elegant or explain things to the user that can only be explained using an image.
Knowing the available image formats (.gif, .jpg, .png, etc.) is the first step. For example, if your image contains few colors, using a .gif would create a very small image with the same quality. To do so, you need an image editor that allows you to edit an image pixel by pixel. If you want to put the logo of your partners, but your partners gave you a huge resolution and it was in a .jpg format, once you use a software to resize it to a reasonable size, there will be a lot of "cloudy" pixels if you zoom in. Using your image editor to re-edit those pixels and save it into a .gif will make the image smaller. In some cases, it can be more than 10 times smaller. The smaller your image is, the faster it will be downloaded and displayed on the users' screen.
CSS can also be used to do some optimization with images. If you use background-color, it can allow you to put an arrow in a menu, bullet points and such without using any <img> tags.
If you use gradients on your website, be it a background of a menu, title bar, etc., you can create a very thin image (1 pixel for the width if the gradient is horizontal, 1 pixel for the height if the gradient is vertical) and use CSS to repeat that small image horizontally or vertically.
|
CODE:
|
Copy / Restore :: Remove Scroll Bars
|
.title_bar { background-image:url(gradient.gif); background-repeat:repeat-x; }
Select what you want to copy and in doing so you will keep the formatting when pasting it.
|
|
You can also use this technique to put multiple icons within 1 image (called "sprites"), and using the code below to display multiple images that are actually only 1 image:
|
CODE:
|
Copy / Restore :: Remove Scroll Bars
|
.icon1, .icon2, .icon3 { background-image:url(Icons.gif); width:32px; } .icon1{ background-position:left top; } .icon2{ background-position:32px top; } .icon3{ background-position:64px top; }
Select what you want to copy and in doing so you will keep the formatting when pasting it.
|
|
Number of Requests
The more files there are to download to display a page, the longer it will take to download and display on the screen. If a page has 5 external CSS files, 3 external JavaScript files and 30 images, it will be a very heavy page.
When reducing the number of CSS files downloaded on your pages, you must keep in mind that it downloads the entire file and put it in the cache of the web browser, so if half of the CSS code is used only in a section of your website, you should create an additional CSS file that is linked only in that section, so while browsing other pages of your website, the user will use half the time to download the CSS when they go from page to page. If your CSS links to images (such as background-image), make sure those images are used on most pages that use that CSS code, otherwise, pages that don't use those images will still download them which will increase the download size.
When reducing the number of JavaScript files, make sure the functions and global variables are used on most pages that link to them. Creating a few JavaScript files for different sections of your website will be a good way to start.
If you have images that change when the cursor moves on them (such as buttons), you can put the 2 images (normal state and hover state) into 1 image and use CSS to change the image:
|
CODE:
|
Copy / Restore :: Remove Scroll Bars
|
.button { background-image:url(button.gif); width:100px; } .button:hover { background-position:100px top; }
Select what you want to copy and in doing so you will keep the formatting when pasting it.
|
|
Doing like the example above, it will reduce the number of files to download, uses CSS instead of JavaScript to change the image of the button and if GIF is used for the image fornat, the download size will be reduced by a lot because the palette of color is usually similar.
Home Page
The home page is probably the most important page of your website. It is the first page that new visitors will see. If you can use the techniques mentioned above to optimize your home page (even making external files specifically for the home page) will make your home page show quickly, which will improve the user experience and first impression.
Mobile Version
Most phones can now get online. Some phones (such as the IPhone) can fully display your website, but most phones have very light web browsers. Making a version specially for mobile phones will give a way for your good users to access the information and some functions from anywhere at anytime. When building a mobile version of your website, you really need to take in consideration the size of your pages (including external files), the CSS/JavaScript used and the size of the screens that will display those pages.
If you built your server code properly into libraries, you will be able to provide most of the features of your website without the need to reprogram everything.
Last Update: October 2nd, 2008
Please login to rate coding articles.
Click here to register a free account with us.
|
|
Comments
|
| Please login to post comments. |
|
|
Indeed, a good article. Have you yet made experiences with mobile browsers? because
I'm wondering how to adjust to them. Detect them via user agent header field?
offer a subdomain for mobile phones?
|
|
|
Really Decent Article!
8/10
Ed
|
|
|
"If you have images that change when the cursor moves on them (such as buttons),
you can put the 2 images (normal state and hover state) into 1 image and use CSS to
change the image:"
There generally called image "sprites" ;-)
Nice article though, nice and in depth. How long did it take you to write that?
Kind regards,
Scott
|
|
|
 |
Categories |
 |
|
|
