Gutenberg vs Page Builders (New School) - Did Gutenberg Just Lose?!

i am very excited about this comparison video and i think this is a highly anticipated video at this moment because a few of the test subjects are new to the market what we are testing in this video is gutenberg versus brix builder versus oxygen builder versus live canvas versus breezy and our focus is not on features but more on how they are stacking against each other on their speed performance i've done speed tests on old school page builders like elementor dv beaver builder and four others on another video so the test conditions and format are going to be the same for this video we will still be installing these page builders on separate domains but all the domains are hosted on the same server we will not be installing any caching plugins and any external elements used on a page such as the images and fonts will be exactly the same we will also give the best advantage to each of the page builders which means these page builders will be installed on their own wordpress team or their recommended teams i'll explain to you when i show you what's installed on the domains and then we will do the same two tests again number one is the bloat test where i would use the same data from the previous video this data is basically from the default wordpress install and this will act as the baseline for the bloat test and then we will add a header text and button to a blank page through each of the page builders and after that we will do a test and we will compare the results to the baseline and see how much of a difference it makes the second test is the most important one and it is going to be the same as in the old school page builder video as well we will use each page builder and recreate this page from scratch and i will build it up in front of you so you know there is nothing to hide the goal again is to make this a fair objective and transparent test and that's what we are going for in this video and then we will conduct 10 tests on this testing tools over 12 hours and we will average the results creating this video is really time consuming it took like days to record analyze and did and many things in between but i enjoy doing this because i think it will benefit all of us as a community so if it's not too much to us if i could get a thumbs up from you that would make me think all these efforts were worthwhile i truly appreciate that and if you could share your thoughts and experience on either of these page builders in the comments section that would be awesome so without further ado let's get started with the test let's go [Music] so let's start the process by showing you that all domains are hosted on the same server i've installed the respective themes and page builders and this is how they look like by default and you probably realize that the oxygen builder page is completely blank and that's because once you activate the builder plugin the theme you install will be redundant so it is showing a completely blank page because nothing is added to it and in case you have watched the gutenberg vs old school page builder video you would have come across the same domains and the reason is because i don't have enough domains on the same name servers so i need to recycle them i mean i have lots of domains on siteground but whenever you host a domain with them they will also assign your domains to this name server or that name server so to save time i'm going to delete the entire wordpress install on domains i've used before and reinstall a fresh wordpress so in case you are very particular about the domains i've been using for my testing don't be alarmed by that so to check if all domains are hosted on the same server we'll use a third party tool called who is hostingthis.com and we'll do a search so as you can see all the domains have the same ip address and they have the same name servers they're all hosted on siteground which is the web host i recommend for speed and if you want to check them out i've left the link in the description for the latest discounts and now that we know we are starting off on equal grounds let me show you what's installed on the back end let's start with the wordpress theme so for gutenberg i've installed the cadence team the oxygen builder does not require any team as you can see over here so we'll leave it as the default 2021 team the brx builder is a team by itself and as for breezy it does not have a team by itself but they have some recommended teams such as bloxy neve team translate press astra oceanwp and out of all these recommended teams neve is the fastest based on my test if you want to check that test out the link is at the top right and i've left a link in the description as well so you can check it out later so to give the best advantage to breezy we will install the nev team and as for live canvas they have developed its own theme called pico strap now let's check out what plugins are installed so as you can see i've installed the page builder plugin and no other plugins are installed the brix builder does not require an additional plugin so we have installed zero plugin to it so now let's create a new page and add a header and button to it so now let's do the bloat test [Music] and as you can see with just the header and the button live canvas is performing the best followed by gutenberg and then oxygen builder and bricks and breezy seemed to be a little bloated and i think it kind of belonged to the old school page builders test instead of this test so i'm sorry breezy if i made you look bad so let's go to the next test so based on this test live canvas is still the best of all we have a performance grade of 96 and out of all it has the smallest page size followed by gutenberg gutenberg has a small page size as well oxygen is doing pretty okay and bricks is a little bigger in page size and as for the load time life canvas is producing the fastest results followed by oxygen and then gutenberg and followed by bricks and as for the total number of requests live canvas is the best as well followed by briggs and then gutenberg and oxygen breezy is basically out of this league and actually i'm quite curious about the performance grade if you look at gutenberg it's getting a b grade but it has a very small page size it loads fast and it does not have a lot of requests as well but anyway i would say that all these page builders are neck to neck with each other other than breezy but live canvas is showing the best result of all and then let's go to gt matrix so as you can see based on the fully loaded time live canvas is the fastest followed by gutenberg and then breaks followed by oxygen breezy is loading 1.1 seconds with just a header and a button and then for the page size live canvas and gutenberg they are very competitive in this area followed by oxygen and then bricks breezy has the biggest page size and as for the pace requests live canvas has the smallest count followed by bricks and then gutenberg and oxygen and overall this is how it looks like and this is based purely on the page size and this concludes the blood test so now that we know the blood results let's go to the next test so now instead of asking you to spend hours watching me create the pages from scratch let me fast forward the process and if you want to see how i built these pages feel free to slow down the speed of this video honestly at this point in time i am very curious and excited about the results i did quite a bit of research on these page builders and they are safe to perform really well on google page speed insights and other speed testing tools i've always been critical about page builders because of speed concerns but maybe this new school page builders may change my mind and if they did change my mind i would probably start exploring them and creating new tutorials on them and while building this identical page on these builders i would say there is a learning curve to all of them so let me walk you through the difficulties i've encountered with these page builders while creating these pages without any prior knowledge so i'm very used to gutenberg so i would not comment on that but with oxygen builder this is the first time i've encountered a page builder plugin that requires no wordpress team what i really like about this builder is that they show you the structure and layers of your page in one view so it is very convenient for you to select the right layer and edit it with ease i had some trouble trying to add a separator between the header and text and after spending a lot of time figuring that out i decided not to add the separator to all the pages other than that oxygen builder was intuitive and i had no problems figuring out how the builder works now when it comes to brix builder i'm quite surprised by how robust it is even as a new page builder it's on its first version and it is solid but with some bugs for example i duplicated this section and i tried adding a new section the new section will not appear at the bottom and i had to reach out for the content whenever a new section was added maybe it is due to my lacking experience with this builder or maybe it is a bug i'm not sure anyway this is the only problem i found with bricks otherwise the page builder is intuitive and easy to use and the interface is fast and then comes breezy the layout was somewhat confusing it took me some time to understand the platform it does not have the phone i need which is the basic aerial font so i had to switch it with another one of their phones and my biggest problem with this builder is you can't drag and drop after duplicating an item again maybe it is my limited expertise on this builder maybe you can do that and feel free to correct me in the comments i just didn't have the time to explore the builder in detail but i felt a page builder should be intuitive enough to know what i want to do after duplicating an item and they should make the move button prominent now my biggest challenge of all was live canvas it reminded me of the days when i was using dreamweaver to create web pages it was a pain because you had to understand html css and javascripts after i left my tertiary education all that knowledge was passed back to my lecturer and working on live cameras brought back memories man i struggled a lot on this if you are new to wordpress or page builders and you don't understand a single line of code please do not get this page builder because you will get so frustrated that it will blow your mind i know it is the fastest page builder of all from the bloat test and it is because you are basically coding your page from scratch without adding any extra codes for ease of use and that's why it loads extremely fast this page builder is meant to make the life of web developers much easier but it brings pain to people who struggle with codes like me and one big problem i have with this builder is that after editing the html properties if i accidentally click on the elements on a page and i start editing it all the edit codes i gave to the element will be gone so of all the page builders i spent the most time on live canvas but i'm glad i completed the page and i would say that if you are very comfortable with codes you may like live canvas because it makes your life easier they have quite a few templates done for you and the only way to edit those templates is for you to change the codes so live canvas is definitely not the page builders for beginners even if it happens to be the fastest page builders in this task and now after spending hours upon hours i am finally done as you can see these pages look identical other than the one from live canvas because i just can't find how to do the image overlay for the entire section i mean i found a way to do the overlay on the div but not on the section so i decided to remove it entirely but other than that everything else are the same the images are the same the fonts are the same except for breezy and now the final step will be for me to wake up at 5am to do the test so let's go so let me give you a brief while i fast forward this process again there are a total of 10 tests conducted over 12 hours and this will give us an accurate gauge of the performance of each page builder so this second test is to match up the results of the first video where we have tested gutenberg against old school page builders and if you notice within each test i had to do multiple tests on google php insights because i want to eliminate the issue with reduce initial server response time because i think this has nothing to do with the performance of the page builder if i was testing the server speed i would have taken that into account so to make the test fair i had to do multiple testing and make sure there is no such issue on the results so this is not to give advantage to any particular page builders in case you're wondering now i would say out of the three speed testing tools if you ask me to rank the importance of their results i would say the google php insights is the most important followed by pingdom and then gt metrics in the past many people advise that you shouldn't put so much focus on google php insights and focus more on gt metrics for its page load time but it is getting more and more important to place focus on the data from google because web vitals are now officially going to be a ranking factor of course if your website is not focused on getting ranked on google all these page speed stuff does not matter to you but for us who are competing for the top spot on google this is something we need to pay attention to and that's why i'm doing this test i am hopeful that gutenberg will come out first place in this test i've been preaching about gutenberg and how fast they are performing but i'm not quite sure if it will become number one in this test because of these new page builders will they really beat gutenberg i'm hopeful that they were not so i'm keeping an open mind whatever the results i would gladly accept because it matters to you i want to give you the most honest and genuine results and if a page builder turns out to perform better than gutenberg i will start to explore them and do tutorials on them so there is really no harm coming my way and i will not try to doctor any results to make gutenberg look good and here is the final test i'm very excited about how this will pan out and we are basically done let's check out the final results let's first check on the results from gt matrix as i said we shouldn't focus so much on the results here what's more important is the results from google php insights let's just take a look at why i say these results aren't really accurate if you take a look at breezy it has the biggest page size and loads more requests than breaks but the fully loaded time is faster than bricks for me that just doesn't make sense what makes sense is if the page request is higher and the page size is a lot bigger the fully loaded time should be much longer but anyway live canvas show the best results on gt matrix in terms of the fully loaded time gutenberg ranks number two breezy at number three oxygen at the fourth place and finally breaks but as i said this is not a good indicator now one thing i noticed is that for brics although it has a larger page size than most it is loading a smaller number of requests and i think it is because it does a lot of front end loading on a browser side instead of relying on the web hosting server to load the elements and that's why you're looking at a smaller number of requests count and this naturally should make a website load faster which is cool this is in contrast to oxygen builder where it loads the highest number of requests anyway let's take a look at the pingdom results so again live canvas is at the top i don't need to explain why any further it is built on pure html and css and how powerful it is it will depend on the coder and user the next best result is bricks as it loads the second smallest number of requests but has one of the highest page sizes gutenberg is the second fastest loading after live canvas and it ranks third on page size and third on number of requests oxygen ranks second on page size but performed badly on the load time and number of requests and breezy is losing out on all categories except for the number of requests where it ranked fourth and finally let's check out the most important results which are the stats from google php insights and you'll be surprised gutenberg in other words cadence team and blogs perform the best on google page speed insights just a little better than live canvas because for live cameras there is a poor result on task 5 that drags the average down if not live canvas would probably come first anyway the fight is between oxygen and bricks and it seems that the front end loading from bricks is helping it get ahead of oxygen but i would say that they are neck to neck in terms of overall speed and honestly bricks and oxygen are impressive i never thought that the page builder could get a result of 90 and above from google hp insights and after this test i can no longer say that with page builders you will never get a 90 plus rating on google page speed insights which i usually say on my videos because this has proven me wrong so let's put this into ranks considering the overall and giving kingdom and gt metrics some weight i am very objective and i would say live canvas is the fastest of all but how fast it is depends on the user you gotta understand codes to use it the second place will be gutenberg considering that it loads the fastest on google php inside and second place on both pingdom and gt matrix at the third spot it is brakes and not far behind it is oxygen and breezy is obviously out of this leak so gutenberg has faced some strong competitors and i'm glad that it is still holding strong i'm honestly blown away by the results of oxygen and brakes i've never expected a page builder to perform so well on google php inside so it is a thumbs up from me on both oxygen and brakes but if you ask for my opinion between oxygen and brakes i would say brakes based on the price and its potential it is version number one for bricks and it is already amazing so i will place my bet on brakes but my favorite is still gutenberg i will stick with it for a very long time and if you're thinking of switching away from an old school page builder like elementor i would recommend that you go with gutenberg instead of brakes because the switch is much easier because you don't need to worry much about the header footer and archive pages it is an easy fix with the theme customizer and if you want me to recommend a wordpress theme that is fast and beginner friendly you can check out cadence i've left a link in the description for the latest discount however if you are starting a fresh maybe you can try bricks currently it is having a launch promotion where the price is slashed heavily and it is a one-time payment for a lifetime membership the link is in the description as well anyway i've done a lot of tutorials on gutenberg if you want to switch from your old school page builder to gutenberg then check out the video at the top and if you need a gutenberg tutorial you can check out the video at the bottom all the best to you hope to get a thumbs up from you stay cool and stay safe

Channel: Jack Cao

Views: 8,869

Keywords: gutenberg vs page builders, gutenberg vs bricks, gutenberg vs brizy, gutenberg vs oxygen, gutenberg vs page builder, gutenberg vs oxygen builder, gutenberg vs bricks builder, gutenberg vs livecanvas, brizy vs oxygen, brizy vs oxygen builder, brizy vs livecanvas, brizy vs bricks, brizy vs bricks builder, oxygen vs elementor, oxygen vs bricks, oxygen vs bricks builder, oxygen builder vs bricks builder, livecanvas vs oxygen, live canvas vs elementor, livecanvas vs bricks

Id: y9GY-EP0PG0

Length: 18min 38sec (1118 seconds)

Published: Thu Apr 08 2021