Gold Penguin Logo with Text

Setting Up a3 Lazy Load with Breakdance Builder

Lazy loading is a wonderful way of improving the loading time if your website. Combining a3 lazy loading with the powerful speed of Breakdance makes for an insanely fast site.
Updated February 3, 2023
a snail moving on a sidewalk, headed directly into the sunset leaving a wet trail behind them. the snail is surrounded by nature as 4k digital art
a snail moving on a sidewalk, headed directly into the sunset leaving a wet trail behind them. the snail is surrounded by nature as 4k digital art

Website performance is absolutely crucial for ensuring users have a seamless and enjoyable browsing experience. One way to improve site performance is by implementing lazy loading, a technique that delays loading of images and videos until they are needed by the user. Why immediately load all 100 images on a page when a user can initially only see 8 of them?

a3 Lazy Load is an optimization plugin that can significantly speed up your individual page loading time, especially if your site is content-heavy. Over the next few minutes, we'll show you how to set up a3 Lazy Load with Breakdance Builder.

Understanding Lazy Loading

Lazy loading is a method used to improve website performance by delaying the loading of certain elements until they are needed (scrolled to) by the user. This can include images, videos, and other types of requested content.

Think of going to a library. When you first enter a library, you might see rows and rows of books on the shelves. However, you don't need to read every single book in the library right away. You might only be interested in a few specific books, or even a general category. So, instead of loading all of the books at once, the library only loads the books you actually go to look at (let's say this is equivalent to only letting you check out 3 books at a time). This is somewhat similar to how lazy loading works. If enabled, a website only loads the images and videos that the user actually needs to see, rather than loading [or giving access to] everything at once. This can greatly improve the performance of the website, especially on mobile devices with slower internet connections, or sites that have tons of content on each page.

The Benefits of a3 Lazy Load

a3 Lazy Load is a flexible and feature-rich plugin that can greatly improve the performance of your WordPress website. The plugin offers the ability to selectively lazy load images through a site. This includes posts, pages, and custom post types, as well as in widgets, such as sidebars, headers, and footers. Additionally, the plugin allows you to apply lazy loading to post thumbnails, gravatars, and containers that use horizontal scroll.

In addition to image support, a3 also supports lazy loading of videos, iframes, and post embeds. Furthermore, it provides built-in support for the WordPress AMP plugin and the Jetpack Site Accelerator (Photon) and can automatically detect and lazy load WebP images.

An amazing plugin feature is the ability to apply either a fade or spinner effect to show site users something is getting loaded in the background.

Setting up a3 Lazy Load with Breakdance Builder

Setting the plugin up is quite simple with Breakdance, a3 is free and only has a few custom settings that you might want to tweak. Firstly you need to download and install the plugin on your site, which you can find in the WordPress plugin store. Once installed & activated, head into the a3 settings.

a3 Lazy Load plugin location on WordPress website with Breakdance Builder installed

First thing we'll do is go into the 'Lazy Load Activation' tab. Inside here, we'll enable both of these. I would recommend overriding the core WP lazy load features (since this plugin does a great job itself)

a3 Lazy Load activation settings for WordPress enabling the basic plugin functionalities

Keep all of the image toggle settings on. These will enable image loading across the site – we are mainly targeting page and post images, as other types of images don't normally take a lot of time to load. If you're going to disable this for anything, just ensure the first option is kept on.

Lazy Load image options with a3 Lazy load (all options enabled for all images)

The next tab is video content. I like to keep all of these on, but again if you're having trouble just make sure the first one is enabled. Everything else is optional. This is very useful for YouTube content or direct videos embedded into pages. Be careful if you turn this on but have a hero video that needs to be loaded. This can be added to the exclude list (under the exclude by URI tab)

Lazy Load video options with a3 Lazy load (all options enabled for all videos)

The last option is mainly cosmetic, but I think this plays a big role into user engagement. If you navigate to the effect & style tab, you'll see the default loading effect is set to spinner. You have the choice between spinner & fade. Fade looks a lot nicer, but doesn't give an indication something is loading until it goes into view. For this purpose, I keep it on spinner. Spinner shows something is loading (so it's not as visually appealing) but people will know something is about to come into view. You can see fading vs spinning here.

Spinner or fade effect screen on effect setting page in a3 lazy load. Currently on spinner mode.

Testing with Breakdance

And that's it! On any Breakdance page or post (or other options if you enabled earlier), you should see this working. If you want to see it in action, I suggest trying to load a big image on a page but view it from your phone on data. Also, this site is using a3 lazy load! If you pay attention to the way images load, you should see them spin into view. It happens very fast (especially depending on image size). You should always upload optimized images to your site, but there are still times where a connection is slow regardless of image size.

Breakdance Builder blog post with an image that will be loaded by a3 lazy load plugin.

Conclusion

Lazy loading is wonderful! a3 Lazy Load allows you to enable smooth image or multimedia element loading in just a few clicks. With support for Breakdance, the plugin lets you further optimize an already speedy page builder. If you haven't checked out the plugin, you should! It's free, customizable, and easy to debug if you run into any issues with it. If you have any questions regarding lazy loading anything in Breakdance, leave a comment below. Hope this helped!

Want To Learn Even More?
If you enjoyed this article, subscribe to our free monthly newsletter
where we share tips & tricks on how to use tech & AI to grow and optimize your business, career, and life.
Written by Justin Gluska
Justin is the founder of Gold Penguin, a business technology blog that helps people start, grow, and scale their business using AI. The world is changing and he believes it's best to make use of the new technology that is starting to change the world. If it can help you make more money or save you time, he'll write about it!
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
Join Our Newsletter!
If you enjoyed this article, subscribe to our free monthly newsletter where we share tips & tricks on how to use tech & AI to grow and optimize your business, career, and life.
magnifiercross