The first rule of Fight Club states that you don't talk about Fight Club. The good news is that WordPress Builder Fight Club is a different breed. It is easy to join, you can talk about it, and there is no Brad Pitt to hold (kick) you back.

At WP Builders Fight Club, all major page builders and website builders compete in a fair game to show their performance and abilities.

What is WP Builders Fight Club?

WP Builders Fight Club is a community-driven project for page builders and website builders to compete in terms of performance, design, and other capabilities.

The idea is simple, you need to create a WordPress page. But not any kind of page - the page needs to follow the Fight Club guidelines and requirements. The requirements include technical specifications and design accuracy.

All pages created with different builders are then stored in a similar environment. This helps to measure the performance and receive unbiased results. The results include reports from GTMetrix and Google PageSpeed Insights.

The goal of the project is simple - have an honest and transparent comparison of all major WordPress builders in one place.

As of today, there are all major page builders and website builders presented, including Elementor, Builderius, Beaver Builder, and Visual Composer.

WP Builders Fight Club and Visual Composer

We decided to join WP Builder Fight Club with Visual Composer. Visual Composer Website Builder is a complete solution that allows you to build WordPress sites without using the styling of any WordPress themes.

Our goal was to complete the challenge to showcase the capabilities of our visual site builder while not compromising on performance.

Our solution consisted of Visual Composer, Advanced Custom Fields, and SVG Support. We also had Twenty Twenty-Three theme installed (per WordPress guidelines) but did not use it. What makes Visual Composer stand out is that we will not load any theme files if you are using Theme Builder to avoid theme footprints on performance.
The page layout was built using Visual Composer Theme Builder where you can design headers and footers. In the layout, we used Advanced Custom Fields for dynamic content and custom CSS for additional styling.

Since Visual Composer is a low-code solution, web developers and agencies can easily tweak the look and feel of their sites using custom CSS and JavaScript. In the Fight Club challenge, we used custom CSS to introduce pixel-perfect image overlap.

For the content part, we used Visual Composer free and premium elements from the Visual Composer Hub (cloud element library). The library consists of hundreds of content elements and integrations which reduces the need for additional plugins and add-ons.

Results

With Visual Composer, we managed to score 98 performance points in GTMetrix and Google PageSpeed Insights. The score on mobile was a bit lower (88 points) which means there is room for improvement.

We also reached 100 points in the structure and high scores for accessibility and SEO. To be fair, we did not work on the SEO score as a part of the Fight Club challenge. Jumping into Visual Composer Insights and data attributes can easily help you to get 100 points in SEO.

If we compare Visual Composer with other major builders on the market, we see that we have scored higher than some well-known players and are among the top solutions among builders when it comes to performance.

If you’re curious, you can learn more details about how exactly the page was replicated, what challenges we faced, and how we overcame them.

There is always someone talking about WordPress page builders and performance.

It's a hot topic that receives tons of attention. Conference speeches, blog posts, and even Facebook comments - everyone has a story to share.

No wonder, page builders are prioritizing performance as one of the focus areas. Some even share their success in a form you're all familiar with.

“Our page builder just became faster.”

But what does it really mean? Does it apply to everything that the page builder does?

I'm not in the position to talk about all page builders, but I can say a thing or two (probably more) about Visual Composer.

Today, I want to explore how performance “operates” in Visual Composer. What critical factors affect it and share some of the improvements we've implemented recently.

But before we begin…

This topic was born as the result of our internal educational session which means you have a chance to really look under the hood of Visual Composer.

Let's go.

Performance and resources

When talking about performance, it is important to understand where does it come from.

There are three main components (resources) that are “working” with performance.

It is Network, CPU, and RAM.

In addition, it can refer to either client or server sides.

What does it mean?

Whenever you work with the page builder, either your computer or server resources are consumed. The availability of those resources and optimizations on the page builder side will determine how fast (or slow) your experience is.

