How to Externalize JavaScripts and CSS Files for Faster Downloads
JavaScript is used to add interactivity to an HTML page. Cascading Style Sheets (CSS) are used to create presentational parts of a web page such as colors or layouts. The two can be used in the HTML or removed from the page (externalized). The externalized files are then linked to the page. After the page has downloaded the first time, the JavaScript and CSS files are in the browser cache. All further downloads from your site will be faster, because only the HTML will be downloaded. Here is how to do it.
Other People Are Reading
Things You'll Need
- Text editing software or HTML editing software
- Nothing new is needed to perform this function
Instructions
-
How to Externalize Your CSS
-
1
Instead of saving your CSS as part of the HTML document, save it in a separate file with a .css file extension.
-
2
Store that CSS file in a logical place in your site structure. Some sites have more than one style sheet and store them all in a directory called "css."
-
-
3
Link your HTML page to the CSS file using either a link element or an @import element.
-
4
A link element would be placed in the HTML document head and would look something like this image. The link element gives the location of the css file (the href) in your site. The rel="stylesheet" means that the relationship of this file to your HTML file is that of stylesheet. The type="text/css" means that the linked document is a text file containing CSS rules. The media="screen" means that this stylesheet is intended for screen display. Other media types you might write style rules for include print and handheld.
-
5
An @import style element is also placed in the document head. The @import statement is inside a style element. You provide the url to the stylesheet you want to link to in this way. The media could be screen, print or other media type.
How to Externalize Your JavaScripts
-
6
Instead of saving your JavaScripts as part of the HTML document, save it in a separate file with a .js file extension.
-
7
Store that JavaScript file in a logical place in your site structure. Some sites have more than one script and store them all in a directory called "scripts."
-
8
Link your HTML page to the JavaScript using a script element. The script element is placed in the HTML document head. It provides the location of the source file that contains the script.
-
1
Tips & Warnings
You can use only link elements to link to your stylesheets. Or you can use both link elements and @import statements.
If you just have one stylesheet, a link element is the best way to go.
Use this same method for every one of the HTML pages in your site to link them all to your CSS and JavaScripts to make your site both beautiful and interactive.
