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
So what did we change and why?
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.
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)
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.
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 ;)
- 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
Fantastic! Always liked the way you guys keep improving an already better theme. Thank you!
i’ve just updated the theme, but where do i find this performance menu? i could not find it
It is located at Enfold->Performance
Awesome update! Some of these updates mean I can finally remove some of the custom work and plugins we’ve built or added. Loving it :-)
Can you share any more detail on the GDPR changes like when that is planned for release and what will be inlcuded?
So far the performance seem to be behaving nicely with WP Rocket.
Our biggest concern right now are external services (google fonts, facebook page widget, instagram widget, etc), so we will try to limit any traffic to an external service without the user knowing/initiating it. There are a few things to do and consider but the release is definitely a smaller one so we will try to release it within the next 3 weeks…
We are now confident that you will master Gutenberg as well :-)
F.y.i the Cache Detector doesn’t recognize WP Rocket.
Only thing I would add would be more header layouts with logo top left, menu below, but the option to add a widget area above on the right on a desktop.
Along with this, it would be amazing to have a header that is logo above, menu below, but then you can uncheck logo area sticky so only the menu bar sticks on stroll much like we have the option to unstick top bar.
would you mind letting us know the folder name of the plugin and the name of the main plugin file? then we can add it to the detector ;)
Great news Kriesi,
We really love the performance upgrades which will let us to reconsider any additional compression plugins.
Let’s hope you will also think about how to create content blocks for websites with a lot of similar contents on all pages and let non-admins or editors to load predefined avia templates when creating new pages.
Great work!!! Thank you!
I would like to ask if you will add google reCAPTCHA option in contact forms?
This is great to see, and I like many of the features of 4.3. However I am disappointed that the self-hosted video bug on Full Screen Slider seems to be “back” with 4.3, after many threads since last September. Each version of Enfold that releases seems to break this functionality. Why?
And also bummed that the day 4.3 is released the mods seem overwhelmed on the forum. The entire first page is just user posts with no mod responses. I would think on release day you would have “all hands on deck”?
Thanks for continuing to evolve the theme.
Great job! Keep up the good work.
Love this update!
Thanks again for a successful update. Now it is time to go on a journey of discovery.
Hi, Enfold team, great work, I’m loving it, thanks
and I am waiting for the guide: how to score perfectly on google pagespeed and gtmetrix.
[the option to display a notifications on pageload (eg cookie use) ]
I can not find this option, please be so kind to show me ?
It is located in your theme options at Enfold->Cookie Consent
Just an amazing new release!
Very well thought about what a modern wordpress site really needs. I can actually lose a couple of plugins now that I was using for very specific things – Custom 404, Notification Popup.
As well, I was already cheating the footer by copy/pasting enfold page debugger into the footer field, but this new option will be a much cleaner approach.
Plus the ability to disable unused elements!
Just amazing, please keep up the great work, I’ve used a dozen other themes but Enfold is still my favourite!
Nice update :-)
One minor thing: The Cache detection dosen’t recognize Comet Cache Pro and are reporting no cacheing plugin installed even when Comet Cache Pro is installed and active.
would you mind letting us know the folder name of the plugin and the name of the main plugin file? then we can add it to the detector ;)
folder name: comet-cache-pro
file name: comet-cache-pro.php
Hi there, I think you did a really good job here, I love the performance focus you had, and I am really happy to see that you are planning something about the GDPR coming in may. I am using this template for more than one website and it’s been great so far so I am expecting to be just better now. Well done Kriesi team.
The only one thing I was waiting to see but from your update log looks like is not available yet, is a good update to match the latest woocommerce available. They went through a big release (I think mostly for security reason) but seems I cannot do the update or it won’t work because of some compatibility issue with the theme. Being an e-commerce would be really nice to run the latest woo core together with the latest Enfold core.
Hey Andrea! I am not aware of any such issues. I was able to update WooCommerce just fine. Did you open a thread in out forum about the topic? If not please do so and we can take a closer look…
WOW- so many features i missed in the last months. As well the footer option and over all the page-module is awesome!!!
It´s a Framework… not a Template! ;)
danke für das neue Update, da habe ich als Designer auf das richtige Pferd gesetzt.
Jetzt fehlt mir nur noch ein Flexibler Header-Bereich, damit sich die Websites noch mehr individualisieren lassen.
Bin ich aber guter Dinge, das dies noch kommen wird.
You guys deserve continued expansion in your success. You are a remarkable example of having integrity with your product and caring about your customers. Your support is second to none, and keeping abreast of the pace of changes is phenomenal. On behalf of all the customers who complain about the things are imperfect “in this imperfect” world… THANK YOU for the bigger list of things that do work!!!
Wow, mow I am able to trash few plugins incase of embedding pages content anywhere. Opening hours plugin or events plugin if I have only few events to show. Thats great.
Hello. Thank you for the update. Updating, I received an error:
Warning: Error while sending QUERY packet. PID=642900 in /home/(cpanel name removed for privacy)/public_html/wp-includes/wp-db.php on line 1924
Please help. Thank you!
This sounds really exciting.
First of all I thought this update is great and I really appreciate the work of you guys.
In my case, for some reason, enabling CSS and JS compression plus only loading several theme elements decreases the value for my page.
Before: Mobile 90/100 points and for Desktop I get 92/100.
After: Mobile 49/100 and Desktop 90/100.
Thanks and cheers
Only thing I can imagine is that an existing caching or optimisation plugin is active and does not play well with the theme. Conditional loading should always work fine and only improve the loading time (but will usually not affect the page score) If the compression affects your score (and more importantly your loading time) in a negative way then I would simply not use it. 90 & 92 scores are great anyways ;)
Great job. I really like Enfold theme as it is lightest of all other multipurpose themes. After this upgrade I’m sure I’ll fall in love with it.
Can’t believe its possible to achieve 100 on GTmatrix or Google pagespeed with WordPress. Excited for the next post.
The partner/logo element is not good :(
The logo’s blew up and it is not possible to set the original scale (size)
Hi Kriesi, I have a question, the Enfold theme can be used without cache plugins and at the same time with excellent speed for google? thanks…, I love Enfold
If you got a good server then yes, no caching plugin needed ;)
Have you changed something at the «Partner/Logo Element»? The elements are displayed much bigger than before and it seems that they are stretched.
Here is an example: http://photomuensingen.ch/home/sponsoren2018/
This all sounds great. The last fews years I push my clients towards Enfold if they are looking for a decent (the best) WordPress theme. Glad most of them believe me. :-)
However … One thing: will everything keep on working? Some of my clients have large websites. They are happy now with Enfold, but will they need to rebuild stuff?
Also the fact that you are planning to move away from shortcodes (which is probably a good thing) concerns me a bit. I have a few client who depent on those shortcodes (they use them to generate posts and pages with content that comes from another source by importing that content with WPAll Import for example). What about that in the future? Will they be able to keep using shortcodes in let’s say one or two years?
We have done out best with this release to keep everything backwards compatible and working. We might have missed small things but there are already hundreds of people using the latest version and there are no signs of major problems so I would assume we got the update right :)
As with every big WordPress, Theme or Plugin update we recommend to make a backup of your current state though (managewp for example has a great free plan). Its always be better to be safe than sorry ;)
Shortcode will be supported for a long time to come, probably much longer than 2 years. So your clients will be able to use them in their posts and pages for backward compatibility if required.
But we will try to move the template builder forward, which means the data structure to store a template builder layout will no longer be a big chunk of shortcodes (as it is now) but a neat data array (which will be much easier to manipulate and improve with new features). This data will still be stored in a typical wordpress fashion as post meta data, and will be included in every XML export file, and therefore be easy to be moved between installations ;)
Thanks for the update, unfortunatley my second language page (main is English and second is German) now does not load correctly anymore. I use WPML for the translations…any idea why this is? Thanks a lot for your repley!
I am very satisfied with this theme. Glad I chose this one.