You can build a website with WordPress without much coding skill, or even without touching any line of code. The reason lies in many wonderful tools which help you do it easily. The most popular tools, it's no doubt to say, are Gutenberg and page builders. At the moment, they have their pros and cons, so it's not easy to decide which one is the best and overwhelms the other.
However, it's still possible to have a general look and honest review, comparison of Gutenberg and page builders. So, we are going to do a comparison, in-depth analysis about them following these criteria:
- Highlight features
- Ease of use
- Responsive
- Performance in reality
As for the Gutenberg vs. page builders performance comparison, we will compare Gutenberg and a recently well-known page builder - Oxygen.
This performance test is done objectively based on some standards that I will give you more detail in the Testing Method section. Anyway, I have to admit that I'm not an expert in website speed testing so it may be difficult to avoid unexpected mistakes. Therefore, please leave your comments to help this post be more comprehensive.
Besides, before starting this comparison, to make it clear, we don't totally support Gutenberg or any page builder in this article. I'm just going to write down my experience after using these WordPress tools for different projects.
Now, no more rambling, let's start!
Gutenberg Quick Introduction
As we all know, on June, 12th 2018, WordPress 5.0 was released with a big change: the new editor named Gutenberg.
Gutenberg was initially launched as an editor based on blocks - so we call it the block editor. You can move the blocks by dragging and dropping, put them in columns to change the layout, group the blocks, ... Each block also has its own settings so that you can customize it easily. Gutenberg is also integrated with many pre-built blocks and block patterns so users can use them immediately and change their content as well.
Well, so it can be seen that Gutenberg helps you create content in a much more intuitive way than the TinyMCE before.
As time passes by, Gutenberg has been developed and upgraded. It now is more than an editor. It provides a lot of advanced blocks like button, table, embed, etc., and the elements to build the whole website as site logo, navigation, etc. appeared when the Full Site Editing (FSE) was released as I introduced in the previous post. Thanks to them, Gutenberg has become a tool to build the entire website, and apparently, without coding.
Now, let's see what the differences between Gutenberg and page builders are.
Highlight Features: Gutenberg vs. Page Builders
First of all, I summed up the differences between Gutenberg and page builders' highlight features in the table below:
| Gutenberg | Page Builders | |
| The elements to build content | Uses blocks to build content. Provides basic blocks like text, image, table, button, embed, ... | Each page builder has its own terms like elements or module for this. Provide more elements diversely like maps, image carousel, accordion tab, ... The premium versions often have more advanced and interesting elements like form, slide, pricing list, portfolio, testimonial, counter, ... |
| Customizability | Allows customizing basically for each block or the whole content. | Able to customize many different elements, from padding, margin, to animation and styles. |
| Layout creation | Create columns in a basic way. Unable to drag to change the size of the columns. | Create complicated and complex layouts. Able to hold and drag to change the size and proportion between columns. |
| Full-site editing ability | The Full Site Editing feature is still in trial. | Premium versions provide the full-site editing options like header, footer, sidebar, ... |
| WYSIWYG | Hasn't been available yet. The interface on the back end may be different from the front end. | Available. You can lively preview your changes and they are exactly the same as the front-end display. |
Through this table, we can see that the strengths of page builders lie in their ability to create complicated layouts and powerful customizability.
While page builders exceed the post or page editor and can help users edit the entire website, Gutenberg now is still testing the Full Site Editing. However, Gutenberg is quickly developed so who knows that it will catch up with page builders, or even surpass them in a very short time.
Ease of Use: Gutenberg Vs. Page Builders
Gutenberg
Gutenberg's interface is very clear and simple so it's quite easy to use.
It's also easy and quick to deal with the blocks. For example, just click the (+) signs to add new blocks.
The Settings tab on the right to customize the block gives you many configurations for each block type. But, they mainly are basic settings, which are clear and easy to deal with.
There are tooltips with detailed descriptions and intuitive examples to show users how to use a block type.
Page Builders
Of course, each page builder has a different interface, but they're quite similar to use. So I will take Oxygen as an example.
You have an area for live preview to know what exactly your site looks like.
Oxygen has a list of elements on the left (other page builders have the list as well). To add these elements to your site, just double-click on them. That's quite simple.
When you add an element, the left sidebar will automatically turn to the settings area with many options for this element.
With most of the page builders, there are various settings for the elements. Generally, they're more complicated than in Gutenberg. But that also means you have higher customizability.
If you want to view the order or arrange the elements on your site, just go to Structure. You can duplicate, delete, or move the elements by dragging and dropping them here, not in the preview area.
However, that's only true with Oxygen. Other page builders may be different. Some tools can allow you to drag and drop elements directly on the preview area. Generally, I find that this drag and drop feature is still not really smooth, and even sometimes it's difficult to drag the elements to the wanted place.
Sum up:
You can see that each tool has its own interface and so does each page builder. Therefore, it's obvious that each tool has a different way to use and interact with. Also, being difficult or easy depends on the habits and hobbies of users. In my opinion, I think that Gutenberg is quite simpler, easier to use, and easier to get used to than the page builders' interface.
Responsive: Gutenberg Vs. Page Builders
There are more and more people surfing for webs with mobile devices like smartphones and tablets. According to Statista, there were 4.28 billion using mobile devices to go online, which accounted for 90% of the total Internet users. Thus, responsiveness is now a compulsory requirement for a website to bring better user experiences. In this aspect, page builders seem to do better than Gutenberg.
Page builders often provide users with the pretty strong ability to preview and customize the display of websites on different devices. Even that, you can set up font sizes, paddings, margins, animation, ... for each device.
With Gutenberg, the live preview on mobiles and tablets hasn't been available yet. Therefore, I think that it's difficult to ensure that your layout looks good on other devices or not.
Performance: Gutenberg Vs. Page Builders
The Testing Method for the Loading Speed Test
I'm going to use two websites to test and compare their loading speed. One is built with Gutenberg (with TT1 Blocks, a block-based theme) and the other is built with Oxygen (the latest version).
I choose Oxygen because this page builder wholly deactivates the theme so the site will be built from scratch. That's why Oxygen is considered to help improve the website loading speed considerably. Choosing Oxygen will help this article be more objective.
Besides, I'm going to follow these criteria:
- Use the same shared hosting for both websites;
- Use the same structure and content for both websites;
- Disable cache for both websites;
- Use the latest WooCommerce version to build product pages for both websites;
- Use Google PageSpeed Insights and GTMetrix testing tools, and I was at the same location while testing;
- Using indexes: speed score, total page size (kB), fully loaded times, and the number of necessary requests, JS, CSS files, and loaded fonts.
Performance of the Websites in General
After doing the test for the websites' performance in general, I have these results:
| Page Builder | Speed score | Request | Total page size (kB) | Fully loaded time (s) | JS | CSS | Font |
| Gutenberg | 93 | 25 | 117 | 1.75 | 9 | 10 | 0 |
| Oxygen | 87 | 41 | 208 | 2.6 | 13 | 17 | 4 |
The loading speed of the website built with Gutenberg
[caption id="" align="aligncenter" width="1200"]
The loading speed of the website built with Oxygen
Performance of Landing Pages
Move on to a landing page on each website, which has many images and complicated layouts, here are the performance results:
| Page Builder | Request | Total page size (kB) | Fully loaded time (s) | JS | CSS | Font |
| Gutenberg | 29 | 249 | 2.2 | 9 | 10 | 0 |
| Oxygen | 45 | 339 | 2.8 | 13 | 17 | 4 |
Performance of the Blog Archive Pages
I also test the performance when the two websites query to the server to display post lists on the blog pages. View the results here:
| Page Builder | Request | Total page size (kB) | Fully loaded time (s) | JS | CSS | Font |
| Gutenberg | 27 | 285 | 2.3 | 9 | 10 | 0 |
| Oxygen | 44 | 430 | 4 | 13 | 17 | 4 |
Performance of the Shop Archive Pages
I used WooCommerce to create Shop pages for both sites.
Here are the results after testing the performance of the two shop pages:
| Page Builder | Request | Total page size (kB) | Fully loaded time (s) | JS | CSS | Font |
| Gutenberg | 38 | 238 | 2.0 | 9 | 10 | 0 |
| Oxygen | 57 | 362 | 5.5 | 13 | 17 | 6 |
Performance of the Product Pages
In this last part, I'm going to check the performance of the two product pages created with WooCommerce. These pages often have more complicated layouts as well as need more CSS and JS code to have the needed features for customers.
View the comparison in this table:
| Page Builder | Request | Total page size (kB) | Fully loaded time (s) | JS | CSS | Font |
| Gutenberg | 38 | 238 | 2.0 | 9 | 10 | 0 |
| Oxygen | 57 | 362 | 5.5 | 13 | 17 | 6 |
Conclusion
Through the above tables of performance comparison, you can see in most of the cases, the site built with Gutenberg often has a better result than the one built with Oxygen. Websites built with Gutenberg load the least number of JS, CSS files, fonts as well as use fewer resources and load faster than Oxygen.
Hence, through the tests, Gutenberg has shown that it can surpass Oxygen in terms of speed and performance.
If we take a general look, Gutenberg accompanied with Full Site Editing becomes a lot more powerful and gives users more features to build websites in an easy manner. Along with that, Gutenberg still keeps the simpleness and easy approach for every user as well as the good performance for websites. These are the big advantages for Gutenberg.
Should you want to keep everything simple, optimize websites' performance, and don't want too many third-party plugins to be involved, the most optimal choice can be Gutenberg. Our team also used Gutenberg to build titanweb.vn. This site has a really fast loading speed. Besides, it's also not difficult to use Gutenberg so we find that okay.
However, I don't think these features are enough for Gutenberg. Right now, it still lacks many things to adapt to all the advanced demands of website developers. On the other hand, page builders are quite good at these things. So if you want to build a website with complicated layouts and more customization, we still should consider a page builder, at least this time.
We still need to wait for the advanced features of FSE in the future. Perhaps, in the official version of FSE, Gutenberg will completely surpass page builders in every aspect.
Final Words
With the information above, have you had your own choice to build your site? Gutenberg or any other page builders?
After all, you should definitely think carefully based on each of your website's features and requirements. And note that the information in this article is true at this time when this article is written. When anyone of page builders or Gutenberg upgrades new versions with new features, the perks of each tool may be different from what we listed.
Thank you so much for spending your time reading this article. If you love it or have any comments about this post, just let us know.
Top comments (1)
Hello dear friends
many thank you so much for spending your time creating and posting this article. i just found your article and i like it. The way you talk about Gutenberg.
Many thanks for the article it is just great!! It looks very promising and your ideas and thoughts regarding Gutenberg are interesting. Many thanks for your inspiring ideas.
i am currently working on some issues - that have to do with the CSS and google fonts.
to begin with the beginning:i have found out that my wordpress-site fetches two google fonts:
one of them is montserrat
i decided to host them locally. so i have to
a. fetch the fonts
b. correct the css code
with the following tool i fetch them
google-webfonts-helper.herokuapp.c...
here i have the option to add the paths - to customize the path in the css-data
/* montserrat-regular - latin / u/font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; src: url('../fonts/montserrat-v25-latin-regular.eot'); / IE9 Compat Modes / src: local(''), url('../fonts/montserrat-v25-latin-regular.eot?#iefix') format('embedded-opentype'), / IE6-IE8 / url('../fonts/montserrat-v25-latin-regular.woff2') format('woff2'), / Super Modern Browsers / url('../fonts/montserrat-v25-latin-regular.woff') format('woff'), / Modern Browsers / url('../fonts/montserrat-v25-latin-regular.ttf') format('truetype'), / Safari, Android, iOS / url('../fonts/montserrat-v25-latin-regular.svg#Montserrat') format('svg'); / Legacy iOS */ } Customize folder prefix (optional):
and now i have to add a path to set the correct path - (that means to customize the path )
../fonts/
some additional thought: what makes me wonder is the fact that some of the examples show full paths as reference - others dont:
see the following examples;
a. wp-ninjas.de/wordpress-google-font...
url("https://wp-ninias.de/fonts/muilti-latin-300.woff2") format (
url("https://wp-ninias.de/fonts/muilti-latin-300.woff") format (
b. pixelgrade.com/docs/advanced-custo...
Copy the URL Path field and paste it before each URL in the Embed Code field. The example code will look like this:
@font-face {
font-family: 'Name of the font';
src: url('http://yourwebsite.com/wp-content/uploads/fonts/11148/name-of-the-font-file.woff2') format('woff2'),
url('http://yourwebsite.com/wp-content/uploads/fonts/11148/name-of-the-font-file.woff') format('woff');
}
c. themeisle.com/blog/custom-fonts-wo...
Once the file is in place, open up your child theme’s stylesheet. Now you’ll need to call on that font so you can use it, via a snippet that should look like this:
`
@font-face {
font-family: New Font;
src: url(yourwebsite.com/wp-content/themes/...);
font-weight: normal;
}
`
and now compare it with the following example here:
Code:
/* montserrat-regular - latin */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
src: url('../fonts/montserrat-v25-latin-regular.eot'); /* IE9 Compat Modes */
src: local(''),
url('../fonts/montserrat-v25-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/montserrat-v25-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/montserrat-v25-latin-regular.woff') format('woff'), /* Modern Browsers */
url('../fonts/montserrat-v25-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/montserrat-v25-latin-regular.svg#Montserrat') format('svg'); /* Legacy iOS */
see the helper-tool google-webfonts-helper.herokuapp.c...
**the question: **so the question is: how to set the path correct for the CSS... which path should we use here!?
Dear friends i look forward to hear from you