Optimal PageSpeed Configuration

Table of Contents

Disclaimer
Configuration
Magento 1
Magento 2
CDN
Activation
Troubleshooting

Disclaimer

Please note that we'd generally recommend using optimization techniques from Cloudflare (WebP image conversion for example) rather than Pagespeed, particularly so with Magento 2 stores.

We've found that Pagespeed often creates unintended side effects, and is particularly problematic when using CDN providers like Cloudflare alongside it.

The following configuration options below are still suitable if you'd like to use Pagespeed however.

Configuration

The exact configuration differs slightly depending on whether your store is using Magento 1 or 2.

Please see below for reference depending on the version you're using.

For both versions of Magento:

Create /domains/example.com/___general/example.com.pagespeed.conf, and replace the following to suit your stack,

lb1.i
example.com

Then copy one of the below configurations into this new file.

Magento 1

# Enable PageSpeed
pagespeed on;
pagespeed Domain *.example.com;

pagespeed DownstreamCachePurgeLocationPrefix https://lb1.i;
pagespeed DownstreamCachePurgeMethod PURGE;
pagespeed DownstreamCacheRewrittenPercentageThreshold 95;

# PageSpeed should be disabled on the Magento admin (adjust to suit custom admin URLs)
pagespeed Disallow "*/admin/*";
# Use the MageStack image optimiser for catalogue images, see https://www.sonassi.com/help/performance/optimise-images
pagespeed Disallow "*/media/catalog/product/*";

# This setting should be enabled when using HTTPS
# Take care when using HTTP > HTTPS redirection to avoid loops
#pagespeed MapOriginDomain http://www.example.com https://www.example.com;

# If using Varnish with PageSpeed, consider uncommenting the following line
# as beacons may not have a true chance to operate (they require several page loads)
#pagespeed CriticalImagesBeaconEnabled false;

pagespeed EnableFilters extend_cache;

pagespeed EnableFilters lazyload_images;
pagespeed LazyloadImagesAfterOnload off;
pagespeed LazyloadImagesBlankUrl "https://www.gstatic.com/psa/static/1.gif";
pagespeed EnableFilters rewrite_images;
# Not all browsers support WebP and if using Varnish, you can improve hit rate
# by not converting images to webp. Contact Sonassi support if using Varnish with PageSpeed to
# improve hit rate
pagespeed DisableFilters convert_jpeg_to_webp,convert_to_webp_lossless,convert_to_webp_animated,recompress_webp;
# This should be tested, or it can produce undesirable results with JS sliders
#pagespeed EnableFilters insert_image_dimensions;

# This can cause issues with the Magento admin image uploader
pagespeed EnableFilters collapse_whitespace;

# Do not use this option in conjunction with EcomDev_Varnish
pagespeed EnableFilters remove_comments;

pagespeed EnableFilters move_css_above_scripts;
# It is preferred to use Lesti Merge, versus using these settings
#pagespeed EnableFilters rewrite_css;
#pagespeed EnableFilters combine_css;

pagespeed EnableFilters inline_javascript;
pagespeed EnableFilters defer_javascript;
# It is preferred to use Lesti Merge, versus using these settings
#pagespeed EnableFilters combine_javascript;
#pagespeed EnableFilters rewrite_javascript;

pagespeed MaxCombinedJsBytes 300000;
pagespeed CombineAcrossPaths on;

Magento 2

# Enable PageSpeed
pagespeed on;
pagespeed Domain *.example.com;

pagespeed DownstreamCachePurgeLocationPrefix https://lb1.i;
pagespeed DownstreamCachePurgeMethod PURGE;
pagespeed DownstreamCacheRewrittenPercentageThreshold 95;

# PageSpeed should be disabled on the Magento admin (adjust to suit custom admin URLs)
pagespeed Disallow "*/admin/*";
# Use the MageStack image optimiser for catalogue images, see https://www.sonassi.com/help/performance/optimise-images
pagespeed Disallow "*/media/catalog/product/*";

