Optimization of html code for better indexing. Choosing the Best Online CSS Compressor

Despite the fact that sites are perceived by us externally, their external component is built, as in a Human, based on the inner world under the influence of special laws and rules. These laws and site rules are defined by the W3C standards. The external component of the site is its design and structure, the internal component is HTML-code and CSS-styles (not taking into account separate functionality).

When developing a site or adding content to it, we often only care about its external presentation. This is great! However, you should also pay attention to the internal representation of pages in the form of HTML code, especially when it comes to attracting search traffic in the future. This article is devoted to the issues of optimizing the website code to improve its visibility in search engines and is based on the author's report from the All in Top Conf 2012 conference “The concept of SEO optimized layout”.

Which sites need code optimization

Turn off CSS, JavaScript and images on the page, see if you can find the main elements of the text - headings, paragraphs, links and phrases? This is how the robot sees the page, make sure that it correctly understands your goals and priorities.

To increase traffic from search engines, you need not only external website optimization, but also internal optimization of the HTML code of the pages. Of course, search engines successfully recognize and index even complex and invalid page code.
But the simpler the code and the fewer errors in it, the easier it is for search engines to correctly determine the structure of the HTML code of the page, which directly affects the visibility of the site in the search. HTML optimizers are programs designed to compress and remove unnecessary characters from the code of various HTML documents.

Free optimizersHTML code

HTML optimizer 2.0- the program is used to remove unnecessary tags and symbols from the HTML code of web pages. Allows you to reduce the file size by 5-20%. The program is very fast, small in size and does not require installation on a computer. Working with the program is simple and convenient, you just need to drag the desired file into the program window for processing.
Download

HTML file optimizer 1.10

The program is designed to remove unnecessary tags, spaces, empty lines, etc. In addition, the program allows you to replace one tag with another. Reduces file size by 5-20%.
Download

HTML Shrinker Light 2.60

HTML Shrinker is a more advanced tool for optimizing the html code of web pages and other file types. As a result of code optimization, the size of files can decrease by 5-50%. As a result, the pages of your site will load faster and the load on the server will decrease. The program works with html, css, php, js, cfm files, etc.

HTML Optimizer - paid html file optimizer

HTML Optimizer - one of the best tools for optimizing various files. The program supports more than 20 file extensions, including graphic ones, and can work not only with files, but also with folders. Drag&Drop support. The size of files after optimization can be reduced by up to 50%. Very simple and reliable program to use. 30 day trial. More details on the tonbrand.nl website.

Optimizing the html code of the site pages allows you to reduce the loading time of web pages, reduce the load on the server, and ultimately get more visitors from search engines.

The note: the adaptive version of the site is activated, which automatically adjusts to the small size of your browser and hides some details of the site for ease of reading. Enjoy watching!

Hello. Today we will continue the topic website layout optimization, which began in the article about.

Let's first understand why this is important and then move on to practical advice.

Correctly made (layout) site template:

• Can significantly speed up page loading (especially if everything was running before);
• It will make it easier for your pages to get into the TOP of search results (not only because of fast loading);
• It will increase your chances of full cross-browser compatibility, that is, the same correct display of the site in all browsers;
• Gives a small guarantee that after many years you will not have to remake your sites for new browsers (or new versions of old browsers).

I propose to go from simple things to more interesting ones.

Part 1. Follow HTML and CSS standards

Just in case, I’ll say that in addition to HTML and CSS, we can also optimize the JS and PHP parts of our sites, which are more resource-intensive and significantly slow down page loading speed. However, in addition to page loading speed, JS and PHP components do not affect the site promotion in any way (as long as they do not break it), unlike HTML markup, that is, the site template.

1.1 Always close tags.

Including those that don't need to be closed, even if you hate the XHTML standard, it's best to stick to this rule. Example:

• List item
• List item
• List item

Every li tag is closed, although it doesn't have to be.

1.2 Observe the correct nesting of tags.

According to the principle: the first to open - the last to close. An example of how it's wrong:

How to:

1.3 Never describe CSS and JS inside HTML layout and tag attributes.

Never! In other words, forget about existence style attribute And style tag:

text

Describe all styles in separate .css file

You can only use the style attribute by dynamically rendering it with javascript on some action. For example, if by clicking on an image you need to change the color of all text on the page, then only in this case can you dynamically create the style attribute with the necessary values ​​for the desired tag (in this example, for the body). Why? Because search robots will not see it anyway, and no one (including users) will download extra code, since the action takes place after the page is fully loaded.

