Enfold 4.3: Performance Update

As announced earlier we wanted to improve the speed and usability of Enfold. I think you will like what we came up with :)

This release is probably one of the most important in recent years, since its the first major step in changing some of the core workings of our Enfold theme.

Whenever software is written, a developer has to make certain decisions on how this software works. Most of the stuff we decided on, when first building Enfold has served us well. But unfortunately some of those decisions now started to affect our ability to improve the theme further. This is why we decided to do a few major overhauls and Enfold 4.3 is the first one. This release affects performance in a few major ways and its hard to overstate how important all those performance changes are. So before we describe what we did, here is how it affects the theme:

• A typical Enfold based Website now loads anywhere from 15%-75% less CSS and JS
• Enfold is now probably the best optimised multipurpose theme out there. We checked the competition and Enfold now uses less CSS and less JS on an average site than anyone else.
• In addition to being leaner and cleaner than the competition out of the box, the theme is now also exceptionally easy to optimize and you can achieve perfect google/gtmetrix pagespeed scores if desired
• Search rankings will be higher for Websites using Enfold since loading speed for mobile will be factored into search results soon
• Conversion from visitors to customers will be better, since it’s a fact that every millisecond you can shave off the load time has a positive impact

Achieving a perfect score in google or gtmetrix is now possible ;) – Blog post here!

So what did we change and why?

Modules

In this release we switched to a “module based” feature system. Previously when we added a new option in the backend, or added a new template builder element, it was enabled for everyone by default and was always loaded. So as Enfold grew with time, the list of features to load grew with it and the amount of CSS and JS also grew.

Since only very large sites use every Enfold feature we offer, this means that a lot of smaller sites load a lot of unnecessary resources. It also means that adding new niche features is usually not a good idea since it affects all users who don’t use the feature negatively. We wanted to change that and therefore switched to a module based system.

From now on Enfold only loads the CSS and JS files it requires. The theme now keeps track of the elements and options you use. So if you don’t use a video player, a countdown and a portfolio, the theme will no longer load these features.

Enable and Disable Modules to your liking in the new “Performance” Theme options

What sounds like a little change,  was actually a lot of work over several months. The effects on performance and loading times are well worth it:

A medium sized website (which I would say are 90% of our customers) now loads only about 35% of the resources it previously did. Thats 65% less stuff to load for your visitor, and therefore usually a huge speed improvement.

It also means that we can now easily add niche features if we consider them valuable without affecting everyone elses performance. (like our new timeline element for example)

Compression

Along with the module based approach, we added a file compression feature that generates and optimises CSS and JS files, based on the features you use. So not only does the theme need to load less resources, those that are loaded are also compressed and cached properly (without any plugins) which further reduces loading times.

File merging and compression for CSS and Javascript

Performance options

Since we were already doing the performance “dance” we added a whole performance theme options tab in your backend, that allows you to fine tune resource loading for your theme with a few clicks. We have already released an article on how to score perfectly on google pagespeed and gtmetrix.

The Performance tab allows you to deactivate unnecessary and often unused default WordPress settings, it allows to change the behavior of our new module loading and compression to previous defaults (if you run into any troubles with plugins) and it offers optimization hints like which image optimization plugin or which caching plugin to use :)

What else is new and deserves a mention?

1.) As always there are lots of changes and improvements in this release and one that we like a lot is the option to use a whole page as a “global template”.
The new template builder element called “page content” allows you to load another page into the page you are currently using.

As an example: lets say on each of your pages you want to display a list of links and logos to your business partners.
If you previously did that and a partner changed you had to change the list on every page individually. Now you can just create a “partnerlist” page that only contains this list and then load it into your frontpage, contact page, about page etc.

If a partner changes you simply edit the “partnerlist” page and those changes will be visible on all your other pages as well.

2.) Similar to that, we figured that using the same boring 3 or 4 column footer layout lost a lot of its appeal over time and is very limiting. You can now generate a footer page with your template builder and set that page to be your footer in your theme options at Enfold->Footer. A simple example of a nice custom footer can be seen in our latest demo.

Among other things we of course got a new demo, new template builder elements called “timeline” and “button row” (which lets you display multiple buttons in one row) full column linking, the option to display a notifications on pageload (eg cookie use) and so much more. Check the Change log for all the big and small details ;)

Whats up next?

Now that we only load features based on usage we are free to add niche template builder elements without affecting users who don’t need those elements. So you will probably see some of those niche elements with some niche demos. That said we are still keen on keeping Enfold easy to use for beginners, so we will of course not add every feature or element that comes to mind :D

We are planing a smaller release next that adds features that satisfy the upcoming General Data Protection Regulation which will be enforced accross the EU and also affect everyone doing business with someone in the EU.

As for the bigger changes that we plan: as I mentioned earlier the way we previously loaded our assests was one of the things that stood in our way to further improve the theme. Another thing that served us well for a time but is now rather limiting are shortcodes. Enfolds template builder is – like most other template builders – based on shortcodes. Back when we first built enfold this was a de-facto standard and it had its merits. However, they are now a thing of the past. Shortcodes are slow (in terms of processing), require a lot of overhead (coding wise), cause problems a lot (with improper html nesting and/or HTML special characters) and are not very flexible in some other regards (nesting, global elements).

WordPress itself is moving away from Shortcodes with their new Gutenberg Editor and we also noticed that some of the things we want to achieve with the builder (like unlimited nesting of columns, template builder content within toggles and tabs, etc) are not really doable while using shortcode as the “data structure” of a page. So this is the 2nd big task that we are tackling. We will change the data format of the builder and get rid of the shortcode structure in the long run to be able to improve the builder the way we would like. This will, like the implementation of modules, take a few releases but once done you are in for some big template builder improvements ;)

Change log

• added: a new demo: Enfold Elegant Portfolio
• added: performance tab in theme options that allows you to improve your website performance by using file compression/removal
• added: button row element that allows to display multiple buttons beside each other
• added: new “typewriter” animation for rotating header element
• added: you can now set links for columns and cells
• added: you can now set a page as footer. This allows completely different footer designs
• added: option to close the notification template builder element and set a cookie to not display it again
• added: option to use background gradients for cells, columns and sections
• added: option to display a cookie use notification
• added: option to display button label as tooltip (that way you can use icon only buttons with hover effect)
• added: option to set a custom 404 page layout
• added: copyright option for image element
• added: plugin check for image optimization and caching plugins
• added: plugin recommendation for image optimization and caching plugins
• added: advanced styling option to style the active main menu item
• added: new google fonts
• added: margin spacing options for header element and header rotation element
• improved: several CSS and JS files will now only load if they are required, based on the theme option settings
• improved: demo import script
• fixed: buttons in main menu now always got the same height
• fixed: usage of the old jQuery Migrate Library no longer necessary due to JS improvements
• fixed: backwards comp. with PHP < 5.5 in header.php
• fixed: slideshow fallback link handling for easy slider
• fixed: an issue with the size of self hosted videos
• fixed: loading of instagram images works properly again
• fixed: backwards compatibility issues wit RTL styling
• fixed: ALB color section: Small Arrow in Bottom Border Styling shows up twice
• fixed: ALB Product Purchase Button and WooCommerce > 3.0 lead to endless loop
• fixed: Small issue in not creating attributes in breadcrumb for first element
• fixed: an issue with event Calender tickets
• fixed: an display issue with the shop main page and the breadcrumb navigation
• fixed: an issue with image overlay display
• updated: Layerslider plugin