SEO optimization of html page. Choosing the best online CSS compression service
You need to optimize your HTML code and cascading style sheets (CSS) to speed up the loading process of your site and the content hosted on it. Saving time and traffic, in general, long after optimization, will be significant, even if the change in speed is not very noticeable outwardly.
HTML Code Optimization
In order for the HTML code to facilitate fast loading of the site, it must meet several conditions:
- Be simple and informative. After checking it for validity, you need to correct errors to make it easier for bots to analyze it. The code should clearly represent the structure of the page.
- The main components of pages, such as headings, indexes, blocks of information should be easily and quickly identified.
- Freeing the code from unnecessary information and storing it in separate files (for example, you can remove CSS and JS) will increase loading speed, which also simplifies the work of bots.
By achieving these conditions, the site can be made faster, more convenient and the efficiency of its indexing by search engine bots can be increased.
Code reduction and CSS optimization
You can make the site code simpler by reducing its volume. To do this, you need to perform several operations.
First of all, you should avoid Flash technologies, JavaScript, frames, text represented by a picture. All elements that are possible should be formatted in separate, external files (for example, CSS and JS, as noted above). Special plugins will help to optimize the code. For example, you can install the Autoptimize plugin, which automatically optimizes the HTML, CSS, JS code (if you check the appropriate boxes). It is necessary to set up competent and convenient site navigation that will be understandable to users and correctly recognized by search engines. This will increase the speed, quality of loading and indexing of the site.
As for CSS optimization, you can do it yourself or entrust it to a special resource or program. Manual optimization is a labor-intensive and time-consuming process, and you may miss some errors. A program or service for optimization will better eliminate shortcomings, but may disrupt some functions that worked on the site, and after verification, the content may not be displayed correctly, so their work needs to be corrected.
Some ways to improve CSS structure manually:
- Remove extra spaces and line breaks that overload the CSS file and make it difficult for robots to work;
- Write generalizing properties instead of repeating similar commands several times;
- Use concise, understandable descriptions in comments;
- Unusual fonts should be written using styles, not images;
- For pictures, create alt and title (different for each image) so that their content is recognized by search engine bots;
- Apply H1 tools to headings – and so on, so that they are correctly recognized during indexing;
- Include in keywords only those keywords that are used on the page, minimizing their number;
- Use varied and concise meta tags.
CSS and HTML optimizers
You can conveniently and quickly optimize directly in the browser using special services, for example:
- CleanCSS.com;
- CSS Optimizer;
- CSS Compressor;
- CY-PR.com;
- Autooptimize plugin.
SEO and IT specialists recommend using CleanCSS.com, as it allows you to select the compression level from low to high or select individual settings. After high and highest levels of optimization, the site code takes on an almost unreadable form, and it will be almost impossible to make changes to it. Therefore, first you should use standard optimization. You can select compression modes for specific content or optimize individual parameters: compression of fonts, images, removal of spaces.
The CY-PR.com resource also has a similar optimization tool that lightens the CSS structure by 25-30%, but there is no way to generate a file with the code after performing the operation.
Other services can change the code quite radically so that some functions on the site stop working. Therefore, with their help it is better to make only local changes in specific site parameters.
After optimization, you should check the functionality of the site, the correct display of the design, and the loading speed. A normal situation is when the pages and user options of the site load no more than 3-5 seconds.
In order to check the degree of optimization and understand how effectively the HTML code is now written, you can use services such as:
- optimization.com;
- SEO checklist portal;
- Firebug plugin.
These tools will help you check whether everything has been done to reduce the amount of HTML code and improve its structure. On the SEO checklist resource, you can check the list of what has already been done for optimization and what has not yet been done, and mark the things that have been accomplished.
Validation
You can check the site code for errors using validation services - validators. Effective code verification is done using validator.w3c.org
If the system produces more than five thousand errors during the first check, do not be upset. After correcting a certain defect, you can run the check again and there will be much fewer errors, since one defect entails others and when it is corrected, they will disappear.
A site with corrected and optimized code has a better chance of ranking high in search results than a resource with overloaded HTML code that contains errors.
The search robot collects information from millions of sites every day. And even here the optimizer can find control levers. Search engines make some optimization recommendations that can make the robot's job easier. Among these activities, the leading importance belongs to the optimization of html code.
Activities that are aimed at adapting the page code to the requirements of search engines are called html code optimization.
To begin with, it is worth understanding the main tasks and goals that this type of optimization pursues. First of all, this is an improvement in the internal characteristics of the site, which can affect indexing. If the robot regularly visits the site, analyzing its content and does not encounter any obstacles, then the site will be in priority positions in search results.
Another point is when the site code is complex and contains errors, then the robot will visit such projects last. Also, in addition to worse indexing, the site may rank worse. Therefore, to achieve maximum results, internal optimization involves an integrated approach to working on html code.
5 important rules for optimizing HTML code
1. Stylization;
2. Removing unnecessary tags;
3. Elimination of errors;
4. Code structure;
5. Closing external links.
HTML code styling
After layout or in the process of creating a website, you often encounter a problem: tables are overflowing with styles.
It looks like this:
In this case, to clean up the code, you need to transfer the styles to style sheets - CSS. These tables (more precisely, a link to the css file) are usually located between the head tags. Styles that are found in various site tags need to be converted into classes.
To move into style sheets, we copy the contents of the style into CSS, giving it a class called “newclass”.
Newclass (width:10px; border:10px;)
As a result, to transfer a new class from CSS to a table:
Thus, you can significantly reduce the code by assigning the necessary classes and so on to various tables.
Removing tags
Sometimes there are sites that contain tags that were copied a second time after the design was installed.
Most often, the following tags have a negative impact on the site:
Eliminating html code errors
Code errors have an equally important impact on website ranking. In the process of layout, editing code or editing styles, you often forget to close a table, tag or style.
Unclosed code snippet:
Closing external links:
External links are a process of high-quality interaction between resources. Along with user comments, due to illegal actions or installation of third-party scripts, you can inevitably add external links. This is especially dangerous if the site contains harmful information. The best way to fix the problem is to remove the external link. Another option is to enclose the link in the “noindex” tag, and also add the “nofollow” parameter. For example:
HTML code structure
A very effective method that will help you quickly edit various sections of the site at the same time. This method involves creating a structure similar to global blocks. In this case, the site code is divided into sections: top, body, side (1 or more), bottom. Each section can be edited independently of the others.
For example, the global left block of the site will be called:
"$Global_BLEFT$"
Therefore, this block can be embedded in the root structure of the code, and also removed point by point:
"$GLOBAL_BLEFT$"
Repeated testing has shown that in the process of optimizing these components of the html code, you can achieve a steady increase in rankings and significantly improve site indexing.
The article provides only basic examples; first, check your code using online analyzers, of which there are a lot on the Internet.
One of these analyzers is the W3C validator, which can easily check a site for HTML errors, but you shouldn’t go too deep into fixing it, it’s enough to keep errors to a minimum. However, for perfectionists, this service will be very useful.
Read times: 5,352
Greetings, dear friends, to the blog site. Most users perceive websites only externally, evaluating the design and structure, but behind the attractive external components there are many internal laws and rules that are determined by W3C standards. Internal components include html code and CSS styles (without separate functionality). Often webmasters are more concerned only with the external presentation of the site. However, the internal content of pages in the form of html code also requires attention, especially when it comes to attracting search traffic.
Successful online promotion requires good internal website optimization. Of course, optimization for search engines before starting promotion is an important point. Website promotion using links without optimization it will not be effective and may even cause harm by reducing its traffic. At the same time, it is necessary to identify all current problems and shortcomings, which at any stage can negate all achievements. The website's html code may be such a weak link.
Site code analysis can be carried out using various validators. For self-assessment, you must disable files with styles and scripts. This is how search robots see them. If the site loads slowly, displays incorrectly, and search engines cannot understand the logic of the pages, there will definitely be problems with it. The resource code needs to be improved.
Website code optimization is considered a purely technical process, which is based on reducing the amount of website code. It is necessary, first of all, for resources for which search engines are the main source of traffic. The main rule is simplicity. All styles and scripts must be moved to external files. The code should be as light as possible and extremely understandable.
Search robots must quickly evaluate page structure. Therefore, it is better not to use frames and flushes. These elements add weight to the code, making it more complex. Also put all design elements into css style files and format them into sprites. The level of relevance of the site and the speed of page indexing depend on the simplicity of the code. For large resources with high traffic, code optimization is a mandatory procedure. At the same time, it is necessary to optimize even pages whose size is no more than 1 MB.
Main stages of site code optimization
- Highlighting headings h1-h6 - search robots in general, so do not forget about the correct formatting of the text.
- Reducing code size – the less code, the easier and faster the page loads. Recently, page loading speed has become an important ranking factor in Google results, as has been officially announced.
- Removing malicious code - many hosting sites have an antivirus section that scans site files and indicates the path to solving them. The absence of malicious code makes the site more preferable to search engines.
- Internal website optimization– creating unique text that supports the required keyword density.
- – evenly distributes the weight of pages and increases traffic for low-frequency queries, especially when adding new content.
- Adding meta tags – title, keywords and description are used by works and displayed on search engine results pages. Correctly composed meta tags increase the relevance of pages and attract users.
- Optimization of images – each image must have an optimal format (GIF, JPEG, PNG and PNG-24), as well as an alt and title.
Validity of the site code
Validity is the code’s compliance with generally accepted global W3C standards. An invalid website code containing many errors can become an obstacle to the promotion of a certain resource. If not all paired tags are closed, there may be problems with displaying design elements. But in reality, even the websites of the largest search engines are not 100% valid. What is the reason for this discrepancy?
- A high degree of labor intensity when standardizing a site and the need for exceptional professionalism of the developer when validating a large dynamic site.
- 100% validity of the html code does not guarantee cross-browser compatibility, and also does not protect against errors when using older browsers.
However, for smaller resources, the validity of the html code is an excellent bonus for ranking for the most competitive queries, and it will also show the seriousness of the resource.
Optimizing Cascading Style Sheets
Like optimizing html code, optimizing styles (CSS) is an equally important activity that is overlooked by many webmasters. Optimizing CSS code also speeds up the loading of website pages and saves traffic. Since a css file weighs up to 100 KB, many webmasters don't see the need to optimize it, but if you think about how much traffic file optimization saves per year, you'll realize how underestimated it is.
You can optimize CSS manually or using special services. Each option has a drawback. When manually optimizing a site's code, you can lose sight of a lot and waste a lot of time. However, machine optimization may remove lines without which the design may not display correctly.
Setting the encoding
Another point affecting website promotion, is the encoding. Russian-language text will be displayed correctly only if the encoding is correctly configured, for example, Windows-1251 or utf-8. If content is encoded incorrectly, characters and symbols will be distorted, which will lead to loss of visitors and slow indexing.
Problems with encodings are typical for older resources, where pages were created in tools like Notepad, and the code was saved in many different formats. Some modern browsers are not able to recognize such encodings.
Internal website optimization
In most cases, competent internal resource optimization can bring a website to the best search engine positions without significant effort and work with link exchanges. Every little detail that influences his position is important. Try to create a structure that will be understandable to both users and search engines. Multi-page portals should contain systematized sections in which all pages are no more than 3-4 clicks away. It is advisable to use breadcrumb trails and human-readable web addresses. Unfortunately, not all CMS scripts have this functionality.
Conclusion
The technical aspect of successful website promotion is solved through optimized html code. Search engines evaluate site pages differently than users, so clean, valid code can push your resource up in search results, where just a few positions sometimes turn out to be decisive.
I hope the material will be useful to my dear readers. Subscribe to blog updates. I would be grateful for pressing the buttons and reposting this material. See you in the next articles. Good luck to all.
Good morning dear friends! It turned out that the week was devoted, to a greater extent, to optimizing and speeding up the loading of the landing page. Today we will continue to “maniac” in this area. Next up is CSS code optimization. I'll tell you about an online service for optimizing style sheets.
These services are quite simple and work on the principle:
“Inserted unoptimized code. I waited a few seconds. Copied the optimized code"
As you can see, it’s quite simple and inexpensive, but not everyone finds the time to do it. But in vain!
Online css optimization
The first thing you should understand is that you don’t need to go to extremes. The fact is that, for example, spaces and line breaks increase the overall weight of the page. Once you know this, you can start deleting them all. As a result, you will have completely unreadable, but optimized CSS code.
This is only good if you are working alone and the style sheet will never be edited again, or almost never. Because if you work in a team, it will be very difficult for the person reading your code to understand it.
But even if you look at your style sheet yourself six months later, you are unlikely to be able to easily understand what is responsible for what in it.
Therefore, we optimize, but don’t go crazy - that’s the first thing.
The second thing is that when using services that offer CSS code optimization, it is important to understand what is happening there and what is being optimized. Now I will show you some examples.
For example, colors. Usually, we specify them in the RGB standard. The white background for an element is set as follows
Background: #ffffff;
But not everyone knows that if the first 3 values are repeated, then you can leave only them. For example, like this:
Background: #fff; background: #000; color: #123;
The next thing that comes to mind is padding and margin.
Padding: 10px 20px 10px 20px; /*instead of*/ padding: 10px 20px; margin: 15px 20px 15px 20px; /*instead of*/ margin: 15px 20px;
You can also optimize the CSS code by specifying shortened fonts:
Font: bold 18px Verdana, Arial, sans-serif;
Font-size: 18px; font-family: Verdana, Arial, sans-serif; font-weight: bold;
As you can see - one line versus three. And thus, sometimes it is possible to reduce the weight of the style sheet by 20 - 30%.
The third thing to remember is that always before any optimization, be it images or CSS, you need to make a backup copy (in case of an unexpected error or something else). Just make it a rule to always make a copy before editing.
That's it. Let's move on to the service.
Review of a service for online optimization of CSS code.
Most people use these popular sites to optimize CSS code:
alexvaleev.ru/cssoptimizer
css-school.ru/optimise
The functionality is virtually the same, simple and straightforward. But after analyzing them, I found both pros and cons. Let's look at one of them - css-school.ru/optimiser
On the left is a window for inserting CSS code, and on the right is a window for setting optimization parameters. Let's look at the window in more detail.
Compression ratio.
In order for the text to remain readable, it is necessary to set a standard compression level, in which case each new property will be written on a new line. If you set it to “high” or “maximum”, the file size will be smaller, but everything will be written on one line. This is not very convenient for further edits, but if there are none, then you can safely set it to “maximum”.
Next is the window for specifying your optimization templates; we’ll skip it.
Next is a tab that allows you to select and combine selectors with the same properties. It all depends on the project and tasks. If you wrote CSS code strictly in a certain sequence and everything is strictly one after another, then you should not choose to combine selectors. This will make it easier for you to navigate the code.
Style optimization. Leave it as “safe”
Compressing colors and font properties is what I told you about. Although there is a problem with compression of font properties. It does not optimize the code, as I told you above.
The remaining settings do not raise any questions. In general, I noticed that all Russian-language services for online optimization of css code, suffer from a “disease”. They don't optimize css3 code. Which made me completely abandon such optimizers.
For example, I entered the following code:
I specially wrote it with missing lines, everything in detail, etc. And I expected to see something like this:
H1 ( color: #fff; padding: 20px 25px; font: 700 18px Verdana, Arial, sans-serif )
But unfortunately it only turned out like this:
Seven lines instead of five. This didn't suit me. I wanted to find and tell you about better quality material. Because I understand that some people are not familiar with the abbreviated types of style entries.
And some of the functionality of the services seemed unnecessary to me, or, well, pseudo-functionality. In order to create the appearance of a “sophisticated” resource. Well, why do I need to check the box next to “reduce colors”. Of course, if I came to optimize my code, then I need a shorter description of everything that is possible! (My opinion)
So, I continued my search and found the very resource that satisfied my needs for optimizing css code. This is devilo.us
A truly amazing service that I can confidently recommend to you. The functionality is the same as previous sites. But this one coped with the task 100%. See:
As you may have noticed, the compression percentage is 43.3%, while on the previous site it was 25%. In bytes, it turned out to be 58 > 37. That's how boring I am. But when the CSS file has 3000 lines, then such optimization can reduce the weight of the document by half.
Of course, over time you will learn to write optimized CSS code right away, and you will need such services less and less, but it doesn’t hurt to test yourself. At least for the presence of extra spaces and skipped lines.
And that’s all for today. See you soon.
Surely, every self-respecting optimizer spends a lot of time working on html code. These steps have a certain practical significance in terms of convenience for users and analysis of the site by a search engine.
HTML errors can make it difficult to index and rank pages to determine whether their content is relevant to a particular query. The abundance of such errors on different pages of the site tells search engines about the low quality of the entire web resource. Let's list the most dangerous HTML errors.
Even the most minimal work on html code optimization requires knowledge of:
- HTML programming language
- Content management system CMS
- Knowledge of CSS
The search engine continuously analyzes hundreds of sites, and even the most flexible parameters can have a tremendous impact on ranking, which is not acceptable in a competitive environment. For an optimizer, it is important to be able to anticipate and navigate: what factors will be of key importance in ranking.
Optimization, in turn, is not a one-step process, but requires patience and literacy, especially when working with html code.
HTML code optimization steps:
- Generating the CSS File
- Removing unnecessary tags
- Using Global Blocks
Working with CSS:
At this stage, it is worth transferring all the styles of tables, images, page body, links, menus and other things into style sheets. This is done to make the page code cleaner and have less weight.
1. We have the following code: