Gold Penguin Logo with Text

How To Speed Up Breakdance Caching With WPRocket (2023 Tips)

Learn how to speed up your WordPress website with one of the best premium speed and caching plugins, WP Rocket. Easily optimize your Breakdance Builder site and improve your page structure & loading times.
Updated April 18, 2024

April 18 2024: This article is outdated. It has not been updated since February 2023

Are you struggling to keep up with the ever-changing demands of website performance? With page speed being a major ranking factor website rankings, it's more important than ever to ensure your website is running at its best. But don't worry – we understand it can be overwhelming. Luckily, Breakdance is an extremely fast website builder by default, but why not try to make your site the fastest it could be?

Over the next few minutes, we'll show you how to effortlessly optimize your Breakdance site and boost its speed with the help of one of the leading premium cache & optimization plugins for WordPress - WP Rocket. We'll go over the best settings & configurations to boost your sites performance. Let's get into it.

Why Is Site Speed Important?

Website speed is absolutely crucial in 2024. Firstly, it directly impacts user experience, with slow loading times leading to increased bounce rates and decreased conversions. Think about the last time you've stayed on a website after it took more than a couple seconds to load? Probably not for long, right?

1 in 4 users will leave a website if it takes more than 4 seconds to load. Almost 1 in every 2 users will never revisit a slow site. With every 1 second delay, customer satisfaction reduces by 16%. If you're selling, it gets even more serious – 64% of shoppers that are dissatisfied with their shopping experience will visit another site for their next purchases. (LoadStorm, Econsultancy)

Google prioritizes page speed loading times when determining search engine rankings, so while a faster website might not directly lead to improved visibility, a slow website will more than likely limit chances of rising to the top. Also over the last few years, mobile device traffic has absolutely flooded the web. With the rise of mobile browsing, users on mobile devices may have slower internet connections and less patience for slow-loading pages. Regardless, website speed is a critical factor in the success of any online venture, and should be a priority for all website owners and developers.

What Is Caching and Why Is It Important?

Website caching is a technique used to speed up the loading time of a website by storing certain resources, such as images and CSS files, in the visitor's browser. When a visitor accesses a website, their browser will first check to see if it has a cached (mini-archive) version of the resources it needs. If it does, it will load those resources from the cache rather than requesting them from the server. This can significantly reduce the amount of data that needs to be transferred, which leads to faster page load times. Caching is particularly important for WordPress websites because it can help to reduce the load on the server and improve the overall performance of the website.

Before & After Speed Test (Breakdance with WPRocket)

We did a before & after speed performance test we wanted to show you before the tutorial actually starts. The first report is before any changes were made (pre-installation) & the second was after WPRocket was installed and all the below mentioned settings were applied. You can see a 9% increase in performance (rising it to 100%), reduction in largest contentful paint, nearly wipe out site blocking time, and fully loaded site time drop from 1.8s to 1.1s. These results and percentages will vary based on the actual content of your site, but with a default design set – this made it nearly perfect.

before vs after speed and performance settings for a breakdance builder website optimized with WP rocket. Scores increase by over 20%

Best WPRocket Settings To Use with Breakdance Builder

Now let's get into the best settings to optimize your Breakdance website. Before we begin, please note this is an information tutorial only & we take no responsibility for any damage done to your website. Although we don't predict any issues happening with your site because of this plugin, it's always important to make the necessary precautions like backing up your website, database, and ideally testing this on a staging server as opposed to your production website.

The first thing you'll need to do is download and install WPRocket. If you don't have the plugin, the rest of this tutorial won't work for you! I became obsessed with speed optimization a few years ago & have been using this plugin ever since. Currently priced at $59 (for a single site on yearly subscription), the plugin provides tons of optimization, speed, caching, and media tweaks that load your website faster than you can blink. After dozens of hours spent optimizing this exact website (although built in Oxygen, not Breakdance) check out our GTMetrix speed result for the homepage & a random blog:

goldpenguin.org performance report because of WPRocket on main home screen
goldpenguin.org/blog/* performance report because of WPRocket on random blog page

One of the first steps in almost any article or consulting advice you'll ever hear about WordPress optimization will be installing & configuring WPRocket. For the sake of this tutorial, we'll focus on the following categories: Cache, File Optimization, Media, and Preloading. Also, there is nothing installed on this website except for Breakdance & WPRocket (so if your speed issues/concerns are caused by other third-party plugins, this tutorial might not help you fix that).

WPRocket settings to optimize with Breakdance builder include cache, file optimization, media, and preloading settings.

If you have the plugin installed & activated correctly, you should see a screen similar to this when on the dashboard page of WPRocket. We'll go into cache first and make some changes.

Best Cache Settings (Breakdance + WPRocket)

Inside cache, make sure mobile device caching is on as mobile devices tend to have limited resources and slower internet connections.

I would also disable logged-in cache as users who are logged in should always see the most recent version of the site.

Under cache lifespan, I would recommend 10 hours by default. This is the amount of time that the cached resources will be stored in the visitor's browser before they are automatically refreshed. A shorter lifespan can be useful for sites that are frequently updated, as it will ensure that visitors always see the most recent version of the site. However, for a website that doesn't change very often, a longer lifespan can be used to ensure that visitors experience the fastest possible page load times.

caching settings to enable for breakdance builder website with WProcket (enable mobile device caching and setting time to 10 hours)

Best File Optimization Settings (Breakdance + WPRocket)

The only two options I would enable in this tab is Minify CSS files and Minify JavaScript files. Go ahead an enable them & accept the 'warning'. Remember if anything breaks, you could simply disable the settings & your website should revert back to normal. I've tried to combine CSS & JS files before but it resulted in some wonky loading on various site pages, so I recommend keeping this off.

Loading JavaScript deferred could also cause some issues with certain plugins or scripts on your website, so I recommend keeping that off as well. Minifying the CSS and JavaScript files simply means removing unnecessary whitespace, comments, and other characters from the code, which can help to reduce the size of the files and improve page load times. However, it's important to note that minifying the files can sometimes cause issues with certain scripts or plugins, so it's always a good idea to test your website thoroughly after enabling these settings.

minimize CSS and javascript file option in WPRocket file optimization settings to be used with Breakdance Builder

Best Media Settings (Breakdance + WPRocket)

In media, I would enable image LazyLoading. Lazy Loading is a practice that delays the loading of images and other resources until they are visible on the user's screen. This can significantly improve page load times, especially for pages with many images. Images are often huge, so why would you want them all getting loaded at once, if you can't even see 90% of them until you scroll down a page?!

It's important to note that while Lazy Loading can improve loading time, it can also cause issues with the way the images are displayed, so it's always a good idea to test your website thoroughly after enabling this setting. On our main website, we enable this setting & make use of a3 lazy loading. This is a free plugin that gives you more control over lazy loading content – We'll have a tutorial about best practices for Breakdance soon. For now, WPRocket normally does a great job!

Lastly, I've ran into many issues with adding missing image dimensions. This has caused layout issues when enabling this for every image at once, so I recommend that you add missing image dimensions manually. Specifying the dimensions allows the browser to reserve the space for the images, so the page can be rendered correctly even before the images are fully loaded. It's important to note that this step is more technical, so it's recommended to seek help from a developer if you're not too familiar with HTML & CSS.

Best Media settings for WPRocket configured with a Breakdance Builder website.

Best Advanced WPRocket Settings for Breakdance Builder

The last thing we'll do today is some various tweaks. In preloading settings, activate preloading & link preloading. This will allow the browser to start loading certain resources, such as images and CSS files, before they are actually needed. This can help to improve the overall loading time of your website, especially for pages with many images or complex scripts. Additionally, activating link preloading allows the browser to start loading resources for the next page as soon as the user hovers over or clicks on a link.

preload URL and page settings in WPRocket for Breakdance Builder

We don't use WPRocket for a Content Delivery Network (CDN) and use Bunny instead. We'll also have a tutorial for integrating this with Breakdance in the coming weeks. Honestly, a CDN is a must for people expecting traffic from locations globally and throughout the country (if you live somewhere spread out). For image optimization we've been using Imagify (also made by the same company as WPRocket). Again, a tutorial will be out on the best settings for this soon!

Final Results

Like shown earlier, page speed increases are truly massive. This website is nearly 100% optimized for everything it can be. I've gone ahead and installed another design set and tested it out of the box and got the following. Again, these are going to be optimized sets to begin with – so turning on the best WPRocket settings just make it a beast. With customized pages and user-designed themes you'll probably get even better performance enhancements after using the plugin and enabling these settings.

WPRocket Breakdance builder performance report 2 (increase in performance by 11% and reuding paint and blocking times)

Conclusion

As fast as Breakdance can be out of the box, these settings make it way better. If you're planning on driving some serious traffic to your website (or don't want the current traffic to get annoyed and leave) you should optimize your site in any way possible! Combining the efficient design of Breakdance Builder with the powerful capabilities of WPRocket, you can create a website that is extremely fast, professional looking, and drives your company more sales. Have any questions about using the two together? Have any tips we missed? Leave a comment below, and best of luck speeding your site up!

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

1 Comment
Most Voted
Newest Oldest
Inline Feedbacks
View all comments
Join Our Newsletter!
If you enjoyed this article, subscribe to our newsletter where we share tips & tricks on how to make use of some incredible AI tools that you can use to grow and optimize a business
magnifiercross