How to manage external JavaScript and CSS

Many of these performance rules refer to how external components are managed. However, before these considerations a basic question should be asked

Should the JavaScript code and CSS styles be contained in external files, or embedded in the page itself?

Using external files generally results in a fast loading of the document, as the JavaScript code and CSS files are cached in the browser. The JavaScript and CSS codes that are embedded in the HTML document are downloaded each time the HTML document is called. This reduces the number of HTTP requests, but increases the size of the HTML document. On the other hand, if the JavaScript and CSS code are in external files cached by the browser, the size of the HTML document is reduced without increasing the number of HTTP calls.

The key factor, then, is the frequency with which the external JavaScript and CSS file are cached in relation to the number of HTML documents called. This factor, although difficult to quantify, can be measured using various. If users on your site have multiple pageviews per session and many of your pages will reuse scripts and stylesheets, there is a greater benefit from cached external files.

Many websites get caught in the middle of these parameters. For these sites, the best solution is generally to develop the JavaScript and CSS code in external files. The only exception where embed code is recommended is on home pages. Home pages that have few (if not just one) visits per session may find that embedding the JavaScript and CSS code results in a faster response.

For home pages that are commonly the first page viewed, embed as a HTTP request reduction technique should be leveraged, as well as the benefit gained by caching external files. One of these techniques is to embed javascript and CSS into the home page, except dynamically download external files after the page has finished loading. Pages referring to external files should already be in the browser cache

Date update on 2020-11-13. Date published on 2020-11-13. Category: Computer class Author: Oscar olg Fuente: tecnologia