How invalid HTML elements impact web performance

When it comes to optimizing website speed, even the most experienced professionals can encounter surprises. A case in point is a recent issue I stumbled upon during a website audit. It's a perfect example of how seemingly minor details can have a significant impact on page speed, a crucial factor in user experience and SEO performance.

The pagespeed issue and cause

During the audit, Webpagetest was one of the tools I used. A screenshot of the waterfall can be found below:

And while doing so, I observed oddities:

1. Complete HTML download in a single batch
   The HTML was fully downloaded in one chunk, indicated by a dark blue color in the waterfall chart.
2. Minimal initial HTML processing
   Initially, the browser spent little time processing the HTML, particularly the section.
3. Delayed file downloads
   Early in the process, only a few files were downloaded (with Google Fonts download being stalled).
4. Late JavaScript loading
   JavaScript resources were loaded much later than expected.
5. Inline JavaScript snippet detected late
   Even the inline VWO JavaScript snippet for A/B testing, located in a clean section, was detected late.
6. Negative impact on Core Web Vitals:
   This led to a regression in First Contentful Paint (FCP) and potentially other Core Web Vitals.

How I discovery the issue

Faced with such unexpected behavior, the first step was to check for chunked HTML, which turned out not to be the issue. We can tell as the all HTML was downloaded in a single chunk (step 1).

The breakthrough came from using two tools simultaneously: the WebPageTest waterfall chart (preferred over DevTools for this purpose) and the webbrowser's view-source to correlate the waterfall chart with the source code.

Identifying the cause

The root cause was surprising: an input element in the section. However, this issue isn't limited to input elements; it can occur with any HTML element typically belonging in the body, but placed in the head, such as:

• img
• input
• iframe

This is problematic because when the browser encounters an element that should be in the body, it assumes it has reached the body and stops processing the head. This can lead to unexpected delays and behavior, especially if such elements are placed high in the source code, preceding other important tasks.

For example, if a render blocking script is placed after an invalid HTML element in the head, it will be one of the 'victims' here.

Actionable takeaways

1. Audit your section
   Regularly review the of your HTML to ensure no elements are mistakenly placed there.
2. Understand Third-Party scripts
   Be wary of scripts from third parties like Sentry or Laravel CSRF code snippets or plugins that may force embedding unique hashes using hidden input elements, potentially in the .
3. Be careful with Copy-Paste
   Always double-check your after copying and pasting code to prevent these issues.
4. Utilize diagnostic tools
   Familiarize yourself with tools like WebPageTest and the view-source function for effective troubleshooting.
5. Educate your team
   Ensure that your in-house development and SEO teams are aware of these subtleties in web performance optimization.

Conclusion

Web performance optimization can often feel like a forensic investigation. It requires attention to detail, understanding of how browsers interpret code, and an awareness of how even the smallest elements can impact overall performance.

By staying vigilant and employing the right diagnostic tools, you can uncover and address these hidden issues, leading to a faster, more efficient website and clearing the path for additional optimizations.

I also wrote about this on LinkedIn.