Website HTML code optimization - cleaning, compression, error correction

Listen to this article

Technical website HTML code optimization - the process of adjusting the HTML code of the site page template. Change (ed.) of the source code of the site and correction of its structure and size. The explicit purpose of which is a qualitative improvement in the composition of the code. A significant reduction in its volume, improving the validity of the code. Which helps to increase page loading speed in browsers.

HTML is the backbone of the web. This is the type of document that builds the basic structure of a website. Without HTML, JavaScript wouldn't work, CSS wouldn't be able to style anything, and images wouldn't have anywhere to load. The strength of HTML lies in its versatility, mainly because it can load other files, which is what hypertext, the first part of HTML, stands for.

When it takes a long time to load, parse, and load external HTML files, the user interface can suffer. Page Onload time increases, the more users tend to abandon the page, the longer they have to wait.

The content of the article:

• Technical optimization of the HTML code of the website pages
• Optimizing the source HTML code of the site reducing the amount of code
• Removing unnecessary HTML tags and style files
• Correction of errors in the HTML code of the site
• Set the priority of the mobile version of the site
• Make active use of web caching
• CDN - high opportunities of our time
• Shorten HTTP Requests
• Optimizing your site's HTML code for SEO
• Technical optimization of website HTML code - popular CMS WordPress plugins

Technical optimization of the HTML code of the website pages

Activities aimed at optimizing the HTML code are expedient in terms of increasing the speed of the site. Cleaning and compressing the HTML code of the site will help you significantly speed up the display of site pages. By eliminating visible errors in the code, you will improve the validity of your HTML document.

The end result of optimizing the site's HTML code will be:

• Instant loading of website pages in popular browsers.
• Quick crawling of site content by search bots.
• A clean, valid code is the highest priority site in the eyes of search engines.
• The ranking and visibility of the site in the search results of Google and Yandex search engines will increase significantly.

Optimization of the source HTML code of the site - reducing the amount of code

The most important action is to reduce the page code. The HTML source code looks like a long canvas. Many different CSS styles are located in different places in the code structure. The code has unnecessary comments, characters, spaces and tags.

At the beginning, you need to get rid of unnecessary comments - this is an extra and completely unnecessary set of characters. For the browser and search bots, comments do not carry any semantic meaning. By removing them, you will significantly reduce the weight of the page. Which in a compartment will increase the speed of loading a document.

Cleaning of unnecessary characters, extra (double) spaces and line breaks. It will allow you to drastically reduce the final structure of the site code. Thus, the main weight of the page can be reduced by 2.5 - 3 times.

As a result of: compressing spaces and combining line breaks, the structure of the html code will be significantly compacted.

An example of a small segment of an optimized year:

a:hover .wpfm-icon-block, .wpfm-template-1 .wpfm-position-bottom-right ul li a:hover .wpfm-icon-block, .wpfm-template-1 .wpfm-position-top-left ul li.wpfm-title-hidden a:hover.

As you can see, all unnecessary characters, spaces and comments have been removed from the code. This contributes to the stretching of the code, as if into one continuous line. Thanks to this structure, the weight of the page becomes much less. At the same time, pages are indexed and loaded by bots as quickly as possible. Of course, subject to all measures to optimize the site.

Removing unnecessary HTML tags and style files

The most common problem of a large page code weight can be unused CSS stylistic files and unnecessary tags. These code elements are also placed in the main page template.

Eg: <b> ,<div>, <p>, <span> <style=”левые стилистические файлы CSS”</span>.

This also applies to unclosed tags. They do not carry any semantic meaning and take the place we need. Style files that have no role in the visual presentation of the site (unnecessary or broken) are also removed from the code structure.

To speed up the loading of site pages:

1. You need to move CSS styles and JS scripts to external files;
2. Arrange the main elements of the site design in sprites, then put them in style sheets;
3. The page code should be simple and readable.

Correction of errors in the HTML code of the site