# Change the domain name specified below to suit your domain name
pagespeed MapOriginDomain http://www.example.com https://www.example.com;

# Beaconing support is disabled by default - please see the note below this configuration for further information
pagespeed CriticalImagesBeaconEnabled false;

pagespeed EnableFilters extend_cache;

pagespeed EnableFilters lazyload_images;
pagespeed LazyloadImagesAfterOnload off;
pagespeed LazyloadImagesBlankUrl "https://www.gstatic.com/psa/static/1.gif";
pagespeed EnableFilters rewrite_images;

# Please note that not all browsers support WebP 
# If using Varnish, the default configuration will separate it's cache based on a browser's capabilities
# This avoids serving WebP images to browsers which don't support it, instead falling back to JPG/PNG/GIF
pagespeed DisableFilters convert_jpeg_to_webp,convert_to_webp_lossless,convert_to_webp_animated,recompress_webp;

# This should be tested, or it can produce undesirable results with JS sliders
#pagespeed EnableFilters insert_image_dimensions;

# This can cause issues with the Magento admin image uploader
pagespeed EnableFilters collapse_whitespace;

pagespeed EnableFilters move_css_above_scripts;

pagespeed EnableFilters inline_javascript;
pagespeed EnableFilters defer_javascript;

# Magento 2 natively supports Javascript bundling and CSS minfiication, which is preferred over the following filters
#pagespeed EnableFilters rewrite_css;
#pagespeed EnableFilters combine_css;
#pagespeed EnableFilters combine_javascript;
#pagespeed EnableFilters rewrite_javascript;

pagespeed MaxCombinedJsBytes 300000;
pagespeed CombineAcrossPaths on;

The stack also supports Pagespeed's filters which rely on beaconing, such as prioritize_critical_css.

Beaconing is optional and is disabled by default, as it requires some traffic to be passed through the stack's Varnish cache.

Please raise a ticket with the Sonassi support team if you'd like this enabling.

Once enabled, enable the CriticalImagesBeaconEnabled filter in your Pagespeed configuration to enable beaconing support:

pagespeed CriticalImagesBeaconEnabled true

And enable the filters which rely on this beaconing:

pagespeed EnableFilters inline_images;
pagespeed EnableFilters inline_preview_images;
pagespeed EnableFilters lazyload_images;
pagespeed EnableFilters prioritize_critical_css;

CDN

Please note that if you're using our CDN, you will need to modify your /domains/example.com/___general/example.com.pagespeed.conf configuration file slightly, adding:

pagespeed Domain cdn.example.com;

(Replace this value with your CDN subdomain)

and:

pagespeed MapOriginDomain http://cdn.example.com https://cdn.example.com;

(Replace both values with your CDN subdomain, ensuring the first subdomain is still 'http', and the second subdomain is still 'https')

You can add both of these configuration values alongside the existing ones for your primary domain.

This is necessary because when images and files are loaded from the CDN subdomain, Pagespeed detects a domain mismatch, so will otherwise ignore them.

If you're using a third party CDN provider like Cloudflare directly, please note that this may cause conflicts with Pagespeed - for example, resources converted by Pagespeed may be visible when the CDN is not active, but return a 404 when the CDN is active.

If this is the case, please raise a ticket with the Sonassi support team, as we will then reconfigure Pagespeed to bypass the CDN and point to your stack directly.

Activation

Then at the top of ___general/example.com.conf add the following,

include /microcloud/domains/example/domains/example.com/___general/example.com.pagespeed.conf;

Then reload Nginx by running /etc/init.d/nginx reload

Troubleshooting

If you're finding Pagespeed doesn't seem to be active, if you add a ?PageSpeedFilters=+debug query parameter to your URL, then visit the page, right click, and select View Page Source, a new window will open which contains additional comments from Pagespeed to explain the decisions it's making on page resources.

One potential issue is cache purging when using Pagespeed and Varnish - Pagespeed should be purged before Varnish in these cases, as otherwise Varnish will re-cache resources that have already been cached by Pagespeed.