In the next chapter, I will present (and explain) the performance schema of Visual Composer. I will mark every block with the resources that are used within the process as followed:

• sNET - server-side network
• sCPU - server-side CPU
• sRAM - server-side RAM
• cNET - client-side network
• cCPU - client-side CPU
• cRAM - client-side RAM

Understanding the resources in use makes it easier for web creators to analyze whether the server requires optimization and how to boost the performance.

Visual Composer performance schema

There are three main blocks of performance we can distinguish:

• Requests
• User interface
• Server-side processing

As you can see from the schema, server-side processing mainly relies on server resources. Requests are a mix of both, while the user interface is highly impacted by the client-side.

We will look into the details of every block to get a more clear understanding.

Requests

All requests refer to the editor's saving and loading operations. The performance of the operations depends on both - the client and server.

The client needs a good network to perform the operation and the server should be able to process as fast as possible. Here, the main pressure lies on the server CPU.

In other words, shared hosting with a virtual CPU (serving many sites) may get you into trouble.

RAM is used for the PHP processes to store arrays and objects in memory. This means that large content blocks with multiple options enabled will consume a good portion of RAM and will have a significant impact on saving operations.

RAM size of at least 256 is much preferred.

To improve performance for these operations, optimization of data size is needed.

In Visual Composer, we have introduced a binary data format that allows us to send more data in a smaller size. This means that fewer server-side resources are spent on saving and loading.

Not all servers accept binary data. The problem usually occurs with Apache and some clients were not able to save the content because Apache refused to accept binary data.

For that, we have introduced an option to enable alternative base64 encoded saving. The method is slower but can be used by clients who are not able to use binary data.

User interface

All about the user interface is all about the client-side (mostly).

Element actions like, adding, removing, updating, and sorting (drag and drop) are managed by the client's browser.

Therefore, resources on your side are crucial.

Most of the user interface processes are consuming CPU power.

To optimize it, we rely on React and other modern technologies.

It is important to keep the framework up to date and perform regular component updates. In other words, keeping development debt low.

We found that technologies like React hooks can significantly improve the performance of these processes.

There, Visual Composer benefits from things like React hooks.

At the same time, hundreds and hundreds of elements will make operations like drag and drop costly.

Talking about rendering - a good network and CPU is needed. Since you need to load elements, images, CSS, and other assets - your network will experience a good amount of workload.

Loading components refer to how fast the server provides the information and how fast the client receives it. Both client and server network plays a significant role there.

To optimize the process, we are using package bundles in production.

Optimization of these bundles is crucial for Visual Composer.

One of the improvements we have introduced recently is gZip support. gZip allows reducing the size of the bundle up to 5 times which means that things will work 5 times faster.

Of course, your server should be able to operate with gZip which is not always the case and some legacy solutions are needed for some clients.

Server-side processing

Server-side processing refers to how fast your server operates with the data.

The time that is needed for the server to take data from the database and process it.

As you can guess, CPU and RAM play main roles there.

Talking about problems and risks, low memory limits can affect the speed of these operations. To avoid the issues, your server must be well optimized and has a sufficient amount of resources.

Outro

Performance is a tough topic and requires attention at different levels.

From the page builder perspective, this means following the latest technologies and introducing regular improvements.

On the web creator side, it is needed to ensure that your server is ready to work with the technologies offered by the page builder.

With both parties involved, performance issues go off the table.

We do the same things in different ways. This is what makes our work unique. Everyone has their own workflow and life hacks to fasten things up and make their work more productive.

Working with Visual Composer is no exception. Even my teammates use features I don't and vice versa. And we work at the same company.

As I had my first Facebook live video, I decided to share some of the tricks I use when working with Visual Composer. The response was brilliant. Messages like “Oh, I did not know that!” made me think about sharing more tips to help you to become more productive.

In this article, I have collected 10 life hacks that I use when working with Visual Composer:

1. Custom row names
2. Global templates
3. Column cloning
4. Global and local CSS
5. Right-click controls
6. Template export and import
7. Page to page copy
8. Element presets
9. Row resizer
10. Append and prepend columns

After seeing how much our users love to both use and share their own Visual Composer hacks, our lovely colleague Irma created a walkthrough video showcasing just how to use each of the hacks mentioned in this article. Enjoy!

Custom row names

You can give custom names to your content elements, including rows and columns. To change the element name, click on the element title in the edit window or in the Tree view.

Why do you even need to rename the elements?

As your page layout becomes bigger, it can get harder and harder to navigate around. Especially, if you need to make changes after some time.

Plus, working in an agency has a high probability of someone else working on the same page. The same applies to delivering your project to the customer.

How to name your elements?

I do not name all of my elements. It feels like a waste of time.

Instead, I like to name my first-level rows and sections. I think you will agree that names like “Header”, “Hero section”, and “Features” make a lot more sense than “Row”, “Row”, “Row” when navigating around the page.

Global templates

A global template is a powerful tool available to Visual Composer users. It allows you to create a template that you can manage from one place and it will automatically get updated all across your website.

As I design a page, I search for the sections that I may want to reuse later on. If the content won't change, it makes sense to convert this part into a global template.

In Visual Composer, you can save any row as a template. And this is what I often do.

I save my reusable rows as global templates. Delete the content I have just created and replace it with the global template.

Such an approach also helps me to instantly see the template in a real layout.

Plus, I can easily add the same content on different pages and make changes to the template from one place whenever I need it.

Column cloning

Imagine you have four features you want to display in four columns next to each other. The easiest way (in my opinion) is to create a single feature and clone to result.

To illustrate the process, let's imagine that each feature consists of the icon followed by a description.

I will start my design process by adding a row with a single column. In the column, I will add my icon element and description.

To save extra time, I will style the icon element and description by applying the Design Options needed.

Once my boilerplate is ready, I use column controls to clone the column (in our case making three additional copies).

Now that I have four columns with features ready, all I need to do is change the icons and update the copy.

Global and local CSS

As a web creator, you like to adjust parts of your content with CSS even when using Visual Composer. There is nothing wrong with that.
The question is whether to use local or global CSS.

Visual Composer offers both options - apply CSS to a certain page or to the whole site.

Whenever I write custom CSS, I insert it locally (page-specific CSS).

Then, I ask myself a question if I will need this CSS on another page. If the answer is yes, I move it to the global CSS.

Of course, there can be cases when CSS is needed on the majority but not all pages. In such a case, you need to decide. For me, 70% is enough coverage to go after the global CSS.

As a workaround, you can use global templates to add custom CSS.

Last, but not least, just like naming the elements makes sense, don't forget to comment and separate your CSS code. You will thank yourself later.

Oh, almost forgot, you can apply the same principles to the custom JavaScript as well.

Right-click controls

Introduced recently, right-click controls are a handy way to quickly access element options.

Due to the fact that you need to use right-click to find out about the controls, some of you may have missed it.

There is not much to say about it apart from “Give it a try”. I found myself saving lots of time with it.

Template export and import

Web creators love boilerplates. The good news is that Visual Composer template export allows you to have them.

There are certain layouts, elements, and maybe even media you like to use across different projects. The question is how to move those presets across your sites easily.

Visual Composer offers a template export option that allows you to move templates across different sites together with all the content elements and media files.

Yes, once you import a template to your newly created WordPress site, Visual Composer will automatically download all the elements used in the template and upload the media to your Media Library.

On my projects, I don't like to download my most used elements over and over again. Instead, I have a template that contains those elements. Once I upload the template to the site, all the elements get downloaded automatically.

Page to page copy

I think this is one of the most popular life hacks in my arsenal and I love it so much.

Did you know that you can copy Visual Composer elements from page to page (within the scope of one site)?