However, in such cases, I would still recommend adding a predefined CSS class to the desired tag, rather than adding a style attribute to it. This is at least more convenient for subsequent editing.

The same applies to JS, all JS code should be in separate file, not inside your layout, or worse, among tag attributes.

1.4 Forget about Caps Lock and capital letters.

Write all tags, attributes and their meaning in lowercase (small) letters, the same goes for CSS style sheets.

Almost everything described above is in the official HTML and CSS specification and applies to document validity.

Thus, I should note that by adhering to the W3C standards, that is, by respecting the validity of the document, you get the following SEO benefits:

• Clean code, and, consequently, additional trust of search engines to your site;
• Faster page loading, as the browser does not have to waste time debugging an invalid document.

However, you should not get hung up on validity, you should try to adhere to it as much as possible, but not at the expense of everything else (time, functionality, etc.).

Part 2. Speed ​​up page loading - one of the ranking factors

2.1 Specify the actual size of the pictures.

The point here is two things:

• Be sure to include attributes width And height for tag img: This will speed up the loading of images, as the browser will know in advance what size to display.
• Be sure to insert an image of the same size as specified in the attributes.

If the image is larger than you need, then you do not need to save time by reducing it using HTML or CSS. Kindly take the time to go into Photoshop or its equivalent and reduce the image to the size you want to see on the site, this can significantly speed up page loading.

2.2 Use CSS3 instead of JS.

JS can significantly slow down the loading of your pages, and also continue to create load after the page is loaded (various effects, such as a ticker and other dynamic things), which can slow down the browser while the tab with the site is open.

Today, many beautiful and interesting effects can only be achieved through the use of CSS3 properties (e.g. transition, box-shadow, border-radius, opacity, transform, background-size) and skillful .

All of the above can be summarized in one sentence: wherever you can (suspect how) to replace JS with CSS3, use CSS3 without hesitation! To find similar snippets, I advise you to explore the new features of CSS3.

2.3 Less Photoshop, more CSS 3.

This motto has long been used by many webmasters. You can create beautiful buttons and design elements with smooth gradients, smooth corners, shadows (inner and outer) and beautiful text on top with just CSS. Wherever you can replace graphic design elements with CSS code - do it! Example:

In addition to the CSS3 properties listed above, you also have access to the RGBA color description format.

To create a cross-browser CSS gradient, you can use a free service like this colorzilla.com.

2.4 Combine images into CSS sprites.

Those images that we could not draw using CSS 3 must be combined into one single (ideally). This is necessary in order to reduce the number of requests to the server when loading the page. This item can significantly reduce the load on your web server, and at the same time speed up page loading, 2 birds with one stone!

To better understand what I'm talking about, just take a look at my CSS sprite:

Not bad, isn't it? The background image is the same for all elements, we just move it and substitute the desired part of the image into the background of a certain element thanks to the background-position property, for example, like this:

#subs,#left,.mail,.rss,.vk(background:url(/images/1.png) no-repeat) #subs(background-position: -28px -120px;) #left(background-position: -35px -20px;) .mail(background-position: -43px -50px;) .rss(background-position: -12px -8px;) .vk(background-position: -34px -56px;)

It is best to compose the sprite manually using Photoshop, but this may seem quite complicated for you, so you can use free services that will do everything for you, including even writing CSS code for you. I like the SpriteMe service the most. But I will not tire of repeating: it is always better to do everything manually, in particular, this way the sprite can turn out to be much more compact (in size and, therefore, in weight), and therefore more efficient.

2.5 Place JS files correctly.

All JS files included by your site should be located as low as possible in the code, you do not need to include them inside the “head” of the site (between head tags) - this significantly slows down page loading. The best option would be to include JS files before the closing body tag, that is, at the very bottom of the page, there is nowhere below.

And one more very useful tip: ideally, all your JS files need to be combined into one single one, that is, we cut (Ctrl + X) the code from all files and copy it into one, so that in the end you have one below, before the closing body tag single file:

...

This can noticeably speed up the loading of your pages, as it will reduce the number of requests to your web server. Placing the JS file at the bottom of the page will delay its loading and processing, which will speed up the rendering of the main part of the page. And don't forget to shorten (compress) your final JS file.

