Are static HTML sites really free from Core Web Vitals issues?

Why is Google making this clarification about static HTML sites?

There is a persistent myth in the SEO community: static HTML sites would be inherently performant and free of Core Web Vitals issues. This belief stems from the fact that JavaScript is often singled out as the main culprit for poor web performance.

Google is countering this simplification. Martin Splitt emphasizes that a site can be technically simple—pure HTML without heavy frameworks—and still display catastrophic CWV metrics. Technical complexity is not the only determining factor.

What is the main problem identified on these sites?

The recurring culprit? Unspecified images that load without the browser knowing their final size in advance. When an image 800px in height suddenly appears in the viewport after the initial rendering, all the content below shifts violently.

This phenomenon generates Cumulative Layout Shift (CLS), one of the three Core Web Vitals metrics. And contrary to what one might think, the issue occurs even if the image loads quickly—it's the visual shift that is problematic, not the loading speed itself.

How does this specifically concern SEO practitioners?

For SEO consultants, this statement serves as a reminder that a performance audit cannot be limited to analyzing the weight of JavaScript or API calls. A basic WordPress site with a lightweight theme can very well fail on CWV due to poorly integrated photos.

This also means that your clients who own showcase sites—often convinced that their "simple HTML site" is optimal—may have issues that are invisible to them but penalizing for SEO. The perception of technical simplicity guarantees nothing.

• Core Web Vitals affect all types of sites, regardless of their tech stack
• CLS caused by images is a common problem even on static HTML sites
• The absence of width and height attributes on <img> tags is the main risk factor
• A technically simple site can display poor performance if the fundamentals are not respected
• The performance audit must systematically include an image check, not just JavaScript

Is this statement consistent with field observations?

Absolutely. In the field, it is regularly observed that sites developed "the old-fashioned way"—basic HTML/CSS, few scripts—display disastrous CLS scores. The reflex of many developers is still to integrate images without specifying their dimensions, relying on the browser to "adapt".

What Splitt does not explicitly say but is worth noting: the problem worsens with poorly implemented responsive design. An image that displays at 100% width of the container without a defined height will create a different layout shift on mobile and desktop, making the audit more complex.

What nuances should be added to this statement?

The first nuance: while HTML sites can have CWV issues, they are statistically more performant than poorly optimized SPAs. Google’s statement should not be interpreted as "all sites are created equal". A poorly coded static site is generally faster than an overloaded React application.

The second point: Google mentions "oversized images" but does not specify the threshold. [To be verified] At what dimension does an image become problematic? Is a hero image 2000px wide acceptable if size attributes are present? The statement remains vague on the quantitative criteria.

In what cases does this rule apply most often?

The most vulnerable sites are those that integrate editorial content with many visuals: blogs, news sites, creative portfolios. Authors often add images via CMS without regard for technical aspects, and templates do not always enforce best practices.

In contrast, e-commerce sites typically have asset management systems that standardize images, even on simple stacks. The problem is less systematic there, although product carousels can generate CLS if they do not reserve space correctly.

What should be done on a static HTML site?

The first action: systematically audit all <img> tags on the site to check for the presence of width and height attributes. A simple crawl with Screaming Frog or Sitebulb can extract images lacking these attributes.

Next, integrate these dimensions into the HTML, even if the CSS applies max-width: 100%. The browser uses the width/height ratio to reserve the necessary space before the image fully loads, thereby preventing layout shift.

For sites with a lot of existing content, it may be wise to automate this correction through a script that calculates the actual dimensions of images and injects the missing attributes. On WordPress, plugins like Perfmatters can help, but manual intervention is often preferable for complete control.

What mistakes should be avoided when optimizing images?

A common error: setting arbitrary dimensions that do not match the actual ratio of the image. If you specify width="800" height="400" for an image that is actually 800x600, the browser will reserve the wrong space, and you will still experience CLS during loading.

Another trap: applying lazy loading to above the fold images. Visually immediate images should never be lazy-loaded—this delays their display and generates CLS. Reserve this technique for images located further down the page.

Finally, do not overlook CSS background images. They do not benefit from HTML width/height attributes and can cause CLS if the container does not have a defined height. Use techniques like aspect-ratio or calculated padding-bottom to reserve space.

How can I verify that my site follows best practices?

Use PageSpeed Insights and specifically look at the "Avoid large layout shifts" section. The tool identifies elements responsible for CLS and often points out images without dimensions as culprits.

Additionally, manually test on a throttled 3G connection. CLS is often invisible on fast connections because images load before you scroll. By artificially slowing down the connection, you’ll see exactly what your mobile users experience.

For ongoing monitoring, set up Search Console alerts for CWV issues. Google will notify you if any pages drop into the red zone, allowing you to intervene quickly before it impacts rankings.

• Always add width and height attributes to all <img> tags
• Check that specified dimensions match the actual ratio of the image
• Never apply lazy loading to above-the-fold images
• Audit CSS background images and reserve space using aspect-ratio or padding-bottom
• Regularly test CWV with PageSpeed Insights and on a throttled connection
• Set up Search Console alerts to detect performance regressions