Program code optimization technique. CSS and HTML optimizers


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. Promoting a website using links without optimization 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 is the creation of 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 that influences website promotion is 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.

Previously, when computer RAM was in kilobytes, disk space in tens of megabytes, and processor frequency in megahertz, everyone dealt with optimization problems. It was quite difficult to write a good program that would run quickly on such modest systems. The programmers “licked” every line, achieving maximum efficiency.

What now? The computing power of modern computers has reached fantastic (if compared to what it used to be) values, and even such “monsters” as Windows 7 are unable to slow them down. And why do we need to optimize if everything works fine? Many people think so. Now programming has reached such a stage that the speed of writing programs has become more important than the speed of their operation. Because the speed of their work will be obviously high. But this only applies to ordinary application programs. Drivers (which have changed little since the days of DOS), programs for processing audio, video, and graphics, generating passwords are a completely different matter... In them, optimization should never be forgotten. And in ordinary programs it is never superfluous. It is much more pleasant to use a more efficient program than to go to the store for a new processor. Or wait until it deigns to load, whichever is better. Most users choose the first option.

Optimization

There are several important points in optimization:

Optimization should be natural. The optimized code fragment should be easily integrated into the program without disturbing the logic of its operation. It should be easy to enter into the program, change or remove from it.
Optimization should bring significant performance gains. An optimized program must work at least 20%-30% more efficiently than its non-optimized counterpart, otherwise it becomes meaningless. Why go through the trouble of making changes to already finished code if it will give virtually no results?
Development (and debugging) of critical areas should not increase program development time by more than 10%-15%.
As it was written earlier, now the speed of program development is coming to the fore, so there is still no need to lag behind the rest of the programmers. It's worse for yourself.
Also, before writing an optimized version, it is useful to have its non-optimized counterpart. Typically, optimized code is very difficult to understand, and if errors appear in the program after its implementation, then by substituting its less efficient counterpart in its place, we can determine who is to blame for the errors.

Code optimization logic

Now let's move on to the philosophy of optimization itself. It is believed that critical areas should be written in assembly language, since it gives the highest speed. But often the result of an optimizing compiler is 2%-7% (no more than 20%) slower than its assembler counterpart. And was it worth it? For such a meager increase, spend time developing an assembly language implementation? It follows from this that it is much better to optimize code written in a high-level language, to optimize the very logic of the program.