Search engines (not very willingly) react to sites in the code that have errors. However, many popular TRUST resources, even with such errors, are clearly fixed in the TOP results. Even the main page of the popular Yandex is checked with the help of validator.w3.org, even my site is superior in errors.

Has the following list of validity errors:

Warning: Content-Security-Policy HTTP header: Bad content security policy: Source list contains duplicate source expression &quot;https://passport.yandex.ru&quot;. All but the first instance will be ignored. https://yandex.ru/ Error: Element style not allowed as child of element div in this context. (Suppressing further errors from this subtree.) From line 33, column 17689; to line 33, column 17695 dkov</div><style.docum>

Error: Element div not allowed as child of element span in this context. (Suppressing further errors from this subtree.) From line 33, column 18219; to line 33, column 18260 pe_close&quot;&gt;div class=&quot;desk-notif-card__action-icon&quot;&gt;</div>

This is the minimum set of errors that the main page of the Yandex search engine has (there are about 47 in total).

And this is how the validator.w3.org check of my site looks like:

Error: A script element with a src attribute must not have a type attribute whose value is anything other than the empty string, a JavaScript MIME type, or module. From line 6, column 1; to line 6, column 192 /script>↩ ↩ ↩ style type="text/css"     

Error: Bad value pmdelayedscript for attribute type on element script: Subtype missing.


From line 123, column 1; to line 123, column 140

25.jpg' >↩<script type="pmdelayedscript" data-cfasync="false" data-no-optimize="1" data-no-defer="1" data-no-minify="1" data-rocketlazyloadscript="1"docume

As you can see, not a few))) - only 21 notifications of errors and warnings. There is something to work on.

The validity of the code is of the highest priority in website promotion. By fixing most of the errors and warnings of the W3C validator, you can achieve good success in the technical optimization of the site.

Set the priority of the mobile version of the site

Traditionally, first generation websites were viewed on large screen desktop computers. Today, most people visit websites from mobile devices such as smartphones, tablets, and laptops. Therefore, your site must be adapted for mobile devices. In addition, you need to make sure that every aspect of your site — search, shopping cart, and checkout — is as easy to access from a mobile device as it is from a desktop or laptop computer.

Make active use of web caching

Caches are temporary storage areas where browsers save copies of static files in order to load recently viewed pages faster, rather than constantly requesting the same content over HTTP.

Browsers can be instructed to cache web page elements that will not be changed frequently by developers. In the HTTP response headers, the host server includes caching instructions. Those who use certain pages frequently will benefit from faster loading times as the server sends less data to the browser.

CDN - high opportunities of our time

Content Delivery Networks (CDNs) improve website loading speed by caching content in many different locations around the world. CDN cache servers are usually located closer to end users than the origin or host server.

Instead of connecting directly to a hosting server that can be hundreds of miles away and connected to numerous autonomous networks, content requests are sent through a CDN server. CDN servers can greatly improve the performance of websites.

Shorten HTTP Requests

Typically, browsers make multiple HTTP requests to access various page resources such as images, scripts, and CSS files. A single site may require hundreds of requests. There is a two-way exchange between the web browser and the server hosting the resource for each request, which increases the page load time.

Also, the web page may not load quickly if one of the hosts goes down. Because of these potential issues, each page should have a minimum amount of assets loaded. Speed tests will also show which HTTP requests are taking the most time. Developers may look for a faster image hosting solution if the images are causing the page to load slowly.

Optimizing your site's HTML code for SEO

HTML code optimization has a beneficial effect on most indicators of the site as a whole. Thanks to a clean, optimized structure, the indexing and loading speed of the site is significantly improved. In the eyes of search engines, the site becomes better, and therefore more visible in search results.
Search engines use the source code to figure out what your site is about. Any content on a web page must be encoded in HTML so that search engines can understand it. SEO components in source code include title tag, meta description, H1 title tag, internal links, anchor texts, nofollow links, alt image tags, and canonical tags. To view the source code, open the web page and press "Ctrl + U". Here are a few steps you can follow to optimize your website's source code.

