What is Inline CSS and JS?
<head> tag or the
The following example shows what an HTML file might resemble when inline CSS and JS are added. The CSS is enclosed within
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.
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.
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.