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).
Beaver Builder-Responsive-Background-image
  • 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.
Beaver-Builder-Preload-Images-Module

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:

Beaver-Builder-Preload-Images Error

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

---------------------------------------------------------------------------------------------------