Internal JavaScript (also known as inline or embedded JS) is code that is placed directly within the HTML of a webpage, usually inside a `<script>` tag. While this method can be a quick way to add interactivity to a single page, it is generally considered a poor practice for performance and SEO. The vast majority of your site’s JavaScript should be in external .js files to take advantage of browser caching.
The main issue with internal JavaScript is that it increases the size of the HTML document and cannot be cached. This means the code has to be re-downloaded every single time a user visits a new page, slowing down the site and wasting bandwidth. For a broader look at how resources affect your site, see our guide on the resources category.
When to Use Internal JavaScript (and When to Avoid It)
While external files are the standard, there are a few niche cases where internal JS is acceptable:
- Very Small, Page-Specific Scripts: If a tiny script is only used on one page (e.g., a single line of code for a specific interaction), embedding it can save an HTTP request.
- Scripts Modifying the Initial Render: If a script needs to run as early as possible to modify the page before it fully loads, it may need to be embedded in the `<head>`.
For a deep dive into the different ways to load scripts, this guide from MDN Web Docs is an excellent resource.
The SEO Impact of Overusing Internal JavaScript
Relying heavily on internal JavaScript 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. |
| Render-Blocking | By default, JavaScript blocks the parsing of HTML. Large internal scripts can delay the rendering of your page, harming Core Web Vitals. |
For more on how to optimize your site’s code, this guide from chrome on minifying JavaScript is a great place to start.
Frequently Asked Questions
Is internal JavaScript always bad for SEO?
Not always, but it should be used sparingly. For very small scripts that are unique to a single page and need to execute early, it can be acceptable. However, for any script that is used on multiple pages or is large in size, an external file is far more efficient for performance and maintainability.
What does it mean to ‘defer’ or ‘async’ a script?
These are attributes you can add to an external `<script>` tag. `async` allows the script to be downloaded in the background without blocking the HTML from rendering. `defer` does the same but also guarantees that the scripts will execute in the order they appear in the HTML. Both are powerful techniques for improving page load speed.
How can I find pages on my site that use internal JavaScript?
You can use a website crawler like Creeper to scan your site. Most crawlers can be configured to report on the presence of `<script>` tags that contain code (rather than a `src` attribute), allowing you to identify where internal JavaScript is being used.
Is your JavaScript slowing you down? Start your Creeper audit today to analyze your site’s resource implementation.