I welcome you, dear friends, to the blog site. Most users perceive sites only externally, evaluating the design and structure, but behind attractive external components there are many internal laws and rules that are defined by W3C standards. The internal components include html code and CSS styles (without separate functionality). Often, webmasters are more concerned with the appearance 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.
Good internal website optimization is essential for successful online promotion. Of course, optimization for search engines before promotion is an important point. Website promotion with links without optimization, it will not be effective and can even harm by lowering its attendance. At the same time, it is necessary to identify all current problems and shortcomings, which at any stage can nullify all achievements. Such a weak link may be the html-code of the site.
Website code can be analyzed using various validators. For self-assessment, you must disable files with styles and scripts. That's how they see them search robots. 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 easy and understandable as possible.
Search robots must quickly evaluate the structure of pages. Therefore, it is better not to use frames and flush. These elements make the code heavier, making it more complex. Put all design elements into css-style files, formatting them into sprites. It is the simplicity of the code that determines the level of relevance of the site and the speed of indexing pages. 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 not more than 1 MB.
The main stages of website code optimization
- Highlighting h1-h6 headings is search robots in general, so do not forget about the correct formatting of the text.
- Reduce code size - the less code, the easier and faster the page loads. Recently, page loading speed has become an important ranking factor in Google SERP which has been officially announced.
- Removal malicious code- many hostings have an antivirus section that scans site files and indicates the path to their solution. The absence of malicious code makes the site more preferred by search engines.
- Internal website optimization- creating a unique text that supports the required density of keywords.
- – evenly distributes page weight and increases traffic for low-frequency queries, especially when adding new content.
- Adding meta tags - title, keywords and description are used by the works and displayed on the search results pages. Properly composed meta tags increase the relevance of pages and attract users.
- Image optimization - each image must be selected in the optimal format (GIF, JPEG, PNG and PNG-24), as well as alt and title.
Validity of the site code
Validity is the conformity of the code to generally accepted world standards W3C. Not a valid site code containing many errors can become an obstacle in the promotion of a certain resource. If not all paired tags are closed, there may be problems with the display of design elements. But in reality, even the sites of the largest search engines are not 100% valid. What is the reason for this discrepancy?
- A high degree of labor intensity in the standardization of the site and the need for exceptional professionalism of the developer when validating a large dynamic site.
- 100% valid html code does not guarantee cross-browser compatibility, and also does not insure 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 html code optimization, style optimization (css) is an equally important undertaking that is overlooked by many webmasters. Optimizing the css code also speeds up the loading of the site pages and saves traffic. Since the css file is up to 100Kb, many webmasters don't see the need to optimize it, but if you think about how much traffic is saved by optimizing a file per year, you realize how underestimated it was.
You can optimize CSS manually or with the help of special services. Each option has a drawback. When manually optimizing the site code, you can lose sight of a lot, while spending a lot of time. However, machine optimization may remove lines without which the design may not display correctly.
Encoding setting
Another factor affecting website promotion, is the encoding. Russian text will be displayed correctly only if correct setting encodings, such as Windows-1251 or utf-8. If the content is not coded correctly, signs and symbols will be distorted, which will lead to loss of visitors and slow indexing.
Problems with encodings are typical for old resources, where pages were created in tools like Notepad, and the code was saved in many different formats. Some modern browsers unable to recognize such encodings.
Internal website optimization
In most cases, competent internal resource optimization can bring the site to the best positions of search engines without significant efforts and work with link exchanges. Every little thing that affects his position is important. Try to create a structure that is understandable to both users and search engines. Multi-page portals should contain organized sections, in which all pages are no more than 3-4 clicks away. It is desirable to use the breadcrumbs and human-readable web addresses. Unfortunately, not all CMS scripts have this functionality.
Conclusion
The technical aspect of successful website promotion is solved by an optimized html code. search engines site pages are evaluated differently than users, so a clean, valid code can push your resource up in the search results, where just a few positions are sometimes 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.
On this site I usually share my experience, but sometimes I myself need advice. And this short article will be just from this Kalash series, since the problem is a little higher than my competence, but it needs to be solved. Therefore, the question is to some extent to the readers. But the fact is that our dear Google told me that this site of mine is not complete and this slows down the site.
I'm not a programmer, as they say, I don't speak languages. But the issue needs to be resolved, which is why I brought it up here. Of course, the question, although complex, is no more difficult than understanding what it is and how it helps to manage trade.
How to optimize website code?
I will try to figure it out on the pages of my blog. In addition, it will not be possible 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 site: WordPress, Joomla, Drupal or something else. These systems are made by professionals, and there are few mistakes in them.
But here are the templates that most of us take from free access, sin with errors. , especially free ones, are often made by amateurs, and their offspring are not perfect. And it was the errors in the template that good Google pointed out to me. What are they?
Google shows separate errors when loading a site from mobile devices and desktops. There is a difference, however. So, what errors or even shoals of code are there in my template?
For computers:
1. Should Fix This is a big mistake!
Use browser cache!
If you specify the date or expiration date of static resources in HTTP headers, the browser will download resources already received earlier from local disk and not from the Internet.
Use the browser cache for the following resources:
Http://avatars-fast.yandex.net/get-direct/nubNH6Z6vqKZZtboVlYcQg/y80 (no expiration date) http://directstat.ru/script (no expiration date) https://prostolinux.ru/karta- saita/ (expiration not specified) https://prostolinux.ru/prostolinux.png (expiration not specified) (expiration not specified) (expiration not specified) https://prostolinux.ru/wp-content/themes /rockwell_new/rockwell/css/jquery.lightbox-0.5.css (expiration not specified) https://prostolinux.ru/wp-content/themes/rockwell_new/rockwell/css/orange.css (expiration not specified) https ://prostolinux.ru/wp-content/themes/rockwell_new/rockwell/css/superfish.css (no expiration date) https://prostolinux.ru/wp-content/themes/rockwell_new/rockwell/images/bk_body. jpg (no expiration date) https://prostolinux.ru/wp-content/themes/rockwell_new/rockwell/images/bk_dotted_vert.gif (no expiration date) https://prostolinux.ru/wp-content/themes/ rockwell_new/rockwell/images/bk_menu_orange.jpg (no expiration date wiya) https://prostolinux.ru/wp-content/themes/rockwell_new/rockwell/images/bullet_top.jpg (no expiration date specified) https://prostolinux.ru/wp-content/themes/rockwell_new/rockwell/images /ico_date_orange.png (no expiration date) https://prostolinux.ru/wp-content/themes/rockwell_new/rockwell/images/topmenu_border_orange.jpg (no expiration date) https://prostolinux.ru/wp-content /themes/rockwell_new/rockwell/js/copy.js (expiration not specified) https://prostolinux.ru/wp-content/themes/rockwell_new/rockwell/js/jquery-1.3.2.min.js (not specified) expiration date) https://prostolinux.ru/wp-content/themes/rockwell_new/rockwell/js/jquery.form.js (expiration not specified) (expiration not specified) (expiration not specified) https:// prostolinux.ru/wp-content/themes/rockwell_new/rockwell/style.css (expiration not specified) https://prostolinux.ru/wp-includes/images/smilies/icon_smile.gif (expiration not specified)
Here I still do not understand at all what the validity period is, and where it should be indicated. You know?
2. Consider Fixing
Remove render-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 downloaded. Try to delay loading these resources, load them asynchronously, or inline them yourself important components directly into the HTML code.
Remove the JavaScript blocking the display:
https://prostolinux.ru/wp-content/themes/rockwell_new/rockwell/js/jquery-1.3.2.min.js
Optimize CSS work 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 do not know how to solve it yet. uploaded to local server a copy of the site to safely edit the code. We will train.
3. Minify JavaScript is the average level of error. Fixing the bug will speed up the site a bit.
JavaScript code compression allows you to reduce the amount of data to speed up loading, processing, and execution.
Minify the JavaScript code on the following resources to reduce their size by 19.4 KB (46%
Shortening https://prostolinux.ru/wp-content/themes/rockwell_new/rockwell/js/jquery-1.3.2.min.js will reduce the size by 14 KB (41%
Shortening https://prostolinux.ru/wp-content/themes/rockwell_new/rockwell/js/jquery.form.js will reduce the size by 5.4 KB (64%
4. Optimize images - this is the average error rate. Fixing the bug will speed up the site a bit.
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 losslessly compress the image http://avatars-fast.yandex.net/get-direct/nubNH6Z6vqKZZtboVlYcQg/y80, this will reduce its size by 1.3 KB (19%
5. Reduce the server response time - this is an average error rate. Fixing the bug will speed up the site a bit.
According to the results of testing, the response time of your server was 0.24 seconds. This indicator is influenced by many factors. Read our best practices and learn how you can track and measure response time.
I didn’t think it was a lot, but it seems to be a matter of hosting, you need to find out there.
6. Minify HTML is the average level of error. Fixing the bug will speed up the site a bit.
Compressing HTML code (including inline JavaScript or CSS code) reduces the amount of data to speed up loading and processing.
Minify the HTML code on 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 THEM ARE MARKED AS CRITICAL!
What does it mean? This means that when loading a site from mobile device, everything should be much faster, since the Internet channel is usually already there.
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 just go to https://developers.google.com/speed/pagespeed/insights/ and find out what needs to be fixed, because it is not easy to optimize the code on the site, but you only need to do it once.
If you know how to solve at least some of the problems, then 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 the addition of code to the file. htaccess, which is located at the root of the site.
As I understand it, all this allows you to compress data on the server side. I have already written about this before, even published the code, but a couple more settings can be added to this, which improved the performance.
2. Remove unnecessary scripts.
Page analysis showed that some template scripts were interfering with page loading. Removed several scripts of the following form from header.php:
After the removal, the site both worked and works, for which they were needed and did not understand. Google test showed one at a time, I deleted and checked. After removing one, the next appeared. So I removed 4-5 pieces and everything is fine.
And improve efficiency. Optimization goals include reducing the amount of code, the amount of RAM used by the program, speeding up the program, and reducing the number of I/O operations.
The main requirement that is usually made to the optimization method is that the optimized program must have the same result and side effects on the same set of input data as the non-optimized program. However, this requirement may not play a special role if the gain from the use of optimization can be considered more important than the consequences of changing the behavior of the program.
Types of optimization
Code optimization can be carried out both manually, by a programmer, and automatically. In the latter case, the optimizer can be either a separate software tool or built into the compiler (the so-called optimizing compiler). In addition, it should be noted that modern processors can optimize the order in which code instructions are executed.
There are such concepts as high-level and low-level optimization. High-level optimizations are mostly carried out by a programmer, who, operating with abstract entities (functions, procedures, classes, etc.) and imagining a general model for solving a problem, can optimize the design of the system. Optimizations at the level of elementary structural blocks of the source code (loops, branches, etc.) are also usually referred to as a high level; some single them out as a separate (“middle”) level (N. Wirth?). Low-level optimization is performed at the stage of turning the source code into a set of machine instructions, and often this stage is subject to automation. However, assembly language programmers believe that no machine can outperform a good programmer in this (while everyone agrees that a bad programmer will make machines even worse).
Selection of the area to be optimized
When optimizing code manually, there is another problem: you need to know not only how to optimize, but also where to apply it. Usually, due to various factors (slow input operations, difference in the speed of the human operator and machine, etc.), only 10% of the code takes as much as 90% of the execution time (of course, the statement is rather speculative, and has a dubious basis in the form of a law Pareto, however, looks quite convincing in E. Tanenbaum). Since additional time will have to be spent on optimization, therefore, instead of trying to optimize the entire program, it would be better to optimize these "critical" 10% of the execution time. Such a piece of code is called a bottleneck or a bottleneck, and to determine it, special programs are used - profilers that allow you to measure the time of various parts of the program.
In fact, in practice, optimization is often done after the "chaotic" programming phase (involving things like "", "we'll figure it out later", "we'll do it anyway"), so it's a mixture of proper optimization, refactoring and fixing: simplification " fancy" constructs like strlen(path.c_str()), boolean conditions (a.x != 0 && a.x != 0), etc. Profilers are hardly suitable for such optimizations. However, to detect such places, you can use programs - tools for finding semantic errors based on a deep analysis of the source code - after all, as you can see from the second example, inefficient code can be the result of errors (such as typos in this example - most likely, a.x != 0 && a.y != 0). A good one will detect such code, and display a warning message.
Harm and benefit of optimizations
Almost everything in programming should be treated rationally, and optimizations are no exception. It is believed that an inexperienced assembler programmer usually writes code that is 3-5 times slower than compiler-generated code (Zubkov). There is a well-known expression about early, rather low-level (like the struggle for an extra operator or variable) optimizations, formulated by Knuth: "Premature optimization is the root of all troubles."
Most people have no complaints about the optimizations carried out by the optimizer, and sometimes some optimizations are practically standard and mandatory - for example, tail recursion optimization in functional languages (Tail recursion is a particular type of recursion that can be reduced to the form of a cycle).
However, it should be understood that numerous complex optimizations at the machine code level can greatly slow down the compilation process. Moreover, the gain from them can be extremely small compared to optimizations of the overall design of the system (Wirth). Also, one should not forget that modern, syntactically and semantically "fancy" languages have many subtleties, and a programmer who does not take them into account may be surprised by the consequences of optimization.
For example, consider the C++ language and the so-called. Return-Value Optimization, the essence of which is that the compiler may not create copies of the temporary object returned by the function. Since the compiler "skips" the copy in this case, this trick is also called "Copy elision". So the following code:
#include
can have several output options:
hello world! A copy was made. A copy was made. hello world! A copy was made. hello world!
Ironically, all three options are legal, as the language standard allows a copy constructor call to be omitted in this case, even if the constructor has side effects (§12.8 Copying class objects, clause 15).
Outcome
Thus, do not forget to optimize the code, using specialized software tools if possible, but this should be done carefully and with caution, and sometimes prepare for surprises from the compiler.
PVS Studio
Bibliographic list
- E. Tanenbaum. Computer architecture.
- Wirth N. Building compilers.
- Knut D. The Art of Programming, Volume 1. Basic Algorithms.
- Zubkov S.V. Assembler for DOS, Windows and UNIX.
- Wikipedia. code optimization.
- Wikipedia.
Optimizing HTML code and cascading style sheets (CSS) is necessary in order to speed up the loading process of the site and the content hosted on it. The savings in time and traffic, in general, after a long period of time after optimization, will turn out to be significant, even if the change in speed is not very noticeable externally.
HTML code optimization
In order for the HTML code to contribute to the fast loading of the site, it must meet several conditions:
- Be simple and informative. After checking it for validity, you need to fix the errors so that it is 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, putting it into separate files (for example, you can put CSS and JS) will increase the download speed, which also simplifies the work of bots.
Having achieved the fulfillment of 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 easier 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, if possible, should be rendered 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 HTML, CSS, JS code (if you check the appropriate boxes). It is necessary to set up a competent and convenient site navigation, which 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 time-consuming and time-consuming process, besides, you can miss some errors. A program or service for optimization will better eliminate deficiencies, but may disrupt some of the functions that worked on the site, and after checking 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;
- Write unusual fonts using styles, not images;
- For images, 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;
- Prescribe in keywords only those keywords that are used on the page, minimize 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
- CYPR.com;
- autoptimize plugin.
Experts in SEO and IT advise using CleanCSS.com, as it allows you to choose the compression level from low to high, or choose individual settings. After high and highest levels of optimization, the site code becomes almost unreadable, and it will be almost impossible to make changes to it. Therefore, to begin with, you should use the standard optimization. You can choose compression modes for specific content or optimize individual parameters: compression of fonts, images, removal of spaces.
CY-PR.com also has a similar optimization tool that lightens the CSS structure by 25-30%, but there is no way to generate a code file after the operation.
The rest of the services can radically change the code 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 performance of the site, the correct display of the design, and the download speed. Normal is the situation when the pages and user options of the site are loaded no more than 3-5 seconds.
In order to check the degree of optimization and understand how efficiently the HTML code is now written, you can use services such as:
- optimization.com;
- Portal seo-checklist;
- firebug plugin.
These tools will help you check if 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 set a mark on completed deeds.
Validation
You can check the site code for errors using validation check services - validators. Efficient code validation is done with validator.w3c.org
If the system generates more than half a thousand errors during the first check, you should 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 is more likely to rank high in the search results than a resource with overloaded HTML code that contains errors.
Code optimization is called a change in the correct code, aimed at increasing its efficiency. “Optimization” means making small changes that affect one class, one method, and most often several lines of code. Large-scale design changes or other high-level performance enhancements are not considered optimizations. This is not the most efficient way to improve performance. Improving the architecture of the program, redesigning the classes, and choosing a more efficient algorithm lead to more impressive results. In addition, code optimization is not the easiest way to improve performance: it is easier to buy new hardware or a compiler with an improved optimization module. Finally, it's not the cheapest way to improve performance: it takes a lot of time to manually optimize the code initially, and then the optimized code is more difficult to maintain.
Optimization by the programmer.
1). Extend the data structure by adding additional information or change the representation of the data in this structure. 2). Calculate results in advance and store them for later use. 3) . Application of data packaging. 4) . The inner loop should contain min possible number of checks, and best of all, only one. 5) . Removing unconditional jumps. 6) . Boolean checks should be arranged so that faster conditions that are more likely to be correct come before slower conditions that are less likely to be correct. 7). A logical function on a small set of initial values can be replaced by a table representing this set. 8). Removing duplicate expressions. 9). If two or more identical expressions are often evaluated in a row, they should be moved to a subroutine. 10) . Changing Data Types can be an effective way to reduce code and improve its performance. 11) . Rewriting code in a low-level language. If the performance is low, the code should be rewritten in a low-level language. If you are writing in C++, the low level language might be Assembler. Rewriting code in a low-level language usually has a positive effect on code performance.
Compiler optimization.
Code optimization methods can be applied at different levels of syntactic constructions: 1 ). at the operator level - most compilers do some optimization at this level. 2 ). at the block level - the optimizing compiler allocates an operational structure to the program by constructing a directed flow graph of the program, in which each vertex represents the main block, and the links between the vertices represent control flows. Most compilers perform optimizations at the block level. 3 ). at the cycle level. 4 ). at the program level - the most difficult level of optimization.
The higher the level of optimization, the more opportunities to increase the speed of the program module. However, the cost of applying a greater degree of optimization can significantly increase compilation time.
42. Design of programs: main points.
1) Description of the implementation (language, programming environment, testing, intended execution):
sizes in bytes, operations, lines;
the size of the required memory for the data;
Required technical resources.
2) Access to the subroutine (number, type and order of input parameters transfer): transfer method (by reference or by value).
3) Description of returned parameters:
a parameter returned by the function itself;
description of the input parameters that the function modifies.
4) Description of exceptional situations and program reaction to them.
5) Description of program messages, if any.
6) Brief description of the algorithm:
If it has a name, then indicate it;
name the source or where the text of the program is given, where the algorithm was taken from;
You can provide a block diagram.
8) Describe all input and output files and a brief summary of their contents.
9) List the record structures of all files:
Breakdown by record fields;
Loading...