Basic principles of optimization:

  • You need to start optimization from the bottlenecks of the program. If we optimize those places where everything works quickly even without our intervention, then the performance gain will be minimal. This is the basic law of optimization, and we will build on it when analyzing the rest.
  • It is better to optimize those places that are regularly repeated during work. This law applies to loops and subroutines. If you can optimize the cycle even a little, then do it without hesitation. If in one iteration we achieve an increase of 2%, then after 1000 repetitions this will already be a fairly large value.
  • Try not to overuse optimization of single operations. This law is a kind of continuation of the previous one. By optimizing a fragment that will be called only once, we are unlikely to achieve a noticeable increase (but if the effect is noticeable (>10%, which is extremely rare), then optimization will not be superfluous).
  • Use assembler only where speed is very important. As it was written earlier, assembler currently does not provide a huge increase in speed. Therefore, it should be used only in the most “bottleneck” places of the program.
  • Think about optimization. Incorrect optimization can even harm the program, increase its development time, while practically not reducing its speed.

    • Of course, in the modern world of ultra-fast computing, the speed of program development comes to the fore. But still, we should not forget about optimization, which, despite the generally accepted opinion, has never been relegated to second place.

    During the initial development of a website, their owners pay the greatest attention to its external perception and quick launch. Immediately or a few months after the launch, the question arises of how to attract more customers. After some time, the layout designer and programmer receive technical specifications for internal site optimization, where it turns out that part of the written code needs to be rewritten. Therefore, in this post we will talk about optimizing the html, css and js code of a site during its initial development, which will allow the client to save money and the developers nerves.

    js and css optimization

    First, let's look at css and js. Why do you need css and js optimization?

    About 50% of users leave a site if it takes more than 3 seconds to load, and for every additional second, site conversion drops by 7%. Also, site loading speed is one of the ranking factors.

    The first thing you need to start with is to listen to Google's recommendations. Css and js code should not be contained in the site's html code; it should be placed in separate files. The exception is small inline styles with 1-2 values. The number of included files should be reduced as much as possible, ideally leaving one included css and js file each. The inclusion of js files should be moved to the end of the page (before displaying the page, the browser must parse it and if it detects an external script, it must load it, and this is an extra cycle of operations that slows down the display of the page.

    Also, to speed up the loading of js, css files and images, it is advisable to use caching and compression in the GZIP format.

    SEO website layout: optimization of html code or how to layout it so as not to have to redo it later

    For proper future optimization of html code, let’s consider all the tags and how they affect SEO.

    Block:

    - indicates the name of the page, which is placed in the browser tab and in search engines. The most important tag in terms of influence on site ranking.

    - allows you to set a description of the page, which appears in search results under the title. Has a much smaller impact on rankings, but helps increase the CTR (click-to-impression ratio) of a page. If the description meta tag is filled out, this does not guarantee that the search results will show exactly what is written there, since search engines can take the description from the content. But it’s still better to set up tag generation and not think about what part of the PS text will be taken for description.

    - indicates to search engines what queries the page is relevant for. After the appearance of this tag, it was given a great influence on the ranking of pages. Optimizers could easily promote a page with any product from an online store, for example, on the request “download an essay on history” or on other topics that brought visitors to the site, but not customers. Now the influence of this tag on promotion is not precisely known and many people simply ignore it, including so as not to harm the page.

    (take one of the values, index or noindex, follow or nofollow) - a ban on indexing the page (noindex) and a ban on indexing outgoing links on the page (nofollow) by search engines. The index and follow values ​​are used in conjunction with the disallow indexing values, since by default indexing of pages and links is allowed. This tag should be used carefully so as not to see zero traffic from search engines after a while.

    - allows you to link several identical pages in content, but with different URLs, to one page to improve its ranking. In most cases, it is used for dynamic pages that contain the same content, for example, sorting pages in a product catalog or when working with a blog, where one article can be located in different sections and have different URLs.

    and - tags allow you to indicate the previous and next pages on pagination pages for search engines, if the material is divided into several parts and located at different URLs.

    Block:

    - - headers on the page. The tag should be used once, as it indicates the main content of the page, but has less impact on ranking in search results. As a rule, for online stores, the tag indicates the names of these categories and products on the category and product pages; for information pages, the name that will interest the reader plus, if possible, keywords.

    Tags must follow a logical structure. The header contains headers, in which headers, etc. It is advisable to use them only in the text content of the page (for example, to break up the main content on the page, but not for blocks that are displayed on all pages of the site). If we take into account that the tag helps to increase the importance of words in ranking, enclose all the text on the site in it and correct it with the help of styles so that it can be read, then this will not give any advantage, but will only harm such a page.

    , , - are intended to focus attention on certain phrases and words in the description of a page, article, news, etc. (including increasing the importance of these words in ranking). They should not be used for the layout of those page elements that are repeated, for example, on all products. It's better to use css for this. Although it is not known for sure whether a word or phrase repeated on all pages of a site, inside, for example, a tag, has an impact, it is better to use tags for their intended purpose. I think PS will appreciate this.

    - also intended primarily for placement in the text content of the page. Allows you to make the text more interesting to read, which increases the credibility of the entire page from search engines (lists, pictures, videos have the same effect).

    .

    Side block with additional information. ...

    What else needs to be taken into account when SEO-layout of a website
    • A large number of validation errors can have a bad impact on a page. It is not advisable to use empty tags and css, js files that are not used on the page. The lighter the code, the easier it is for search engines to analyze it.
    • You should not use flash and frames, which are very unfriendly to search engines. Also, search engines do not recognize text that is drawn using a picture.
    • Cross-browser functionality of a site influences user behavior and forces them to leave the site without receiving the necessary information or making a purchase. As a result, behavioral factors deteriorate, which affect the optimization of the entire site.
    • The presence of a mobile version of a site or its responsiveness has become a ranking factor and, like cross-browser compatibility, can reduce the bounce rate and increase site conversion on mobile devices. Google began to take into account the presence of a mobile version in 2015 (mobile-friendly), and Yandex in 2016, calling the ranking algorithm “Vladivostok”.
    • The main content on the page should be placed in the HTML code closer to the beginning, so it will be more relevant from the point of view of the search engine.
    • Content should not be hidden using display:none .
    • While tags can be used to increase the importance of a keyword, it can also have a negative effect if some tags overlap, e.g.
      1. h1-h6 & strong, b, em
      2. h1-h6 & a href=…
      3. strong, b, em & a href=…
    Conclusion

    Looking at the pages of search engines, you can see a number of errors related to the layout of the site, including validation errors. But here it should be understood that they set themselves completely different goals. SEO optimized layout is required for sites, one of the main sources of traffic of which is search engines, and no matter how cool links link to the site, without good code optimization you can’t dream of first positions.

    On this site I usually share my experiences, but sometimes I need advice myself. And this short article will be just from this series, since the problem is a little beyond my competence, but it needs to be solved. Therefore, the question is to some extent for the readers. But the fact is that our dear Google told me that this site of mine is not complete and this is slowing down the site.

    I'm not a programmer; as they say, I don't speak any languages. But the issue must be resolved, and that is why I raised it here. Of course, although the question is complex, it is no more difficult than understanding what it is and how it helps manage trade.

    How to optimize the site code?

    I'll try to figure this out on the pages of my blog. Besides, you won’t be able to do everything at once, but you need to have an action plan.

    I want to start by explaining where the dog is buried. Probably you, like me, use some kind of content management system for your website: WordPress, Joomla, Drupal or something else. These systems are made by professionals, and there are few errors in them.

    But the templates that most of us take from the public domain are prone to errors. , especially free ones, are often made by amateurs, and their creations are not perfect. And it was the kind Google who pointed out the errors in the template to me. What are they?

    Google shows separately errors when loading a site from mobile devices and desktops. There is a difference, however. So, what errors or even code flaws are there in my template?

    For computers:

    1. Should Fix - this is a high level of error!

    Use your browser cache!
    By specifying a date or expiration date for static resources in HTTP headers, the browser will load previously retrieved resources from the local disk rather than from the Internet.
    Use your browser cache for the following resources:

    Http://avatars-fast.yandex.net/get-direct/nubNH6Z6vqKZZtboVlYcQg/y80 (validity period not specified) http://directstat.ru/script (validity period not specified) https://prostolinux.ru/karta- saita/ (validity period not specified) https://prostolinux.ru/prostolinux.png (validity period not specified) (validity period not specified) (validity period not specified) https://prostolinux.ru/wp-content/themes /rockwell_new/rockwell/css/jquery.lightbox-0.5.css (validity period not specified) https://prostolinux.ru/wp-content/themes/rockwell_new/rockwell/css/orange.css (validity period not specified) https ://prostolinux.ru/wp-content/themes/rockwell_new/rockwell/css/superfish.css (validity period not specified) https://prostolinux.ru/wp-content/themes/rockwell_new/rockwell/images/bk_body. jpg (validity period not specified) https://prostolinux.ru/wp-content/themes/rockwell_new/rockwell/images/bk_dotted_vert.gif (validity period not specified) https://prostolinux.ru/wp-content/themes/ rockwell_new/rockwell/images/bk_menu_orange.jpg (validity period not specified) https://prostolinux.ru/wp-content/themes/rockwell_new/rockwell/images/bullet_top.jpg (validity period not specified) https://prostolinux. ru/wp-content/themes/rockwell_new/rockwell/images/ico_date_orange.png (validity period not specified) https://prostolinux.ru/wp-content/themes/rockwell_new/rockwell/images/topmenu_border_orange.jpg (validity period not specified actions) https://prostolinux.ru/wp-content/themes/rockwell_new/rockwell/js/copy.js (validity period not specified) https://prostolinux.ru/wp-content/themes/rockwell_new/rockwell/js /jquery-1.3.2.min.js (validity period not specified) https://prostolinux.ru/wp-content/themes/rockwell_new/rockwell/js/jquery.form.js (validity period not specified) (not specified validity period) (validity period not specified) https://prostolinux.ru/wp-content/themes/rockwell_new/rockwell/style.css (validity period not specified) https://prostolinux.ru/wp-includes/images/ smilies/icon_smile.gif (validity period not specified)

    It’s not yet clear to me what the validity period is and where it needs to be indicated. You know?

    2. Consider Fixing

    Remove rendering-blocking JavaScript and CSS from the top of the page.

    Number of blocking scripts per page: 1. Number of blocking CSS resources per page: 4. They slow down the display of content.
    All content at the top of the page is displayed only after the following resources have been loaded. Consider delaying the loading of these resources, loading them asynchronously, or embedding their most important components directly into the HTML code.
    Remove the JavaScript code that is preventing the display:

    Https://prostolinux.ru/wp-content/themes/rockwell_new/rockwell/js/jquery-1.3.2.min.js

    Optimize your CSS on the following resources:

    https://prostolinux.ru/wp-content/themes/rockwell_new/rockwell/style.css
    https://prostolinux.ru/wp-content/themes/rockwell_new/rockwell/css/orange.css
    https://prostolinux.ru/wp-content/themes/rockwell_new/rockwell/css/jquery.lightbox-0.5.css
    https://prostolinux.ru/wp-content/themes/rockwell_new/rockwell/css/superfish.css

    Here the problem is more clear, but I don’t know how to solve it yet. I uploaded a copy of the site to the local server to safely edit the code. Let's train.

    3. Minify JavaScript - This is a medium error rate. Fixing the error will speed up the site a little.
    JavaScript code compression allows you to reduce the amount of data to speed up loading, processing, and execution.
    Minify the JavaScript code in the following resources to reduce their size by 19.4 KB (46%
    Reducing https://prostolinux.ru/wp-content/themes/rockwell_new/rockwell/js/jquery-1.3.2.min.js will reduce the size by 14 KB (41%
    Reducing https://prostolinux.ru/wp-content/themes/rockwell_new/rockwell/js/jquery.form.js will reduce the size by 5.4 KB (64%
    4. Optimize your images - this is a medium error rate. Fixing the error will speed up the site a little.

    The correct format and compression of images can reduce their size.

    Optimize the following images to reduce their size by 5 KB (14%
    If you losslessly compress an image, it will reduce its size by 2 KB (8%
    If you losslessly compress the image https://prostolinux.ru/wp-content/themes/rockwell_new/rockwell/images/ico_date_orange.png, this will reduce its size by 1.7 KB (31%
    If you compress the image http://avatars-fast.yandex.net/get-direct/nubNH6Z6vqKZZtboVlYcQg/y80 losslessly, this will reduce its size by 1.3 KB (19%

    5. Reduce server response time - this is an average error rate. Fixing the error will speed up the site a little.

    Based on testing results, your server's response time was 0.24 seconds. This indicator is influenced by many factors. Read our best practices to learn how you can track and measure response times.

    I didn’t think it was a lot, but it seems like it’s a hosting issue, you need to find out there.
    6. Shorten the HTML - This is a medium error rate. Fixing the error will speed up the site a little.
    Compressing HTML code (including inline JavaScript or CSS code) reduces the amount of data for faster loading and processing times.

    Minify the HTML code in the following resources to reduce their size by 1.7 KB (8%
    Reducing https://prostolinux.ru/kak-usilit-signal-3g-modema/ will reduce the size by 1.7 KB (8%

    For mobile:

    Here all the errors are the same, but with the difference that ALL OF THEY ARE MARKED AS CRITICAL!

    What does it mean? This means that when loading a site from a mobile device, everything should be much faster, since the Internet channel there is usually narrower.

    Yes, I didn't say where Google showed me these errors. And he showed them to me in the Google Adsense panel. Or you can simply go to https://developers.google.com/speed/pagespeed/insights/ and find out what needs to be fixed, because optimizing the code on the site, although not easy, only needs to be done once.

    If you know how to solve at least some problems, I will be very grateful for your tips. In the meantime, I will scour the Internet in search of answers to these important questions...

    Solutions.

    1. Turn on compression.

    The first thing that made it possible to immediately achieve some improvements was adding code to the .htaccess file, which is located in the root of the site.

    SetOutputFilter DEFLATE Header append Vary User-Agent FileETag MTime Size ExpiresActive on ExpiresDefault "access plus 1 month" SetOutputFilter DEFLATE

    As I understand it, all this allows you to compress data on the server side. I already wrote about this before, even published the code, but you can add a couple more settings to this that improved the performance.
    2. Remove unnecessary scripts.

    Analysis of the page showed that some template scripts were preventing the page from loading. I removed several scripts of this type from header.php:
    

    2024 gtavrl.ru.