Externalize CSS files and JavaScript


Ensure that CSS files and JavaScript code are separate from the page’s HTML code, with the exception of any configuration variables for JavaScript objects.

If you include CSS or JavaScript code in the body of the HTML file, and it is used for several pages (or even the whole website), then the code must be sent for each page requested by the user, therefore increasing the volume of data sent.

However, if the CSS and JavaScript code are in their own separate files, the browser can avoid requesting them again by storing them in its local cache.

In the HTML code, instead of:

<style type=\\"text/css\\" media=\\"screen\\">
    p { color: #333, margin: 2px 0 }
/* All the website's CSS declarations */


<link href=\\"css/styles.css\\" rel=\\"stylesheet\\">
This best practice should only be applied if it is coherent with your project's specifications.
Under CC-By-NX-SA license