JavaScript and CSS Inlining

Small external JavaScript and CSS resources may be automatically inlined into the main HTML document. This reduces the number of HTTP requests, which in turn reduces latency for the client.

For JavaScript and CSS resources to be included into the HTML content, they must be present in the FIT Server’s local cache or the local filesystem (e.g. under fit://site/public/) and, for the HTTP cache, may not make use of Vary headers. For JavaScript and CSS resources to be saved into the FIT Server’s cache one of two methods can be used. The host from which the files are loaded has to be configured in the sources.xml with cache enabled.

Only files with a file size smaller than 2KB (before minifiying) are automatically inlined. However, you may force or prevent inlining on a per element basis.

Configuration

Inlining of JavaScript and CSS can be configured independently.

Enable inlining of JavaScript files by enabling the setting in conf/config.xml:

<config>
  <acceleration>
    <script-inlining [ force-explicit="true" ] />
  </acceleration>
</config>

Enable inlining of CSS files by enabling the setting in conf/config.xml:

<config>
  <acceleration>
    <style-inlining [ force-explicit="true" ] />
  </acceleration>
</config>

Automatic Inlining

By default FIT inlines the resources if they are smaller than 2KB. However, scripts with defer or aysnc attributes set are not inlined by default.

In your HTML code you can force or prevent inlining of script or style files. This overrides the automatic inlining by size. To force or prevent inlining of specific files, use the ai-inline attribute. Possible values are true to always force inlining, false to prevent inlining, auto to decide inlining based on the file size. The default is auto.

Note: If the script or style content contains </, it is never going to be inlined, because it could lead to parsing problems in the client.

Considerations

Inlined content cannot be cached separately in the browser. If you have small script or style files that are used in many or all of your pages, the data has to be loaded again for every page view. You should consider moving these files to a shared, cached, external resource, to reduce HTTP requests without sacrificing resource sharing.

Even for files larger than 2KB inlining can speed up page load. If your site uses resources that do only appear once on one page, you may want to force inlining for larger files.

Bypassing HTTP 2 optimization

The optimization at this time is mostly an HTTP 1.1 transport optimization. Style and script inlining will automatically be deactivated when the Delivery Context Property request/http2 is set, because the measures taken can be counterproductive in HTTP 2. To force inlining of resources with ai-inline="true" set even if request/http2 is true, use the force-explicit="true" attribute for the respective inlining option. Please note that this is neither encouraged nor recommended!

Examples

<html>
  <head>
    <!-- CSS -->

    <!-- small local CSS file is automatically inlined -->
    <link href="fit://site/public/css/small_local.css" rel="stylesheet" type="text/css">
    <!-- big local CSS file isn't automatically inlined -->
    <link href="fit://site/public/css/big_local.css" rel="stylesheet" type="text/css">

    <!-- external CSS file isn't automatically inlined because it is not cached -->
    <link href="http://example.com/css/small.css" rel="stylesheet" type="text/css">

    <!-- big CSS file with ai-inline="true" is inlined -->
    <link ai-inline="true" href="fit://site/public/css/big_force.css" rel="stylesheet" type="text/css">
    <!-- small CSS file with ai-inline="false" is not inlined -->
    <link ai-inline="false" href="fit://site/public/css/small_prevent.css" rel="stylesheet" type="text/css">


    <!-- JavaScript -->

    <!-- small local JavaScript file is automatically inlined -->
    <script src="fit://site/public/js/small_local.js" type="text/javascript"></script>
    <!-- big local JavaScript file isn't automatically inlined -->
    <script src="fit://site/public/js/big_local.js" type="text/javascript"></script>

    <!-- small JavaScript file with defer attribute isn't automatically inlined -->
    <script defer src="fit://site/public/js/small_defer.js" type="text/javascript"></script>
    <!-- small JavaScript file with async attribute isn't automatically inlined -->
    <script async src="fit://site/public/js/small_async.js" type="text/javascript"></script>

    <!-- external JavaScript file isn't automatically inlined because it is not cached -->
    <script src="http://example.com/js/small.js" type="text/javascript"></script>

    <!-- big JavaScript file with ai-inline="true" is inlined -->
    <script ai-inline="true" src="fit://site/public/js/big_force.js" type="text/javascript"></script>
    <!-- small JavaScript file with ai-inline="false" is not inlined -->
    <script ai-inline="false" src="fit://site/public/js/small_prevent.js" type="text/javascript"></script>

  </head>
</html>