The Optimal Enfold Performance settings for 2020

Teamed up with WP Rocket, Optimole and CloudFlare CDN – Last update 02.09.2020

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

It took quite some time to figure out the right combination of settings between WP Rocket, Enfold and Cloudflare. We would like to share our information with you to save you time and trouble.

The Fade.Studio website consists of 5 pages and 27 portfolio items. This means a lot of pictures and no blog. All pages and portfolio items are made with the build-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. Other settings are left out of this guide.

Let us first start with a short introduction of the theme, the different plugins used and the Cloudflare CDN.

100% (A)

PageSpeed Score

98% (A)

YSlow Score

1.8s

Fully Loaded Time

837KB

Total Page Size

26

Requests

Hello visitor! Ready to get started and see how you can get the best performance?

Chapter 1 – Meet the Team

Get to know the Fade.Studio WordPress dream team

WP Rocket (Premium)

WP Rocket is a premium WordPress plugin to enhance website performance. There are settings for caching, preloading, static file compression and images in request. WP Rocket has a Cloudflare extension to configure your CDN. It is possible to host Google Analytics file locally. The plugin has a nice user interface and plenty of support articles and videos. The version of the plug-in used is 3.6.2

Enfold Theme by Kriesi (Premium)

Enfold is a premium WordPress theme by Christian Budschedl (Kriesi) and has been a long time favourite at Fade.Studio. Enfold is a clean, flexible and fully responsive WordPress theme. The theme can be used for blogs, corporate websites, personal portfolio as well as a web-shop. The theme is build on the famous Avia Framework and offers support for the WPML Multi Language plugin. Enfold comes with a plethora of options so you can modify layout, styling, colours and fonts directly from within the back-end. Build your own clean skin or use one of 18 predefined skins right out from your WordPress Admin Panel. Font, background and colour options as well as the dynamic template builder will help you create the Website you need in no time. In addition to 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, easy to use page builder and a ton of options to fine-tune your website. This guide is based on version 4.7.6.3 from August 2020

Optimole (Free based on quota)

Optimole is the latest addition to the Dream Team. We found this gem in a image optimisation plugin comparison article. The plugin is free for the first 5.000 request per month. Above that number you need a paid account. For now the 5.000 limit is sufficient for Fade.Studio. Create a free account which serves a maximum of 5.000 visitors per month, take the API key and configure this in the plugin back-end of your website. The plugin has various settings like compression, lazy-load and retina images. This guide is based on version 2.5.2

CloudFlare CDN (Free)

Cloudflare is used as a Content Delivery Network which accelerates page loading times, improves SEO, and protects against DDoS attacks and WordPress-specific vulnerabilities. We are not using the Cloudflare plugin because WP Rocket has an integration with Cloudflare and less plugins the better. Cloudflare comes with a ton of options and on this page you will find the settings which we are using at Fade.Studio.

PCextreme (Premium)

The Fade.Studio website is hosted by PCextreme, a Dutch based company which offers a wide variety of cloud based services including web hosting. While the plugins only have a certain amount of versions, hosting is the largest variable in this team. There are so many different 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.

Chapter 2 – Configuration

All performance related configuration per item can be found below.

Configuration

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 result in a (very small) performance decrease. RocketCDN will not be covered because Fade.Studio is 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

Configuration – WP Rocket (Premium)

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 view-port so no need to set this option. Because we at Fade.Studio are using Enfold as 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 new content we don’t want it to be cached 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 on the performance report results but setting the lifespan longer may result in less impact on the system resources. If your website is very static you might want to consider setting the cache lifespan to 24 hours of even more.

WP Rocket Cache

Configuration – WP Rocket (Premium)

2.1.2 – File Optimization

For every options 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 where you are not logged in as user 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 excluded the files from being minified. We have no files excluded because all seem to work just fine.

WP Rocket File Optimization

Configuration – WP Rocket (Premium)

2.1.3. – Media

We don’t have the lazy-load enabled because this option is also available and enabled in the Enfold settings. Emoji and WordPress embeds are not needed and thus disabled. Because we use the Optimole plug-in for image optimisations, the WebP option is not enabled. 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

Configuration – WP Rocket (Premium)

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. If you do not use a sitemap plugin which is recognized by WP Rocket, you can specify the sitemaps in the sitemaps for preloading.

For external loaded files you can use the prefetch DNS requests. Fade.Studio has two external URLs prefetched, Google Analytics and Cloudflare Insights.

Via Enfold settings we have uploaded the Lato font to load these locally. These fonts can be preloaded by placing the link to the files in the Preload Fonts field. We are also preloading the Fontello font which Enfold uses for icons.

WP Rocket Preload

Configuration – WP Rocket (Premium)

2.1.5 – Advanced Rules

On this page you can excluded various items from caching like URLs, Cookies and User Agent(s). You can also specify URLs which you want to purge every time and post or page is added or modified.

WP Rocket Advanced Rules

Configuration – WP Rocket (Premium)

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 which will result in less date and thus more speed when accessing the database.

