Convert Website to Oxygen Builder (Case Study)

Do you want to convert a website using Oxygen Builder? This article are examples of cases and performance improvements from the optimization results.
Updated: 24 December 2020
Share:
1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading...
GTMetrix Score Deco Cipta Graha - After Optimization+Cache+Nearest Server
Hi Digital Buddy! In this article we will share information about convertion results "WordPress non Oxygen Builder"  into a "WordPress using Oxygen Builder" website.

In addition to promoting conversion to WordPress and Oxygen Builder services, maybe this article can also be useful too for those of you who will carry out the same process.
tl;dr
We use Oxygen Builder to convert old website designs.
The measurement results with GTMetrix show a better website performance improvement after the conversion process to Oxygen Builder from the previous F value to A
Table of Contents
Primary Item (H2)

Convert Website Background

We have clients engaged in general construction services or so-called General Contractors . This company has a company profile website that we helped create in 2017 and includes maintenance services untill now.

The website is created using the WordPress CMS. However, we feel that the current website performance still needs to be optimized again.

As has been widely discussed and consider by many website owners, managers and developers everywhere, Google will consider the performance of a website as a factor in determining ranking.

Apart from the Google ranking factor, this is also a consideration for us to increase the convenience of our visitors.

According to research, the higher the user experience (User Experience), the higher the probability of successful conversion of a website, so there is a need to improve the performance of the website.
If you are interested in reading an article about the relationship between user satisfaction and Google ranking and the success rate of a website, please read the article below:
About the performance of this website is one of our concerns because it is feared that the impact of the website will be less significant as a support for the success of a company.

Because of that we are trying to improve the performance and performance of the company's website, while providing a touch of a few design modifications as a design refresher that aims to make users have a more enjoyable browsing experience.

What process have we worked on?

To improve the performance and refresh the website design, the basic steps that we do are as follows:
  1. Measuring the performance of an old website when it hasn't been repaired (let's call it an original website is an old website).
  2. Clone or make duplicates of old websites.
  3. From the cloned website or the new website, we convert into a new website built with the Oxygen Builder plugin, of course the majority of themes follow the old website design although we have changed a few.
  4. After the new website is finished, we delete the old website, preceded by a backup process first.
  5. The new website is moved / migrated and set with other technical processes, so that it can replace the old website.
  6. New website performance measurement. Even though the results are better, it is still far from satisfactory.
  7. Doing optimizations, and the final result in our opinion is quite satisfying, both in terms of design and especially in terms of performance.

Why Do We Use Oxygen Builder?

The short answer is because Oxygen Builder is not as bloat as other page builders and has very good design flexibility, so we hope that the new website will be maximized in performance with a design similar to the old website, even if it can be better than the previous design.

Indeed, if you only convert to Oxygen Builder without optimization, the results obtained are also not optimal. But Oxygen Builder provides wider opportunities for us to be able to optimize the website that we create.

For those of you who may not be familiar with the Oxygen Builder plugin, you can read our article "Oxygen Builder, the Best WordPress Page Builder Plugin?" which may provide additional insight into why we chose to use this plugin.
Do you need freelancers to design, build, develop a website or convert from an old website design to WordPress with Oxygen Builder?
Request A Free Quote

Performance Measurement Methods

  1. We use GTMetrix in measuring website performance both before and after the conversion process. There are indeed several measurement tools besides GTMetrix, but we think that for this article one tool is sufficient as an illustration. 
  2. Our server locations are in Singapore.
  3. The type of hosting we use is Reseller / Shared hosting - according to us - middle class (not cheap and not expensive), not VPS, Cloud Hosting, or Dedicated Server.
  4. The GTMetrix measurement location that we use is Vancouver - Canada as the default, and Hong Kong - China to find out the difference in measurements from the closest server location.
  5. In several tests using GTMetrix, we measured 2x sequentially to find out the measurement results without cache, and the second for the measurement results when the condition was cached.

Documentation of Converting to Oxygen Builder

