Perf WP

  • Home
  • Speed

How to Inline JavaScript

Updated on April 9, 2021 by sue

What is inlined javascript?

  • When javascript is in an html file between script tags it is inlined.
  • In-lining JS simply means putting your javascript into your HTML file instead of an external JS file.

Why inline JavaScript?

The benefit this provides is the reduction of files the browser has to download prior to displaying your web page.

Often your webpages will be calling several JavaScript files externally (example: widget.js).

The thing is, most of those files are tiny. They only have a few lines of code. If you find you have such files they should likely be inlined into your HTML to save the external file calls.

How to inline JavaScript

Basically you just copy the contents of your external JS file and paste them between script tags into your HTML.

It looks like this:


<script>
YOUR JAVASCRIPT HERE
</script>

What does this do?

Putting your JS into your HTML will save the web browser a round trip to the server, since you are no longer asking for a seperate external file for the browser to load to see and execute your JS.

Tools

To examine how JavaScript is being used on your pages, this site has two online tools.

  • JavaScript usage tool
  • Page speed tool

Related Posts

  • How to Combine External JavaScript

    Combining JavaScript files Javascript files are very often found in several external files. There is…

  • How to Defer JavaScript

    How to defer loading of javascript Truly deferring javascript means loading or parsing of that…

  • How to Inline CSS

    What is inline CSS? Inline CSS refers to CSS found in an HTML file. It…

  • Eliminate Render Blocking JavaScript

    What is render blocking? Render means loading, so if something is render-blocking, it means that…

Filed Under: PageSpeed

Disclosure: There are affiliate links in this post, at no additional cost to you, If you purchase something through one of my links, I’ll earn a commission. Here’s my full affiliate disclosure.