This content originally appeared on DEV Community and was authored by CodeWatchers
Divi is undoubtedly one of the most popular WordPress themes nowadays. It comes with a powerful Page Builder, that you can use to create almost any type of design for any type of website (literally). This huge advantage comes with a downside. As Divi has a bunch of features, these features have a weight. And for those who don't want to admit it, it's important to consider optimizing Divi, especially if you want to offer the best experience to your visitors.
While it's true Divi is receives frequent performances, nevertheless, these aren't always enough and that's truer for those having more than a simple "Hello World" blog.
In this tutorial, we are going to explore what we can do make divi loads faster (while it's yet already a fast WordPress theme cosnidering the available features). Here are some key topics we’ll cover:
- How To Optimize The Database
- How To Optimise the DNS
- How To Choose A Good Hosting
- How To Optimize The Time to First Byte
- How To Cache Your WordPress Website
- How To Perform A Minification
- How To Enable Gzip Compression
- Which CDN Can You Use
- How To Optimize Your Images
- How To Optimize Your Videos
- How To Perform SpeedTests On Divi
- Other Tips
Why You Must Have A Fast Website?
It's no more a secret for no one. Fast websites convert better than slow websites. There is a huge correlation between the speed of your website and your bounce rate. More accurately here are why it's nowadays a must :
- Reduce Bounce Rate – You need to keep your visitors? Make your website blazing fast.
- Increase Conversion – If you would like your visitor to see your store or form, your website needs to load fast before they go away.
- SEO – Google Might Rank You Higher (might because it's not always the case).
- Credibility – slow websites create a bad first impression to your visitors.
How Fast Should A Website Load?
Based on various studies, a website should load in 3 seconds or less. Generally, a good goal is to have your webpages load in 3 seconds or less. Although it seems most customers expect it to be 2 seconds or less these days. But obviously, every website and web page is different.
Tips And Tricks To Make Divi Load Faster
Now we'll explore all the tips and tricks you can apply right away on your Divi website and see significant changes on the performance. Some of these techniques also applies to any other WordPress themes, so you might already be familiar with theses.
Let's get started.
How To Optimize The Database
WordPress is a dynamic CMS that interacts with MySQL database to store and retrieve data (post, pages, metadata, etc). This way to work makes your website management easier, but the downside is that it takes longer for pages to load because it has to locate the data in the database before loading the page. For a static HTML website, there is no need to search for dynamic content, because it's doesn't change dynamically. That's why static HTML websites will be faster than WordPress websites.
One way to keep a Divi site (or any WordPress website) as fast as possible is to make sure to optimize your database. WordPress site files are organized in your database by tables and everytime you add new data to your site (like themes and plugins), that creates new tables and new data. As you would expect, the more your database is bloated, the harder it will be to find the data. This leads to a slower website.
Now, if you're blogging for many years, you might have tried a lot of themes and plugins. This has eventually caused your database to keep data it doesn't need. Even if you uninstall a plugin, it doesn’t mean that all the data created by this plugin is wiped as well. Some plugins keep some data, in case you reinstall the plugin, or the developer might have forgotten to add a proper uninstall measure. Obviously that not good and fair for your database. This left over data can lead to unnecessary clutter and slow down your site.
Just like every human needs organization to work more efficiently, every WordPress site (Divi or not) needs a clean database to load pages faster. That' why if you had your website for a moment now, you should definitely consider optimizing your database.
There are many plugins that can help with that, but you can definitely give a try to WP Optimize, which seems to be a credible option. But there are other tricks to consider as well.
In addition to optimizing your WordPress Database, you may want to make WordPress even lighter by cutting down on the data it stores. For example, WordPress will automatically hold deleted items in the trash for 30 days. You may want to cut that time period down to 7.
How To Optimize The DNS
One of the first things that happen when your website is about to be accessed, is a DNS Lookup. As soon as the URL is entered (or clicked), the visitor’s ISP sends a DNS query to the nameservers to find the IP address associated with your domain (every domain/website has a specific IP address). More clearly, a DNS lookup is like looking up your domain name in a phone book to find the IP address for that domain.
However, when a user visits a page on your site, the page may have multiple domains that need to be accessed to pull up the page. So you could be doing 3 or 4 domain lookups on a single page load (maybe more).
Generally speaking, most free DNS Providers like Godaddy and Namecheap will generally be slower than others.
The best free option out there that will boost your DNS lookup speed is probably Cloudflare. They have the fastest DNS performance recorded on DNSPerf.com. They are significantly faster than GoDaddy and Namecheap. And, you can even optimize Cloudflare to be used for DNS without their other services (like CDN or WAF) if you want.
For example, you may want to use Cloudflare for DNS and Security (DDOS detection) and KeyCDN (or MaxCDN) for your CDN. That is also a great combination.
Setup Cloudflare
Cloudflare is easy to setup. You don’t have to worry about switching your hosting or anything beforehand. All you need to do is walk through their 5-minute setup that begins with entering your domain.
They will retrieve your current DNS records automatically.
One of the things you will need to do to complete your setup is to change the default nameservers on your current DNS provider (like GoDaddy) to Cloudflare’s nameservers.
From now you'll be able to manage your DNS easily from their Dashboard.
And just like that, you have a boost in DNS lookup speed, more security, and a CDN for your website and for free.
How To Choose A Good Hosting
Beforehand, one of the first things to consider during your website optimization journey is to choose a hosting that works well for your WordPress website. A few months ago, Elegantheme was releasing a partnership offer with popular Hosting providers that works well with WordPress. These providers are recognized for providing a better service for Divi and the integration with the Elegant Themes dashboard is seamless. You just have to choose from these providers which one you'll choose for your website.
Now nothing forces you to use these providers as they are many other solutions available out there that work well for WordPress and Divi as well. Let's then break it down by considering the type of hosting available.
Types of Hosting
Shared Hosting
This is by far the most popular type of hosting for WordPress/Divi users. But unfortunately, it is the worst option for having a fast website. With the shared hosting, you will share all the available resources of a server with others. Because you are sharing, the cost for this kind of hosting is usually very low. However, the downside is that you can’t control how much traffic those other sites are getting, and how their website can potentially affect the performance of the server, and then affect your website performance. So you can easily fall prey to periods of extremely slow loading times and even times when your site is completely down. So you better have a good idea of how much traffic your shared hosting can handle.
VPS Hosting
Virtual Private Server (VPS) hosting is basically a middle ground between shared and dedicated hosting. Your server space is “private” which means it is completely separated from others. So your site files aren’t exposed to others on the server. Unlike shared hosting, a VPS does have a dedicated amount of system resources at your disposal to ensure your site always gets what it needs to deliver fast load times consistently. Technically, you won’t have to worry about other website’s traffic spikes affecting your site speed.
But, unless you have a managed VPS, this kind of hosting is mostly for those DIY types that are tech-savvy enough to handle things themselves.
Cloud Hosting
With cloud hosting, you have access to a network of servers (in the cloud) instead of a single physical server. This allows you to pull all the resources you need from this network of servers as needed. More simply, you have a virtual partition of server space that is backed by the power and resources of the entire network of servers. There is therefore no need to worry about the traffic spikes like you would have for shared hosting. Cloud hosting is extremely flexible and scalable for your needs.
One main difference between Cloud Hosting and VPS hosting is that VPS hosting has a dedicated (sometimes limited) amount of resources to pull from that may or may not become depleted. Cloud Hosting, on the other hand, is capable of keeping your resources available without being depleted because it can always pull from the other servers in the cloud. In theory, cloud hosting offers more consistent and reliable high speeds. So if you are serious about speed, cloud hosting is a great option (maybe even the best).
Dedicated Hosting
With dedicated hosting, you have your own dedicated server just for you. There is no need to share any resources with anyone else. This means you will have more predictable and consistent fast loading times for your website. This is usually offered as a top-tier option for large corporations at a high premium cost (obviously). You'll consider using that if you can afford the cost that it inherits.
Managed WordPress Hosting
Managed WordPress Hosting usually refers to shared hosting that is managed by WordPress experts. Here it's not private as a VPS or as powerful as a Dedicated Server. But it does help maximize the speed of your shared environment by having WordPress experts do the work. They do this well because they tailor their services and configure their servers strictly for WordPress sites. And a lot of them come with many cool and convenient built-in features like one-click staging environments, site caching, one-click CDN deployment, automatic backups, SSL’s, and more. They are perfect for those who don’t want to handle these things manually themselves.
Other Hosting Provider To Consider
There are many WordPress Hosting companies out there. And if at all possible, you will want to avoid traditional shared hosting (not managed) if you are serious about speed optimization. But if you have a simple site and aren’t willing to pay the extra money for managed, Siteground seems to be one of the best for shared hosting.
For now, here is a quick list of hosts to consider for a faster Divi website.
- Kinsta – specializes in managed WP hosting
- SiteGround – offers shared hosting.
- Cloudways – specializes in SSD-Based managed cloud hosting
- Flywheel – specializes in managed WP hosting
That is not all the possible providers available out there, but definitely with these, you'll have a fast WordPress website.
How To Optimize The Time to First Byte
The Time to First Byte (TTFB) is the amount of time it takes the user to receive the first byte of website data from your server. This means, when a user tries to access your website, the TTFB will essentially be that waiting period before any data is received by the browser.
The TTFB is usually around 200ms. But for sites that are on poor hosting and haven’t been optimized, the TTFB can easily be 2 seconds or more.
The TTFB delay on your Divi site is usually caused by the following:
- The amount of dynamic content that needs to be received. This can be cut down with caching, database optimization, and a CDN.
- The amount of traffic your server is experiencing at the time. Shared hosting providers can't have a low TTFB because you are sharing resources with others on the same server. Spikes in their traffic will cut down on your server’s processing speed.
- Your web server configuration. A good WordPress hosting provider can help with your site’s TTFB by providing a solid backend infrastructure and optimizing your web server configuration (things pretty much out of your control).
In short, if you want a quick boost in TTFB, get better hosting and follow the rest of the steps below.
How To Cache Your WordPress Website
There are four main types of caching that can be implemented to speed up your WordPress site.
- Page Caching – This process stores cached static HTML versions of your page for fast delivery.
- Browser Caching – This gives you more control over what content is able to be cached by the browser and for how long. Only some plugins can do this, so you should consider doing that manually for more control. This will help take care of the “Leverage Browser Caching” metrics when conducting speed tests.
- CDN Caching – Serves cached website pages/files from a CDN closest to your users.
- Object Caching – Object caching caches repeated query results that PHP initiates to retrieve data from the database and serve it to the user. This is different from bytecode caching which stores a cached version of the compiled PHP code used to display your website.
Divi does perform caching for serving up Divi’s static JS and CSS files behind the scenes. But this is primarily for the Divi theme files for better Divi Builder functionality.
You still need to use caching for optimizing your entire WordPress website. Most sites have multiple plugins that come with their own CSS files that may need to be combined, minified, and cached. You can therefore take advantage of a third-party plugin to serve cached static HTML versions of all of your pages.
Popular Caching Plugins include:
How To Perform A Minification
Minification makes your site files smaller. Minifying your site files (CSS, JavaScript, HTML) remove all those unnecessary things (like spaces and page breaks) so that the file size shrinks. That will reduce the time for the browser to download that asset.
Aggregation means combining the site files to reduce the total requests on the page and speed up loading times for your visitors. But, that also means serving bigger files to your users, you should make sure to serve a 1MB file of CSS for example, and consider splitting in small chunks.
As mentioned earlier, Divi does minify and combine Javascript and CSS files that are used by the Divi Theme by default. So you technically don’t have to worry about using a third-party plugin to further minify and combine Divi’s Javascript and CSS files. However, Divi doesn’t minify the HTML output. So you can benefit from a third-party plugin to minify (and cache) the entire HTML of a page.
Plus, almost every Divi site will depend on files outside of the Divi Theme (like plugins or other files added by the Child Theme) that will benefit from minifying and combining the CSS and JS files. This can easily be handled by a plugin.
Some suitable plugins that will minify your site files include:
This content originally appeared on DEV Community and was authored by CodeWatchers
CodeWatchers | Sciencx (2021-11-09T17:01:36+00:00) Ultimate Guide To Optimize Divi On WordPress (2021 Edition). Retrieved from https://www.scien.cx/2021/11/09/ultimate-guide-to-optimize-divi-on-wordpress-2021-edition/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.