Site Optimizer

At deploy time Aerobatic can be configured to provide additional pre-processing to your source code to optimize the delivery of your HTML pages, JavaScripts, stylesheets, images, etc. These optimizations improve the download performance of your site, especially on slower mobile networks. This is important not only for the user experience, but increasingly for SEO as Google's algorithms place greater emphasis on mobile usability. Over time Google plans to phase into a mobile-first index.

Google has long taken a leadership role in promoting web optimization best-practices and the techiques taken by Aerobatic are taken directly from their Web Fundamentals Performance Guide.

Configuration

The site optimizer is configured in the deploy section of the aerobatic.yml manifest.

deploy:
  optimizer:
    fingerprintAssets: true

Asset fingerprinting

Fingerprinting is a technique that entails embedding a string into URLs uniquely identifies the current version of the asset. Whenever the underlying asset changes, the unique string changes forcing the browser to treat it as a new object. This allows for setting aggressive cache-headers because there's no risk in serving a stale version.

The Aerobatic optimizer scans your .html and .css files and rewrites links to static assets such as .js, .css, .jpg, and so on. The pre-processor calculates an md5 hash based on the current contents of the referenced file and injects it into the source code. For example, if you deploy an html file with the following markup:

<div>
  <link rel="stylesheet" href="/css/styles.css" /> <img src="/images/hero.jpg" />
  <script src="/js/app.js"></script>
</div>

It will look like this when served from the Aerobatic CDN:

<div>
  <link rel="stylesheet" href="/css/styles--md5--934u5kl3jk5j453.css" />
  <img src="/images/hero--md5--359u46kld3i40u35.jpg" />
  <script src="/js/app--md5--eijtwk4ltj3lkj359kry.js"></script>
</div>

The Aerobatic CDN detects requests with the special --md5-- pattern and sets a max-age of one year.

Cache-Control: public, max-age=31557600

When you deploy new versions of your website, the assets that have not actually changed since the previous deployment will have the same hashed URL pointing to the previously cached copies. In the event that you make a tweak to an html page, website visitors will immediately get the freshest copy of the HTML, but still utilize cached versions of your site's JavaScript, stylesheets, and images - meaning faster page load times for your website visitors. If you do make a change to one of the hashed assets, then a new hashed URL will result, orphaning the old copy, and forcing the CDN to fetch the latest from the origin server which will be aggressively cached once again.

This also works with assets linked in stylesheets. For example:

div.hero {
  background-image: url(../images/hero.jpg);
}

Becomes:

div.hero {
  background-image: url(../images/hero.jpg__v9ZO2c3XyTH6KZW4Nem4PBQ825b23520b799fd137c18bef1d7c349b">);
}

The following diagram depicts the cache headers returned by the parent .html page and it's nested assets:

This provides the best of both worlds: high cache utilization and instant updates when necessary. Asset fingerprinting is enabled by default, even if you don't have an optimizer section in your aerobatic.yml. If you want to turn it off, you can explicitly do so:

deploy:
  optimizer:
    fingerprintAssets: false