Title tag optimization

The title tag has a significant impact on the ranking of your site in search engines. This helps Google determine how well your web or blog page matches a given query. A well-written title tag can make your site stand out from the rest and easily attract the search engine.

• Make sure all your web pages have unique title tags that perfectly describe the pages.
• Follow the optimal length of title tags so they don't get cut off in search results. 50-60 characters work well enough.
• Make sure you don't use keywords in titles. Instead, add one or two meaningful keywords.

Unique Meta Descriptions

A meta description is an HTML element that summarizes the content of a web page for the benefit of users and search engines. It appears as a snippet in the search results below the title. The idea behind meta descriptions is to give your readers an accurate idea of what your page offers.

• Avoid long descriptions. The ideal length is a description containing between 130 and 156 characters.
• Use relevant keywords in the description.
• If possible, include a call to action.

Working with structured data

The purpose of structured data is to add more detail to your snippet to make it a featured snippet in search results. The code must be properly marked up to increase your chances of ranking higher. Schema.org is the most popular when it comes to structured data forms for search engines.

• The use of "element scope" in the div tag lets search engines know that all the information presented in one section refers to the same topic.
• The term element type defines the topic of each section.
• "item prop" reports additional information about the section

H1 tag

The H1 tag is used to designate a piece of text as the main heading of your page. The content listed here should briefly describe what the pages are about. H1 tags should be informative and engaging, encouraging the user to continue reading your content.

• Ideally, it should contain between 20 and 70 characters.
• Consider user intent
• Include your primary keyword, preferably long tail keywords, to improve search performance and web traffic.

You can also add subheadings starting from H2 to H6. To improve readability, make sure the text following the subheading is not too long, preferably between 250 and 300 words.

Alternative text for images

For e-commerce as well as other websites, the alt tag is an important HTML tag. It tells the search engine what the image is about. If the image file cannot be loaded, alt text will be displayed instead of the image. Good images with proper alt text make pages appealing to crawlers as well as users and improve user experience (UX).

• Make sure the description is short and specific.
• Use keywords, but don't stuff them
• Tag images related to your brand, not images used for decorative purposes.

Canonical URL tag

This is a powerful tool for identifying duplicate content. Canonical URL tags are mainly used for e-commerce sites, as you may need to create different pages for your products.

Adding these tags to each page variation will help search engines recognize the main/origin page from a group of pages with similar URLs.

Main conclusions

• Strive to keep things simple and efficient. A website should not be filled with too many fancy elements. It just needs to be relevant and effective for the vision of your brand and your customers. You can achieve this by simply focusing on the required web features.
• Explore optimization strategies for various web elements. Different web elements will require different optimization strategies. Make sure you include these changes in all elements so that your website's features work effectively.

Technical optimization of website HTML code - popular CMS WordPress plugins

Let's take a quick look at a couple of WordPress plugins. Which will help you clean up and compress the HTML code on the WordPress CMS. Thanks to these plugins, you can drastically increase the speed of the site, as well as clean up all unnecessary from the site code.

Plugin Autoptimize:

• Optimization and compression of the site's HTML code (removing spaces and comments).
• CSS and JS optimization - allows you to combine styles into one file and place them in footer site, as well as js scripts.
• Has additional optimization options.

Clearfy Plugin:

• Combines the functionality of many plugins and consists of modules that can be disabled.
• Great for increasing website speed.
• Disables some scripts and unnecessary features in WordPress.
• It has a wide range of tools for working with HTML code, CSS and JS files of your CMS.

By combining these plugins, you will achieve excellent WordPress site optimization. Be sure to use them, I'm sure they will be very useful to you.

Reading this article:

• Htaccess file - how to create a .htaccess file instruction for beginners
• Gzip compression js / css / html site acceleration - how to enable in .htaccess

Thanks for reading: SEO HELPER | NICOLA.TOP