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.
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.
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.
