Typical Results in the Field
In analyzing the tradeoffs between inlining versus using external files, the key is the frequency with which external JavaScript and CSS components are cached relative to the number of HTML documents requested. In the previous section, I described three metrics (page views, empty cache vs. primed cache, and component reuse) that can help you determine the best option. The right answer for any specific web site depends on these metrics.
Many web sites fall in the middle of these metrics. They get 5â15 page views per user per month, with 2â5 page views per user per session. Empty cache visits are in the same range as Yahoo!: 40â60% of unique users per day have a primed cache, and 75â85% of page views per day are performed with a primed cache. There's a fair amount of JavaScript and CSS reuse across pages, resulting in a handful of files that cover every major page type.
For sites that have these metrics, the best solution is generally
to deploy the JavaScript and CSS as external files. This is demonstrated
by the example where the external components can be cached by the
browser. Loading this page repeatedly and comparing the results to those
of the first example, "Inlined JS and CSS," shows that using external
files with a far future Expires
header is the fastest approach.
- Cacheable External JS and CSS
Get High Performance Web Sites now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
