When configuring a single domain for our site, we just have to switch on the performance settings and we are done. Everything works, from Image Delaying to SVG Minifying. Pretty straight forward, no thinking required.

But what do we need to do if we have to set up multiple domains for our site? Let's say we serve our HTML Documents from http://www.example.com, our images from http://images.example.com and our JavaScript, CSS and other assets from http://static.example.com .

tl;dr

As a rule of thumb we should configure the same features with the same options across all domains, using the global optimizations menu on the left. Options that only affect one specific domain can be set by clicking on overrides on the right hand side of the domains list. 

A feature usually only is applied if it makes sense. So enabling CSS Minifying for a domain that serves images will not have an impact on performance.

Nevertheless, we want to give an overview of how the features affect the different resources and thus where and how you have to to enable, respectively configure, them.

Image Compression

Image Compression works with the images themselves. It requries no changes to HTML documents or stylesheets. This means, if we want an image optimized by this feature, we have to configure the domain that the images are served from and enable Image Compression.

Domain serving HTML: feature can be disabled
Domain serving images: switch the feature on!
Domain serving assets (e.g. JS/CSS): feature can be disabled

Image Delaying

Image Delaying works with the image and the document referencing the image. The first step, replacing the actual images with placeholders, prevents the browser from loading all that under the fold content that unnecessarily slows down the loading of a page.  The second step, inserting a JavaScript to the document that computes the visibility of the images and their position relative to the viewport, makes sure the images are visible when the visitor wants to see them. Because these are changes to the document, the feature has to be enabled for the domain that serves the HTML.

But the transition from the placeholder to the original image has to be seamless. We do not want the content of our site jumping up and down, that would be a user experience nightmare. And therefore we need to know the dimensions of the image and have an appropriate placeholder ready for use when we make the changes to the HTML document. Both, the information about the image size and the placeholder image, are supplied by the Image Optimization feature. This is why, for an image to be delayed, the domain serving the image has to be configured with Image Optimization enabled.

Last but not least there are different kinds of placeholders, from transparent to blurry, with automatic coloring or a fixed color. When we want to insert the placeholder into the HTML document, we search for a placeholder meeting the configured requirements. So when the HTML domain settings use fixed color placeholders, but the image domain settings use blurry placeholders, we will never find a matching placeholder. Therefore the image would not be delayed. That means, that if you configure the placeholder, you need to have the same configuration for both, the HTML and the image domain.

Domain serving HTML: switch the feature on (same settings as image domain)!
Domain serving images: switch the feature on (same settings as HTML domain)!
Domain serving assets (e.g. JS/CSS): feature can be disabled

Inlining

Inlining, although requiring the resources themselves, only makes changes to the HTML document. But it still needs to access the cached resources. That means, while the domain serving the respective asset has to be configured in the site itself, you need to switch on the inlining feature only for the domain that serves the HTML.

Domain serving HTML: switch the feature on!
Domain serving images: feature can be disabled
Domain serving assets (e.g. JS/CSS): feature can be disabled

JS/CSS/SVG/HTML Minifying

Just like Image Compression, this feature changes the resources themselves, and not the HTML that references them. So if we want JavaScript to be minified, we need to enable the feature for the domain that serves the JavaScript. This is true for both, JavaScript written within an HTML document and JavaScript files referenced within an HTML. So if we serve JavaScript inline in our HTML documents, we need to enable the JavaScript Minifying feature for the domain serving the HTML. If we serve our JavaScript from a separate domain, enable the JavaScript Minifying feature for the domain serving the JavaScript. As a best practice, always enable this feature for both domains, the HTML domain and the asset domain. The same applies to the other minifying features, i.e. HTML Minifying, CSS Minifying and SVG Minifying.

Domain serving HTML: switch the feature on!
Domain serving images: feature can be disabled
Domain serving assets (e.g. JS/CSS): switch the feature on!

Reorder Head Elements

This feature works with the HTML document only. When switched on it will check the head element of the document and – if necessary – reorder the contained elements so that browsers can parallelize workload where possible. As this works on the HTML document exclusively, the feature needs to be enabled only for domains serving HTML documents.

Domain serving HTML: switch the feature on!
Domain serving images: feature can be disabled
Domain serving assets (JS/CSS): feature can be disabled

Rewrite HTTP URLs to HTTPS

HTTP/2 is a general performance boost across all our domains. If we want HTTP/2 we should enable this feature for all domains! However, domains may be configured separately. 

Domain serving HTML: switch the feature on!
Domain serving images: switch the feature on!
Domain serving assets (e.g. JS/CSS): switch the feature on!

Redirect HTTP URLs to HTTPS

HTTP/2 depends on HTTPS. So if we want the former, we should enable the latter across all our domains.

Domain serving HTML: switch the feature on!
Domain serving images: switch the feature on!
Domain serving assets (e.g. JS/CSS): switch the feature on!

Did this answer your question?