Faster Image Loading with Beaver Builder. Preloading Images and More 

Cheers Paul. The same thought crossed my mind while making this today, but I'm two minds, I also applaud BB's aim to keep the UI simple and client focussed. I don't mind them keep things like z-index and absolute positioning away from clients really so maybe this should too? When I submitted something for consideration to Justin he came back to clarify what I was talking about the preloading. A good sign! Originally I only saying it was difficult to load this kind thing page by page. We can add CSS and JS, but not HTML/head stuff. I probably had more control over that with the Dynamik Builder for Genesis. Then I guess this is Theme territory?

@@DavidWaumsley Yes maybe this is a Tom Carless type of add-on scenario

@@plmcreative If Tom Carless creates something does that not guarantee it's inclusion in core at a later date. Ha ha. Poor Tom. It's what you get for having your finger on the pulse. That's sound perfect though.

Good one. I need to explore! I thought the very popular code snippets plugin set conditionals for you, but not so.

Using this snippet to preload the featured images: //Preload Featured Image add_action( 'wp_head', function(){ $featured_img_url = get_the_post_thumbnail_url(get_the_ID(),'full'); echo ''; }); Helps with all pages since I reference the featured images as the header/hero images for all pages and posts.

@@RyanDWaterbury That's a useful snippet. Thank you. Have you got it implemented anywhere you are able to share to link to it? Without the featured image calling part I was trying the same approach to load my specific images, but was getting frustrated with the browser warnings. I never followed it up properly as code is not my strong point. I wondered if WordPress support for scrset was getting in the way. That is it was serving the most appropriate to the sized thumbnail to the browser's viewport size instead of the image specified in the code. Leaving the preloaded image stranded. For Core Web Vitals (with mobiles being the tough customers) I was thinking it would be nice if we could to preload a specific mobile cropped image by some form of ID. I just have no thoughts on how to do it.

@@DavidWaumsley That's where I had issues with BB. I specified the full size featured image as the background size in the row, so that's what's specified in the snippet. I'll have to do more testing to try to get the srcset to work, it doesn't right now. It's not a perfect solution, but does work site wide without too much hassle. Especially for blog posts that can benefit from ranking higher. I've actually had the same idea of adding a preload checkbox to the BB modules for preload as well for the mobile sized images.

The only way that I can imagine preloading a mobile image specifically set in the module is with an extension to add the preload HTML via a checkbox. Background preloading isn't a very easy task.

Hi Julian. Thanks for watching. I see no reason why not. One thing that was not around when I did this was fetch priority (web.dev/fetch-priority ). Worth checking out - although this is probably even harder to implement via WordPress. I am out of touch now as I decided scrap using a builder. With all the cool new stuff browsers are supporting hand coding started to appeal.

Thanks Sue. I really appreciate that. Good question! In this video I was using the Beaver Builder theme so I had to use a plugin (SVG Support) to upload the SVG to the media library and then apply it. More typically I use Beaver Themer for my header and do the same into a photo module. I have not really thought about this before, but I think I do that because it's easier to set the link and change alignment and specific widths . I have gone the HTML module route before, but can remember why.

@@DavidWaumsley awesome David thanks, yes I wondered how you set the link etc..will look into that. Thanks again for providing such valuable insight 👌👍🏻

I am using Cache Enabler on this site. Really just to manage the load impact. I get about the same result with it off. Just basic caching and the tweaks I mention on the homepage. Honestly, WP Rocket have made so many changes that I have not got a set configuration for my clients sites.

@@DavidWaumsley You've chose this because it's free and you are deliberately avoiding premium if possible right? What about lazy load? Using anything for that at all?

@@plmcreative Yeah sort of. I wanted to test Cache Enabler on a site I would watch. So far all very good. I like WP Rocket mostly because the free option might be slow to pick up on an issue (I had this with Breeze) and also that I can control it via Main WP. As for the other features I think there are mostly alternatives. That said, WP Rocket appears to defer jQuery without breaking BB nodule dependent on it. That is big, but I need to explore that more. Funny, Lazy loading ( In relation to images) has come up in the Beaver Builder FB group. I have not thought much about it as the Core Web Vitals metric should not be affected. Some have argued it could help with the Time to Interactive (TTI) measure (questionable reasoning rather than evidence) . Someone in FB said they get better result turning off WP's support for native browser lazing loading for Litespeed's system. The only way I can imagine this affecting CWV is if the native lazy loading is slowing the load of viewport images. This could explain why preload works so well. It could be countering another issue? I do "lazy load" the RU-vid video I put at the top of the articles there, but using the same script I borrowed many years back.

Answering my own question native lazy loading does not apply to background images (called via CSS) so in my example the impact would not be countering lazy load. Hard to understand what folk say as CWV get referred to when talking about PSI overall scores. There is a popular RU-vid channel where the performance guy never seem to separate the two. Additionally Google keeps changing how scores are weighted (slowly towards the 3 CWV ones).

In relation to what? I am not looking for business offers.

@@DavidWaumsley We would like to invite you to try our product for WordPress. This is a great product.

@@josedealmada4275 What is the product?

@@DavidWaumsley plugin for WP www.conveythis.com

@@josedealmada4275 Someone contacted me on Facebook about this. I only talk about the tools I use in my business. This is not the first time you have contacted me on this channel.