– 9 min read –

September 17, 2019

How to compress HTML code in order to reach a higher website loading speed

It's important to pay special attention to internal website optimization. This will help to increase ranking positions in the search engine. One of the optimization methods is to minimize the HTML code. It improves website loading speed.

Why do you need to compress code size

Because website pages load faster. Not only search engines like this. According to statistics, 40% of visitors leave the resource if it takes more than three seconds to load. With each second, the conversion drops by 7%. Fast loading websites get higher positions in search results due to positive behavioral factors.

What is the compression of HTML code

When developers write a code, they can leave more space than it is required, add comments to the code, or insert unnecessary symbols. This all increases the file size. You must do the following to fix this:

Remove duplicate spaces and line breaks. They increase web page loading time. In this case, you shouldn't touch the <script>, <textarea>, <pre>, <style> tags.

The following is an example of how to minimize the source code. This is how the code looks like before optimization:

Hello,    World!<script>//  <![CDATA[
var X =  ‘Hello,    World!’;
// ]]><</script>Hello, World! <pre> Hello, World!</pre>

And after optimization:

<html>
<head>
<title> Hello,  World! </title>
<script> var X = ‘Hello, World!’; </script>
</head>
<body>
Hello, World!
<pre>
Hello,
world!
</pre>
</body>
</html>

Reduce the amount of content in the first sector of the code. Move everything to the bottom that's not related to loading the first screen. Important JS and CSS blocks can be embedded in HTML code.

Convert DNS names. Tell the browser where to look for plug-in files on the web page: images, javascript, style files. Below is an example of page load acceleration for analytics systems:

<link rel="dns-prefetch" href="http://mc.yandex.ru"/>
<link rel="dns-prefetch" href="http://www.google-analytics.com"/>

Remove a domain from URLs in src, href attributes. This also allows you to compress the code.

This Is an example before optimization:

<html>
  <head>
  <base href="http://www.site.com/">
  </head>
  <body>
    <a href="http://www.example.com/bar">Anchor </a>
  </body>
</html>

And after:

<html>
  <head>
  <base href="http://www.example.com/">
  </head>
  <body>
    <a href="bar">Anchor</a>
  </body>
</html>

To speed up the page loading, we advise you to split CSS and JavaScript into external files, processing design elements in sprites, and place them in style sheets.

Optimize class names. It also compresses the HTML size: CSS class names should be shortened. Using babel-plugin-react-css-modules and css-loader you can change the names to any others. Use the name indexing with the incstr module to generate additional identifiers for each record in the index. For example:

const incstr = require ( ' incstr ' );
const createUniqueIdGenerator = () => {
 index const = {};
 const generateNextId = incstr . idGenerator ({
   // The letter "d" has been removed to avoid the random phrase "ad"
   // @ see https://medium.com/@mbrevda/just-make-sure-ad-isnt-being-used-as-a-class-name-prefix-or-you-might-suffer-the-wrath-of-the-558d65502793
   alphabet: ' abcefghijklmnopqrstuvwxyz0123456789 '
 });
 return ( name ) => {
   if (index [name]) {
     return index [name];
   }
   let nextId;
   do {
     // Class name cannot start with a digit.
     nextId = generateNextId ();
   } while ( / ^ [ 0-9 ] / . test (nextId));
   index [name] = generateNextId ();
   return index [name];
 };
};
const uniqueIdGenerator = createUniqueIdGenerator ();
const generateScopedName = ( localName , resourcePath ) => {
 const componentName = resourcePath . divide ( ' / ' ). cut( - 2 , - 1 );
 return uniqueIdGenerator (componentName) + ' _ ' + uniqueIdGenerator (localName);
};

How to optimize HTML

There are two ways to optimize:

manual: suitable for those who can work with HTML conversion;
using special plugins and services: suitable for all webmasters.

To find non-optimized files, you can use the GTmetrix service.

Analysis of the download speed of the GTmetrix website

Just enter the link in the field and click "Test your site" button. The service will display a list of files that need to be optimized.

To optimize your website on WordPress, you can use plugins:

W3 Total Cache

This is one of the most popular caching plugins; it has over 1 million downloads. It works with shared hosting, VPS, VDS. Using it you can:

improve website performance by ten times;
speed up the web page loading time;
improve server performance;
optimize progressive visualization so that pages can render faster.

Below is an example with the website results before and after applying the plugin.

Effects of loading speed on the rankings site

How to install:

go to the admin panel;
on the left side menu, select the "Plugins" section;
after that select "Add New":

enter "WP Super Cache" in the search bar;

click "Install Now";

activate the plugin. Before activation, you must disable other caching plugins.

How to configure the plugin:

go to the "Settings" plugin to enable caching, and refresh the tab;
in the Settings tab, check "Enable caching", "Compress pages" and select "Refresh".

Other services to compress HTML code

You can also use HTML Compressor to optimize your code. This is an online tool. Paste the existing code into the special field and select the "Compress" button. After a couple of seconds, it will issue a new code.

Code Compression with Daruse HTML Compressor

HTML compressor removes extra lines, tabs, spaces. At the same time, you shouldn't compress the code between the head tags. JS functions are not broken after compression.

Optimization of header files

Optimize the header files. The logic of operation is similar to that described above.

Key recommendations:

minimize the load on JavaScript by removing unnecessary symbols and comments to get a single-line JS file;
Obfuscate the JS code, thereby compressing the source code. It removes unnecessary symbols and makes changes to the code itself; the ShrinkSafe utility is used;
compress the CSS code;
clear html code from junk fragments.

Other parameters that are important to consider during layout

Cross-browser compatibility: the ability of web pages to display correctly in different browsers;
adapted mobile version: Google has been considering this since 2015;
content placement: it is undesirable to hide it under "display: none";
misuse of tags: if tags intercross the behavioral factors will get worse, for example: <strong>, <b>, <em> & <a href>.

Conclusion

HTML-code compression is an important stage of internal website optimization. The easiest way to minimize the code is to use special services and plugins.

Here are the plugins that facilitate minimization for WordPress websites:

There are also off-line tools developed that can optimize code. All you have to do is move it to your website.

By doing some manipulations, you can speed up the loading process, improve behavioral factors and, finally, increase ranking of the promoted resource in the search engine.

This article is a part of Serpstat's Checklist tool

" title = "How to compress HTML code to reach better website loading speed 16261788337108" />

Checklist is a ready-to-do list that helps to keep reporting of the work progress on a specific project. The tool contains templates with an extensive list of project development parameters where you can also add your own items and plans.

Try Checklist now

Speed up your search marketing growth with Serpstat!

Keyword and backlink opportunities, competitors' online strategy, daily rankings and SEO-related issues.

A pack of tools for reducing your time on SEO tasks.

Get free 7-day trial

Rate the article on a five-point scale

The article has already been rated by 3 people on average 5 out of 5

Found an error? Select it and press Ctrl + Enter to tell us

Discover More SEO Tools

Tools for Keywords

Keywords Research Tools – uncover untapped potential in your niche

Serpstat Features

SERP SEO Tool – the ultimate solution for website optimization

Keyword Difficulty Tool

Stay ahead of the competition and dominate your niche with our keywords difficulty tool

Check Page for SEO

On-page SEO checker – identify technical issues, optimize and drive more traffic to your website