A website has a frontend and backend. The front end is where the text is displayed on a computer screen for users to read. In contrast, the HTML code is written and stored in the back end. So, HTML is used to structure the content of a web page, where the content can be text, but also images or other graphics.
That said, the Text to HTML ratio is the total amount of text compared with the overall size of a web page. Text to HTML ratio is sometimes also referred to as text to code ratio, or code to text ratio.
Why do we need to consider the text to HTML ratio?
The first reason why a good Text to HTML ratio is important is that it helps browsers assess if a web page is “bloated” or not., i.e. if it uses too much code. Excess code can decrease page loading speed, and page speed is a ranking factor for Google.
So, naturally, slow loading speed may lead to a lower Google rank, while those web pages that load faster have a likelihood of ranking higher in the search results. In other words, if your website is slow, competitor websites with better page speed will be prioritized on the Search Engine Results Page (SERP).
More importantly, slow loading pages lead to bad user experience. When users land on your web page, they expect the content to load within a few seconds. If not, they are bound to go right back to Google and look perhaps at the next result in the SERP. And, they will most likely remember this bad experience, and avoid your site the next time they see it.
So, not only that you increase your bounce rate and lose a visitor possibly forever but you will also get more bad points from Google starting in 2021 when they will introduce a new metric. This will be known as the page experience, which will officially be a ranking factor based on UX specifically.
What is the ideal text to HTML ratio?
One should balance the HTML code and text on a web page and aim to have a high text to HTML ratio. The definitive text to HTML ratio should be between 25% to 70%. One good practice is to keep the size of your HTML code to a maximum of 300KB. If you write clean code, you do not have to worry yourself over the text to HTML ratio. Also, to ensure good text to HTML ratio use CSS to structure and format elements and avoid using tables.
How do you calculate text to HTML ratio?
To calculate text to HTML ratio, take the size of the text on the web page and divide it by the total size of the whole web page, then multiply the results by 100 to convert them into a percentage. For instance, if the text size is 85kb, HTML code 120kb then the total web page is 205kb. So, dividing the text size by the total page size, we get the text to HTML ratio of approx. 42%.
Text to HTML ratio = (Text Size / Total Web Page Size) * 100
It is good to note that you do not have to do the text to ratio calculation manually. There are tools, like app.wiredelta.com on the internet that can calculate the text to HTML ratio quickly and for free. All you need to do is type in or paste the URL of your web page and create your report.
Text to HTML ratio may affect your SEO indirectly for now. But come 2021 when Google introduces the new web page experience as a ranking factor it will directly affect your website through metrics like page loading speed, user experience, and bounce rate.
Moreover, a good Text to HTML ratio will help you maintain a healthy relationship between your website and your users as well as your website and search engines like Google, and boost your SEO strategy in the long run.