Need to make the file size of a web page small

Asked By 140 points N/A Posted on -
qa-featured

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?

SHARE
Best Answer by MathGirl
Answered By 0 points N/A #91075

Need to make the file size of a web page small

qa-featured

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.

Answered By 140 points N/A #91076

Need to make the file size of a web page small

qa-featured

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.

Answered By 0 points N/A #91077

Need to make the file size of a web page small

qa-featured

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!

Answered By 140 points N/A #91078

Need to make the file size of a web page small

qa-featured

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?

Answered By 0 points N/A #91079

Need to make the file size of a web page small

qa-featured
  • The next thing to look at is comments. Comments actually do not play any major role in the display of a page.
  • But you must remember certain comments do actually play a role. If you have Java Script inside the HTML, they are usually inside a comment tag to prevent HTML errors when rendering them.
  • Comments provide documentation for the user in a HTML page. It is better that these are removed from the HTML code when doing a production update.
  • New frameworks such as .Net actually do not include comments in the final compiled version. But comments in the HTML do remain un-touched.
  • So to answer your query on comments, you can safely remove them ONLY if you feel that the pages you are working on really do not need inline documentation.
Answered By 0 points N/A #91080

Need to make the file size of a web page small

qa-featured

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.

Best Answer
Best Answer
Answered By 0 points N/A #91081

Need to make the file size of a web page small

qa-featured

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.

Answered By 140 points N/A #91082

Need to make the file size of a web page small

qa-featured

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?

Answered By 0 points N/A #91083

Need to make the file size of a web page small

qa-featured

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.

Answered By 0 points N/A #91084

Need to make the file size of a web page small

qa-featured

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!

Answered By 140 points N/A #91085

Need to make the file size of a web page small

qa-featured

Thank you MathGirl and WhizBoy! I learnt a lot! Thank you again for your time and valuable advise!

Login/Register to Answer

Related Questions