Tut Gurus

How to Lazy Load Media on Divi Theme WordPress in 4 Easy Steps for 2022

How to Lazy Load Media on Divi Theme

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?

Lazy loading is an optimization technique that stops the initialization of a part of a website until it is shown on the screen or when needed. In simpler terms, lazy loading forces all the images and media to only load when they come into view on the browser. A simple and famous example of lazy loading is Pinterest, where only the first few posts with images will load at first, and the site will load more as the user scrolls down.

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.
The result is that the initial website load time decreases significantly as the images and media aren’t downloaded until needed. This technique can provide a significant boost for sites that use lots of high-resolution images and embedded videos.

 

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:

  1. .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.
  2. .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.
  3. .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.

If you have access to Adobe Photoshop, you can resize, crop, and compress using that one tool. It is a convenient software to work with as it allows the users to preview the images at different compression levels. Videos are the heaviest elements for web pages, and video compression should be done for every video, whether it’s for Divi or any theme or website builder. Sometimes it can easily save up to 90% of its file size.

Lazy Loading Media in Divi - Final Step

As you have already done all the prep-work above, now it is time to install some lazy load plugins with much more advanced features and are very easy to use. Some recommendations are:
  1. Lazyload by WP Rocket
  2. A3 Lazyload
  3. Lazyload for videos
  4. Infinite Scroll – Ajax Load more
All these plugins work differently, but all have advanced features and are easy to use. After installing them, you have to go on the plugins page, then on the downloaded plugin settings where you can customize what elements you want to lazy load.

4 Easy Steps On How to Lazy Load Media on Divi Theme WordPress

Pros and Cons of Lazy Loading

As you could imagine, lazy loading has its pros and cons. The most significant advantage of lazy loading is that it makes your website page load faster. The browser loads the content faster on your page, and once the user scrolls down, the content will be loaded in.

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.

Let’s talk about the other side of lazy loading. The most significant disadvantage of lazy loading is that content that is affected by lazy loading will be tough to be crawled and recognized by search engines like Google and thus affect your SEO. Despite that, there is nothing for you to worry about as if the lazy loading technique is executed correctly, all the cons can be dealt with. 

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

Share

Share on facebook
Share on twitter
Share on linkedin
Share on reddit
Share on email
Share on pinterest
TutGurus

TutGurus

This is text about us and changed in user tab

Leave a Comment

guest
0 Comments
Inline Feedbacks
View all comments

Latest Videos

0
Would love your thoughts, please comment.x
()
x