Embedded Files
1 - Findings & Impacts
1 - Findings & Impacts
When load times are too slow, outsourcing can help and consists in placing all the CSS styles in .css files and all the JavaScript elements in .js files. It is interesting to outsource all the CSS and JS codes to lighten the HTML source code and load only the core of the document as quickly as possible (instead of favouring the layout).
It is also possible to move CSS and Javascript files. Indeed, JavaScripts files slow down parallel downloads by your browser, thus increasing the loading times. Similarly, CSS files can be requested in "pre-load" in the <head> tag of your document in order to speed up the formatting of the first displays for the user.
2 - Recommendations
2 - Recommendations
Outsource CSS and JavaScript files
Apart from rare JavaScript elements, CSS and JS codes must not be embedded in the HTML code of the page. They have to be outsourced in dedicated files.
Example of an exception: the A/B Tasty tag, which uses a script, should not be outsourced but placed directly at the beginning of the source code, to ensure that the tested page (page B) is displayed right away so that it avoids the display of page A then page B (referred to as the flickering effect).
Request the CSS files in the HEAD tag of the document
In the <head> of the page, use the LINK tag to request external CSS files (do not use @import because in most cases, @import prevents the loading of multiple style sheets in parallel).
Place requests for externalized JavaScript files at the bottom of the HTML document
This request must be the last one, just before closing the BODY tag, to make sure that the core of the document will be displayed before formatting.
For the scripts that must be placed in the HEADER, they have to be placed after the CSS style sheets are requested.
Report abuse