Make JavaScript and CSS external

Updated on Mar 13, 2019

Method Type:User
(this means that the method is handled by the user if needed)

Status: Must be applied by the user.

Introduction:

JavaScript is a dynamic, high level programming language. It is one of the three essential technologies used for producing content for the World Wide Web. A JavaScript file is used mainly for running JavaScript code to execute instructions.

Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document. Its main purpose is to separate the document's content elements like layout, fonts and colors.

How external JavaScript and CSS works:

When a HTML document is requested via HTTP all of the inline JavaScript and CSS in that document have to be downloaded. This reduces the amount of HTTP requests but increases the size of the document. To avoid that and to make caching more valuable the JavaScript and CSS can be set as external files so that they can be cached by the browser. This way both the HTTP requests and document size are reduced. However when making a page that will be viewed only once per session (like a home page) the raw speed of inline JS and CSS is 30-40% greater compared with fetching external resources.

External JavaScript and CSS provide the following Advantages:

  • Increased load speed when using the same JS and CSS in multiple documents

External JavaScript and CSS provide the following Disadvantages:

  • Slower load speed when using .JS and CSS for a single load per session/one document
On this page...

    Optimized SSD Web Hosting

    • Free Domain Transfer
    • Google PageSpeed Enabled
    • 24/7 Technical Support
    • Fast SSD Storage
    • Hack-free Protection
    • Free Cloudflare CDN
    • Immediate Activation
    View More