Internet users these days do not have the patience to wait for a webpage to load. In fact, Google survey from 2016 figured out that 53% of mobile users abandon a webpage if it takes more than 3 seconds to load! It is obvious that faster websites improve customer satisfaction and provide better user experience. Then, why is the Divi theme so slow? Don’t get me wrong, I love Divi. It is one of the most versatile premium WordPress themes that comes with tons of functionalities. It has more than 100 free templates that can help deliver gorgeous designs in no time! Fast and easy- that is the title of Divi. However, we pay a price for that. It is not a secret that Divi’s page load speed is far from fantastic. This is not a big problem if you can afford a premium hosting plan but it can be an issue if you are on a low budget and you are limited on server resources. Divi has some in-built performance optimizations, e.g. css and javascript minification. However, it still feels a bit bloated. There are just too many files that need to be loaded in order to do its magic. I have some good news for you, though! With just a bit of effort we can actually speed it up. There are some tricks that can help to optimize Divi and improve your visitors’ user experience.

There are a lot of plugins that can help you do the below optimizations. However, I would advize against it! Let us get our hands dirty and optimize Divi without plugins! The problem with plugins is the same as the problem with versatile themes - they are bloated with unnecessary functionalities and we have enough of them already! In this article, I will share the code that I am using when I build my freelance projects with Divi. Feel free to use the scripts and optimize your website as well. Enough talking, let’s do some work! I will be adding custom code in .htaccess file, located in the root folder of the server. I will be also adding some code snippets in functions.php, which is located in your theme’s main folder. However, you should not add the code directly to it and use a child theme instead. I will get to that in a little while. Now, log in via cpanel or via ftp to the server and go to the site’s root folder (it is usually called public html). That is where .htaccess file should be located (If you login via cpanel and cannot find .htaccess in your root folder, make sure that you clicked on show hidden files and folders in the settings tab from the top right corner!)

Enable Gzip Compression

If there was only one thing I had to recommend over all other optimizations , this would definitely be to enable gzip compression. Gzip can reduce more than 80% of the size of the webpage just by compressing it. Not bad, huh?! First, check Small Seo Gzip Checker Tool to make sure gzip is not enabled by default by your host. Most probably it won’t be. Add the following code to htaccess:

<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml
</IfModule>

That’s it! Now check the tool again to make sure you have successfully enabled gzip compression on the website.

Leverage Browser Caching

Leverage browser caching means how much time you want the client’s browser to store images, css and javascript. This is deffinitely a good practice, because returning users will already have the data on their pc-s, so they do not have to wait for the browser to download the same static files over and over again. This is another card in our hands that can help improve the page load time. Paste the following code in .htaccess, just before the #End Wordpress text:

<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access 14 days"
ExpiresByType text/css "access 1 month"
ExpiresByType image/png "access 1 month"
ExpiresByType image/gif "access 1 month"
ExpiresByType image/jpg "access 1 month"
ExpiresByType image/jpeg "access 1 month"
ExpiresByType text/x-javascript "access 1 year"
ExpiresByType application/pdf "access 1 week"
ExpiresByType image/x-icon "access 2 months"
ExpiresByType application/x-shockwave-flash "access 7 months"
</IfModule>

Remove REST API Lines from the HTML Header in WordPress

Since WordPress 4.4, REST API endpoints were introduced, which made it possible for developers to use WordPress as a backend, while developing modern, cutting-edge frontend applications. In this way, you can use any innovative javascript framework to deliver single page applications that provide awesome user experience. I am personally a big fan of frameworks such as vue, react and angular. However, if you are using Divi, chances are you are never going to start writing your frontend from scratch. This code will remove the rest api links from the header and in this way will help to reduce the burden on the server. Add it to your child theme’s functions.php. If you do not have a child theme, take a look at this tutorial how to set up a child theme. If you are not in the mood of doing it, you can just install the plugin Code Snippets. It is extremely lightweight and easy to use. You just have to install it and it will let you modify functions.php, while you will still be able to update Divi without losing any changes. Copy the following code (without the opening <?php tag, it should be put only once, on first row in functions.php!)

	<?php
	// Remove the REST API lines from the HTML Header Since WP 4.4
	function yonkov_remove_api(){
		remove_action('wp_head', 'rest_output_link_wp_head', 10);
		remove_action('wp_head', 'wp_oembed_add_discovery_links', 10);
	}
	add_action('after_setup_theme', 'yonkov_remove_api');

Disable Emojis in WordPress

