Tips to Speed Up Your Divi Website
You’re driving down the highway, the wind in your hair and the sun in your face. Their air feels crisp and cool, and you hit the gas pedal as you round a turn – wait, what’s this? A rusty old car is driving in front of you, and they’re crawling along at what must be less than half the speed limit. Aaaaargh, why do some people drive so slowly?!
When a website is slow for its visitors, they think along the same lines. But instead of being trapped behind a slow car on the highway, visitors can leave your website with the click of a button. The barrier for them to leave is nonexistent. As soon as there’s a slight hiccup in your site, they’ll leave and go to your competitor.
However, the opposite is true: when your site gives them a good time, they’ll want to stay for a longer period of time. In this article, I’ll talk about speeding up your Divi website. After all, faster speeds mean better experiences for your customers and a generally better online business.
Just to let you know: there are affiliate links in this article. This means that you won’t pay anything extra, and I’ll receive a commission if you decide to buy. I recommend these products because I constantly use them, and not because of the small profit I make if someone decides to buy after clicking them!
Let’s start out with a weird one: remove calls to social media
Yes, you heard me right: remove anything that pulls data from social media sites. You might be thinking, “Mark, you must be crazy! I can’t remove _____ from my site – that’s simply not acceptable in my industry!”
Here’s a rule of thumb: unless you’re Facebook, you probably don’t need a Facebook feed on your site. A simple button would do the job. (And as a side note, The Client Class doesn’t even use sharing buttons, yet our articles are still shared to designers.)
Let me ask you something: what’s the single goal of your website? Is it to get people to follow you on Facebook? For people to read your Tweets? To browse your Instagram? Or to do business with you? The truth is, social media feeds are overrated in most situations, and loading resources from third party servers can make your site slower in many situations.
Think of it this way: what is the single thing you want your website to do? What helps it achieve those goals, and what doesn’t? Eliminate what doesn’t, and you’ll be left with a faster site (and a smoother user flow).
Automatically optimize images on upload
Instead of uploading an 11,000 x 8775 pixel monstrosity to your website for a featured image, install a plugin that will automatically resize and compress the image during its upload. I like to use Compress JPEG & PNG Images from TinyPNG.
By the way, here’s a wonderful Reddit user’s explanation of how image compression actually works:
An image is made up of lots of little dots called pixels. The pixels are assembled in a specific order, and every pixel has a specific color/shade. […] When you have a big image, the image will have a LOT of pixels, and remembering all of the individual pixel details, in order, can make the files big.
To make the files smaller, the computer figures out tricks to make the data smaller. If the entire top row of pixels for an image is black, for example, an uncompressed image would have to data read kind of like –
BLACK BLACK BLACK BLACK BLACK
For a compressed image, the computer would have the data kind of like this – BLACK [x5]
Compression can also sometimes simplify small differences to make up for less data. If you’ll allow me to use a word for an example, think of the word “Phlegm.” A computer wanting to simplify that might save it as “Flem,” because an “F” is less data than “Ph,” but makes the same sound, and the “G” is silent anyways. Similarly, when it comes to image compression, it might find two pixels that are really close together and really similar in tone, and it then might “average,” them to share a single common tone.
Sometimes, Gradients > Images
Everyone and their dog is designing their site with parallax imagery. After all, it’s beautiful – but it has a time and a place. If your site is heavy on the images, consider using a gradient (tutorial here) to color your section instead, like this one:
Sometimes, gradients work better than images.
Eradicate a hidden culprit
Many designers forget to resize logos before putting them in place. The problem with this is that you’re loading a 4000 pixel wide logo when it’s going to be rendered to fit in a 200x50px spot at the top of the page. While a gigantic, high quality logo might be good for billboards or the side of yachts (for some reason I originally typed “battle yachts” there – what’s a battle yacht? It sounds like a sweet new sport!), these huge logos aren’t so friendly on your website. Shrink your logo to a smaller size, and you might notice a loading difference. You can also compress the logo for added speed.
Caching’s all the rage
One of the best ways to increase your speed is to use caching. If you’re using a host like Flywheel , you don’t need to worry about this (they handle server-side caching for you). However, if you’re using a different hosting company, you’ll need to add a caching plugin that stores some of your website’s assets on your visitors’ computers. That way, your resources won’t need to be downloaded during frequent visiting.
Check your website to see which plugins you’re using – they might be the reason for your slow speeds. A rule of thumb is that you can use as many plugins as you want, as long as they’re high quality. If your website is running slow, disable all of the plugins on your site, and then load the page to see if one of them was the problem. Add them one at a time until you’ve found the bad plugin.
You can also delete unused resources like revisions from your pages and posts with a plugin like Better Delete Revision.
Location, location, location
Use a content delivery network (“CDN”). Basically, this is a network that loads your site’s files onto different servers around our lovely planet. If someone from New York visits your website, they’ll be served the files closest to New York; if someone is riding their battle yacht around Monaco, they’ll be served the files closest to Monaco.
If you’re using Flywheel , just log in and click the “Add CDN” button in your dashboard and they’ll set it up for you.
If you’re using Siteground , you can activate the Cloudflare CDN in your cPanel.
The elephant in the room
Let’s be serious: sometimes, our hosts are the biggest causes of our low speeds.
For instance, back in its glory days, Bluehost might have been one of the best shared hosts on the market. However, the quality of their speeds have severely decreased over the course of the last year, as did the rest of the EIG hosts. If you’re stuck in the slow hosting trap (like I was a few months ago), hopefully this will be able to help you. I’ve found what I believe to be the two best web hosts for WordPress designers on the market.
These are the hosts I talk about around the dinner table (seriously, I do):
I’ll skip the sales talk: Siteground is one of my favorite hosts out there. This is because they’re a good choice for people who need a reliable yet cheap host. This makes them a good fit for beginner designers. Their sites are fast and can be managed through a cPanel where you can add email addresses, domains, install WordPress, and so on.
My favorite WordPress host. Flywheel is custom-built for WordPress designers, and they’re lightning fast. They take care of a lot of the technical work for you, concierge-style. They even have an in-house support staff (that invited me to their office for lunch after they closed one of my tickets). Unsurprisingly, I host with them for this site.
If you’ve never moved hosts before, it’s a good idea to read a few articles, or talk to others from the community, in order to help you prepare for the move. It can be a little stressful, but from past experience, it was always worth it for me.
Let’s wrap this up
This isn’t an exhaustive list of speed fixes, but it’s a darn good one! These are some common problems faced by WordPress and Divi designers, and each has a fairly simple fix. Oftentimes, you’ll find that you only need to use a few of these methods to fix the speed on your site and not all of them.
Now if you excuse me, I’m going to go plan more about battle yachts…
Hello there, Divi designer!
Designing can be tough, but you can make it easier. Receive four free emails on eliminating stress, using Divi's
magical powers to work smarter, raising your rates, and automating the administrative dullness in your practice so you can focus on doing what you love.