When working with Visual Composer, I usually have at least two browser tabs opened to quickly copy/paste the elements from already created pages to the new one.

No need to recreate the element or use global templates. A simple copy/paste will do the work.

Element presets

You can create global templates or copy elements from page to page.

Yet, there is another way (probably even better) to make sure you don't have to adjust the basic things for your elements over and over again.

Element presets allow you to save any element of Visual Composer as a preset with preconfigured styles.

All of the element presets will appear right in your “Add Content” window and can be used just like any other element.

An additional benefit for web creators is an option to name your presets though giving your customers an idea of what elements to use when managing content on their own.

As I design sites for my friends, I often use element presets to create already branded buttons, images, and text blocks they can use out of the box.

Plus, I don't need to style the same elements over and over again.

Row resizer

Before release 44.0, you were able to adjust row sizes and width within your page or post layout, only within the row layout options.

Now there is an option to stretch and shrink rows via the brand new row resize controls.

Simply hover over the edge of a row you wish to adjust, and click on the vertical dotted control. Now, drag and drop the borders right and left to change the width of your rows to see faster results.

While this option allows you to change the margins of any row easily, it keeps the columns intact, adjusting them proportionally to the new row sizes.

And, you can still check and correct the values in the row layout options, same as before.

This feature truly is a cherry on top of what makes the Visual Composer editor true to WYSIWYG.

Append and prepend columns

Before the release 44.0, you were able to add extra columns to a row by selecting from the pre-set layouts or adding an extra row by typing in a new value in custom row layout options.

Now, when you hover over the edge of the first or last column of a row, you will see an additional plus icon. To add a new column simply click hover over the outline of a row, and click the plus icon.

This is such a simple yet handy feature that allows you to create layouts in Visual Composer even quicker.

Outro

I have shared 10 life hacks of mine that I use when working with Visual Composer.

I hope you find them useful and applicable to your workflow. Maybe it will save your time and you will be able to create more projects or spend more time with your family.

If you are looking for ways to learn more about certain features - visit our Help Center.

Also, I encourage you to share your tips and tricks in the comments below and in our official community on Facebook.

See you online.

Do you think that image optimization doesn't make much of a difference to site performance? “It doesn't take much effort, so it must not help much..”, well wrong. It is surprising how many of us overlook the value of this simple action.

Image optimization can actually improve your site’s loading speed, SEO ranking, and user experience altogether. These are the crucial factors that define if users will either love or leave your page without giving it a second thought.

In this article we break down:

• Why Is Site Performance Important
• What Factors Affect Performance
• How To Measure Performance
• How To Improve Performance With Visual Composer Insights
• Best Practices For Image Optimization
• Image Optimization Tools

So, let's get into it

Why Is Site Performance Important

Website performance is as crucial as the content itself. Even more, if you have an online business that offers a great product, but the content loads slowly - most likely users won't even consider taking a look at what you have to offer and run straight for the exit.

On the other hand, websites with good performance are more likely to be pushed higher in search results, bring in more visitors, boost conversion rates and reduce bounce rate. It all comes down to efficiency, if a site performs well, users are more likely to spend more time on site.

This video explains how to test and improve your website performance, with factors that are also mentioned ahead:

What Factors Affect Performance

Speed

Google confirms that speed is a ranking factor. Google offers very good tools to check the performance of your site completely for free. Aim for a loading speed under two seconds.

Uptime

Uptime is a metric that shows how often your server is up and running. If it’s not, your visitors can’t access your site and that’s a big issue. Most WordPress hosting providers will promise 99.9% server uptime, but it’s not always true so it’s beneficial to keep track yourself.

Malware

As your site grows there’s a bigger risk of being subjected to attacks on your site. It is done for various purposes, including hijacking payment systems and website traffic. So checking your site for malware is a must. And fortunately, there are tools and plugins for this too.

SEO

Search engine optimization is responsible for how your site ranks in search engines, so obviously, this is a very important step if you want your site to be easily discoverable.

