How to speed up a Divi website?

We love Divi.

Having used Divi for around 3 years, creating website for some high profit clients – we have identified the short straws, one being the number of files Divi loads, it feels a bit bloated and the page speed is not fantastic. However there are ways to make it quicker.

Why is speed so important?

We all know the pains of waiting for a slow website to load. Your clients & customers know this too and having a slow loading site will only bring frustration and result in them leaving with a bad impression. In the digital world we live in, time is everything. Speed also matters because Google is judging speed as a ranking factor. Google measures your page speed from the time it is called to when the page is initially loaded. This means you want the page to load as quickly as possible.

Speed isn’t the be all or end all of SEO and ticking all the boxes on pagespeed insights, pingdom or gtmetrix doesn’t guarantee you a quick site or boost you in the eyes of Google.

THE PHYSICAL TIME THE SITE TAKES TO LOAD IS WHAT REALLY COUNTS !

That being said, not paying attention to the recommendations such as minifying css & js or optimising your images would be a naive thing to do. If a professional sprinter gave you some recommendations on how to run quicker and you didn’t take them to practice, that would be a daft thing to do would it? Same principle applies here. Only that you don’t have to get bogged down by getting 100/100 on pagespeed, mastering all the recommendations from the professional sprinter doesn’t guarantee you to be a fast runner.

To know how to speed up a Divi site, it is important first to understand how a web page is built.

How a page is displayed?

The steps of how a page is displayed are as follows:

  1. A request is made when the URL is entered or a link is clicked.
  2. The page and its resources (files) are then downloaded from the server.
  3. The web browser uses the resources to build the web page.
  4. The web page then is displayed to the user.

You can read more in detail on how a webpage is displayed HERE 

So how can we speed up our sites?

If we look at the steps above, the first two are what we as web developers need to pay attention to. How do we reduce the time of the request to the server and the time it takes to download all the resources?

Server response & download resource time.

What is server response time?
It is the response time that is taken for the web server to respond to the viewer’s browser.

There are two ways to decrease the server response time.

  • Paying for “premium” hosting or hardware.
  • Learning what can reduce the time on your host and implement these.

We assume that most of you don’t have a dedicated server (like us) so have to work at optimising your site to be more efficient.

Again we will go into detail about this in another post, but a breakdown of the factors that affect server response is:

  • The amount of traffic you get
  • The number of resources that needed to be downloaded such as css, js and images
  • Your web server software
  • Your web hosting.

To improve your server response time you can look at:

  1. Better hosting
    • Shared hosting, this is the most economical of the hosting types. You basically get your website put on a sever shared by others. Some shared hosts put you on with over 100 others and therefore are slower. I have used many and suggest Siteground , they don’t put you on as many sites as the others and have great support.
    • VPS – Virtual Private Server is the next step up, it requires more knowledge to setup but is better for larger sites such as e-commerce.
    • Dedicated servers host your site on its own. It is the fastest but costs the most. You can imagine the benefits of having your site by itself and not shared by 100’s of others like sgared.
    • Cloud hosting – If you don’t need a cpanel (emails etc) then this is a great option. We use cloud hosting on all of our “premium” clients. Cloudways is what we use and would recommend them, very affordable and you can scale up as and when you wish.
  2. Minimise the amount of CSS and JS files that are requested by your site.
    • WordPress is great in that you can add plugins to do particular jobs for you. However this can be a downfall as most plugins use their own css and js files, so the more you have the more files are being loaded.
  3. Compress and optimise the delivery of your images.
    • Images can be the biggest factor for a slow site, they can be the largest assets that are being requested (other than videos) – so if you have loads of big images – this will take a long time for the server to respond.
  4. Set up a CDN
    • A content delivery network is a piece of software that stores your files all over the world. This allows the viewer to access the files quicker as the site is requesting the files closer to their physical location rather than requesting from the US files that are stores in India.
  5. Caching
    • You have to make sure that you have a caching system in place. This is the single most effective way to improve server response time. We recommence WP fatest cache or W3 total cache for this.

As mentioned before, this is just the tip of the iceberg, we will take more in detail about server response time.

So how do we fix the above?

  1. Invest in better hosting such as Siteground or Cloudways. (these are just our preferred choices and there are so many out there that are as good or better)
  2. Minimize the number of scripts being called.
    • Don’t be “plugin happy”
    • Use a plugin that combines your CSS and js files so instead of having 10 + you only have 3-4
    • Export your images correctly and use software like Compressor or Jpegmini to compress your images. Use image types that are smaller such as a jpeg or SVG. We will take about this in detail in a later post.
    • Optimize the delivery of the images using image defer. This basically only requests the images only after all has been loaded. Thus, removing the size of your images from the server response time.
    • Set up a CDN like Cloudflare
    • Set up caching for your pages and scripts.

We have developed Divi Nitro to speed up your Divi sites.

Divi Nitro does the following for you:

  1. Combines and minifies your CSS and JavaScript files.
  2. Caches your CSS and JavaScript
  3. Defers your images that are placed using the Divi Modules.

If you look at the information above, optimize your images, use plugins when needed, and install Divi Nitro – your site will be much quicker than before.

As we have mentioned above, this is just the beginning and will bring out more posts that will explain these areas in more detail

6 Comments

  1. In my experience inline “above the fold css” really gives a performance boost especially on mobile.

    • Yes this helps as long as it is small. Having a large amount of CSS in the head of your site is not good but smaller ones does save a “trip” to the server but also means that your CSS will no longer be cached (which is bad). I will write a post about this in more detail 🙂

      Divi Nitro now minifies your inline html, CSS and JavaScript so this will improve it even more !

      Thanks for the contribution!

  2. How does your plugin coexist with wp-rocket ? It has minification options and caching. Won’t there any conflict ?

    • Yeah so you don’t want to minify and combine using both. We added this option as found that other plugins were causing issues with our sites. So if WP Rocket is doing this for you with no errors than just leave it off in our settings (don’t fix what is not broken).

      WP rocket uses lazy load, deferring images is a better way of delivering images so I would turn this off in wp rocket and use our defer image option.

      Hope this makes sense?

  3. Interesting but I manage my server to provide shared hosting to my customers only. 99% using divi. Will you provide advice to optimize things at server level ?

    • Yes this is our goal. +/- 90% of people that use Divi use shared hosting. So we will be focusing on improving this. One thing to look at is getting a better shared hosting provider if yours is causing problems. You would expect to pay around the £5 a month for this 🙂

Submit a Comment

Explore more from Divi Engine