FeaturesTemplatesvs ElementorPricingDocsBlogAboutDownload free

Why page builders slow WordPress down (and what actually fixes it)

A page that looks simple can still ask a phone to download and run hundreds of kilobytes of code. Here is where that weight comes from and how to remove it.

By the Akram team4 min read

You build a clean landing page: a hero, three feature boxes, a testimonial and a FAQ. It looks light. Then PageSpeed Insights shows a mobile score in the 50s and tells you to “reduce unused JavaScript”.

The page isn’t heavy because of what you designed. It’s heavy because of how the builder delivers it.

Where the weight comes from

Most page builders were designed to be flexible first. That flexibility has a cost that visitors pay on every page view:

  • A shared front-end framework. The builder loads a core script on every page so any widget could work, even if the page only uses a heading and a button.
  • Styles for widgets you didn’t use. Global stylesheets cover the whole widget library, not just this page.
  • Icon fonts. A full icon font is downloaded to show three icons.
  • Deep nesting. Sections, columns, inner wrappers and widget wrappers add many DOM elements. More elements mean slower style and layout work on the phone.
  • Work in the browser. Animations, sliders and sticky headers are set up by scripts that run before the visitor can interact.

None of this is a bug. It’s the trade-off of rendering a flexible layout at visit time.

Why caching doesn’t solve it

Page caching is great. It makes the server respond faster. But the browser still has to download, parse and run every script and stylesheet the cached HTML points to. Cache a 600 KB page and you get a 600 KB page, delivered quickly.

That’s why sites with excellent server response times can still have poor Largest Contentful Paint and Total Blocking Time on mobile. The bottleneck is the phone, not the server.

The fix: do the work once

The most effective fix is architectural: render the page when it’s saved, not when it’s visited.

When you click Save in Akram, the builder turns your layout into finished HTML and one CSS file for that page. Interactive widgets each have their own small script (the largest is under 4 KB), and a page only loads the scripts for widgets it actually contains. A page without a slider loads no slider code. A page with no interactive widgets loads no builder JavaScript at all.

The browser gets the same kind of page a hand-coded site would send.

The numbers

We built one realistic landing page in Elementor (hero with image, three icon boxes, three counters, testimonial, divider, icon list, FAQ accordion and social icons). Then we made a copy and converted it with Akram’s own migration tool, so the content is identical.

Metric (mobile)ElementorAkramChange
Requests3713−65%
Transferred620 KB182 KB−71%
JavaScript333 KB4.9 KB−99%
CSS129 KB62 KB−52%
DOM elements244190−22%
First paint3.02 s1.53 s−49%
Largest paint3.02 s1.54 s−49%
Total blocking time306 ms0 ms−100%
Load event4.60 s1.67 s−64%

How we measured

  • WordPress 7.1.3, PHP 8.4, Elementor 4.3.5 (free) and the Hello Elementor theme for both pages.
  • Same server, same plugins and the same uploaded image. Elementor’s default performance features were left on.
  • Logged-out visitor in Chromium, cache disabled, one warm-up and then 5 runs. We report the median.
  • Mobile profile: 412×823 viewport, 4× CPU slowdown, 150 ms latency, 1.6 Mbps download.

Caveats: it’s one page and one theme, on a local machine rather than production hosting with a CDN. Absolute timings will differ on your server; the size and request columns travel well, and the percentages are the useful part.

What you can do today, whatever builder you use

  1. Audit a real page on a phone profile. Use PageSpeed Insights or Chrome DevTools with CPU throttling. Desktop scores hide most of the problem.
  2. Remove widgets that only add decoration. Sliders, animated counters and particle backgrounds all cost script time.
  3. Turn on your builder’s performance options. Most builders now have settings for optimized output and conditional asset loading.
  4. Self-host fonts and limit weights. Two font families with two or three weights each is plenty.
  5. Give the hero image priority. It should not be lazy-loaded, and it should have a proper srcset.
  6. Test after every plugin you add. Plugins outside the builder often add more weight than the builder does.

If you’ve done all of that and the page still ships hundreds of kilobytes of builder code, that’s the point where the architecture itself is the limit. That’s the problem Akram was built to solve. You can try it next to your current builder and convert a single page to compare.

Try Akram on your own site

Start with the free version next to your current builder and compare. Pro from $49 a year.

Download free