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 2023. 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.
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:
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).
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.
Best File Optimization Settings (Breakdance + WPRocket)
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 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.
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!
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.
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!