A Page Builder Loading Every Feature on Every Page

A plain page that loads like a busy one

Open the privacy policy of a typical page-builder site on a phone. It is a heading and a few paragraphs of text, and it takes about as long to appear as the home page with its slider.

The page itself is light. What comes with it is not: code for every slider, map, animation and icon set the site might ever use.

Visual page builders such as Visual Composer, Divi and Beaver Builder let people arrange layouts by dragging blocks instead of writing code. Many, along with the themes that bundle them, load everything they might need everywhere.

Every visitor pays for that convenience on every page, and phone visitors pay the most.

What usually loads on every page

• Slider and carousel scripts, even on pages without one.
• Animation libraries for sections that fade or slide into view.
• Icon fonts holding hundreds of icons, for the three in use.
• Several web font families, each in several weights.
• Map and video background scripts left over from the theme's demo.
• Add-on element packs installed for one extra feature.

The last is the one that grows. Each add-on pack brings a whole set of new elements to supply the one somebody wanted, and its files load everywhere too.

Why phones feel it most

Downloading the files is only half the cost. Each one also has to be processed by the phone, and a mid-range phone's processor is far slower than an office computer's.

Many of these files are called at the top of the page, so the browser fetches and processes them before showing anything.

The visitor waits at a blank screen while the phone works through code for features the page does not use.

A fast office computer on a fast connection hides most of this. A phone on a weak signal shows all of it.

Measuring the cost

The useful test is the plainest page on the site, such as the privacy policy or a short contact page. Whatever it weighs is the minimum every page pays.

Run it through WebPageTest with a mobile setting, then run the home page, and compare how much each weighs, how many files each requests and when each starts to show something.

In the browser's developer tools, the Network tab lists every file a page loads, with the folder it came from. Builder and theme files on a page of plain text are the cost you are looking for.

Switching off what is not used

Some builders and themes have settings to turn off elements, animations or icon sets you never use. Check those first; they cost nothing.

Remove add-on packs installed for a single element, and cut fonts down to the families and weights actually on the page.

Beyond that, a developer can stop particular files loading on pages that do not need them. It is careful work: a script removed from the wrong page breaks whatever needed it, so test on a copy first.

Caching and combining files help, and are worth having. They make the same code arrive more efficiently; they do not give the phone less of it to process.

A worked example

A makeup artist who works weddings and photo shoots had a portfolio site built on a multipurpose theme with a page builder. Most enquiries came from brides browsing on their phones.

The home page opened with a full-screen slider, every section faded in as it scrolled into view, and the contact page carried an animated map. The rates page was a heading and a short table.

Tested with a mobile setting, the rates page loaded nearly as much code as the home page, and stayed blank for several seconds.

It carried the slider and map scripts, the animation library, an icon font and four font families.

Her developer switched off the builder's unused elements and the fade-in effects, removed two add-on packs, cut the fonts to two families, and limited the slider and map scripts to the pages that use them.

The design looks the same to a bride browsing on her phone. The difference is that the rates page now appears soon after it is tapped.

When a lighter build is worth it

Trimming has a limit. When a theme and builder are the foundation of the site, even the plainest page still carries a good deal.

A lighter build is worth it when most visits come from phones, when pages are mostly text and photographs, and when the builder is used mainly to make columns, which a well-built theme can do on its own.

It is also worth planning when the theme itself is no longer maintained, since the builder inside it is then frozen too.

What leaving a builder involves

Leaving a builder is a real project. Many store each page's layout as bracketed codes mixed into the text, and without the builder those codes appear on the page as clutter.

Every page built with it has to be rebuilt, so count them before deciding. A dozen pages is a modest job; two hundred is a project with its own budget.

Questions before the next build

If a new site is being planned, ask before it is built: what will the plainest page weigh on a phone, and does the builder load only what each page uses?

Ask who updates the builder and the theme, and what happens to the content if either is ever replaced. The answers matter more than another look at the demo.

The counter-case

Builders exist for good reasons. Where staff rearrange pages often, the convenience can be worth some extra weight, as long as pages still arrive quickly on a phone.

If the plainest page is already light, the builder is behaving and there is nothing to fix. On a small site due for a redesign, trimming now may mean paying twice.

Otherwise, measure the plainest page, switch off what you do not use, and plan a lighter build when the figures and the timing both point that way.

Start with the plainest page

1. Test your plainest page with a mobile setting.
2. Compare it with the home page.
3. List the files each page loads.
4. Switch off unused elements and effects.
5. Remove add-on packs nobody needs.
6. Cut fonts to the weights you use.
7. Plan a lighter build if it stays heavy.

Step one shows whether the builder is costing you anything. If the plainest page is light, it is behaving, and your time is better spent elsewhere on the site.

The same hidden cost inside a single element is covered in sliders that load every slide before the first.

Frequently asked questions

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.