The Optimal Enfold Performance settings for 2020

Teamed up with WP Rocket, Optimole, and Cloudflare CDN. Last update 23-10-2020.

When Fade.Studio created a new website, it had to be fast, lightning-fast with minimal effort. Although there are some good tutorials online and comprehensives guides, we could not find a guide tailored for the WordPress theme Enfold from Kriesi. So we created this page. On this page, you will find the settings for the Enfold theme, Optimole, WP Rocket, and the settings for Cloudflare CDN which we use for this website.

It took quite a while to figure out the right combination of settings between WP Rocket, Enfold, and Cloudflare. We would like to share our knowledge with you to save you time and trouble. This guide is now also available as PDF for you to download. Click the button below.

Download guide (PDF)

The website

The Fade.Studio website comprises 5 pages and 27 portfolio items. This means a lot of pictures and no blog. We make all pages and portfolio items with the built-in page builder of the Enfold theme. The website uses no footer, only a socket. Let start with the theme configuration. We are only showing configuration and screenshots for performance. We leave other settings out of this guide.

Let us first start with a brief introduction of the theme, the different plug-ins used, and the Cloudflare CDN.

94% (A)

Performance

100% (A)

Structure

0.7s

Largest Contentful Paint

63ms

Total Blocking Time

0.1

Cumulative Layout Shift

Chapter 1 – Meet the Team

Get to know the Fade.Studio WordPress dream team

WP RocketEnfold ThemeOptimoleCloudflare CDNHosting

WP Rocket (Premium)

This is a premium WordPress plug-in to enhance website performance. There are settings for caching, preloading, static file compression, and image optimization. WP Rocket has a Cloudflare extension to configure your CDN. It is possible to host a Google Analytics file on your server. The plug-in has a nice user interface and plenty of support articles and videos. We use version 3.7.6 of the plug-in for this guide.

Visit website

Enfold Theme

This is a premium WordPress theme by Christian Budschedl (Kriesi) and has been a long-time favorite at Fade.Studio. Enfold is a clean, flexible, and responsive WordPress theme. You can use Enfold for blogs, corporate websites, personal portfolios, and a web-shop. The theme uses the famous Avia Framework and offers support for the WPML Multi Language plug-in. Enfold comes with a plethora of options so you can change layout, styling, colors, and fonts directly from within the back-end.

Build your own clean skin or use one of 18 pre-defined skins right out from your WordPress Admin Panel. Font, background, and color options, and the dynamic template builder will help you create the website you need in no time. Besides the global options, you can set unique styling options for each entry as seen in the theme demo.

It has been our long-time favorite because the theme just works, beautiful back-end, an easy-to-use page builder, and a ton of options to fine-tune your website. We use version 4.7.6.4 of the theme for this guide from October 2020.

Visit website

Optimole (Free based on quota)

Optimole is the latest addition to the dream team. We found this gem in an image optimization plug-in comparison article. The plug-in is free for the first 5.000 requests per month. Above that number, you need a paid account. For now, the 5.000 limit suffices for Fade.Studio. Create a free account that serves a maximum of 5.000 visitors per month, take the API key, and configure this in the plug-in back-end of your website. The plug-in has various settings like compression, lazy-load, and retina images. We use version 2.5.5 of the plug-in for this guide.

Visit website

CloudFlare CDN (Free)

At Fade.Studio we use Cloudflare as Content Delivery Network (CDN) which speeds up page loading times, improves SEO, and protects against DDoS attacks and WordPress-specific vulnerabilities. We are not using the Cloudflare plug-in because WP Rocket has integration with Cloudflare and the fewer plug-ins, the better. Cloudflare comes with a ton of options and on this page, you will find the settings which we use.

Visit website

PCextreme (Premium)

Fade.Studio is using PCextreme for hosting. PCextreme is a Dutch-based company that offers a wide variety of cloud-based services, including web hosting. While the plug-ins only have a certain amount of versions, hosting is the largest variable in this team. There are so many hosting companies with all different hosting flavors. Fade.Studio is using the “Standard Loyalty” Web hosting package with the PHP version set to 7.4.9 and Varnish Cache enabled by default.

Visit website

Chapter 2 – Configuration

All performance related configuration per item can be found below.

WP Rocket Enfold Theme Optimole Cloudflare

2.1 – WP Rocket (Premium)

Leave both options off unless you are a beta tester or let WP Rocket collect your data anonymously, which will cause a (tiny) performance decrease. We do not cover RocketCDN because of Fade.Studio using Cloudflare for CDN. From the dashboard, you can also clear the various caches when you changed website design. You can also clear caches from the admin bar if you have this bad enabled in the user settings.

WP Rocket Dashboard

2.1.1 – Cache

Enable caching for mobile devices and only set the second option when you don’t have a responsive theme. Responsive themes adjust the screen based on the viewport, so no need to set this option. Because we at Fade.Studio use Enfold as the theme, we don’t need this option set.

Leave the User Cache option as default and only use this option if you have user-specific pages or content. Fade.Studio only has one account and when we write we don’t want the new content to be in cache because this might not always show the various changes made to the content.

We have set the cache lifespan to the default 10 hours. This option will have little impact on the performance report results, but setting the lifespan longer may cause less impact on the system resources. If your website is very static, consider setting the cache lifespan to 24 hours or even more.

WP Rocket Cache

2.1.2 – File Optimization

For every option on this page, enable individually and test your website for any errors that might occur. Also, use the various browser developer tools to check for errors and the GTmetrix report for results. Use a browser without logging in because, as you can see in the Cache chapter of WP Rocket, caching is not active for logged-in users.

If one of the HTML, CSS, or JavaScript files is giving you errors, you can always exclude the files from being minified. We have no files excluded because all seem to work just fine.

Since version 3.7 it is possible to delay JS script execution. You can see this as a lazy-load for JS scripts. It will only load scripts for the user visiting the page. Not all scripts are relevant for the initial page to render and delaying them can improve the loading time.  Select this option and if problems might occur, you can exclude scripts by filling them in. The plug-in will exclude the default scripts.

WP Rocket File Optimization

2.1.3. – Media

We don’t have the lazy-load enabled because this option is also available and enabled in the Enfold settings. Because we don’t need Emoji and WordPress embeds, we disabled them. We disabled the WebP option because we use the Optimole plug-in for image optimizations. If you want to enable the WebP option, you need to create these images yourself or generate via a plug-in like WebP Express.

WP Rocket Media

2.1.4 – Preload

When you use preloading, WP Rocket will generate the cache starting with the links on your homepage followed by the sitemaps you specify. You can specify a sitemap in the sitemaps for preloading if you use a sitemap plug-in that WP Rocket does not recognize.

For external loaded files you can use the pre-fetch DNS requests. Fade.Studio has one external URL pre-fetched, Cloudflare Insights.

Via Enfold settings, we have uploaded the Lato font to load these locally. By placing the link to the files in the Preload Fonts field, WP Rocket will preload these files. We are also preloading the Fontello font which Enfold uses for icons.

From version 3.7 and up it is possible to have links preloaded. WP Rocket 3.7 is going to use an early pre-fetch strategy to expect what page the user may navigate to next. As a result, the user will perceive pages linked by those URLs as loading instantly.

At the moment, this feature only works in Chrome. Safari, Opera, IE, and Edge don’t support link pre-fetching. Firefox makes a link pre-fetch request; however, there is a bug in Firefox which blocks the pre-fetched page from being served from FF pre-fetch cache.

WP Rocket Preload

2.1.5 – Advanced Rules

On this page, you can exclude various items from caching like URLs, Cookies, and User-Agent(s). You can also specify URLs which you want to purge every time you add or change content.

WP Rocket Advanced Rules

2.1.6 – Database

The database page is not a performance settings page but on this page, you can perform certain actions to clean-up the database. This will cause less data and thus more speed when accessing the database.

WP Rocket Database

2.1.7 – CDN

We will not configure this page because of Fade.Studio using Cloudflare as CDN. We set the settings for Cloudflare under the add-ons page. Do not forget to activate the Cloudflare add-on.

WP Rocket CDN

2.1.8 – Heartbeat

Not used by Fade.Studio and does not have any effect on performance.

2.1.9 – Add-ons – Cloudflare

Set the Global API key, account e-mail, and Zone ID on this page. Use development mode if you want to test your website without passing it through Cloudflare CDN. Use optimal settings for the best result. We set the relative protocol to activate because we use the flexible SSL option with Cloudflare. From this page, you can also purge the Cloudflare caching.

WP Rocket Cloudflare

2.1.10 – Image Optimization

We use Optimole for image optimization, and therefore this setting is not relevant.

2.1.11 – Tools

If you find the perfect setting for your website, you can export the current configuration. Did you break the website, restore the configuration by importing.

Optimole

The Optimole dashboard gives you a view of the quota used and the last images optimized. This is also the screen where you configure the API key you receive when signing up.

Optimole Dashboard

2.2.1 – General

Use the general settings page to activate the Optimole image replacement to have all your images served by the Optimole image optimization service. The free version of Optimole serves 5.000 images per month.

To display images based on the viewport of the visitor, set the Scale images & Lazy load option. Enable the diagnosis tool to start a troubleshooting mechanism if you experience problems.

Clear all cached resources if you changed a lot of images or an image with the same filename but different content.

Optimole General

2.2.2 – Advanced

Optimole provides an option to downgrade the image quality automatically when it detects a slower network. Enable this option when needed. We did not enable this option. You have the option to server images in CSS/JS files through the Optimole CDN but because we are using Cloudflare, we left this option disabled. Only Enable GIF to video conversion when using a lot of GIF images, we do not.

The image quality setting depends on the purpose of the website. A photography website with a lot of images needs a higher quality image compared to a website where the text is more important than images, for example, a blog. Because images are an important part of the Fade.Studio website and all portfolio items begin with a full-width image, we have set the quality to High.

Optimole Compression

2.2.2.2 – Resize

Set smart cropping to enable to let Optimole decide the most interesting part of the image when cropping. Enable Retina images to serve website visitors with an iOS or OS X device high-quality images. This page also lets you define a maximum width and height for all images. It will resize images larger than the maximum set.

Optimole Resize

2.2.2.3 – Lazyload

This page has several options regarding lazy-load. We let the Enfold theme handle the lazy-load. We only the scale images and enable lazy-load for background images for Fade.Studio. You can experiment with the settings to see what suits your website best.

Optimole Lazyload

2.2.2.4 – Exclusions

Want to exclude certain images or a range of images with identical filename start of the end? You can configure excluded images on this page. At Fade.Studio we optimize all images, so no configuration here.

Optimole Exclusions

2.3 – Enfold (Premium)

This chapter contains the Enfold settings used by Fade.Studio according to the tabs in the Enfold settings from the WordPress back-end. Because of the plethora amount of options, we only mention the relevant ones.

2.3.1 – Theme Options

The only option concerning performance will be the preprocessing short-codes in the header. We have disabled this option.

Enfold

2.3.3 – General Styling

Because we use local font files, on the Fonts tab we set both the Heading and Body font to the uploaded font. You find this font at the bottom of the list when uploaded via Enfold Import / Export page.

Enfold General Styling

2.3.4 – Advanced Styling

If you uploaded local font files, make sure when you set items in the advanced styling section, you select the correct font.

Enfold Advanced Styling

2.3.5 – Footer

At Fade.Studio we only use the socket so we set the first option according, display only the socket (no footer widgets).

Enfold Footer

2.3.6 – Layout Builder

If you do not use the Integrated Layerslider plug-in, you can disable it on this page, fewer plug-ins mean better performance.

Enfold Layout Builder

2.3.7 – Performance

The following applies to all options: test separate and check if it breaks your website. If one option breaks your website, try the next option, and so on. See the screenshot below for our configuration. Always disable options you do not need like self-hosted videos and audio features. If you want to use the built-in comment system, you cannot disable the blog functionality.

The page also contains the setting for lazy loading. As mentioned before we set this option to active only here. You can see the proposed plug-ins for image optimization and caching at the bottom. As you can see Enfold does not recognize the Optimole plug-in but recognizes WP Rocket.

Enable the “Delete old CSS and JS files” to delete expired CSS and JS files generated by the theme.

Enfold Performance

2.3.8 – Google Services

Only activate the Google services you use. We don’t use any, so we disable all options.

Enfold Google Services

2.3.9 – Import / Export

This page contains options to import and export Enfold settings, and import and export page builder templates. At the bottom, you can upload icon fonts and custom fonts to use on the website. Upload custom fonts here. Fade.Studio uses Lato. Only upload font-weights you use.

Enfold Import and Export

2.4 – CloudFlare CDN (Free)

The Cloudflare dashboard will show you an overview of the last 24 hours regarding visitors to the website. From this dashboard, it is also possible to enable the development mode if you want your website to bypass the Cloudflare CDN temporarily.

Feeling under attack? Then you can also activate the “Under attack” function so website visitors will get a JavaScript challenge when visiting the website. It also displays zone ID and Account ID on the dashboard. The blue icons on top will navigate to the various settings of Cloudflare.

Cloudflare Dashboard

2.4.1 – Speed Optimization

On this page various options are present but not all are available for the free account. We have set all the Auto Minify settings (JavaScript, CSS, HTML) and enabled the Brotli compression. Because Rocket Loader was giving us negative speed results on GTmetrix. Not sure why, but we will investigate this soon. If you use AMP pages, on the bottom are settings for URL and mobile redirect. We do not use this at Fade.Studio.

Cloudflare - Speed Optimization

2.4.2 – Caching Configuration

Here we set the caching level. You can choose three options. No query string only delivers files from the cache when there is no query string. Ignore query string delivers the same resource to everyone independent of the query string, and standard delivers a unique resource each time the query string changes. Cloudflare recommends using the standard option.

We have set the browser cache TTL to 1 year. This setting determines the time Cloudflare instructs a visitor’s browser to cache files. During this period, the browser loads the files from its local cache, speeding up page loads.

Always online makes sure that if your server goes down, Cloudflare will serve your website’s static pages from our cache thus keeping it available. The development mode will temporarily bypass the Cloudflare cache, allowing you to see changes to your origin server in real-time. Enabling this feature can significantly increase the origin server load. The development mode does not purge the cache. You need to purge files after the development mode expires.

Cloudflare Caching Configuration

2.4.3 – Page Rules

Page Rules let you control which Cloudflare settings trigger on a given URL. Only one Page Rule will trigger per URL, so it is helpful if you sort Page Rules in priority order, and make your URL patterns as specific as possible. With the free account, you can create up to three page-rules.

Cloudflare - Page Rules

Because items in your WordPress uploads, do not change often, you don’t have to cache them as often, which will save precious bandwidth. Set Edge Cache TTL to a month, Cache Level to everything, and Browser Cache TTL to a day.

Cloudflare Page Rule Uploads

This page rule forces all visitors to connect your website through HTTPS. The asterisk in front and at the end make sure you force all sub-pages and also sub-domains to use HTTPS.

Cloudflare Page Rule HTTPS

This rule sets the security level too high and also makes sure all wp-admin traffic bypasses the cache. Because apps and performance settings are only used to speed up the website frontend, we disabled these for all wp-admin pages.

Cloudflare Page Rule wp-admin

Chapter 3 – Content

Speed optimizations for content

3.1 – Largest Confluent Paint result

A big thanks to Thomas Jarvis for pointing the following out to us. The reason our lighthouse score is so high on the home page is that for mobile devices – The design calls for Text only above the fold on mobile devices. This means that the CSS above the fold is at its minimum. The Largest Confluent Paint result or LCP has a heavy weighting in Google Lighthouse and PageSpeed scores. If you take a look at the preview on the right you will notice the gallery is not displayed above the fold.

The design actually plays a big part in keeping Enfold optimized. If for instance, we added a background image to the text on the home page the LCP score will drop significantly. Worth considering on every project. An optimized full-screen background image (Color Section element) on the home page for example lowers the Google Lighthouse Score by about 15 points when this is the first thing the user sees.

Fade.Studio - MobilePreview

Chapter 4 – The Results

View our GTmetrix report of August 2020

94% (A)

Performance

100% (A)

Structure

0.7s

Largest Contentful Paint

63ms

Total Blocking Time

0.1

Cumulative Layout Shift

Report - December 2020
SummaryPerformanceStructureWaterfall
GTmetrix Pagespeed
GTmetrix Yslow
W3 Total Cache
GTmetrix Waterfall

Lets get social

Let us know what you think about this post. Please share this post or leave a comment.

3 replies
  1. Thomas Jarvis
    Thomas Jarvis says:

    Really Good guide. I use a variation of this with my websites with a few additions and modifications. This actually applies to 99% of WordPress websites.
    I favor Jetpack for CDN, Lazy Load because of the security features it adds.

    One thing you have not mentioned is – The reason your lighthouse score is so high on the home page is that for mobile devices – The design calls for Text only above the fold on mobile devices. This means that the css above the fold is at its minimum. The Largest Confluent Paint result or LCP has a heavy weighting in Google Lighthouse and PageSpeed scores.

    Design actually plays a big part in keeping Enfold optimized. If for instance you added a background image to the text on the home page the LCP score will fall significantly. Worth considering on every project. An optimized full screen background image (Color Section element) on the home page for example lowers the Google Lighthouse Score by about 15 points when this is the first thing the user sees.

    Reply

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.