Is it possible to get an amazing Lighthouse score while using a WordPress page builder?

Question

I'm a front end engineer working in e-commerce and marketing, and one of my routine tasks is finding out why client's websites are so slow. Most of them are on different CMS, most Wordpress, and a constant problem I come across is page builders ship with a ton of code that slightly bog the site down. These fall under 'render-blocking resources', see the below screenshot of the issue.

This file is entirely minified and the website isn't even large (It's still in staging, in fact.) Is it possible to get an outstanding Lighthouse score when your site is build on a CMS and uses a small number of plugins/apps (in the case of Shopify?) The majority of the clients whose sites I gauge are on a CMS and get a bad score because of how much data that browsers have to request when loading 200,000 apps and plugins. I'm exaggerating of course, but even when a client has a small site, but was built with a page builder and has a few popular plugins like Gravity Forms, their sites still suffer a little.

Answer 1

In theory, yes, you can have a page builder that doesn't impact the score, in practice, all of the page builders that I have personally worked with are bad for Lighthouse/PSI scores. The main reason is that pagespeed hasn't been a conscious priority untill google started encouraging more awareness of a site's percieved performance. So the teams that built pagebuilders didn't take that into account, and it's probably not an easy task to change their codebase so that page builders are more performant.

There would be a few rules for page builders to follow to be performant.

• No redundant asset code, I noticed a few page builders that load all the code they might need for any section that a user might add, even if the section is not being used.All the asset code being loaded should only be loaded if they are needed.
• Properly sized images. I noticed Shogun page builder for shopify to be really bad at this, as the images are automatically oversized.
• Automatically lazyload images. I noticed pagefly has lazyloading, but it has to be enabled individually for each template.
• No elements created with javascript. To reduce CLS and improve LCP, HTML elements should not be created entirely using javascript.

If page builders followed the above rules, and you replaced the original css and js of the page, since they would be redundant, you could have a page builder that resulted in very performant pages. I haven't found a page builder that met these standards though, maybe as page speed becomes more important, more teams will be more consicous of performance in their page builders.