WP Rocket Database

Configuration – WP Rocket (Premium)

2.1.7 – CDN

This page is not configured because at Fade.Studio because we use Cloudflare as CDN. The settings for Cloudflare are set under the add-ons page. Do not forget to activate the Cloudflare add-on.

WP Rocket CDN

Configuration – WP Rocket (Premium)

2.1.8 – Heartbeat

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

Configuration – WP Rocket (Premium)

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. Because we are using the flexible SSL option with Cloudflare the relative protocol needs to be activated. From this page you can also purge the Cloudflare caching.

WP Rocket Cloudflare

Configuration – WP Rocket (Premium)

2.1.10 – Image Optimization

We are using Optimole for image optimisation thus this setting is not relevant.

Configuration – WP Rocket (Premium)

2.1.11 – Tools

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

Configuration

2.2 – Optimole (Free based on quota)

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

Optimole Dashboard

Configuration – Optimole

2.2.1 – General

The general settings page can be used to activate the Optimole image replacement to have all your images served by the Optimole image optimisation service. The free version of Optimole serves 5.000 images per month. Set the Scale images & Lazy load option so images are displayed based on the view-port of the visitor. Having problems when this plug-in is enabled? Enable the diagnosis tool to start a troubleshooting mechanism.

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

Optimole General

Configuration – Optimole

2.2.2 – Advanced

Optimole provides an option to automatically downgrade the image quality 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. Enable GIF to video conversion should be enabled 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 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

Configuration – Optimole

2.2.2.2 – Resize

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

Optimole Resize

Configuration – Optimole

2.2.2.3 – Lazyload

This page has several options regarding Lazyload. Because lazyload is handled by the Enfold theme, only the scale images and enable lazyload for background images is enabled for Fade.Studio. You can play around with the settings to see what suits your website best.

Optimole Lazyload

Configuration – Optimole

2.2.2.4 – Exclusions

Want to exclude certain images or a range of images with identical filename start of end? This can be configured on this page. At Fade.Studio all images are optimised so no configuration here.

Optimole Exclusions

Configuration

2.3 – Enfold Theme by Kriesi (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 only the relevant ones will be mentioned.

Configuration – Enfold Theme

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

Configuration – Enfold Theme

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. This font is found at the bottom of the list when uploaded via Enfold Import / Export page.

Enfold General Styling

Configuration – Enfold Theme

2.3.4 – Advanced Styling

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

Enfold Advanced Styling

Configuration – Enfold Theme

2.3.5 – Footer

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

Enfold Footer

Configuration – Enfold Theme

2.3.6 – Layout Builder

If you do not use the Integrated Layerslider plugin it can be disabled on this page, less plugins means better performance.

Enfold Layout Builder

Configuration – Enfold Theme

2.3.7 – Performance

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

This page also contains the setting for lazyload. As mentioned before this option is set to active only here. Proposed plug-ins for image optimisation and caching are displayed on the bottom. As you can see the Optimole plugin is not recognised, WP Rocket is.

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

Enfold Performance

Configuration – Enfold Theme

2.3.8 – Google Services

Only activate the Google services you use. We don’t use any so all is disabled.

Enfold Google Services

Configuration – Enfold Theme

2.3.9 – Import / Export

This page contains options to import and export Enfold settings as well as import and export page builder templates. At the bottom you can upload icon fonts and custom fonts. Fade.Studio uses Lato which is uploaded here. Only upload font weight you actually use.

Enfold Import and Export

Configuration

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 temporarily bypass the Cloudflare CDN. Feeling under attack? Then you can also activate the “Under attack” function so website visitors will get a JavaScript challenge when visiting the website. Zone ID and Account ID are also displayed on the dashboard. The blue icons on top will navigate to the various settings of Cloudflare.

Cloudflare Dashboard

Configuration – Cloudflare CDN

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. The Rocket Loader is disabled because this was giving us negative speed results on GTmetrix, not sure why but this will be investigated in the near future. If you use AMP pages, on the bottom are settings for URL and mobile redirect. This is not used by Fade.Studio.

Cloudflare - Speed Optimization

Configuration – Cloudflare CDN

2.4.2 – Caching Configuration

Here the caching level is set. You can choose three options. No query string only delivers files from 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 different 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 length of 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. 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 origin server load. Development mode does not purge the cache so files will need to be purged after development mode expires.

Cloudflare Caching Configuration

Configuration – Cloudflare CDN

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 back makes sure all sub-pages and sub-domains are forced to use HTTPS.

Cloudflare Page Rule HTTPS

This rule sets the security level to high and makes sure the cache is bypassed. Also apps and performance settings are disabled for all wp-admin pages because these settings are only to speed up the front end of your website.

Cloudflare Page Rule wp-admin

Chapter 3 – The Results

View our GTmetrix report of August 2020

100% (A)

PageSpeed Score

98% (A)

YSlow Score

1.8s

Fully Loaded Time

837KB

Total Page Size

26

Requests

Lets get social

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

0 replies

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.