- What Is Lazy Loading? How Does It Work?
- The Typical Lazy Loading Process:
- What Are The Best Image and Video Formats To Use With Divi Themes?
- Adjust Image and Video Size to Suit The Divi Theme
- Compress All of Your Media Files
- Lazy Loading Media in Divi - Final Step
- Pros and Cons of Lazy Loading
- Final Thoughts
Slow-loading websites are nothing short of frustrating. In this article we will show you how to Lazy Load media on Divi theme in 4 easy steps. As web users, we have all been there and have accessed a slow-loading website. As an industry-standard, your website should be fully loaded in 2 to 5 seconds, though the bounce rate increases with every second. This will have a beneficial impact on your website’s traffic, conversions, and even returning visitors.
It is pretty common knowledge in the web design space that images and videos are significant factors contributing to slow loading websites. However, as customers are often drawn to visual appeal, not having any media on your website for the sake of fast load speed is a silly idea. Luckily there are many ways to confront this widespread problem.
In this guide, we will talk about how you can deal with the slow loading speed of your WordPress website when using the Divi theme. But, to understand the process more clearly, you first need to understand what lazy loading is, how it works, and how it can help your Divi WordPress website.
What Is Lazy Loading? How Does It Work?
The Typical Lazy Loading Process:
- The web browser builds the page document object model (DOM) while not downloading images or any media.
- Javascript determines which images are to be downloaded and videos to be preloaded based on what is visible on the users’ screen.
- All other media is delayed or only loaded when a user scrolls down, and additional content comes on the screen.
WordPress 5.5 introduced the native image lazy loading images option without using javascript and using various methods to enable it. WordPress users had the option to enable it easily via using third-party plugins.
But to get the best results from lazy loading on Divi themes, the images and videos need to be slightly edited beforehand. Below, we have provided you with four easy-to-follow steps.
What Are The Best Image and Video Formats To Use With Divi Themes?
Divi supports many image file types, but the most used ones are. JPG, PNG and.SVG:
- .JPG or. JPEG image is the most common image file type with perfect file size and quality ratio. This type of image is often used as the go-to compared to others, which are only used in certain situations.
- .PNG is of higher quality than. JPEG when it comes to transparency. You can use these over other backgrounds of your website; the effect is quite cool but uses it sparingly as it takes more space. JPEG files.
- .SVG is a vector-type image format, meaning it stores information in a series of shapes. The quality is razor-sharp whether you enlarge it or make it reasonably small. SVGs don’t work with Divi, but you can install plugins like SVG Support to upload them.
For videos, Divi supports .MP4 and. WebM video formats. We recommend you upload videos in both formats. The WebM format is relatively new and is supported by many mainstream browsers. WebM is much more compressive as compared to MP4 formats. You can convert MP4 to WebM using any online video convertor.
Adjust Image and Video Size to Suit The Divi Theme
Whether you want a big full-width hero image or a small photo to be posted beside your blog, it can sometimes be quite challenging to settle on a set dimension for your images. After updates in WordPress, images larger than 2560x are automatically resized to 2560px.
Divi is responsive to a vast range of device sizes and has its requirements as far as images are concerned. After considering all the factors and trying many different dimensions, we would recommend you to resize your images when using a Divi theme to:
- 1 Column Hero Images: 1280px
- All other images for blog posts or sides: 800px
These width-size images will ensure that your images will look good on all devices.
For videos, crop and resize the video to the width in the range of between 1280px to 1920px. Reducing the width can significantly reduce the heaviness of a video file.
Compress All of Your Media Files
Image compression is vital to all websites, not just Divi-based ones, as smaller files automatically mean a faster-loading website. There are many different ways to compress your images for free. While WordPress automatically compresses images by around 80%, you can use online free tools for the job.
Lazy Loading Media in Divi - Final Step
- Lazyload by WP Rocket
- A3 Lazyload
- Lazyload for videos
- Infinite Scroll – Ajax Load more
4 Easy Steps On How to Lazy Load Media on Divi Theme WordPress
Pros and Cons of Lazy Loading
This makes content discovery a lot easier without readers having to click through many pages to find what they are looking for. Instead, they just need to scroll down, and the website will automatically load up the content on-demand. In the long run, if appropriately implemented, lazy loading will have a pretty significant impact on your website in terms of user experience, conversions, and bounce rate.
You can implement lazy loading using codes and scripts, which will take a lot of time. If you are looking for more advanced lazy loading options for Divi themes in WordPress, many plugins can help.
Final Thoughts - How to Lazy Load Media on Divi Theme WordPress
After doing all the steps above, you should always check and make sure that your pages are working and compare their loading speed before and after the changes.
Web content is a vital part of a user’s browsing experience, whether the website is made using a Divi theme or any other theme. Adding lazy loading will make your website load faster and eventually provide an uninterrupted browsing experience to your website visitors.
4 Easy Steps On How to Lazy Load Media on Divi Theme WordPress
