# Outline JavaScript (outline_javascript)

Externalizes large inline JS blocks. The outline_javascript filter: what it does, its risks and the Apache, nginx and IIS directives.

Canonical URL: https://modpagespeed.com/docs/filters/outline_javascript/

- Category: JavaScript
- CoreFilters: No
- OptimizeForBandwidth: No
- Risk: Experimental

`outline_javascript` is the inverse of `inline_javascript`: it moves a large inline `<script>` block out of the HTML into its own JavaScript file, served from a rewritten `_.pagespeed.jo.` URL with a long cache lifetime, and replaces the block with a `<script src>` pointing at it. The generated element is a copy of the original with the `src` added, so attributes such as `id` survive the move. Experimental and not a core filter; enable it by name.

## How it works

Live demo: [outline_javascript](https://modpagespeed.com/examples/outline_javascript/).

### When it helps and when it does not

A block of inline JavaScript is re-sent with every page view, and on pages whose HTML is generated per request those bytes cannot be cached at all. Outlining moves them into a file the browser fetches once and keeps, which is the same trade `outline_css` makes for stylesheets. It loses when the HTML itself is cached, when the block differs from page to page, or on pages visited once, because the first view pays an extra request it did not have before. Execution keeps its place in the document: an outlined script without `defer` or `async` still runs at the element's position, once the file has arrived. But `defer` and `async` on an inline script are ignored by browsers and take effect once the script is external, so a script carrying either runs later once outlined than it did inline. Most sites are better served by keeping script in real files or bundling them there at build time.

### How it decides

Only an inline script (one without `src`) classified as JavaScript is a candidate, and only when its text is at least `JsOutlineMinBytes` (default 3000 bytes). Two kinds are always left inline: a script carrying an `integrity` attribute, because the hash browsers ignore on an inline script would become enforced against the outlined bytes, and an inline module script, because outlining it would move import resolution from the document's base URL to the generated file's URL and change `import.meta.url`. A script the parser cannot hold as one unit, because a flush arrives mid-script or a stray tag sits inside it, is left alone rather than guessed at.

## When to use it

- Not in CoreFilters: it runs only when you enable it by name.
- Risk rating on these docs: **Experimental**.

## Risks

- The outlined script is an extra request on the first view; on single-view pages that costs more than the HTML bytes it saves.

- Markup that expects the `<script>` element's contents to sit in the page, for example a script that reads its own source text, sees a `src` instead.

- Verify with the `X-Mod-Pagespeed` response header and a `?PageSpeedFilters=-outline_javascript` comparison; [Is it working?](https://modpagespeed.com/docs/is-it-working/) has the steps.

## Configuration

Enable it in the module configuration, at server, virtual-host or location scope:

**Apache**

```apache
ModPagespeedEnableFilters outline_javascript
```

**nginx**

```nginx
pagespeed EnableFilters outline_javascript;
```

**IIS (pagespeed.config)**

```text
pagespeed EnableFilters outline_javascript
```

```html
<!-- before: 12 KB of script ride inside every page response -->
<script type="text/javascript" id="large">
  window.app = { ... };
</script>

<!-- after: the script is fetched once and kept in the browser cache -->
<script type="text/javascript" id="large" src="/_.pagespeed.jo.HASH.js"></script>
```

```apache
ModPagespeedEnableFilters outline_javascript
ModPagespeedJsOutlineMinBytes 3000
```

```nginx
pagespeed EnableFilters outline_javascript;
pagespeed JsOutlineMinBytes 3000;
```

Scoping, `ForbidFilters` and the thresholds filters read: [Choosing filters](https://modpagespeed.com/docs/filter-selection/).

## Live example

See the before and after, with the source diff: [outline_javascript example](https://modpagespeed.com/examples/outline_javascript/).

## Frequently asked questions

**What does the outline_javascript filter do?**

`outline_javascript` is the inverse of `inline_javascript`: it moves a large inline `<script>` block out of the HTML into its own JavaScript file, served from a rewritten `_.pagespeed.jo.` URL with a long cache lifetime, and replaces the block with a `<script src>` pointing at it. The generated element is a copy of the original with the `src` added, so attributes such as `id` survive the move. Experimental and not a core filter; enable it by name.

**Is outline_javascript enabled by default?**

No. `outline_javascript` is not in CoreFilters, the default RewriteLevel; it runs only when you enable it by name with `EnableFilters`.

**How do I enable outline_javascript on Apache and nginx?**

Add `ModPagespeedEnableFilters outline_javascript` on Apache or `pagespeed EnableFilters outline_javascript;` on nginx. On IIS, add `pagespeed EnableFilters outline_javascript` to pagespeed.config.

## Related filters

- [`combine_javascript`](https://modpagespeed.com/docs/filters/combine_javascript/): Combine JavaScript
- [`defer_javascript`](https://modpagespeed.com/docs/filters/defer_javascript/): Defer JavaScript
- [`extend_cache_scripts`](https://modpagespeed.com/docs/filters/extend_cache_scripts/): Extend cache for scripts
- [`include_js_source_maps`](https://modpagespeed.com/docs/filters/include_js_source_maps/): Include JS source maps
- [`inline_javascript`](https://modpagespeed.com/docs/filters/inline_javascript/): Inline JavaScript
- [`make_show_ads_async`](https://modpagespeed.com/docs/filters/make_show_ads_async/): Async AdSense
- [`rewrite_javascript_external`](https://modpagespeed.com/docs/filters/rewrite_javascript_external/): Minify external JavaScript
- [`rewrite_javascript_inline`](https://modpagespeed.com/docs/filters/rewrite_javascript_inline/): Minify inline JavaScript

This page is drawn from the [outline_javascript entry on JavaScript filters](https://modpagespeed.com/docs/javascript-filters/#outline_javascript). Every filter in one table: [PageSpeed filters](https://modpagespeed.com/docs/filters/).