I have been entrusted the task of optimizing our company website in order to make it faster. One of my goals is to make the file size of each page small. Are there any pointers or pitfalls I should look for, when attempting to make the size of a web page small?
To help you better, can you tell me what programming language that the websites are being developed on? There are specialized categories in TechyV for specific web programming languages. If you post it in the correct category you would get better advise.
The company website is developed using multiple frameworks. Static pages are developed in plain HTML and CSS. Dynamic pages are built using PHP. Certain back office pages are developed using .Net. Since there is a mix of technologies here, I am seeking advise on pointers I can use generically across all platforms.
The first thing you should look at, is removal of spaces in the pages. If you look at certain pages in the html, spaces between elements contribute to much of the space. Take a look at the following code:
<p>My Name Is Math Girl</p>
<p>You are at my page</p>
<h1>Hello</h1>
In the above example, there are spaces and carriage returns between elements. For the 3 lines there are 6 characters in between. Removing the carriage returns the HTML will look like the following:
<p>My Name Is Math Girl</p><p>You are at my page</p><h1>Hello</h1>
The visible output is the same. Thus you just saved 6 bytes!
Thank you for your advise on spacing between elements. There are lot of comments in the HTML pages that I am looking at. Does comments play any role in the rendering of the html? I find many codes such as the following:
<!– Start Content –>
<!– end content –>
Should I remove them?
You need also to look at converting single color images to use CSS colors. Certain web pages have images such as a blue background that could easily be done using a CSS color code. You might find key areas such as borders and background shading that actually do not need a image. These elements can be colored by using color codes.
Try as much as possible to reduce the use if images in websites. Use it only as a last minute ditch effort. For example if you need a consistent single background overlay with a image, consider using a GIF or a PNG with a transparent background. Then use a single color background and put the image on top. You save a few bytes by doing this.
On the subject of CSS, try to reduce inline styles and use a class instead. You will save a major amount of bytes by reusing the class over again. Look at the following code. It uses inline style on each table division, consuming 41 x 3 = 123 characters.
<td style="background-color:green;width:500px"> some text </td>
<td style="background-color:green;width:500px"> some text </td>
<td style="background-color:green;width:500px"> some text </td>
The 123 characters can be reduce to 17 x 3 = 91 characters as follows:
<td class="tdclass"> some text </td>
<td class="tdclass"> some text </td>
<td class="tdclass"> some text </td>
And of course, using "short" names for the class also reduces the number of bytes.
Spacing, Images, CSS names and using classes instead of inline styles, comments, all seems to play a major role in contributing towards file growth. Interesting! Thank You MathGirl and Whiz Boy! I am beginning to get a clear understanding on how much space that we can save! But don't you all think that by doing this optimization that the readability of the source is jeopardized?
There is always a give and a take. You need to sacrifice readability for performance and vice versa. It is an eternal challenge in web software industry to strike an optimum balance in between! You might also consider moving inline JavaScript to a separate JavaScript file and linking it to the main page. This encourages re-usability and reduces the main page size.
I agree with Whiz Boy. There is always a "give up" somewhere in this exercise. But I suppose it is ok to give up readability when your pages are production ready. Some software companies, "compress" their pages using the above suggestions. They use "short" names, to reduce the number of characters!
Thank you MathGirl and WhizBoy! I learnt a lot! Thank you again for your time and valuable advise!
