Beyond Elementor: Building Custom Gutenberg Blocks for 100/100 PageSpeed Scores

When you ask marketers why they love page builders like Elementor or Divi, the answer is always the same: it gives them drag‑and‑drop control over layouts without having to involve a developer. When you ask developers how they feel about those page builders, the answer is equally predictable: they’re slow. All‑in‑one builders load dozens of style sheets and scripts that aren’t needed, add deeply nested markup, and make it nearly impossible to achieve high Google PageSpeed scores. In this guide we show why ditching heavy builders in favour of custom Gutenberg blocks is the key to fast sites, and how to give your marketing team editorial power without sacrificing performance.

Why page builders slow down your site

Many WordPress sites rely on multipurpose plugins and page builders to add features quickly. A 2025 article on lightweight WordPress plugins warns that mega‑plugins “add a lot of code you don’t need,” recommending that developers avoid multi‑purpose plugins and mega page builders because they bloat the database and slow down pages. The same article suggests auditing your plugins regularly and choosing single‑purpose tools that do one job well. Page builders are the epitome of bloat: they ship with their own UI frameworks, styling systems and animation libraries. Each additional element on a page can add dozens of DOM nodes and multiple network requests, which quickly erodes your PageSpeed score.

Native blocks: the lightweight alternative

Gutenberg, the WordPress block editor, produces lean HTML and loads only the scripts needed for the blocks on a page. Since WordPress 5.9 introduced Full Site Editing, custom headers, footers and templates can be built without third‑party builders. WordPress 6.9 (December 2025) takes this further by adding collaborative features like block‑level notes and a universal command palette, along with six new core blocks (Accordion, Terms Query, Math, Time to Read, Comments Link and Count) and the ability to draft multiple templates per slug. These improvements make native blocks more flexible than ever, reducing the temptation to reach for a builder. Using core blocks keeps markup shallow and ensures compatibility with WordPress’s performance optimisations.

Custom Gutenberg Blocks vs Elementor

While core blocks cover many use cases, most marketing teams need custom components: pricing tables, testimonial sliders, unique call‑to‑action sections and more. With Elementor you might drag these in from a library, but you pay the performance price. The solution is to build custom Gutenberg blocks using React and the Block Editor API. By creating blocks that encapsulate specific patterns, you give marketers the same editing freedom but generate clean markup and load only your code.

How to build custom Gutenberg blocks

Building Custom Gutenberg Blocks with React

1. Scaffold a block – Use the @wordpress/create-block package to scaffold a new block plugin. This sets up a development environment with React, ESNext syntax and webpack.

2. Define attributes – Each block should expose attributes that marketing can edit (e.g., headline text, background colour, image ID). Define these attributes in block.json and map them to <RichText> or <MediaUpload> components in your edit.js file.

3. Optimise markup – Output only the HTML needed. Avoid unnecessary <div> wrappers and inline styles. Use Tailwind CSS or compile custom SCSS into a single stylesheet so that your block doesn’t load multiple files.

4. Lazy‑load assets – If a block includes images or JavaScript, lazy‑load them using the Intersection Observer API or loading="lazy" on <img> elements. Dynamically import large scripts only when the block is in the viewport.

5. Test with PageSpeed Insights – After registering your block, create a test page and run it through Google PageSpeed Insights. Because your block loads only the assets you wrote, achieving 100/100 on mobile and desktop is realistic.

Giving marketing control without bloat

Custom Gutenberg Blocks for Marketing Teams

Custom blocks empower marketing teams to build pages without calling a developer. You can package a library of blocks—hero headers, pricing tables, FAQs, accordions, testimonial sliders—each with intuitive controls. Thanks to WordPress 6.9’s improvements, marketers can add notes to blocks during content reviews, search patterns via the command palette and use new core blocks like Accordion and Time to Read without installing third‑party plugins. When a new design requirement arises, developers build a new block and marketing adds it to the library. This workflow removes the need for Elementor while keeping the editing experience intuitive.

Achieving 100/100 PageSpeed scores

PageSpeed scores are based on metrics such as Largest Contentful Paint (LCP), Total Blocking Time (TBT) and Cumulative Layout Shift (CLS). To score 100/100:

• Minimise JavaScript and CSS – Only enqueue your block’s script and style when it is used. Avoid jQuery and large animation libraries.

• Optimise images – Use the wp_get_attachment_image() helper so images are served at appropriate sizes. Convert PNG/JPEG to WebP, and set the loading="lazy" attribute.

• Use server‑side rendering when possible – If your block displays data that rarely changes (e.g., a static list of features), render it in PHP instead of React to reduce client‑side processing.

• Cache and prefetch – Enable server‑side caching (e.g., object cache) and use preconnect/preload tags in your theme to warm up connections for fonts or important scripts.

• Audit plugins – Remove unused plugins and avoid multi‑purpose plugins. A lean plugin list reduces the number of scripts and styles loaded on every page.

Linking to related guides

If you want to know more about keeping your WordPress site fast, read our guide on fast‑wordpress‑site, which busts the myth that you need builders to create beautiful pages. For a look at what’s coming in the WordPress ecosystem, check out our overview of wordpress‑6.9 and its new block capabilities. These resources complement the custom Gutenberg approach by showing you how to avoid common performance traps.

Conclusion

Marketing teams don’t have to choose between speed and flexibility. By building custom Gutenberg blocks, you can hand over the editing experience while maintaining tight control over markup and performance. With the new features in WordPress 6.9, there’s never been a better time to ditch bloated builders. Start small by replacing one or two Elementor sections with bespoke blocks; once you see the speed improvements, you’ll never go back.