How big should a file be before I don't inline it in html?

Question

Google recommends optimising web pages by inlining small CSS & javascript.

Ref: https://developers.google.com/speed/pagespeed/service/InlineSmallResources

But at what point should we stop inlining, is there a recommended maximum number of characters that a file should be before it is better to reference instead of inline the file?

Answer 1

Obviously this isn't a complete list, but I think this is a decent set of guidelines.

Situations when inlining might be beneficial:

• Styles or scripts are only used on that page
• Single page application
• Styles are determined to be "critical", and will make the page appear as if it is loading faster. See this article: http://css-tricks.com/authoring-critical-fold-css/

Situations when inlining might be harmful:

• Styles or scripts are used on multiple pages - if inlined on each page, they will not be cached and need to be downloaded again on each page