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
80 replies
« Older Comments
  1. Skye
    Skye says:

    Great work! Thank you!

    Caching Plugins detection dosen’t recognize WP Rocket and are reporting no cacheing plugin installed.

    Folder name: wp-rocket
    File name: wp-rocket.php

  2. Ulle
    Ulle says:

    Great work guys!
    Really excited about this update. I’ve always felt that speed and robustness are the two most important things when it comes to a wordpress theme. The third thing is features. Excited to see some new ALB elements.
    Haven’t installed the 4.3. update yet but I have multiple sites running Enfold and these updates make me feel really good about choosing enfold as my theme of choice.
    I will continue using enfold on future projects.
    Thanks for keeping the theme up to date and preparing for things like GDPR.

  3. Ritchie Pettauer | datenschmutz.net
    Ritchie Pettauer | datenschmutz.net says:

    WOW-wiggedy-WOW-WOW-WOW! Didn’t expect such a huge performance- and feature-packed update even before the gdpr regulations thingie… You guys keep surprising us lucky user time and time again. I could say so many nice things about this thtme, but let me just stick with this: Since I switched to Enfold, building great WordPress sites has become ten times more fun and twentey times less time consuming. You just R-to-the-O-to-the-C-to-the-K…R.O.C.K.!!! (And I don’t use triple punctuations easily either, believe me.)

  4. Raymmar
    Raymmar says:

    You all never cease to impress me with the thought that goes into your theme releases. A long time ago I decided you all were the best WordPress theme around, and each release reaffirms it. Thank you for helping us all be better at the things we do by doing what you all do so well.

    Much love,

    Another Enfold User…

  5. Simon
    Simon says:

    This is absolutely excellent news thank you!
    As a long time user and promoter of Enfold to my customers I am very happy to be able to continue to recommend the theme.
    Can you tell me if the new ‘out of the box’ settings for the Enfold theme are the ones which you used to gain 100/100 please? And if not then can you publish the complete settings list please?
    Thank you again,
    Simon

  6. Rapha E.
    Rapha E. says:

    Still and always speed up my Enfold pages… But i am asking myself is this stilöl needed?

    /* Layerslider deactivate
    ************************************************************************************************************** Enfold */
    add_theme_support(‘deactivate_layerslider’);

    There are awesome Plugins like WP Disable or other??

    • TJ
      TJ says:

      Yes. The Google Map Element is disabled by ‘Load only used elements’, so I can’t use that feature yet.

    • Alfonso Balcells
      Alfonso Balcells says:

      The same thing happens to me.
      Google Maps and Enfold form disabled when activated:
      Disabling of template builder elements (Load only ussed elemment)

    • Alfonso Balcells
      Alfonso Balcells says:

      Excuse me, interestingly in one Web site, and in another do not occupy this.
      And also tell you, good job;)

  7. Paul
    Paul says:

    how to score perfectly on google pagespeed and gtmetrix,
    when we can read this article please?
    thanks in advance.

  8. Henry
    Henry says:

    Thanks for this updates. I was actually working on my page speed. But seeing this made me so happy as it has eased my work. Thanks a lot and keep up with the good work.

  9. Alexander Noé
    Alexander Noé says:

    Hi team,
    great update! Plz don´t forget to attach the detection of WP Rocket as caching tool into the next release.
    Best regards,
    Alexander

  10. Marco
    Marco says:

    I would like to report a bug: if I use advanced editor to configure a woocommerce product, the reviews disappear.

  11. accurIT Presence
    accurIT Presence says:

    The following line should be removed or re-worded, as it’s not true.

    “Search rankings will be higher for Websites using Enfold since loading speed is factored into search results.”

    • accurIT Presence
      accurIT Presence says:

      Also, the scores/grades graphic you are displaying is bad form. You can have an almost perfect score and not have a site that loads quickly, due to overall site size, external HTTP requests, etc.

      Huge fan of Enfold, but c’mon guys.

    • Kriesi
      Kriesi says:

      Alright. Slightly reworded it but the general information still holds true. Google announced the following in January:

      “Today we’re announcing that starting in July 2018, page speed will be a ranking factor for mobile searches.”

      And the scores/grades graphic is a teaser for the next blog post, were we also mention that 100/100 is not exactly necessary and often comes with drawbacks and is also only an indicator for good performance, but to get the readers attention I think its fair to post such a picture ;)

      I think among the competition we are still among those who really try not to over exaggerate for marketing purposes, but we still need to do a little bit of marketing, so don’t judge us too hard :D

  12. Giang Hannah
    Giang Hannah says:

    Great work. Thank you!
    I was actually working on my page speed. But seeing this made me so happy as it has eased my work. Thanks a lot and keep up with the good work.

  13. Sam
    Sam says:

    It would be great if you had a tutorial of some sort on when to implement these features. I tried them out and it made things worse and not only that it caused some of web pages to render improperly. It would also be great to some sort of visual to go with each element or an indicator to let us know if it is actually being used in the site. Then we know what to turn off.

  14. Mike
    Mike says:

    Very nice updates for performance!! I ran a gtmetrix.com report on the website before I made any updates and then ran the report again after I updated the theme and implemented some of the new features and watched the scores get better with every change! Very nicely done, the hard work put in to this really shows!!’

    Thanks for the big update!

« Older Comments

Comments are closed.