Below are some screenshots that will provide a clearer picture of the conditions before and after the conversion + optimization process.

1. Measurement of website performance before and after conversion

GTMetrix Score Deco Cipta Graha - Before Convert to Oxygen Builder
GTMetrix measurement results on the old website.
GTMetrix Score Deco Cipta Graha - After Convert Non Optimize
The results of GTMetrix measurements on the new website after conversion with Oxygen Builder, show an increase but not yet significant.

2. "Home Page" Design

Before Conversion
After Conversion

3. "About" page design

Before Conversion
After Conversion

4. "Management" page design

Before Conversion
After Conversion

5. "Legality" Page Design

Before Conversion
After Conversion

6. "Portfolio" Page Design

Before Conversion
After Conversion

7. "Contact" Page Design

Before Conversion
After Conversion

Website Performance Optimization

After the conversion process to Oxygen Builder is complete, the next step we do is optimize it.

One of the things that really disturbs the performance of a website, especially WordPress, is the burdensome plugins.

In this case, we observed that the types of slider and grid gallery plugins that have been installed have a significant effect on website performance (we did not mention the plugin name).

The plugin is visually very good, but the drawback is that it is very burdensome for the performance of the website.

We try to optimize it by:
replace the slider plugin using the slider from Oxygen Builder,
create a new gallery with repeater and superbox elements from Oxygen Builder which combine javascript, php, html and css,
and several other website optimization techniques.
After the optimization process is complete, then we measure the performance with GTMetrix again and the results are quite satisfying.

Here are some additional changes to explain the results of the optimization we have done:

1. Optimization of Home Page Design

Changing the Slider and Gallery on the Home page

2. Portfolio & Single Project Page Design Optimization

Changing the Gallery on the Portfolio & Single Project page

3. Some Performance Measurement Results After Optimization

GTMetrix Score Deco Cipta Graha - After Optimization
GTMetrix measurement results after Optimization from F to A. The first measurement (GTMetrix without caching )
GTMetrix Score Deco Cipta Graha - After Optimization with Cache
GTMetrix measurement results after optimization. Second Measurement (GTMetrix with caching)
GTMetrix Score Deco Cipta Graha - After Optimization+Cache+Nearest Server
GTMetrix measurement results after optimization. Second measurement (GTMetrix with caching ) is measured from the closest server location (Hong Kong) to our server (Singapore).

Conclusion

From what we have done, we can see a very significant increase in website performance.

Of course the results of these measurements may change because they are influenced by various factors, but in general we can see an increase.

Apart from what we have done to optimize it, we are sure that there are still many ways that can improve website performance but we have not done it yet, for example improving the quality of hosting (moving hosting) that we use to a better one.

How about you? Do you have any tips for improving the performance of your website? Please share in the comments column below.

Happy Digitalyze Your Life!
Need help to convert your website into WordPress & Oxygen Builder?
Request a Free Quote

Leave a Reply

Your email address will not be published. Required fields are marked *

Latest Article

How to Apply Headroom.js on WordPress and Oxygen Builder
This article explains how to use Headroom.js in WordPress and Oxygen Builder, but you can also apply it to any website.
Read more...
How to Create an Off-Canvas Menu with Oxygen Builder
This article explains how to create an off-canvas menu on a website using the WordPress CMS and the Oxygen Builder plugin
Read more...
Create Sticky Header and Shrink Logo in 3 Step with Oxygen Builder
This article contains a tutorial for those who use Oxygen Builder to make sticky headers and logo images shrink.
Read more...
COMPLETE PACKAGE OF WEBSITE DESIGN & DEVELOPMENT
Digitalizer offers website design & development services for company profiles, online shops, event organizers, educational institutions or other fields. You don't need to think about domains, web hosting / servers, DNS, email, design, development, security and other technical issues. Just prepare your website content, we do the rest.
All website design & development packages include 1 year maintenance!
Free Consultation
logo digitalizer
Digitalizer My ID 2020 - Allright Reserved