Internal CSS (also known as embedded CSS) is a method of adding styling rules directly to the `<head>` of an HTML document using a `<style>` tag. While this approach can be useful for applying unique styles to a single page, it is generally considered a poor practice for modern web development and can have a negative impact on your site’s performance and SEO when used improperly.
The primary drawback of internal CSS is that it cannot be cached by the browser. This means that for every page a user visits, the entire block of CSS must be re-downloaded, increasing the overall page weight and slowing down navigation. For a broader look at how resources affect your site, see our guide on the resources category.
When to Use Internal CSS (and When to Avoid It)
The vast majority of your site’s styling should be in external CSS files. However, there are a few specific scenarios where internal CSS is acceptable:
- Single-Use Styles: If you have a unique landing page with styles that are not used anywhere else on your site, embedding them can save an HTTP request.
- Critical CSS: As an advanced performance technique, the absolute minimum CSS needed to render the top portion of the page can be embedded to speed up the initial render.
For a deep dive into the different ways to implement CSS, this guide from MDN Web Docs is an excellent resource.
The SEO Impact of Overusing Internal CSS
Relying heavily on internal CSS across your site is a technical anti-pattern that can harm your SEO in several ways:
| Issue | SEO Impact |
|---|---|
| No Caching | Slower page load times for repeat visitors, which can increase bounce rates and negatively impact user experience signals. |
| Increased HTML Size | Bloats the size of every HTML document, which can lead to slower downloads and, in extreme cases, put you at risk of exceeding Google’s 15MB HTML parsing limit. |
| Maintenance Challenges | Makes it difficult to maintain a consistent design across your site, which can lead to a fragmented user experience. |
For more on how to optimize your site’s code, this guide from web.dev on minifying CSS is a great place to start.
Frequently Asked Questions
Is internal CSS always bad for SEO?
Not always, but usually. For very small, specific styles that only apply to a single page, it can be acceptable. However, for any styles that are used across multiple pages, an external stylesheet is far more efficient for both performance and maintenance.
What about ‘critical CSS’? Is that internal CSS?
Yes, ‘critical CSS’ is a specific and advanced performance technique where the absolute minimum CSS required to render the above-the-fold content is placed internally in a `<style>` block. This is a deliberate exception to the rule and is done to improve the First Contentful Paint (FCP) metric. The rest of the site’s CSS is still loaded via an external file.
How can I find pages on my site that use internal CSS?
You can use a website crawler like Creeper to scan your site. Most crawlers can be configured to report on the presence of `<style>` blocks within the HTML of your pages, allowing you to identify where internal CSS is being used.
Is your CSS slowing you down? Start your Creeper audit today to analyze your site’s resource implementation.