Faster image loading
What's loading in the viewport?
Key points of the last video and post:
- We mostly need to worry about the images in the viewport.
- The key measurement is Largest Contentful Paint (LCP) which is the time it takes to load the largest element in the viewport.
- We need to optimize our viewport images - I use ShortPixel . This plugin comes with 100 free credits/month and you can optimize from their site too. WordPress now reduces the quality by 30% without optimisation.
- We need to serve an image size appropriate to the device. Particular those large 1920px or higher background images. See below.
- Also we may want to consider setting our row Viewport Heights (VH) for different different devices (under row settings).

- You may wish to remove the background image on mobiles altogether which will show the row's background color if set.
@media (max-width: 767px) { .hero-row .fl-row-content-wrap{ /*hero-row is the custom selector I added to my row under the advance tab */ background-image: none; } }
Other points
- Need to watch our image formats. ShortPixel can convert a png to jpeg (I tent to use an 8 bit alpha transparent png and get warnings).
- WebP is going to be supported in 5.8 WP due in July 2021, but due to the browser support (mostly not there in Safari) I am not use it yet.
- Tip: You can use Chrome inspector to throttle performance (performance or network tab) to see slow loading images.
- Use an SVG where possible (ie. the logo). You can use a free tool like Inkscape, but optimize as these tools add lot of meta data.
- BB theme does not set a width. Not really a Cumulative Layout Shift (CLS) issue, but Google Page Speed Insights pickup on it. With WP Rocket you can apply a setting to add width to all images or you can add this CSS to address this:
- I have not swapped regular images for smaller versions. It theory we should not have to as WP has support for srcset and should serve a smaller thumbnail appropriate the browser size (questionable). Although, I replaced the whole row (as it did with the "Moon" page here). Generally not a good idea as it double the source code, but there's exception I'll try too mention in another video.
.fl-page-header-logo IMG.fl-logo-img{ width: 260px; height: 100%; }
Preloading Images in Beaver Builder
- Preloading moves the image to the top of the load waterfall.
- It means a background image is loaded before the browser finds it buried in the CSS file.
- The Preload (Resource Hint) has good browser support 92+%.
- Can be useful with sliders. Example: this Ken Burns effect row slider.
- Ideally this would be added to the <head>, but would requires conditional code in the theme such as:
add_action( 'wp_head', function() { if ( is_page( '100' ) ) { echo '<link rel="preload" as="image" href="https://performance.beaverjunction.com/my-image.jpg" media="(min-width: 992px)" >'; } });
- I quickly tried a couple of plugins Preload Images and Pre-party browser hints and could not get either to work with Beaver Builder.
- Adding within the top of the <body> via a HTML works fine and makes it easy to grab the image URL in the builder (assuming you are not using a CDN). Don't forget the modules padding.

Example code:
<link rel="preload" as="image" href="https://performance.beaverjunction.com/wp-content/uploads/my-desktop-image.jpg" media="(min-width: 768px)"> <link rel="preload" as="image" href="https://performance.beaverjunction.com/wp-content/uploads/my-mobile-image.jpg"" media="(max-width: 767px)">
Media is added to prevent a browser warning:

Tip: GTMetrix shows the desktop waterfall. Use WebPage test on a mobile simulation if changing a mobile image.
CSS I add to the page to hide the module and add a hint.
/* For clients you could hide/restrict the HTML module by role here: davidwaumsley.com/customizing-restricting-the-beaver-builder-editor-for-clients/ Or use use this CSS to hide or warn the client */ .hide-me{ /*hide-me is the custom selector added to the advanced tab*/ display:inherit; /*change from "inherit" to "none" to hide */ } .fl-builder-edit .hide-me{ border: 1px solid red; width:50%; } .fl-builder-edit .hide-me:before { content: "CODE - DO NOT CHANGE "; color: #FFFFFF; background-color: red; padding: 3px 6px; font-size: 10px; font-weight: 600; z-index: 999999; position: absolute; white-space: nowrap; }
Link to the mentioned article on restricting by user role
You can support my work by buying the tools I use through my affiliate links:
Discounts on these two lifetime deals:
MainWP. Discount code "digitalfreedoms" 15% off
WP Code Box. Discount code "beaverjunction" 25% off
---------------------------------------------------------------------------------------------------
WP Rocket | ShortPixel | Beaver Builder | Advanced Database Cleaner
---------------------------------------------------------------------------------------------------