{"id":196279,"date":"2021-04-07T02:21:57","date_gmt":"2021-04-07T02:21:57","guid":{"rendered":"https:\/\/wpmudev.com\/blog\/?p=196279"},"modified":"2021-04-06T23:32:43","modified_gmt":"2021-04-06T23:32:43","slug":"optimize-divi-wordpress-smush-hummingbird","status":"publish","type":"post","link":"https:\/\/wpmudev.com\/blog\/optimize-divi-wordpress-smush-hummingbird\/","title":{"rendered":"How to Optimize Divi for Free Using Our Smush and Hummingbird Plugins"},"content":{"rendered":"<p>When it comes to themes for WordPress, <a href=\"https:\/\/www.elegantthemes.com\/gallery\/divi\/\" rel=\"noopener\" target=\"_blank\">Divi<\/a> needs no introduction. It\u2019s only the most popular WordPress theme out there, created by one of the leading WordPress theme shops globally, <a href=\"https:\/\/www.elegantthemes.com\/\" rel=\"noopener\" target=\"_blank\">Elegant Themes<\/a>.<\/p>\r\n<p>Considering its popularity, it\u2019s worth demonstrating how to enhance Divi\u2019s optimization as much as possible &#8212; which can be done (for free!) with our Smush and Hummingbird plugins.<\/p>\r\n<p>Divi has over 203 WordPress layout packs and (at the moment) 1495 layouts that come with the theme. That makes an almost endless amount of photos, text, and features that can be optimized for maximum performance.<\/p>\r\n<p>We\u2019ll check out what our optimization duo, Smush and Hummingbird, can do to enhance your Divi site with a popular layout.<\/p>\r\n<p>When it comes to optimization, <a href=\"https:\/\/wordpress.org\/plugins\/wp-smushit\/\" rel=\"noopener\" target=\"_blank\">Smush<\/a> is our 5-star image optimization plugin with over 1+ million active installations. She\u2019s able to optimize images, lazy load, resize, compress, and bulk smush all of your images for improved speed.<\/p>\r\n<video loop muted autoplay playsinline class='dev-html5-video'><source src=\"https:\/\/premium.wpmudev.org\/blog\/wp-content\/uploads\/2020\/06\/Smush-600.webm\" type=\"video\/webm\"><source src=\"https:\/\/premium.wpmudev.org\/blog\/wp-content\/uploads\/2020\/06\/Smush-600.mp4\" type=\"video\/mp4\"><\/video>\r\n<p style=\"text-align: center;\"><small>Smush is ready to help with Divi optimization!<\/small><\/p>\r\n<p>Our other optimization plugin, <a href=\"https:\/\/wordpress.org\/plugins\/hummingbird-performance\/\" rel=\"noopener\" target=\"_blank\">Hummingbird<\/a>, has a solid 4.5-star rating and over 100K active installs. She\u2019s in charge of making your site run faster by adding ways to boost Google PageSpeed Insights with tweaked controls over file compression.<\/p>\r\n<p>Also, she can minify for CSS &amp; JS, lazy load comments, cache, and more.<\/p>\r\n<video loop muted autoplay playsinline class='dev-html5-video'><source src=\"https:\/\/premium.wpmudev.org\/blog\/wp-content\/uploads\/2020\/08\/Hummingbird.webm\" type=\"video\/webm\"><source src=\"https:\/\/premium.wpmudev.org\/blog\/wp-content\/uploads\/2020\/08\/Hummingbird.mp4\" type=\"video\/mp4\"><\/video>\r\n<p style=\"text-align: center;\"><small>Hummingbird will help make your Divi site fly!<\/small><\/p>\r\n<p>It\u2019s always worth noting &#8212; again &#8212; that Smush and Hummingbird are both <strong>free to use<\/strong>!<\/p>\r\n<p>(Spoiler alert!) You\u2019ll see how we took our Divi website from a desktop GTmetrix<strong> grade \u201cC\u201d to an \u201cA\u201d<\/strong>! And<strong> improved our Google PageSpeed Insight score by 31.9% for desktop and 126% for mobile!<\/strong><\/p>\r\n<p>Additionally, this article will cover some basic tips on keeping your Divi site in tip-top shape for optimal speed and performance. We&#8217;ll explore:<\/p>\r\n<ul>\r\n<li><a href=\"#quick\">Divi Overview and Test Layout <\/a><\/li>\r\n<li><a href=\"#how\">Optimization Test Set Up<\/a><\/li>\r\n<li><a href=\"#speed\">A Speed Test Without Optimization<\/a><\/li>\r\n<li><a href=\"#divi\">Divi Optimization<\/a><\/li>\r\n<li><a href=\"#optimization\">Optimization with Divi and Smush<\/a><\/li>\r\n<li><a href=\"#optimizing\">Optimizing Divi with Hummingbird<\/a><\/li>\r\n<li><a href=\"#further\">Further Optimization in Hummingbird and With Your Host<\/a><\/li>\r\n<li><a href=\"#more\">More Tips to Enhance Divi Optimization<\/a><\/li>\r\n<\/ul>\r\n<p>To follow along, you\u2019ll need Divi (you can <a href=\"https:\/\/www.elegantthemes.com\/join\/\" rel=\"noopener\" target=\"_blank\">try it risk-free for 30-days here<\/a>), <a href=\"https:\/\/wordpress.org\/plugins\/wp-smushit\/\" rel=\"noopener\" target=\"_blank\">Smush<\/a>, and <a href=\"https:\/\/wordpress.org\/plugins\/hummingbird-performance\/\" rel=\"noopener\" target=\"_blank\">Hummingbird<\/a>. Once you have those installed and activated, you\u2019ll be ready to go.<\/p>\r\n<p>By the end of this article, you\u2019ll see how to implement all the tools at your disposal to make your Divi site run at peak performance!<\/p>\r\n<h2><a name=\"quick\" target=\"_blank\"><\/a>Divi Overview and Test Layout<\/h2>\r\n<p>Without going into detail (since you\u2019re probably familiar with it), Divi is pretty awesome. It cranks your typical WordPress theme up a notch by being a website-building platform that replaces the standard WordPress post editor with an amazing visual editor.<\/p>\r\n<p>If you haven&#8217;t started using Divi yet, and want to, be sure to read our article about <a href=\"https:\/\/wpmudev.com\/blog\/everything-you-need-to-know-to-get-started-with-divi\/\" target=\"_blank\" rel=\"noopener\">everything you need to know to get started with Divi<\/a>.\u00a0<\/p>\r\n<p>For the price, you can\u2019t go wrong with Divi. It\u2019s designed for ease and efficiency for programmers and newcomers alike. And considering over 2 million websites are built with this theme, it has a solid reputation.<\/p>\r\n<p>That being said, this would be a rather lengthy article if we covered <strong>every<\/strong> premade layout that comes with Divi. So, as I mentioned earlier, we\u2019re going to narrow it down and show you how to enhance your Divi site with Smush and Hummingbird using their <a href=\"https:\/\/www.elegantthemes.com\/layouts\/business\/agency-pricing-page\" rel=\"noopener\" target=\"_blank\">Agency layout<\/a> pack.<\/p>\r\n<p>The <strong>Agency<\/strong> layout has a nice combination of text and photos. Plus, it\u2019s one of the top layout packs that appear in Divi\u2019s search.<\/p>\r\n<p>You\u2019ll more than likely be using a different layout (or not); however, the demonstration in this article can work for ANY layout &#8212; it just may require additional or less tweaking.<\/p>\r\n<p>So, let\u2019s get Divi set up and start moving!<\/p>\r\n<p>Once you have Divi installed and activated, create a new page from the WordPress dashboard to access the Agency layout. You\u2019ll then select to choose from a <strong>Premade Layout<\/strong>.<\/p>\r\n<figure id=\"attachment_196280\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-196280\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2021\/03\/premade-layout.png\" alt=\"Where you browse Divi layouts.\" width=\"600\" height=\"335\" \/><figcaption class=\"wp-caption-text\">There are a ton of options to choose from here, but we&#8217;ll go with Agency.<\/figcaption><\/figure>\r\n<p>You\u2019ll see there are a ton of options to choose from. At this moment, Agency is one of the top layouts on their list. If it\u2019s not there, use their <strong>search<\/strong> bar to locate it.<\/p>\r\n<figure id=\"attachment_196281\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-196281\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2021\/03\/agency-layout.png\" alt=\"Where the agency layout pack is in divi.\" width=\"600\" height=\"564\" \/><figcaption class=\"wp-caption-text\">Agency is a great combination of text and images.<\/figcaption><\/figure>\r\n<p>Now that I have Agency installed, I\u2019m going to get ready to test Divi, Hummingbird, and Smush. Of course, there\u2019s a method to this madness. So, here\u2019s&#8230;<\/p>\r\n<h2><a name=\"how\" target=\"_blank\"><\/a>Optimization Test Set Up<\/h2>\r\n<p>For this article, we\u2019re going to start from scratch. The website I\u2019m setting Divi up on has no installed plugins (except the <a href=\"https:\/\/wpmudev.com\/project\/wpmu-dev-dashboard\/\" target=\"_blank\" rel=\"noopener\">WPMU DEV Dashboard plugin<\/a>), themes, or pages beyond Agency. A close to an absolute clean slate.<\/p>\r\n<p>It\u2019s similar to our articles about optimization with <a href=\"https:\/\/wpmudev.com\/blog\/optimize-elementor-wordpress-smush-hummingbird\/\" target=\"_blank\" rel=\"noopener\">Elementor<\/a> and <a href=\"https:\/\/wpmudev.com\/blog\/optimize-wordpress-wpbakery-free-plugins\/\" target=\"_blank\" rel=\"noopener\">WPBakery<\/a> in terms of the configurations.<\/p>\r\n<p>As for the methodology used in this test, it includes:<\/p>\r\n<ul>\r\n<li>Using a site that\u2019s hosted on our basic <a href=\"https:\/\/wpmudev.com\/hosting\/\" target=\"_blank\" rel=\"noopener\">WPMU DEV Managed WordPress hosting plan<\/a> (Bronze)<\/li>\r\n<li>WordPress version 5.7<\/li>\r\n<li>PHP version 8.0<\/li>\r\n<li>Page caching, Fast CGI (Static Server Caching), and CDN are disabled to start with<\/li>\r\n<li>The GTmetrix default server location (Vancouver, Canada, with Chrome (desktop) browser<\/li>\r\n<\/ul>\r\n<p>Also, I\u2019m going to make Agency my <strong>homepage<\/strong>. To do this from the WordPress admin, go to <strong>Appearance &gt; Customize &gt; Homepage Settings<\/strong> and select this landing page.<\/p>\r\n<p>And finally, for how I\u2019ll perform this test, it&#8217;s a 10-step process that looks like this:<\/p>\r\n<ol>\r\n<li>Set up a WordPress site with Divi and the Agency layout<\/li>\r\n<li>Run speed test with <a href=\"https:\/\/developers.google.com\/speed\/pagespeed\/insights\/\" rel=\"noopener\" target=\"_blank\">Google PageSpeed Insights<\/a> and <a href=\"https:\/\/gtmetrix.com\/\" rel=\"noopener\" target=\"_blank\">GTmetrix<\/a><\/li>\r\n<li>Divi Optimization<\/li>\r\n<li>Run another speed test<\/li>\r\n<li>Activate Smush and set up recommendations<\/li>\r\n<li>Run another speed test<\/li>\r\n<li>Activate Hummingbird and set up recommendations<\/li>\r\n<li>Run another speed test<\/li>\r\n<li>Activate hosting features (e.g. FastCGI)<\/li>\r\n<li>Run a final speed test<\/li>\r\n<\/ol>\r\n<p>EVERY site is going to be a bit different. Variables include location, amount of images, your host, and other factors that can make a difference. However, this will give you a good idea of how to tweak your own Divi WordPress site for optimization.<\/p>\r\n<h2><a name=\"speed\" target=\"_blank\"><\/a>Speed Test Without Optimization<\/h2>\r\n<p>WordPress site wiped clean? <em>Check<\/em>. Divi\u2019s Agency layout installed and activated? <em>Check<\/em>. All the other variables (e.g. disabled page caching) are in place, too. We\u2019re ready for a speed test and see what we\u2019re looking at!<\/p>\r\n<p>We\u2019ll run our first speed on <strong>Google PageSpeed Insights<\/strong>. When entering the URL, here\u2019s our Google PageSpeed Insights score for desktop:<\/p>\r\n<figure id=\"attachment_196282\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-196282\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2021\/03\/google-desktop-test-1.png\" alt=\"The first google pagespeed insight score.\" width=\"657\" height=\"247\" \/><figcaption class=\"wp-caption-text\">72 isn\u2019t horrible &#8212; but optimization can improve it.<\/figcaption><\/figure>\r\n<p>And mobile:<\/p>\r\n<figure id=\"attachment_196283\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-196283\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2021\/03\/google-mobile-test-1.png\" alt=\"Google pagespeed insight score for mobile.\" width=\"657\" height=\"247\" \/><figcaption class=\"wp-caption-text\">Ouch! 27 is pretty bad.<\/figcaption><\/figure>\r\n<p>Let\u2019s have a look at what comes up on <strong>GTMetrix<\/strong>:<\/p>\r\n<figure id=\"attachment_196284\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-196284\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2021\/03\/gtmetrix-test-1.png\" alt=\"GTmetrix score of a C.\" width=\"657\" height=\"233\" \/><figcaption class=\"wp-caption-text\">A \u201cC\u201d isn\u2019t the best score. We can do better.<\/figcaption><\/figure>\r\n<p>There\u2019s room for improvement all-around. Now that we know our baseline score, let\u2019s go ahead and optimize Divi.<\/p>\r\n<h2><a name=\"divi\" target=\"_blank\"><\/a>Divi Optimization<\/h2>\r\n<p>If your theme offers built-in optimization features, we recommend starting with it, as this can often make a significant difference to your site\u2019s overall performance. Divi allows you to optimize your theme layout right from the dashboard.<\/p>\r\n<p>There are several areas to check out and ensure are optimized before proceeding with using our Smush and Hummingbird plugins.<\/p>\r\n<p>A few adjustments I\u2019m going to ensure are enabled consist of general optimization and displays.<\/p>\r\n<p>In the <strong>General<\/strong> area of the Divi dashboard, you can make several of these tweaks. You can see I\u2019ve enabled:<\/p>\r\n<ul>\r\n<li><strong>Use excerpts when defined <\/strong><\/li>\r\n<li><strong>Responsive shortcodes<\/strong><\/li>\r\n<li><strong>Responsive Images<\/strong><\/li>\r\n<li><strong>Minify and Combine Javascript Files<\/strong><\/li>\r\n<li><strong>Minify and Combine CSS Files<\/strong><\/li>\r\n<\/ul>\r\n<figure id=\"attachment_196285\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-196285\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2021\/03\/divi-optimization-tweaks.png\" alt=\"Where you make divi optimization tweaks.\" width=\"657\" height=\"472\" \/><figcaption class=\"wp-caption-text\">All of these were enabled with one click.<\/figcaption><\/figure>\r\n<p>Everything I\u2019ve enabled is generally recommended adjustments to help site speed and display. There\u2019s another optimization adjustment I made in Divi under <strong>Builder &gt; Advanced<\/strong>. I enabled <strong>Static CSS File Generation<\/strong>.<\/p>\r\n<figure id=\"attachment_196286\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-196286\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2021\/03\/static-file.png\" alt=\"Where you enable the static CSS file generation in divi.\" width=\"657\" height=\"316\" \/><figcaption class=\"wp-caption-text\">One-click, and I had these enabled in Divi.<\/figcaption><\/figure>\r\n<p>The Static CSS File Generation means that custom design styles will no longer generate in-line CSS upon request. Instead, they will serve static files cached by the browser, leading to consuming fewer server resources and boosting load times for your users. These optimization adjustments should give us a boost.<\/p>\r\n<p>Let\u2019s check out what we score.<\/p>\r\n<p>With Google PageSpeed Insights, we\u2019re now at a 78.<\/p>\r\n<figure id=\"attachment_196287\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-196287\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2021\/03\/google-desktop-test-2.png\" alt=\"78 google pagespeed insights.\" width=\"657\" height=\"257\" \/><figcaption class=\"wp-caption-text\">Up six points is a nice start.<\/figcaption><\/figure>\r\n<p>And for mobile, it\u2019s now up to 30.<\/p>\r\n<figure id=\"attachment_196288\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-196288\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2021\/03\/google-mobile-test-2.png\" alt=\"Google PageSpeed insight score of 30 for mobile.\" width=\"657\" height=\"257\" \/><figcaption class=\"wp-caption-text\">A little three-point boost is at least something.<\/figcaption><\/figure>\r\n<p>GTmetrix has us up a grade with a \u201cB\u201d and a 79% Performance rating.<\/p>\r\n<figure id=\"attachment_196289\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-196289\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2021\/03\/gt-metrix-test-2.png\" alt=\"GTmetrix score of a B.\" width=\"657\" height=\"234\" \/><figcaption class=\"wp-caption-text\">A nice slight improvement.<\/figcaption><\/figure>\r\n<p>We set an excellent foundation for the rest of our optimization. Those minor adjustments in Divi itself helped a bit, but we can do better. Let\u2019s move on to&#8230;<\/p>\r\n<h2><a name=\"optimization\" target=\"_blank\"><\/a>Optimization with Divi and Smush<\/h2>\r\n<p>I\u2019ve already touched on what all Smush can do. She\u2019s one of the highest-rated and popular image optimization plugins out there &#8212; so she\u2019s definitely a good choice to help improve WordPress site speed.<\/p>\r\n<figure id=\"attachment_196290\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-196290\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2021\/03\/smush.png\" alt=\"Smush optimization image.\" width=\"600\" height=\"209\" \/><figcaption class=\"wp-caption-text\">Smush is ready to optimize your images!<\/figcaption><\/figure>\r\n<p>We\u2019ll go ahead and install and activate her first.<\/p>\r\n<p>Instantly, she lets me know that 12 images are ready to be smushed. Let\u2019s take care of that with <strong>Bulk Smushing<\/strong>. Bulk smushing can be done in one click with a tap of the <strong>Bulk Smush Now<\/strong> button.<\/p>\r\n<figure id=\"attachment_196291\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-196291\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2021\/03\/bulk-smush-copy.png\" alt=\"The bulk smush button.\" width=\"600\" height=\"234\" \/><figcaption class=\"wp-caption-text\">Bulk smushing is a click away.<\/figcaption><\/figure>\r\n<p>In just a few moments after clicking Bulk Smush, here are the results:<\/p>\r\n<figure id=\"attachment_196292\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-196292\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2021\/03\/bulk-smush-results.png\" alt=\"super smush savings results of 909.1\" width=\"600\" height=\"159\" \/><figcaption class=\"wp-caption-text\">909.1 Super-Smush savings. Nice.<\/figcaption><\/figure>\r\n<p>As you can see, I have<strong> 909.1KB\/27% total savings<\/strong> and 104 images Smushed (many from the initial activation). Let\u2019s go ahead and run another speed test and see what we come up with. First, here\u2019s Google PageSpeed Insights for desktop:<\/p>\r\n<figure id=\"attachment_196293\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-196293\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2021\/03\/google-desktop-second-test.png\" alt=\"Google pagespeed test of 82.\" width=\"600\" height=\"242\" \/><figcaption class=\"wp-caption-text\">82 is quite an improvement.<\/figcaption><\/figure>\r\n<p>And here\u2019s mobile:<\/p>\r\n<figure id=\"attachment_196294\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-196294\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2021\/03\/google-mobile-test-3.png\" alt=\"Google pagespeed test of 51\" width=\"657\" height=\"234\" \/><figcaption class=\"wp-caption-text\">A slight improvement, but it still needs work.<\/figcaption><\/figure>\r\n<p>Finally, here\u2019s what GTMetrix has to say:<\/p>\r\n<figure id=\"attachment_196295\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-196295\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2021\/03\/gt-metrix-test-2-1.png\" alt=\"GTmetrix score of a B.\" width=\"657\" height=\"234\" \/><figcaption class=\"wp-caption-text\">We\u2019re still at a \u201cB,\u201d but the Performance percentage went up.<\/figcaption><\/figure>\r\n<p>As you can see, the scores went up just by activating Smush. <strong>Google PagesSpeed Insights<\/strong> went from <strong>78 to 82<\/strong> on desktop and<strong> 30 to 51 <\/strong>on mobile. With <strong>GTMetrix<\/strong>, the score improved as well. It remains a B. However, the Performance percentage went up from <strong>79% to 83%,<\/strong> and the Structure stayed the same.<\/p>\r\n<p>It\u2019s a great start, so let\u2019s keep going.<\/p>\r\n<h2><a name=\"optimizing\" target=\"_blank\"><\/a>Optimizing Divi with Hummingbird<\/h2>\r\n<p>Hummingbird is the perfect teammate for Smush, considering she handles the other areas of optimization with text compression, preload key requests, can eliminate render-blocking resources, and more things that I touched on earlier.<\/p>\r\n<figure id=\"attachment_196297\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-196297\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2021\/03\/hummingbird.png\" alt=\"Hummingbird image.\" width=\"600\" height=\"301\" \/><figcaption class=\"wp-caption-text\">Hummingbird is ready to make your site hum with optimization.<\/figcaption><\/figure>\r\n<p>I\u2019m going to keep Smush active and now install Hummingbird. The first thing she recommends is a <strong>Performance Test<\/strong>. You can do that by clicking <strong>Test My Website<\/strong>, and she\u2019ll get to work.<\/p>\r\n<figure id=\"attachment_196298\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-196298\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2021\/03\/run-performance-test.png\" alt=\"The test my website button.\" width=\"600\" height=\"334\" \/><figcaption class=\"wp-caption-text\">Testing your website is the best way to get started.<\/figcaption><\/figure>\r\n<p>After running the test, she came up with a <strong>Performance Score<\/strong> of <strong>82\/100<\/strong> and had three opportunities to check out for improvement.<\/p>\r\n<figure id=\"attachment_196299\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-196299\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2021\/03\/hummingbird-speed-test.png\" alt=\"Hummingbird speed test of 82.\" width=\"657\" height=\"616\" \/><figcaption class=\"wp-caption-text\">Hummingbird spells it all out for you, right on the dashboard.<\/figcaption><\/figure>\r\n<p>The opportunities for improvements consist of:<\/p>\r\n<ul>\r\n<li><strong>Reduce initial server response time<\/strong><\/li>\r\n<li><strong>Eliminate render-blocking resources<\/strong><\/li>\r\n<li><strong>Remove unused CSS<\/strong><\/li>\r\n<\/ul>\r\n<p>Next, I\u2019m going to run Hummingbird\u2019s <strong>Asset Optimization test<\/strong>. We\u2019ll run this with Page Caching and CDN disabled. This is done directly from <strong>Asset Optimization<\/strong> and then click <strong>Re-Check Files<\/strong>. Once completed, she then compiled a list of recommended fixes.<\/p>\r\n<video loop muted autoplay playsinline class='dev-html5-video'><source src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2021\/03\/Screen-Recording-2021-03-23-at-11.41.48-AM.webm\" type=\"video\/webm\"><source src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2021\/03\/Screen-Recording-2021-03-23-at-11.41.48-AM.mp4\" type=\"video\/mp4\"><\/video>\r\n<p style=\"text-align: center;\"><small>There are quite a few\u2026<\/small><\/p>\r\n<p>From this point, you can go through and manually implement each one of Hummingbird\u2019s recommended fixes, or you can tackle them in bulk.<\/p>\r\n<p>Let\u2019s go ahead and bulk update the CSS and JavaScript. You can do this by clicking on the <strong>Bulk Update<\/strong>. From there, we\u2019ll select <strong>Compress<\/strong> and <strong>Combine<\/strong>.<\/p>\r\n<figure id=\"attachment_196300\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-196300\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2021\/03\/bulk-update.png\" alt=\"The bulk update area in Hummingbird.\" width=\"600\" height=\"530\" \/><figcaption class=\"wp-caption-text\">Bulk update only takes a few moments.<\/figcaption><\/figure>\r\n<p>I also moved files to the footer, except for<strong> jquery-core<\/strong> and<strong> j-query migrate<\/strong>. This can be done from the Bulk Update area. After doing this, I ended up with a slight improvement. First, Google PageSpeed Insights desktop:<\/p>\r\n<figure id=\"attachment_196302\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-196302\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2021\/03\/google-desktop-test-4.png\" alt=\"84 google pagespeed insight score.\" width=\"657\" height=\"261\" \/><figcaption class=\"wp-caption-text\">A two-point enhancement isn\u2019t horrible.<\/figcaption><\/figure>\r\n<p>Then, Google PageSpeed Insights mobile\u2026<\/p>\r\n<figure id=\"attachment_196303\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-196303\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2021\/03\/google-mobile-test-4.png\" alt=\"Google pagespeed mobile score of 54.\" width=\"657\" height=\"236\" \/><figcaption class=\"wp-caption-text\">This went up three points.<\/figcaption><\/figure>\r\n<p>And finally, GTmetrix\u2026<\/p>\r\n<figure id=\"attachment_196304\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-196304\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2021\/03\/gtmetrix-test-4.png\" alt=\"GTmetrix score of a B.\" width=\"657\" height=\"236\" \/><figcaption class=\"wp-caption-text\">Not much of a change.<\/figcaption><\/figure>\r\n<p>After testing a few more times and getting a little bit better page speed, I decided to go with the experts\u2019 advice and optimize the assets with the <strong>Automatic\/Speedy<\/strong> option.<\/p>\r\n<figure id=\"attachment_196305\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-196305\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2021\/03\/automatic-speedy.png\" alt=\"The speedy option in Hummingbird.\" width=\"657\" height=\"209\" \/><figcaption class=\"wp-caption-text\">It\u2019s a great feature that can take care of optimization for you.<\/figcaption><\/figure>\r\n<p>Depending on the time you have, with a few tweaks here and there, you might be able to improve your score better manually. Automatic optimization can help make this process easier.<\/p>\r\n<p>Regardless, I wanted to see if there was a difference. When I tested it with automatic optimization, it was interesting to see. I had improvements all-around. With Google PageSpeed Insights for desktop:<\/p>\r\n<figure id=\"attachment_196306\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-196306\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2021\/03\/google-desktop-test-5.png\" alt=\"87 google pagespeed insight score of 87.\" width=\"657\" height=\"236\" \/><figcaption class=\"wp-caption-text\">Nice slight improvement here.<\/figcaption><\/figure>\r\n<p>Google PageSpeed for mobile&#8230;<\/p>\r\n<figure id=\"attachment_196308\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-196308\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2021\/03\/google-mobile-test-5.png\" alt=\"59 google pagespeed insight score.\" width=\"657\" height=\"236\" \/><figcaption class=\"wp-caption-text\">This had a nice little boost, too.<\/figcaption><\/figure>\r\n<p>And finally, GTmetrix\u2026<\/p>\r\n<figure id=\"attachment_196309\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-196309\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2021\/03\/gtmetrix-test-5.png\" alt=\"GTmetrix grade of a B.\" width=\"657\" height=\"229\" \/><figcaption class=\"wp-caption-text\">The performance bounced back a bit on this report.<\/figcaption><\/figure>\r\n<p>Considering I was getting a better score with automated optimization, I left it on that. However, you may want to fine-tune yours and see what you come up with manually.<\/p>\r\n<p>Asset optimization is a process that may take a while and varies depending on your site and theme. Hummingbird gets these recommendations straight from Google. You can find more about this <a href=\"https:\/\/wpmudev.com\/docs\/wpmu-dev-plugins\/hummingbird\/\" target=\"_blank\" rel=\"noopener\">in our documentation<\/a>.<\/p>\r\n<p>Next, we\u2019ll end with <strong>Reduce Initial Server Response Time<\/strong>.<\/p>\r\n<figure id=\"attachment_196310\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-196310\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2021\/03\/reduce-initial-response-time.png\" alt=\"Suggestions from Hummingbird on what to improve.\" width=\"600\" height=\"531\" \/><figcaption class=\"wp-caption-text\">Hummingbird has three solid suggestions for us.<\/figcaption><\/figure>\r\n<p>To do this, it\u2019s just a matter of simply clicking <strong>Configure Page Caching<\/strong> from the recommendations. Then, it takes you to a point where you can activate it by clicking <strong>Activate<\/strong>.<\/p>\r\n<figure id=\"attachment_196311\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-196311\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2021\/03\/enable-page-caching.png\" alt=\"Where you enable page caching.\" width=\"600\" height=\"241\" \/><figcaption class=\"wp-caption-text\">Hummingbird makes it simple to activate page caching.<\/figcaption><\/figure>\r\n<p>And like that, we activated page caching.<\/p>\r\n<p>As for the last recommendation mentioning upgrading SSD storage and RAM options via your hosting, we\u2019ll leave that alone, too.<\/p>\r\n<p>This website isn\u2019t going to be getting a lot of traffic, and it\u2019s not necessary to upgrade. However, if you DO have a Divi site with a lot of traffic (which is hopefully the case), upgrading SSD storage and RAM is highly recommended.<\/p>\r\n<p>We can help with this through<a href=\"https:\/\/wpmudev.com\/hosting\/\" target=\"_blank\"> our hosting<\/a>. Plus, our 24\/7 support is always available to answer any questions.<\/p>\r\n<p>Let\u2019s see where we stand now that we activated page caching.<\/p>\r\n<p>First, we\u2019ll check out Google desktop:<\/p>\r\n<figure id=\"attachment_196312\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-196312\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2021\/03\/3rd-google-test-desktop.png\" alt=\"90 google pagespeed insight.\" width=\"600\" height=\"247\" \/><figcaption class=\"wp-caption-text\">We\u2019ve bumped this one up!<\/figcaption><\/figure>\r\n<p>And now Google PageSpeed Insight for mobile:<\/p>\r\n<figure id=\"attachment_196313\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-196313\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2021\/03\/google-mobile-test-5-1.png\" alt=\"59 Google pagespeed mobile score.\" width=\"657\" height=\"236\" \/><figcaption class=\"wp-caption-text\">No change here for the most part.<\/figcaption><\/figure>\r\n<p>Finally, it\u2019s on to GTmetrix:<\/p>\r\n<figure id=\"attachment_196314\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-196314\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2021\/03\/gt-metrix-test-6.png\" alt=\"GTmetrix score of an A.\" width=\"657\" height=\"229\" \/><figcaption class=\"wp-caption-text\">An \u201cA\u201d is excellent.<\/figcaption><\/figure>\r\n<p>For the most part, the scores keep going up and up! <strong>Google PagesSpeed Insights<\/strong> went from <strong>87 to 90<\/strong> on desktop and stayed at <strong>59<\/strong> on mobile. With <strong>GTMetrix<\/strong>, the score improved from a<strong> B<\/strong> (81% Performance and 98% Structure) to an <strong>A<\/strong> (96% Performance and 98% Structure).<\/p>\r\n<p>I think now is a good time to touch on something. A question you may be asking yourself is:<\/p>\r\n<h3><a id=\"post-117-_ill92jrn4k2l\" target=\"_blank\"><\/a>What\u2019s up with low mobile scores?<\/h3>\r\n<p>You can see that our score for mobile on Google PageSpeed Insight isn\u2019t anything to write home about. So, what\u2019s going on with that?<\/p>\r\n<p>First off, this is going to vary for everyone, depending on your circumstances. The <strong>mobile connection is slower<\/strong>, so it\u2019s a bit more challenging to get a good read from Google PageSpeed Insights.<\/p>\r\n<p>There are other factors. For example, you may have 4G internet service instead of 5G, impacting speed.<\/p>\r\n<p>Here are some other things to keep in mind:<\/p>\r\n<ul>\r\n<li>PageSpeed Insights stimulates the cell network at a reduced speed<\/li>\r\n<li>All Mobile devices have varying device-specific CSS rules<\/li>\r\n<\/ul>\r\n<p>For more on this, I\u2019ll <a href=\"https:\/\/developers.google.com\/speed\/docs\/insights\/mobile\" rel=\"noopener\" target=\"_blank\">refer you to Google<\/a>. They offer some insight into their mobile analysis.<\/p>\r\n<h2><a name=\"further\" target=\"_blank\"><\/a>Further Optimization in Hummingbird and With Your Host<\/h2>\r\n<p>To ensure our Divi site is running at top speed, we\u2019re going to make just a few additional tweaks in Hummingbird and with your host. This will enhance performance even further for our site.<\/p>\r\n<p>A tweak you can make in Hummingbird is the <strong>CDN<\/strong>. It doesn\u2019t matter whether you\u2019re hosting with us or not. You can enable your hosts\u2019 CDN with one-click right in Hummingbird under <strong>Asset Optimization<\/strong>.<\/p>\r\n<video loop muted autoplay playsinline class='dev-html5-video'><source src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2021\/03\/cdn.webm\" type=\"video\/webm\"><source src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2021\/03\/cdn.mp44\" type=\"video\/mp4\"><\/video>\r\n<p style=\"text-align: center;\"><small>One-click is all it takes.<\/small><\/p>\r\n<p>A good CDN can improve a site\u2019s speed by reducing server lag by storing static resources on a network of faster loading and better-located servers to your own. For more on CDNs and why they\u2019re beneficial, be sure to <a href=\"https:\/\/wpmudev.com\/blog\/how-to-choose-the-best-cdn-for-wordpress\/\" target=\"_blank\">check out this article<\/a>.<\/p>\r\n<p>If you are <a href=\"https:\/\/wpmudev.com\/hosting\/\" target=\"_blank\">hosting with us<\/a>, head into <a href=\"https:\/\/wpmudev.com\/hub-welcome\/\" target=\"_blank\">The Hub<\/a> for another adjustment. We\u2019re going to turn on <strong>Static Server Cache<\/strong> to use <strong>FastCGI<\/strong>. You can do this from The Hub by going to <strong>Tools<\/strong> and flipping it on with one-click.<\/p>\r\n<figure id=\"attachment_196318\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-196318\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2021\/03\/static-server-cache.png\" alt=\"Static Server Cache in the Hub.\" width=\"657\" height=\"112\" \/><figcaption class=\"wp-caption-text\">Make sure it says \u201con,\u201d and you\u2019ll be all set.<\/figcaption><\/figure>\r\n<p>With these tweaks from Hummingbird, Smush, the Divi dashboard, and hosting, we\u2019re optimized for speed! Let\u2019s run some final speed tests to see where we end up.<\/p>\r\n<p>First, we\u2019ll look at Google PageSpeed Insights for desktop:<\/p>\r\n<figure id=\"attachment_196320\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-196320\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2021\/03\/google-desktop-test-7.png\" alt=\"95 google pagespeed insight score.\" width=\"657\" height=\"229\" \/><figcaption class=\"wp-caption-text\">95 is a really great score!<\/figcaption><\/figure>\r\n<p>By turning on our <strong>CDN<\/strong> and <strong>FastCGI<\/strong>, our score instantly increased a couple of points. We can probably adjust and test a few things in the Hummingbird Asset Optimization area to see if we can get closer to 100. Still, this is a passing grade that I\u2019m happy with.<\/p>\r\n<p>Let&#8217;s check out mobile:<\/p>\r\n<figure id=\"attachment_196322\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-196322\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2021\/03\/final-google-mobile.png\" alt=\"61 google pagespeed insight score of 61.\" width=\"657\" height=\"247\" \/><figcaption class=\"wp-caption-text\">61 is mid-range.<\/figcaption><\/figure>\r\n<p>So, though it\u2019s gone up a LOT, it\u2019s not the best number. However, again, there are a ton of variables that can affect this. This will vary depending on your location, internet speed, and more.<\/p>\r\n<p>Though it would be nice to have a higher score on this, I have to keep in mind that this is different across the board.<\/p>\r\n<p>With that being said, let\u2019s have a look at GTmetrix:<\/p>\r\n<figure id=\"attachment_196323\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-196323\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2021\/03\/gt-metrix-test-6-1.png\" alt=\"GTmetrix score of an A.\" width=\"657\" height=\"229\" \/><figcaption class=\"wp-caption-text\">Still have an \u201cA\u201d to be proud of.<\/figcaption><\/figure>\r\n<p>We still have our \u201c<strong>A<\/strong>,\u201d which I\u2019m pleased with. As you\u2019ll recall, we started with a \u201c<strong>C<\/strong>\u201d! After all of our tweaks and adjustments with Hummingbird, Smush, Divi, and hosting &#8212; what\u2019s the difference?<\/p>\r\n<p>To sum up, our optimization performance, let\u2019s take a look at what we started with from the very beginning and then what we ended up with.<\/p>\r\n<p>Our <strong>Google PageSpeed Insights<\/strong> originally was:<\/p>\r\n<ul>\r\n<li><strong>72<\/strong> for Desktop<\/li>\r\n<li><strong>27<\/strong> for Mobile<\/li>\r\n<\/ul>\r\n<p>And we ended up with:<\/p>\r\n<ul>\r\n<li><strong>95<\/strong> for Desktop<\/li>\r\n<li><strong>61<\/strong> for Mobile<\/li>\r\n<\/ul>\r\n<p>A <strong>23-point, 31.9% improvement<\/strong> for desktop and a <strong>34-point, 126% improvement<\/strong> for mobile! Our <strong>GTmetrix Grade<\/strong> originally was:<\/p>\r\n<ul>\r\n<li>A grade<strong> C<\/strong><\/li>\r\n<li><strong>71% <\/strong>Performance<\/li>\r\n<li><strong>96%<\/strong> Structure<\/li>\r\n<\/ul>\r\n<p>And we ended up with:<\/p>\r\n<ul>\r\n<li>A grade <strong>A<\/strong><\/li>\r\n<li><strong>96%<\/strong> Performance<\/li>\r\n<li><strong>98% <\/strong>Structure<\/li>\r\n<\/ul>\r\n<p>That\u2019s a<strong> three-grade improvement <\/strong>and a <strong>25% increase in performance, <\/strong>and a <strong>2% improved structure!<\/strong> Now that it\u2019s all said and done, I can say the results speak for themselves.<\/p>\r\n<p>Again, every website will be different. You may have to make some additional changes to improve performance (e.g. hosting, Hummingbird PageSpeed Insight suggestions, etc.); however, you can expect better optimization using the methods in this post.<\/p>\r\n<h2><a name=\"more\" target=\"_blank\"><\/a>More Tips to Enhance Divi Optimization<\/h2>\r\n<p>Beyond having Smush, Hummingbird, and good hosting, here are some other tips to enhance your Divi optimization for speed. Some of these touches on points mentioned already; however, it\u2019s a quick rundown of ways to keep your Divi site optimized.<\/p>\r\n<ul>\r\n<li><strong>Database Optimization and Cleanup:<\/strong> WordPress files are sorted in your database by tables. Whenever you add new data to your site (e.g. plugins), new tables and data are created. The more tables and data made, the messier it can get, slowing down your site. It\u2019s essential to clean up your database. Find out more in our article, <a href=\"https:\/\/wpmudev.com\/blog\/optimizing-your-wordpress-database-a-complete-guide\/\" target=\"_blank\" rel=\"noopener\">Optimizing Your WordPress Database &#8212; A Complete Guide<\/a>.<\/li>\r\n<li><strong>DNS Optimization:<\/strong> When a user visits your URL to your Divi site, the first thing to happen is called a DNS Lookup. Your page may have multiple domains that need to be accessed on your site to get the page to appear. To boost your DNS lookup speed, <a href=\"https:\/\/wpmudev.com\/dns\/\" target=\"_blank\" rel=\"noopener\">our hosting<\/a> can help. We use DigitalOcean, which according to DNSPerf, ranks in the top 5 best-performing DNS providers on the web.<\/li>\r\n<li><strong>Good Hosting: <\/strong>This is an obvious statement, but it\u2019s vital to have a good host. The fully dedicated managed hosting <a href=\"https:\/\/wpmudev.com\/hosting\/\" target=\"_blank\" rel=\"noopener\">we offer<\/a> features object and page caching, <a href=\"https:\/\/wpmudev.com\/blog\/ipv4-vs-ipv6\/\" target=\"_blank\">IPv6<\/a> support, and our CDN sites fly. Whether you host with us or not, be sure your hosting provider has you set up for speed.<\/li>\r\n<li><strong>TTFB Optimization:<\/strong> TTFB (Time to First Byte) is the time it takes the user to retrieve the first byte of website data from your host or server, making it the waiting period before any data is received. Ensuring it\u2019s optimized is important. There\u2019s a lot to TTFB optimization, so be sure to <a href=\"https:\/\/wpmudev.com\/blog\/reduce-ttfb-wordpress\/\" target=\"_blank\" rel=\"noopener\">read more about it here<\/a>.<\/li>\r\n<li><strong>Caching: <\/strong>This is a broad category when it comes to optimization. There is page caching, browser caching, CDN caching, and object caching. We talked about how our hosting, Smush, and Hummingbird can help. For more information, be sure to <a href=\"https:\/\/wpmudev.com\/blog\/types-of-web-cache-wordpress\/\" target=\"_blank\" rel=\"noopener\">read our article<\/a> on the types of web cache and enhancing your site\u2019s optimization.<\/li>\r\n<li><strong>Minification and Aggregation:<\/strong> Minification will make your site files smaller. Aggregation consists of combining the site\u2019s files to reduce the total requests on the page. This is where Hummingbird can help. <a href=\"https:\/\/wpmudev.com\/docs\/wpmu-dev-plugins\/hummingbird\/\" target=\"_blank\" rel=\"noopener\">Read our documentation<\/a> for detailed information.<\/li>\r\n<li><strong>Gzip Compression: <\/strong>Gzip Compression compresses your webpages and style sheets before sending them to your visitors\u2019 browser, hence increasing loading time. Hummingbird takes care of this. You can find out more about Gzip Compression<a href=\"https:\/\/wpmudev.com\/docs\/wpmu-dev-plugins\/hummingbird\/\" target=\"_blank\" rel=\"noopener\"> in our documentation<\/a>.<\/li>\r\n<li><strong>Quality Plugins: <\/strong>Be sure to use up-to-date, high-rated plugins with a good reputation. Plus, if you\u2019re not using a specific plugin, delete it from your admin.<\/li>\r\n<li><strong>Latest PHP Version<\/strong>: It\u2019s recommended to have the latest PHP version for your Divi WordPress site. If you\u2019re hosting with us, you can do that directly from The Hub. Also, find out more information in <a href=\"https:\/\/wpmudev.com\/blog\/how-to-update-php-in-wordpress\/\" target=\"_blank\" rel=\"noopener\">our article all about keeping your PHP up to date<\/a>.<\/li>\r\n<li><strong>Reduce Divi CLS (Cumulative Layout Shift) Scores:<\/strong> Our member, Lee, has a series about <a href=\"https:\/\/studio6am.com\/how-to-fix-divi-cls-score\/\" rel=\"noopener\" target=\"_blank\">reducing CLS scores in Divi<\/a>. CLS scores are an important metric for measuring visible stability. It assists with how often users experience unexpected layout shifts. A good score to have for this is 0.1 or less.<\/li>\r\n<\/ul>\r\n\r\n<h3>Troubleshooting<\/h3>\r\n<p>You may want to disable page caching in Divi if you&#8217;re using caching in Hummingbird if you experience one (or several) of the following issues:<\/p>\r\n\r\n\r\n\r\n<ul>\r\n<li>The Divi site quickly loses all styling and looks awful, however, it displays well when logged in.<\/li>\r\n<li>Sections and modules have incorrect spacing (padding and margin), but display correctly when using the visual builder<\/li>\r\n<li>WordPress site has lost styles, but refreshing it eight or nine times corrects the issue<\/li>\r\n<li>You get the error &#8220;<strong>et-core-unified-123.min.css not found<\/strong>&#8221; when accessing developer tools and viewing the JS console<\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n<p>The reason this can happen is when you enable Page Caching in Hummingbird, it caches the entire website&#8217;s HTML code. Plus, it will combine and minify most of the javascript and CSS code.<\/p>\r\n\r\n\r\n\r\n<p>When you update Divi in any way, it will create a new stylesheet with a new name. The name may follow the same format (et-core-unified-123.min.css not found), however, the &#8220;1,2,3&#8221; part differs each time as it is generated by the date and time when it was created.<\/p>\r\n\r\n\r\n\r\n<p>That means, when a user accesses your WordPress site, Hummingbird has a cached version of your HTML, but it is linked to the old CSS file. And that leads to not finding results in your site loading without any styling.<\/p>\r\n\r\n\r\n\r\n<p>The fix is to go into <strong>Divi&gt;Theme Options<\/strong> and scroll down to the bottom. Just above the Custom CSS, you&#8217;ll see the options to <strong>Minify and Combine Javascript Files<\/strong> and <strong>Combine CSS Files<\/strong>.<\/p>\r\n<figure id=\"attachment_196474\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-196474\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2021\/04\/divi-optimization.png\" alt=\"Javascript and CSS disable in Divi.\" width=\"600\" height=\"124\" \/><figcaption class=\"wp-caption-text\">All of this is done right in the Divi dashboard.<\/figcaption><\/figure>\r\n<div class=\"image-grid cgrid-row\">\r\n<div class=\"cgrid-col cgrid-col-span-full\">\r\n<div class=\"image-grid cgrid-row\">\r\n<div class=\"cgrid-col cgrid-col-span-full\">\u00a0<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n<p>Disable both options, and then, scroll back up and go to <strong>Builder &gt; Advanced&gt;<\/strong> and disable <strong>Static CSS File Generation<\/strong>.<\/p>\r\n<div class=\"image-grid cgrid-row\">\r\n<div class=\"cgrid-col cgrid-col-span-full\">\r\n<figure id=\"attachment_196469\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-196469 size-full\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2021\/04\/divi-static-css.png\" alt=\"Post image\" aria-hidden=\"true\" width=\"657\" height=\"319\" \/><figcaption class=\"wp-caption-text\">Just one click is all it takes to disable Static CSS File Generation.<\/figcaption><\/figure>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n<p>This should fix the issue if you have this problem occur and it&#8217;s a quick fix (and nothing to worry about). Of course, if there are still problems, you can always reach out to our 24\/7 support and we can help.<\/p>\r\n\r\n<p>Incorporate these tips, along with adding Smush and Hummingbird, and your Divi site will be as optimized for speed as you can get. For a more detailed look at optimization, you can find out more <a href=\"https:\/\/www.elegantthemes.com\/blog\/divi-resources\/speeding-up-your-divi-website\" target=\"_blank\">in their article<\/a> about optimizing Divi.<\/p>\r\n<h2><a id=\"post-117-_vlx17bg4bsr6\" target=\"_blank\"><\/a>Speed Optimization Divi-nity At Last!<\/h2>\r\n<p>Optimizing your Divi WordPress site for speed isn\u2019t that difficult with the tools and resources in place. And as you just read, it can be optimized with a few clicks and adjustments with Smush and Hummingbird (for free!).<\/p>\r\n<p>When you add in good hosting, your Divi site can reach maximum speed and in no time.<\/p>\r\n<p>If you haven\u2019t tried Divi, be sure to check them out with their <a href=\"https:\/\/www.elegantthemes.com\/join\/\" target=\"_blank\">risk-free yearly or lifetime membership<\/a>.<\/p>\r\n<p>Likewise, if you\u2019re not a WPMU DEV member, give us a try with our no risk <a href=\"https:\/\/wpmudev.com\/\" target=\"_blank\">free trial<\/a>. With it, you get immediate access to <a href=\"https:\/\/wpmudev.com\/project\/wp-smush-pro\/\" target=\"_blank\">Smush Pro<\/a> and <a href=\"https:\/\/wpmudev.com\/project\/wp-hummingbird\/\" target=\"_blank\">Hummingbird Pro<\/a>. The Pro options include advancements, such as 45 point image CDN, Super Smush &#8211; 2x compression, automated and white-labeled performance reports, advanced asset optimization, 24\/7 support &#8212; and more!<\/p>\r\n<p>The best part is, coming soon, Hummingbird Pro will automatically compress and optimize your Divi theme files with a click of a button!<\/p>\r\n<p>Stay tuned for updates on this. In the meantime, enjoy your Divi\u2019s site speed. It should be&#8230;<em>Divi-ine<\/em>. \u00a0<\/p>\r\n<h3>Contributors<\/h3>\r\n<p>This article was written in collaboration with:<\/p>\r\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-196478 size-full alignright\" style=\"width: auto;\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2021\/04\/divi-duck.png\" alt=\"DiviDuck\" width=\"89\" height=\"91\" \/><\/p>\r\n<p><strong>Mike B.<\/strong> &#8212; <a href=\"https:\/\/dividuck.com\/\" target=\"_blank\">DiviDuck<\/a>. Mike loves playing around with Divi to see what it can do. Every now and then he stumbles upon something cool and thinks everyone needs to know about it. Today might be such a day.<\/p>","protected":false},"excerpt":{"rendered":"<p>When it comes to themes for WordPress, Divi needs no introduction. It\u2019s only the most popular WordPress theme out there, created by one of the leading WordPress theme shops globally, Elegant Themes. Considering its popularity, it\u2019s worth demonstrating how to enhance Divi\u2019s optimization as much as possible &#8212; which can be done (for free!) with [&hellip;]<\/p>\n","protected":false},"author":811449,"featured_media":196544,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"blog_reading_time":"20","wds_primary_category":0,"wds_primary_tutorials_categories":0,"footnotes":""},"categories":[263,11260],"tags":[],"tutorials_categories":[11234,11228],"class_list":["post-196279","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","category-wpmu-dev-products","tutorials_categories-hummingbird-pro","tutorials_categories-smush-pro"],"_links":{"self":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/196279","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/users\/811449"}],"replies":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/comments?post=196279"}],"version-history":[{"count":93,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/196279\/revisions"}],"predecessor-version":[{"id":202853,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/196279\/revisions\/202853"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media\/196544"}],"wp:attachment":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media?parent=196279"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/categories?post=196279"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tags?post=196279"},{"taxonomy":"tutorials_categories","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tutorials_categories?post=196279"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}