This site uses cookies and other tracking technologies to make possible your usage of the website, assist with navigation and your ability to provide feedback, analyse your use of our products and services, assist with our promotional and marketing efforts, and provide better user experience.

By using the website, you agree to our Privacy policy

Accept and continue

Report a bug

Cancel
131
How-to 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:
1
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>
2
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.
3
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"/>
4
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.
5
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":
Add Plugin in WordPress
  • enter "WP Super Cache" in the search bar;
WP Super Cache Plugin for WordPress
  • click "Install Now";
Install WP Super Cache Plugin
  • 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".
Configure WP Super Cache Plugin

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
Checklist at Serpstat
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

Learn how to get the most out of Serpstat

Want to get a personal demo, trial period or bunch of successful use cases?

Send a request and our expert will contact you ;)

Rate the article on a five-point scale

The article has already been rated by 0 people on average out of 5
Found an error? Select it and press Ctrl + Enter to tell us

Share this article with your friends

Sign In Free Sign Up

You’ve reached your query limit.

Or email
Forgot password?
Or email
Back To Login

Don’t worry! Just fill in your email and we’ll send over your password.

Are you sure?

Awesome!

To complete your registration you need to enter your phone number

Back

We sent confirmation code to your phone number

Your phone Resend code Queries left

Something went wrong.

Contact our support team
Or confirm the registration using the Telegram bot Follow this link
Please pick the project to work on

Personal demonstration

Serpstat is all about saving time, and we want to save yours! One of our specialists will contact you and discuss options going forward.

These may include a personal demonstration, a trial period, comprehensive training articles & webinar recordings, and custom advice from a Serpstat specialist. It is our goal to make you feel comfortable while using Serpstat.

Name

Email

Phone

We are glad of your comment
Upgrade your plan

Upgrade your plan

Export is not available for your account. Please upgrade to Lite or higher to get access to the tool. Learn more

Sign Up Free

Спасибо, мы с вами свяжемся в ближайшее время

Invite
View Editing

E-mail
Message
Optional
E-mail
Message
Optional

You have run out of limits

You have reached the limit for the number of created projects. You cannot create new projects unless you increase the limits or delete existing projects.

I want more limits