Mobile-friendliness

Like speed, Mobile responsiveness also significantly impacts ranking so you always have to make sure that it works and looks good on all devices. To ensure that your site is mobile-friendly, you can always start by choosing a theme that offers responsiveness options.

How To Measure Performance

• When it comes to site speed you can use the Web.dev tool that measures performance, accessibility, SEO, and gives examples of the best practices. The score scale that they provide shows what improvements can be made to improve your site.
• Another tool by thinkwithgoogle called “test my site” and tests your site performance on mobile devices. Simply write down your URL. The tool will analyze it and give you tips on improvement.
• The most popular tool for measuring uptime is Uptime Robot. You first have to go through the free registration and then the tool will start testing your site’s uptime.
• A great tool for checking the security level of your site is Sucuri. Sucuri itself is a great security plugin for attack prevention, monitoring, and everything else security-related, so give it a try.
• A good tool to use to check SEO is SiteChecker. It will give you a score out of 100 and show you what issues your site might have. Those can include missing alt tags, title duplicates, no outgoing links on a page, and many other things that have a big impact on SEO.
• In addition, to keep the content on your site SEO friendly, a plugin like Yoast SEO comes in handy. It analyzes the content and gives suggestions too. When writing a blog post, Yoast will analyze the content and show any issues that might be there. Follow the instructions, look for the green smiley face and your site will rank way higher.
• To check whether your site is mobile-friendly you can use the search.google.com test. Simply enter your URL and it will tell you if it is.
• Also, website builders like Visual Composer, for example, offer a ton of custom responsiveness options on top of the auto-responsiveness feature within the editor itself.

Note: We have listed the top free tools we recommend, but there are multiple website performance testing tools available for examining different factors at different price points.

How To Optimize Performance With Visual Composer Insights

In this video, we explain the process of optimizing images in detail of each step. And offer examples of how the Visual Composer Insights tool can help detect problem zones that need improvement in order for your site to run smoothly.

For best results, always keep your eye on the Insight icon in the Visual Composer editor. If it's green - you're good to go!

Best Practices For Image Optimization

1. Optimize while creating - create pictures in the right size - if your website needs a pixel dimension of 600x400, do so from the very start, not resize it after.
2. Save images as PNG - although JPEG might load images faster, PNG offers a higher resolution and clearer pixels, and we don't recommend having low-quality images on your site.
3. Compress the images - use tools listed further in the article to reduce image size by up to 70% without affecting how the image quality is perceived.
4. Add metadata - Alt text (alternative text) should shortly describe what is visualized in the image, so that it is clear what is shown in the image, in cases when it isn't visible.
5. Remove unnecessary images - cleaning up the WordPress media library also frees up storage space.
6. Use lazy load - finally use plugins that offer lazy load for media, such as Visual Composer - this will make your website lighter and speed up the loading time of the rest of the site.

Image Optimization Tools

• The Tinypng image compressor tool optimizes your PNG images by around 50-80% while preserving full transparency. You can also use TinyJPG - their website for JPEG image compression.

• The Kraken image optimization tool supports many formats, such as JPG, PNG, SVG, and even animated GIFs, and reduces image size by removing unnecessary data.

• The design tool Canva lets you resize your images online and for free. This is great if you don't have access to tools like Photoshop or Sketch.

Wrap Up

When optimizing images for your website, it is important to find the middle ground between the smallest possible size and optimal quality. The steps into doing so are choosing the file format that fits your needs, finding the right size for your images from the start, optimizing them with image compression, and adding lazy load for your media.

As you might have already guessed, image optimization is only one part of the whole website performance improvement process, yet it alone can reduce the website loading speed enormously. Not only that, but it can also improve the SEO ranking and user experience, granted to better your chances of gaining conversions.

So, don't sleep on your website’s performance - start using the best practices and tools for improvement, that your visitors will appreciate!