More Divi Cumulative Layout Shift and other GTMetrix and Google Page Speed Tips

Jun 30, 2021 | Divi Tips | 0 comments

While there are many tips in my other post, this one is a bit more simple and more up to date.

Do not use negative margins! Anywhere.

If you absolutely need to move something, use the positioning tool instead. Make sure you check the tablet and mobile versions as you may need to reset the position for these.

Do not use animations! Anywhere.

TIP: The Divi blurb module has a default animation you need to manually turn off in the Design tab / Animation / Image Icon Animation dropdown choose “No Animation”.

Avoid making separate sections, rows, or modules for desktop, tablet, and mobile. Hiding something on a tablet or mobile is fine. Just don’t do something like duplicate a menu in order to have a different style for mobile. Try to optimize them using the settings instead.

Also, try to avoid hiding something on the desktop and having it appear on tablet/mobile. Try to start with something visible on the desktop and work your way down, hiding if necessary.

TIP: In the theme Customizer, update all the settings including fonts, colors, and the header and footer. Even if you’re going to use the Divi builder (recommended) for the header and footer. This way if Divi wonks out, it might display at least some of your default settings until you get it sorted out.

Along the same lines as above but not necessarily related to page speed. Quite often Divi will wonk out and you’ll no longer see your styling but the ugly default Divi styling. If this happens, try either of these methods which seem to work for me.

1. In the Divi options area, simply click the Save button without making any changes. Logout and refresh.
2. In the theme customizer, change something like your font size and then change it back. It will think you made a change. Click the Publish button. Logout and refresh.

TIP: Be careful when changing the default font sizes or anything else other than the colors. Something like a large line height for example might drive you nuts in some areas. I prefer to keep the font sizes, line heights, spacing, and gutters to remain as default. You can then make custom presets instead.

Ok, sorry for the digression. On to the page speed stuff.

Optimize your images including your logo. Make sure the logo you upload is the exact same size you want it to appear. Meaning, do not adjust the size (smaller) using the Customizer.

When I say optimize your images I mean sizing all of them to as close as possible to the largest you want it to appear on any given device.

Here’s what I do in order to find out the size of the image I want use.

Make the general layout of the section including adding the spaces for the images you’re going to use. Then take a screenshot and paste into Photoshop. I then take my original image and paste it into the screenshot (new layer) and size it. Then, copy the resized image and save it. Done.

TIP: Use a 1920 pixel wide monitor as this is the most popular. This is also the width, 1920 pixels, for any full width image you want to use.

About image sizes. Keep them as small in file size as possible. Some possible goals would be:

For a large 1920 pixel wide x 500 pixel high image, a max file size of 200kb. The less colors in the image, the smaller the file size. It’s very possible for a large image to be as small as 10kb.

TIP: If the plan is to add an overlay of some sort on top of a background image, (making it less visible maybe to make text more readable), make the image itself (in Photoshop) contain the overlay. This will significantly reduce the file size. You also won’t need to add the overlay in Divi or not as much.

Only use PNG files if transparency is required. Or, if the image contains just a few colors and looks better, it might make sense. Things like icons for example. Otherwise use JPG images.

About image types (file extensions).

A new image file type is called WebP. It’s not fully supported by all browsers yet so a WordPress plugin and/or CDN would be required. This adds the appropriate code behind the scenes making sure the correct file type is loaded for the device used. Plugins like Imagify or SmushIt can make the WebP image files and also have their own CDN to serve them (paid versions).

Avoid as many tracking codes as possible. Enough said.

Load plugins only when needed. I like to use a free plugin called “plugin load filter” which as the plugin states, “Dynamically activate the selected plugins for each page. Response will be faster by filtering plugins.” This is VERY handy if you’re using resource heavy plugins like Gravity Forms or Revolution Slider or any other plugin that is being used on maybe just a single page. Like your contact page for example. You enable the Gravity Forms plugin to load on the contact page only. This speeds up all the other pages.

Install a cache plugin to do things like combine and/or defer JS and CSS files. Some good plugins to use for this are WP-Optimize or WP Rocket. Then, use a CDN to do the rest.

About using a CDN like Cloudflare.

The final piece and worth every penny as your site will then be lightning fast and much more secure.

Cloudflare also has a lot of other features like a WebP image converter (Business account). Opting for this makes it easy because you don’t need to use a plugin like mentioned above. And, all the WebP images are stored on their servers not yours.

All of the above can change depending on who you are hosted with. Some hosting companies have their own CDN and/or caching options. Some are partnered with CDN companies like Cloudflare and offer it as a service.

I hope this helps someone out there and please feel free to comment below.

0 Comments

Submit a Comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.