CSS styles and JavaScript scripts should be placed in external files.

Should CSS styles and JavaScript scripts be placed in external files?
Or put them in the page itself?
How to deal with these problems is a reflection on some performance rules.

In practical applications, using external files can increase the page speed, because both CSS styles and JavaScript script files can generate cache on the client. The built-in CSS styles and JavaScript scripts in the HTML document will be re-downloaded with the HTML document in each request. This reduces the number of HTTP requests, but increases the size of HTML documents. On the other hand, if the CSS style and JavaScript script in the external file are cached by the client, the HTML document size can be reduced without increasing the number of HTTP requests.

The key issue is that the external CSS style and the cache frequency of JavaScript script files are related to the number of requests to HTML documents. Although it is difficult, there are still some indicators that can be measured. If a user browses multiple pages on your website in a session, and these pages repeatedly use the same script and style sheet, caching external files will bring more benefits.

Many websites do not pay attention to establishing these indicators. For these websites, the best way to be determined is to reference CSS styles and JavaScript scripts as external files. The home page is an exception to built-in code. The home page has a small amount of page views (maybe only once) in one session. You can find that the built-in CSS style and JavaScript script will speed up the response time for end users. In addition, the home page is generally the first page accessed by the user. The built-in CSS style and JavaScript script can increase the opening speed.

For a homepage with large page views, there is a technology that balances the benefits of reducing HTTP requests brought about by built-in code and caching by using external files. One of them is built-in CSS styles and JavaScript scripts on the home page, but after the page is downloaded, external files are dynamically downloaded. When these files are used on the child pages, they have been cached on the client.