2.6 Place CSS files correctly.

The CSS file, which, by the way, should also be the only one (for the same reasons), should be placed in the code the other way around, as high as possible!

But you don’t need to place it above the title tag, it is the most important for SEO and it is better to leave it at the very top. Personally, I include a CSS file immediately after the title tag and all meta tags, and after it, you can include, for example, a favicon (website icon in a browser tab), and so on.

Part 3. Proper SEO Layout

3.1 Website navigation code.

All site navigation (menus, breadcrumbs, lists of manufacturers in online stores, etc.) should be implemented using unordered lists (ul, li tags), and not using div and a tags.

Firstly, such writing of the menu is considered good form, and secondly, it will be easier for search engines to figure out where and how your navigation is arranged, as they are used to constructions with unordered lists, and not to blocks with thoughtless enumeration of links. Example how to do it right:

• menu item 1
• menu item 2
• menu item 3

3.1.1 The subtleties of the horizontal menu.

If you need to implement a horizontal menu, then I want to give you 2 free tips:

• Never use the CSS float property for this (floating, causes other elements to wrap around it), instead use the following code: ul.menu li(display:inline-block;)
• In the code, you do not need to start each new menu item on a new line, as in the example above. It's better to write everything in one line and adjust the distance between paragraphs with margin. Example:

• menu item 1
• menu item 2
• menu item 3

A line break in HTML is equal to a space, that is, if you put Enter in the code between menu items, then users on the site page will have spaces between them. What's wrong with that? Each browser may have a different whitespace width, and some may ignore it altogether. As a result, your site will look different everywhere, and sometimes (from my own experience) this can even greatly distort the design.

Therefore, I have my own layout rule: between any (not only in the menu) inline block elements must not contain spaces or line breaks! At the same time, this is insignificant, but it reduces the total weight of your pages, because, as I already wrote: 1 character (including spaces and line breaks) = +1 byte to the weight of your pages.

3.2 Image alt attribute

Be sure to include the alt attribute on the img tag:

Firstly, this is required if you want to pass a validation check (in XHTML for sure, I don’t remember about HTML anymore, one way or another, you should always follow the strict XHTML standards), and secondly, if the picture does not load, then the user will instead the picture will at least display the text written in the alt (what it is about). Thirdly, it will increase the chance of your pictures getting into the image search from Google and Yandex, which can attract additional visitors to your site.

And the last thing: the words specified in the alt attribute are taken into account when ranking your site, which means that you can put keywords there, but in no case go too far, it’s better to compose an alt for people, only occasionally inserting keywords there.

If all your alt attributes are filled with the same keywords, then by all means expect penalties.

3.3 Use HTML headings h1-h6 to the maximum.

h1- this is the largest and main heading, it should include the name of your current page. While h6 the smallest and least significant heading. Many SEO experts strongly recommend that you only use the h1 heading once per page, and that makes sense. The rest of the headings can be used any number of times, the main thing is wisely.

The very presence of HTML headings in the layout of your site is already a plus for search engine promotion, and skillful placement can double the result. Here is what Yandex itself writes about this.

Neatly designed and structured pages are the most attractive to the user, they make it much easier to find the information you need.

The ranking takes into account not only the formal compliance with the text of the request, the completeness of the information provided and its relevance, but also how it is structured and formatted.

I think you've already seen the importance of headings in layout, just don't try to enclose all possible keywords in headings (although I sometimes do this myself), this worked before, but now it will not work. Headings should be used for user navigation, not relevancy manipulation.

Personally, I enclose all subheadings within an article in h2, subheadings subheadings in h3, and small subparagraphs in h4. At the bottom, under each article, there is a subscription form and a block with social network buttons, I concluded their names in h6. In the right column of the site, the section names are enclosed in h5.

As you can see, I use HTML headings to the maximum, and the logic automatically tells me to arrange everything from top to bottom in the code. Although for a complete idyll it was necessary to swap the titles h6 And h5, but that would be too pedantic :) and not that important.

3.4 Quick links to the site.

Continuing the topic of headlines, I want to say about the importance h1 and how to make it right. First, I highly recommend using it only 1 time per page! Track it in your CMS. Secondly, h1 has a big effect on SEO (second only to title), anyway, but I advise you to duplicate the text from title in h1.

Yandex writes:

To help Yandex correctly highlight sitelinks, the text in the tag