How an input element in the head can slow down your website

Summary: When it comes to optimizing website performance, we usually focus on lowering JavaScript and optimizing CSS. But there are other, less well-known factors that can have a big effect on how fast a page loads and user experience. In this article, we'll talk about an interesting thing that was found during a pagespeed audit for a Dutch charity site: a misplaced element in the that caused unexpected behavior and slowed down the loading of important resources. We'll talk more about what this means and how it affects the user experience and the Core Web Vitals.

  • Published on
  • Reading time ± 2 minutes
How an input element in the head can slow down your website

The input element in the head

An input element was found in the head part of the website's HTML code during a pagespeed audit. The thing that surprised us was that it was right before the stylesheets and preloads. At first look, this might seem harmless, but it actually causes the browser's rendering process to act in a strange way.

HTML head input element

Auto-Closing the head and delayed resource discovery

According to HTML standards, the head section should only have certain elements, like title, meta, and link. By adding an input element, which is not a valid head element, the browser thinks it has hit the end of the head section and automatically closes it. So, the time it takes to find and process other resources and preloads listed in the head part could be unexpectedly pushed back.

Waterfall Analysis and the effect on UX

Looking at the waterfall chart makes it clear what effect this misplaced input part had. The browser gets the first bit of HTML, which is dark blue (Time to First Byte, or TTFB), but it waits to get any other resources, even though stylesheets and preloads are near the top of the source code.

input element in head

To give users the best experience and get them involved right away, it's important not to put things in the head area that doesn't belong there. This simple step can stop the browser from closing the head too soon and make sure that important resources are found and processed on time.

How to avoid such situation?

This head problem is not very common, but it has been seen in Single Page Applications (SPAs) and Progressive Web Applications (PWAs) that insert JSON page data using an input type=hidden element. Also, websites that use Sentry to check for errors may insert Sentry-related information, like DNS, in their source code by accident by using an input type=hidden element.

Keep your head clean

Want to keep your clean? Try Capo.js by Rick Viscomi!

Performance and SEO experts may point out that the input element in the head isn't the only thing that could go wrong. It's important to deal with other possible problems as well. For example, the site that was stated still uses HTTP/1, which can slow down performance overall. By giving attention to these kinds of details, you can improve your website's performance, make the user experience better, and make sure that your Core Web Vitals metrics are at their best. Remember that it's the small things that can make a big difference in how easy it is for your users to browse your site.

Share blog post