Windows XP: Optimizing HTML pages

For sure with you, dear readers, as with any Internet user, there was at least one time the following story. After trying to go to the home page of a novice webmaster, the visitor is forced to wait for a long time to download it. Naturally, everyone at the same time remember the worst words of the hosting provider. And although, of course, "freebie" hosting by quality is 10 times worse than paid, it's not always his fault in the long download. Let's, for example, leaf through the site created by a beginner, and take a look at the results of statistics. Is not it really, very strange that a site on which, in general, and the text is very little, creates such a lot of traffic? Let's stop at this moment and try to figure out what the error of the creator of this "miracle" is.

The vast majority of novice webmasters create their sites using various visual editors. In this case, absolutely no knowledge is required of them. They launched the program, placed on the "sheet" the necessary elements, wrote the text, took buttons and icons from some free graphics library - and everything, the site is ready. Then they save it, check it by opening it from the hard disk, and upload it with a sense of complete satisfaction to the server. At the same time, few people bother to look inside the HTML-sites and see what kind of code the editor generated. Well, let's do it now.

The least comments from professional webmasters to special HTML-page generators. True, there are also a lot of "scavengers" among them, who manage to "clog up" even the simplest text. This is especially true for older versions of such programs. Let's see, for example, here's a horizontal menu created in the old version of one of the most famous editors - FrontPage.

<Font face = "Verdana, Arial, Helvetica, sans-serif"> <font size = "2"> Home </ font> </ font> & nbsp;
<Font face = "Verdana, Arial, Helvetica, sans-serif"> <font size = "2"> Resume </ font> </ font> & nbsp;
<Font face = "Verdana, Arial, Helvetica, sans-serif"> <font size = "2"> Friends </ font> </ font> & nbsp;
<Font face = "Verdana, Arial, Helvetica, sans-serif"> <font size = "2"> Links </ font> </ font>

Well, how do you like that? Takes this small simple menu of four paragraphs of 369 bytes. Meanwhile, it can be significantly reduced, simplifying both understanding of the code and reducing the generated Internet traffic. How? Yes, it's very simple. First, it's unclear why visual editors are so often split into two or even more tags that can be written in one. That is, in this example, the size parameter can be inserted inside the first font tag. Secondly, why did you need to specify all the font parameters before each menu item? After all, this is, in fact, one line. Therefore, it is enough to insert one opening tag at the beginning and one closing at the end to get absolutely the same result in any browser. Below is an optimized code that only takes 110 bytes. Thus, we were able to reduce the amount of a piece of web page proposed by the visual editor, more than 3 times!

<Font face = "Verdana, Arial, Helvetica, sans-serif" size = "2">
Home & nbsp; Summary & nbsp; Friends & nbsp; Links </ font>

But that's not all. Most modern visual editors tend to complicate the generated web pages, adding a lot of unnecessary information. Let's take a look at this in the Microsoft Word word processor. Strictly speaking, this program is not designed to work with web pages. However, in its latest versions, users can create, open, edit and save files in HTML format. And many novice webmasters prefer not to waste their time, they think, wasted to study special programs, and actively use Microsoft Word to create their own sites.

Well, let's do a little research for an example. So, open Word, write in three paragraphs the line "Mama soap frame" and select one of them in bold. After that, save the resulting document as a web page and open it in the browser. Everything looks as it should. And now open the HTML file in Notepad and look at the generated code. The first thing that immediately catches your eye is its volume. Three lines, written in one font in one language, occupy in the view HTML-view of Word'a ... more than 4 kilobytes! Let's try to figure out how this impressive figure turned out.

And the answer, it turns out, is very simple. When creating a Word file, it automatically generated several styles automatically: for plain text, for headers of four levels, and so on. In principle, for a large and complex text, this is even profitable. However, why did you need to insert a description of almost a dozen different styles, if in the text only one or two of them are actually used? In addition, Word, like other visual editors, "sin" with a too frequent font description. He inserts it at the beginning of each paragraph, even if the style of the previous text does not differ from the next one. In addition, in almost every tag that describes a font, Word adds an indication of the language on which the text was typed.

Now let's move on to parsing the "manual" web pages, that is, HTML files created manually or using conventional (non-visual editors). At first glance it seems that such pages can not be optimized. However, in reality it is not so. There are several points that must be taken into account by webmasters.

First, let's talk about formatting the code. Many webmasters use the rules used in programming when writing web pages. It is about the maximum possible division of the text into lines. And each line is preceded by a certain number of spaces or tab characters, depending on the "block" into which it is included. On the one hand, this approach is very convenient. Understanding the code is really very simple. However, you need to consider that an HTML file is not a program. It's much simpler. Therefore, you do not need to structure the HTML code to the smallest detail. Remember that the line and tab characters, although not displayed in the browser, also increase the size of the web page. Although, in principle, they can be reconciled. Much worse, when webmasters or some editors (there are also such) instead of tabulation characters precede the lines with a certain number of spaces. For example, try to imagine how much the HTML file will grow if most lines in it contain five to ten "extra" spaces. Of course, no one calls you when you create a web page to write all the code in one line. However, it is also better to avoid excessive structuring.

The second point, which will be discussed - comments. Many novice webmasters, in order to not get confused in the future in the HTML-file, leave in them a whole bunch of their reminders and comments. No, of course, there is nothing wrong with using the comments. However, everything is good in moderation. It must be remembered that the commentary is a very brief explanation. It's not necessary to make a detailed description of it like this: "In this line there is an opening tag of the table, in which I will write every month the growth and weight of my beloved cat."

In general, talking about optimizing HTML-files can be very, very long. Browsing the pages of beginning webmasters, sometimes just wondering what is going on inside them. So, some manage to "shove" a page of hundreds of keywords in the hope of increasing the site's traffic. In fact, they achieve the opposite effect - the "weight" of really suitable words is reduced, and the file size is significantly increased. And there are many more such examples. Meanwhile, the secret of writing the optimal code is very simple. It's enough just to remember this and always check how the web page looks not only in the browser, but also in Notepad.