Here at Themify, we're always working hard to create and improve our products! Focusing not only on adding features or improving the UI design, but also the overall performance and user experience of the Themify framework. Which is why, we're proud to introduce to all of you, our latest framework update 2.4.2. We've got a lot in store for you with this new update. Below are the main highlight to take note of, as you upgrade to the latest framework.

Data Format Change

To make Builder data migration easier, we've changed the data structure to prevent serialized data breakage when migrating to different domains.

IMPORTANT: After you upgraded to the new version, do not downgrade the framework or Builder plugin back to the previous versions manually (ie. don't replace the theme/plugin folder manually to previous versions). When the framework/plugin is upgraded, the Builder data is automatically converted to the new format. Thus, replacing the framework/plugin back to previous versions might result to a blank Builder content because the data format is different. Not to worry though, the Builder data is still there in the database, just not visible on the frontend rendering. If you really need to downgrade afterward, install Builder Data Migrator plugin which allows you to convert the Builder data between old/new format. To convert data with the plugin: with the migrator plugin activated, go to WP-admin > Tools > Builder Data Migrator, click "Convert all Builder data to New format" button.

Huge Performance Improvement - Up to 50% Faster!

Asynchronous Loading

To improve page load time, the Builder CSS and JS files are now loaded asynchronously rather than regularly enqueue. This means that when a user visits your site, their browser does not have to wait for all the JavaScripts to load before rendering the page.

HTML Caching

In this update, we've added HTML caching to reduce page load time and server processing workloads. When a Builder page is first requested, it generates a static HTML file of the Builder content, then it will use the cached HTML file to render page. This improves both page load and server processing time significantly because it bypasses server processing on every page request.

Performance Results

Testing environment

  • WP version 4.3.1
  • All plugins (except the Builder) disabled
  • Using Twenty Fifteen theme
  • DigitalOcean 1 CPU, 512MB RAM
  • MySQL, Nginx, PHP-FPM 5.6
  • Testing a single sample page with some text

    • We've done some performance test between the old and new version. We've used 2 themes to do our primary testings. The Basic (simplest) and the Ultra (most feature intensive) theme, and compared the result of the load times when adding multiple modules on a page. Below are our findings:

    • old-framework Old Framework
    • new-framework New Framework
    table-findings

    From this testing, we can infer that With standard-sized pages (e.g. Agency layout), there is a visible improvement but not significant. With the old Builder on WordPress, the server managed to respond to 233 requests with an average response time of 3400ms. On the other hand, with the new Builder on WordPress, the server managed to respond to 285 requests with an average response time of 3000ms (3 seconds). This represents a 22% improvement in quantity of successfully served requests and 12% improvement in the average response time.

    However, with very complex pages containing 30 rows with three text modules on each one of them, there is a major performance improvement of the Builder plugin. While the new Builder managed to respond to 300 requests with 3000ms (3 seconds) average response time, the old Builder was able to respond to only 7 requests with 10000ms (10 seconds) average response time. Thus it is possible to use the new Builder on very large sites whereas previously with the old Builder it was impossible to do so.

    UPDATE:

    We've fixed the following common issues in the latest version (please upgrade again):

    • Duplicate (double) Builder modules
    • Builder content output in <head>