Inline Small JavaScript and CSS

  1. Home
  2. Computing
  3. Web Application

Introduction

Inline CSS and Javascript both refer to simply including the CSS and JS within your HTML file. Inline small CSS should be included within the <head> tags of an HTML file while inline small Javascript can be included either within the <head> tag or the <body> tag. In most cases, using an external file to call your CSS and Javascript is considered best practice. However, page speed improvements can be achieved by including small CSS and Javascript snippets within your HTML file in order to avoid additional round trips.

Inline JS and CSS

Inline small CSS and inline small Javascript are both recommendations provided by certain site speed test tools. This recommendation is quite straightforward to implement, however being careful in not going overboard by inlining too much CSS and JS is important.

Inline JavaScript and CSS Example

The following example shows what an HTML file might resemble when inline CSS and JS are added. The CSS is enclosed within <style> tags and the Javascript within <script> tags.

<html>
<head>
<title>Inline Small CSS & JS Example</title>
 
## Begin Inline CSS
<style>
body{background: #f5f5f5;}
a{color: #24890d; text-decoration: none;}
h1{font-size: 26px;line-height: 1.3846153846;}
</style>
## End Inline CSS
 
</head>
<body>
......
 
## Begin Inline Javascript
<script>
Javascript code...
</script>
## End Inline Javascript
 
</body>
</html>

If you have multiple small CSS or Javascript files, you can inline the code from each with the HTML file. Just be aware of how large your HTML file becomes and be careful not to over do it.

Drawbacks of Inlining Small Javascript and CSS

There are both drawbacks and benefits to taking advantage of inlining small CSS and Javascript. According to Google,

There is a tradeoff here between requests and cacheability: including the resources directly in the HTML avoids making an additional request to the external resource, but if the resource file is large (and doesn’t change often), it may be better to keep it separate from the HTML so that it can be cached by the browser.

Google

The primary drawback of this recommendation is that the CSS and JS code will not be cached. If your code is contained within an HTML file then the browser will not be able to store it in cache, thus requiring it to fetch the full HTML file each time. If your HTML file is bloated with inline CSS and JS, then this may be more detrimental than simply retrieving an external CSS or JS file.

Similarly, HTML documents are, in most cases, not cached by intermediary services such as proxies or CDNs. Unless you are performing a full-site acceleration, your HTML is retrieved from the origin server each time. Therefore, being cautious with the amount of inline CSS and JS that is added to your HTML document is important.

Benefits of Inlining Small Javascript and CSS

To inline small CSS and Javascript provides the benefit of reducing the amount of round trips required. In the event that you have one or multiple files which don’t contain much CSS or JS, including them within your HTML document can result in a more efficient loading time. This is also a good method to use if you want to reduce the latency that blocking CSS causes, thus optimizing the critical path.

As previously mentioned, this method should be used carefully and not over-exaggerated. Depending on the size of the CSS and JS code, it may be more beneficial for the user to retrieve a cached copy of the external file rather than a new copy of the HTML document each time. Alternatively, if inlining code is not an option, combining each small CSS and JS file into one external file each will also help reduce the amount of round trips and thus improve site speed.

Latest Post