How to Use 'HTML' Application?

Modified on Tue, 6 May at 2:56 PM

HTML is the first thing that is downloaded and executed by the browser when a web page is visited. It also orchestrates the loading priority of a large proportion of resources (CSS, images, JS, fonts).

The HTML application lets you intervene on the fly on HTML files to optimise their loading speed. This application provides you with functions for minification, dynamic injection of HTML code and removal of incorrectly used loading tags (preconnect, prefetch, preload and DNS prefetch).

Why is it important to optimise your HTML files?

HTML files play a crucial role in the performance of a web page. They define the structure and content of the page, and can have a significant impact on loading time and user experience.

Fasterize allows you to automatically optimise each of your HTML files using advanced techniques such as the use of Tag Managers, HTML file minification (reducing spaces, line breaks and comments) and the removal of unnecessary tags, which can considerably reduce the size of HTML files and speed up the loading of your web pages.

This improves the user experience for your visitors.

How do I use the ‘HTML’ application?

Tag Manager

Fasterize's Tag Manager is a tool for inserting code into the html of your page. It allows you to add CSS, HTML and Javascript tags in three places in the DOM

Opening head tag

This feature allows you to inject code into the head of the page, just after the opening <head> tag.

Have you noticed that your site doesn't have a ‘meta viewport’ tag, which is causing display problems on mobile devices?  

This is the ideal place to configure one, as this type of tag should be declared as high up on the page as possible.

Closing head tag

This feature allows you to inject code into the head of the page, just before the </head> closing tag.

This is generally where inline CSS is inserted to correct any CLS problems.

Closing body tag

This feature allows HTML code to be injected just before the </body> tag is closed.

It is often used to load scripts that are not necessary for the initial rendering of the page.

Minify HTML

Applying minification to an html file reduces its size, making it faster to download. This involves removing unnecessary or redundant data from the HTML code without affecting the browser's processing of the resource - for example, removing comments or unused code, using shorter variable and function names, etc.

The option to keep comments in the HTML code helps to maintain the readability of the code, makes it easier to understand its structure and simplifies the debugging process for developers.

Tag Removal (Removal of loading tags)

Loading tags such as <link rel=‘preconnect’>, <link rel=‘prefetch’> and <link rel=‘preload’> are used to prioritise the loading of resources. But sometimes they are used in a non-optimised way. For example, preloading JS scripts that are not necessary for rendering the page slows down page loading.

With Tag Removal, Fasterize lets you remove these loading tags.

Note that other Fasterize applications allow you to prioritise the loading of the right resources.

Webperf advantage

Optimising HTML files improves web performance by reducing page load times, which helps to improve TTFB (Time To First Byte) and, in turn, all load speed metrics.

With this tool, Fasterize goes even further by offering the possibility of overloading CSS and thus guaranteeing visual stability by reducing CLS (Cumulative Layout Shift).