WordPress 4.2 added support to emojis into its core. While they are fun, they also generate additional http request and have additional css that increases the file size of your webpage. Remove them, unless you are really into using them. Paste the following code in your child theme’s functions.php or in the Code Snippets plugin:

	<?php
	/**
	 * Disable the emoji's since WP 4.2
	 */
	function disable_emojis() {
	 remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
	 remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
	 remove_action( 'wp_print_styles', 'print_emoji_styles' );
	 remove_action( 'admin_print_styles', 'print_emoji_styles' ); 
	 remove_filter( 'the_content_feed', 'wp_staticize_emoji' );
	 remove_filter( 'comment_text_rss', 'wp_staticize_emoji' ); 
	 remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' );
	 add_filter( 'tiny_mce_plugins', 'disable_emojis_tinymce' );
	 add_filter( 'wp_resource_hints', 'disable_emojis_remove_dns_prefetch', 10, 2 );
	}
	add_action( 'init', 'disable_emojis' );

	function disable_emojis_tinymce( $plugins ) {
	 if ( is_array( $plugins ) ) {
	 return array_diff( $plugins, array( 'wpemoji' ) );
	 } else {
	 return array();
	 }
	}

	function disable_emojis_remove_dns_prefetch( $urls, $relation_type ) {
	 if ( 'dns-prefetch' == $relation_type ) {
	 /** This filter is documented in wp-includes/formatting.php */
	 $emoji_svg_url = apply_filters( 'emoji_svg_url', 'https://s.w.org/images/core/emoji/2/svg/' );

	$urls = array_diff( $urls, array( $emoji_svg_url ) );
	 }
	return $urls;
	}

Remove RSS, RSD and Other Unnecessary Head Tags

Let’s continue with our drive to reduce even further the number of unnecessary http requests done in the header. These requests prevent your site from loading fast and dissatisfy your visitors. Let’s fix this now! Remove rss feeds, rsd and the ping functionality, unless you cannot live without them. I mean, they are cool, but not many people are using them these days:

	<?php
	//Remove RSS, RSD and other unnecessary head tags
	remove_action('wp_head', 'wlwmanifest_link'); //removes wlwmanifest (Windows Live Writer) link.
	remove_action('wp_head', 'wp_generator'); //removes meta name generator.
	remove_action( 'wp_head', 'feed_links', 2 ); //removes feed links.
	remove_action('wp_head', 'feed_links_extra', 3 );  //removes comments feed.
	remove_action ('wp_head', 'rsd_link');
	remove_action( 'wp_head', 'wp_shortlink_wp_head');

	// Remove trackback and ping functionality
	function no_self_ping( &$links ) {
		$home = get_option( 'home' );
		foreach ( $links as $l => $link )
			if ( 0 === strpos( $link, $home ) )
				unset($links[$l]);
	}
	add_action( 'pre_ping', 'no_self_ping' );

Eliminate Render Blocking CSS

You do not want to defer all your site’s css because it will just look ugly. However, you can defer some links that are not crucial for the initial site loading. For example, i would suggest to defer the fonts. Currently, all Divi’s css is loded in the header, which makes your visitors wait before they are able to see the webpage. Deferring css can deffinitely help your page load faster. To do that, we first need to deregister the css files from the header and then assign them again in the footer:

<?php
//Defer specific css files
 //first dequeue the css styles
function remove_css_styles() {
	wp_dequeue_style( 'divi-fonts' ); // the only parameter - ID of the CSS stylesheet
	wp_dequeue_style( 'et-builder-googlefonts-cached' );
	wp_dequeue_style( 'wp-block-library' );
	wp_dequeue_style( 'dashicons' );
}
add_action( 'wp_enqueue_scripts', 'remove_css_styles', 999 );

//enque the css files manually in the footer
function wpc_footer_css() {
	wp_enqueue_style( 'divi-fonts', '//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800&#038;subset=latin,latin-ext' ); 
	wp_enqueue_style( 'et-builder-googlefonts-cached', '//fonts.googleapis.com/css?family=Noto+Serif%3Aregular%2Citalic%2C700%2C700italic%7CNoto+Sans%3Aregular%2Citalic%2C700%2C700italic&#038;ver=5.2.1#038;subset=latin,latin-ext' ); 
    wp_enqueue_style( 'wp-block-library', get_template_directory_uri() .'/wp-includes/css/dist/block-library/style.min.css?ver=5.2.1' ); 
}
add_action('wp_footer', 'wpc_footer_css');

I simply removed the dashicons, because I am not using them. Now, if you check the html of the page (right click with the mouse-> view page source), you will see that the css files are no longer loaded in the header, so they are no longer stopping the page from showing up!

Properly Size Images

Last but not least, you should compress all your images before uploading them. No, I am not joking, this is really, really important! As a rule of thumb, never upload images larger than 100KB, unless you really know what you are doing. Instead, compress or resize them. I am using Small Seo Tools’ Image Compressor but most programs for processing images will also do the job. Actually, it is crutial to avoid putting big images to your website, because they can really slow down the webpage and frustrate your visiors to the point that they abandon the website without waiting for the page to load.

Feel free to use these optimization hacks and send me an email if you have found some other ways to make the Divi theme faster. Keep on rocking with Divi!

Disclaimer: Make a backup of your website before doing any changes!

Read more: