How to optimize the speed and load times of Divi without plugins

One of the dangers of using layout models is that you have so many possibilities to decorate and flip with your pages, and it is so simple to do so, that Sometimes we make our web load slow, because of the amount of resources we insert in it .

Of course, the main criterion and norm to take into account should be not to use any resources other than essential to get conversions, sell or whatever you want to achieve with your web layout with Divi .

But the reality is that we see the option of putting a carousel with photos at high quality , or a call to action with video and it's hard to resist offering a tremendously attractive and effective website .

So, since I know you're not going to hold on, at least I'd like to give you a few tips and tricks to make Divi load faster and you get good results of WPO optimization not only in the online meters, but in the actual load of your pages.

WPO in Divi without plugins

The optimization of resources or WPO is possible in all web, and also with Divi and any visual layout. You just have to take into account some basic rules and apply the possibilities offered by the same designer.

Optimize the images before uploading them

 image file size in wordpress

Do not pass nothing to put a section hero full screen with a wonderful image that shows your qualities or product, as long as the weight of the file does not pose a problem for the loading of your page, especially on devices mobiles always with worse connections.

For this apply these 3 rules :

  1. Do not upload or use an image whose file weighs more than 100 Kb.
  2. Do not upload or never use an image at a higher resolution than necessary.
  3. Always use jpg instead of png unless you need transparency.

For the file weight say you do not have a program of image editing can to use online services such as tinypng that allow the compression almost without loss just with drag and drop your images.

 reduce image size tinypng [19659003] When the service optimizes your image, you download and upload the optimized image instead of the original image.

Regarding image size / resolution always take into account the image sizes for each Divi module. and reduce them from the same WordPress, as in the following captures …

 edit image wordpress 1

 Edit image wordpress 2 ]

 image optimized with wordpress

When you have the image at a suitable size, and at a sufficient quality for the web visualization in the browser, upload the image and, if you already had an earlier version, s use it for the new one, and optimized .

Imagine a web with the image of the previous example, with 7 Mb per image in which you have a carousel with 2 or 3 images of that size and weight, what it will take to load, however much you try to optimize by other methods.

And always, always, first reduce the size of each of your resources before you start applying optimization tricks or add WPO plugins.

Optimize videos before uploading them

Of course, you must apply the same criteria for videos.

The first advice is that if you can, avoid uploading files video, and use the oEmbed WordPress capability of to show videos from services like YouTube or Vimeo by simply pasting the URL anywhere in the editor.

Just add a module of text and in the editor box paste the URL of your video to

In this way you avoid having to serve video directly from your website so not only will your page weigh several megabytes more for the weight of the video, but it will consume huge resources for each reproduction, and you'll spend thousands of euros on web hosting.

If you need upload a video, for example for a Divi video carousel, and it's imperative that it be at least optimize the video to the maximum before uploading it.

Here again I suggest some common sense rules:

  1. If you can embed video using oEmbed better than uploading it.
  2. Always use the .webm format , much more optimized and smaller.
  3. If for compatibility with browsers you also have to upload the .mp4 format, optimize it before uploading it.

As you know, Divi modules that allow video insertion offer you 2 fields , for upload the .webm and .mp4 version of the same video .

 videos webm and mp4 divi

Always upload the .webm version, because they are more optimized for web and smaller but if you also have to load the .mp4, for compatibility, to make it look good in all browsers, at least reduce the file size before.

If you do not have .webm version you can convert your .mp4 video to .webm on this website . So you have both formats.

You can optimize video both .mp4 and .webm format, in online services like ClipChamp (free for 5 videos per month), which they work the same as the aforementioned tinypng.

Just upload the original video and download the optimized one. Then you upload the already optimized to your Divi module.

Install only the essential plugins

One of the parameters for measuring the loading times of a website is the TTFB and one of the parameters that make a page load slowly is the number of plugins installed and active.

So, before installing plugins, even if they are caching and optimization, follow this guide that I propose, and then keep your arsenal of plugins to the absolute minimum .

Easy, huh?

Generates a static CSS from Divi

For some time now, Divi has incorporated its own optimization tools into its options, and we are going to take advantage of them. [19659003] One of them is the generation of a static CSS file, which will reduce the size of the CSS styles of Divi allowing a faster and optimized page load. In fact it is one of the typical optimizations that include most of the WPO plugins and cache.

For this you see, in the WordPress administration, the menu Divi> Theme options> Builder and active the option called static CSS generation .

 css estatico divi

By activating this a static and minimized version is saved and loaded ( minify ) cached by Divi CSS which makes it faster to load.

Activates inline styles

Another feature that Divi has incorporated, although at some point the removed, is the possibility of serving the inline styles in the footer which allows the caching of the styles.

If you want to recover this functionality you have it in the same options page of the previous setting, in the selector called Send inline styles [1 9659059]. Just activate and save the changes.

 styles inline divi

Minimize and combine the JS and CSS files

One of the most typical optimizations that include the plugins WPO is the of minimize ( minify ) the code files, JavaScript and CSS .

In Divi you do not need to install a plugin for this, you have it in the Options of the theme, in the tab General, just under the whole.

 minify css js divi

Simply activate the two options and save.

Divi minimizes all the JavaScript and CSS that it uses ] and offers the browser minimum and optimized versions of everything, reducing the weight of your entire web and each page offering shorter load times, in addition to obtaining better results in web speed meters such as PageSpeed. [19659074] WPO with Divi Builder

If you do not have the Div theme i, if you only use the Divi Builder plugin you have these same configurations, all together in the Advanced tab of your options.

 wpo divi builder

And with plugins?

In my tests I have verified that works better than the minimized and combined that Divi does of its own CSS and JS that the plugins that you will find out there.

Now, you can further improve the optimization, the WPO of your web with a perfect combination which I propose to you:

  1. HTTP / 2 – Host your web in a hosting that serve your web in HTTP / 2, with innumerable advantages . If your web hosting offers it to you, you only have to serve your website in https with an SSL certificate .
  2. PHP 7 – Do not host your website if your hosting does not allow you to have the version of PHP 7.0 or higher the improvements in speed and security are impressive.
  3. A good cache plugin . If you have your website in SiteGround you will only need SG Optimizer . Otherwise I recommend WP SuperCache very easy to use and configure.
  4. Autoptimize – This optimization plugin adds the ability to minimize all HTML files, but it will also do it with the JS and CSS that are not from Divi. I recommend not activate more options than these without advanced options, to not break anything.
  5. WPO Tweaks – If you install my plugin for WPO optimizations to one click you will have, without having to configure anything, optimal speed improvements to virtually any web.
Loading …

may also help you:

Leave a Reply

Your email address will not be published. Required fields are marked *