Do you want to learn how to lazy load images in WordPress?
Lazy loading allows your website to only load images when a user scrolls down to a specific image, which reduces the website load time and improves website performance. Many popular image-heavy sites use lazy loading to boost website speed and performance.
In this article, we will show you how to easily lazy load images in WordPress, step by step.
Why Lazy Load Images in WordPress?
Lazy loading WordPress images can speed up your website and offer a better user experience.
No one likes slow websites. In fact, a performance study found that a 1-second delay in page load time leads to 7% fewer conversions, 11% fewer pageviews, and a 16% decrease in customer satisfaction.
Search engines like Google don’t like slow-loading websites, either. This is why faster sites rank higher in the search results.
Images take the most time to load on your website compared to other web elements. If you add a lot of images to your articles, then each image increases your page load time.
One way to handle this situation is to use a CDN service like BunnyCDN. A CDN will let users download images from a web server closest to them and reduce website loading speeds.
However, your images will still be loaded and affect the overall page load time. To get past this issue, you can delay image loading by implementing lazy load on your website.
How does lazy loading for images work?
Instead of loading all your images at once, lazy loading downloads only the images visible on the user’s screen. It replaces all other images with a placeholder image or blank space.
As a user scrolls down the page, your website loads images that are visible in the browser’s viewing area.
Lazy loading can be very beneficial to your WordPress blog:
It reduces the initial web page loading time so that users will see your site faster.
It conserves bandwidth by only delivering images that are viewed, which can save you money on WordPress hosting costs.
The release of WordPress 5.5 added lazy loading as a default feature.
However, if you want to customize how your images lazy load and also lazy load background images, then you will need to use a WordPress plugin.
Let’s take a look at how to lazy load images in WordPress using two different plugins. You can use the quick links below to jump straight to the method you want to use:
Method 1: Lazy Load Images in WordPress With WP Rocket
We recommend using the WP Rocket plugin to lazy load images in WordPress. It’s the best WordPress caching plugin on the market that lets you easily turn on image lazy loading.
Aside from that, it’s a very powerful plugin that helps you optimize your website speed without knowing complex technical terms or configuring expert settings.
Right out of the box, all of their default recommended caching settings will greatly speed up your WordPress website.
To enable image lazy loading, all you have to do is check a few boxes. You can even enable lazy loading for videos, which will improve your website speed even more.
All you need to do is go to Settings » WP Rocket in your WordPress dashboard and click on the ‘Media’ tab. Then, you can scroll to the ‘LazyLoad’ section and check the boxes next to ‘Enable for images’ and ‘Enable for iframes and videos’.
Note: If you are using Siteground as your WordPress hosting provider, then you can use the free SiteGround Optimizer plugin that has similar lazy loading features.
Method 2: Lazy Load Images in WordPress With Optimole
First, you need to install and activate the Optimole plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.
Upon activation, you will see a screen asking you to sign up for an API key. You can also find this screen by navigating to Optimole in the admin menu.
You’ll need to make sure that the email address listed is correct and then click the ‘Create & connect your account’ button. Alternatively, if you are an existing user, then just click the ‘I already have an API key’ button.
You may need to wait for a few seconds while the plugin connects to Optimole. After that, the plugin will automatically start to optimize your images so that your visitors will now see the best images for their devices.
While that is happening, you can click on the ‘Settings’ tab to configure lazy load.
Here, you need to make sure the ‘Scale images and & Lazy load’ setting is enabled. This will generate images based on your visitor’s screen size and improve loading speeds.
Next, click on the ‘Advanced’ menu option and select ‘Lazyload’. On this screen, there are a few different settings that let you customize how your images will lazy load.
First, you can adjust the ‘Exclude first number of images from lazyload’ setting. This will stop images at the top of your posts or pages from lazy loading, so images above the fold will always appear.
You can set this to 0 if you want every image to lazy load.
There are a few other advanced lazy load settings in Optimole that you can check. These settings are enabled by default.
The first is the ‘Scale Images’ setting. This will scale images to the visitor’s screen size and make your page load faster.
After that, you will see the ‘Enable lazyload for background images’ setting. This will lazy load your background images, which may be the largest images on your website.
Another setting is lazy loading embedded videos and iframes. If you have a lot of embedded video content, then you will want to leave this setting on. It will load a placeholder image in place of the video. When the placeholder is clicked, the full video will load.
You can continue to customize these settings and see what works best for your website and your images.
Before you exit the plugin settings, make sure to click the ‘Save changes’ button at the bottom of the page.
Bonus Tips to Optimize Your WordPress Images
Although lazy loading will help to improve website loading speed, there are a few other ways to optimize your WordPress images for the best performance.
For example, we recommend compressing your images before uploading them to your website using a tool like TinyPNG or JPEGmini. Alternatively, you can use an automated image compression plugin such as Optimole or EWWW Image Optimizer.
It’s also important to choose the right WordPress image size and file format for your images. JPEGs are best for photos or images with many colors, PNGs are suitable for simple or transparent images, and GIFs are only for animated images.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Do you want to perform a User Experience (UX) audit of your WordPress website?
User experience is an important factor in the success of a website. A good user experience can lead to more conversions and sales, while a poor UX can cost you money.
In this article, we will show you how to easily do a UX audit of your WordPress website step-by-step.
Here is a quick overview of all the steps we will cover to perform a UX audit on your WordPress website:
User experience or UX describes the feelings and opinions that users have while using your website.
A pleasant user experience means users find your website easy to use and helpful.
By contrast, a poor user experience means users find your website difficult to use and can’t do what they want to do.
Creating a good user experience allows you to help users make the most out of your website. This eventually leads to conversions, sales, and business growth.
On the other hand, a negative user experience can cause visitors to leave your website without signing up or buying something in your online store. This causes you to lose potential sales and customers.
How to Perform a UX Audit of Your Website
As a business owner, you need to regularly check your website to make sure that it offers a good user experience.
This practice is called a UX audit. You can perform a UX audit by yourself using a combination of tools (you may already be using some of them).
During this process, you will look for issues that may negatively affect user experience on your website. When you find a problem, you can document it and then start fixing it.
Ready? Let’s get started.
Step 1: Define User Goals and Objectives
First, you need to put yourself into users’ shoes to understand what they are looking for when they reach your website.
For instance, if your website is an online store selling pet toys, your audience’s goal is likely to look at pet toys, read customer reviews for those products, and make a purchase.
Similarly, if you run a how-to blog, then your audience’s goal would be to read a tutorial and learn how to do something.
Understanding what your users want to achieve will allow you to help them better.
This exercise allows you to better understand users and their expectations of your website. Most importantly, it helps you figure out the goals and objectives of your target audience.
You can then analyze your website using these personas to see how quickly your content, products, and services can help those users.
Step 2: Test Your Website for Usability Issues
Testing your website for usability helps you quickly find problems that could destroy the user experience.
However, many issues often go unnoticed by website administrators until a user reports them. Users are more likely to switch to your competitor’s website than tell you about issues on your site.
Luckily, there are plenty of excellent tools that you can use to quickly detect potentially harmful usability issues on your website.
PageSpeed Insights (Free)
Google’s PageSpeed Insights tool lets you quickly examine a URL for performance and usability issues.
It runs tests on your website and then presents the results for both mobile and desktop devices by assigning each one a score.
This score is given in four categories:
Performance
Accessibility
Best Practices
SEO
It also tests for Core Web Vitals, which are a set of website performance metrics that Google considers essential to a website’s overall user experience.
When you run the test, the language may initially sound too technical. However, you will also find links to resources explaining these concepts in beginner-friendly terms with tips on resolving each issue.
Automated tools can help you catch many problems. However, they are not perfect and may not be able to identify many common UX problems.
If you have a small website, you can go to each page to manually review it yourself. However, it is impossible for most medium to large websites to do this manually.
So, how do you find pages with poor UX?
One easy way to find these pages is by using MonsterInsights. It is the best Google Analytics plugin on the market that allows you to see where your users are coming from and how they interact with your website.
Note: There is also a free version of MonsterInsights that you can try. However, we recommend upgrading to the paid version and unlocking the full potential of the plugin.
Upon activation, the plugin will run the setup wizard and help you connect WordPress with your Google Analytics account.
However, you will need to enable it for your website manually.
Start by visiting the Insights » Addons page in your WordPress admin dashboard to install and activate the eCommerce addon.
Next, you need to enable enhanced eCommerce tracking in your Google Analytics account. Go to your Google Analytics dashboard and select your website.
From here, click on the ‘Admin’ button in the bottom left corner.
On the next screen, you will see different Google Analytics settings.
Under the ‘View’ column, just click the ‘Ecommerce Settings’ link.
On the next screen, simply turn on the toggles next to the ‘Enable Ecommerce’ and ‘Enable Enhanced Ecommerce Reporting’ options.
Don’t forget to click the ‘Save’ button when you are done.
Check Low Conversion Pages for UX Issues
Poor user experience is one of the main reasons for low conversions, abandoned carts, and high bounce rates.
You can view your conversion tracking reports in MonsterInsights to find pages with low conversions and higher bounce rates.
Simply go to the Insights » Reports page inside the WordPress admin area and then switch to the ‘eCommerce’ tab.
From here, you can see an overview of your top-performing products and conversion sources.
For advanced reports, you need to switch to your Google Analytics account and go to the Engagement » Pages and screens tab.
From here, you can sort the pages by conversion rate to see the pages with the least conversions.
Using Google Analytics, you can also track pages with the highest bounce rates, the least amount of time spent on them, and more.
For more conversion tracking options, you can see our complete guide on WordPress conversion tracking. It will also show you how to track form conversions, affiliate link conversions, and more.
Step 4: Ask For User Feedback
As you can see, many UX audit activities involve automated tools, analytics reports, and manual testing.
The entire point of the UX audit exercise is to improve user experience. So, why not just ask your users what they think?
Asking for user feedback can get you accurate input from real visitors about your website. It can help you find specific problems and fix them more easily.
Note: There is also a free plugin called UserFeedback Lite that you can try. We recommend upgrading to the Pro version to unlock the full potential of the plugin.
UserFeedback allows you to quickly run surveys and collect user feedback on your website. It also lets you show the surveys to the right users at the right time.
For example, you can show surveys to users on the pages with fewer conversions or display a feedback form to users on mobile devices.
Website speed is a major contributor to user experience. Slow sites cause poor UX and prevent users from moving forward and accessing your content.
The tools we mentioned earlier, like PageSpeed Insights and Core Web Vitals, can help you evaluate the performance of your website.
However, if you are using MonsterInsights, then you can also run a website speed test inside your WordPress admin area.
Simply switch to the Insights » Reports page and then open the ‘Site Speed’ tab.
The report will run the same tests as PageSpeed Insights and show you a report. It will also give you practical tips to improve website performance.
Fixing Performance and Speed Issues
The easiest way to fix most performance issues is by simply installing a WordPress caching plugin.
We recommend using WP Rocket, which is the best WordPress caching plugin on the market. It lets you easily optimize your WordPress website without learning the technical stuff.
Upon activation, WP Rocket will start caching your website’s content.
Unlike other caching plugins that generate a cache when a user visits your website, WP Rocket automatically starts creating a cache in the background.
This means each new user on your website will see a cached version that loads much quicker and improves user experience.
You can learn more by reading our tutorial on setting up WP Rocket with more detailed instructions.
If caching doesn’t immediately fix your website speed, we recommend following our complete WordPress speed and performance guide. It includes step-by-step instructions on how to optimize your website speed.
Step 6: Evaluate Website Navigation
Users expect your site to have a navigation menu with the links they need to find the information they want.
Sometimes, a website may not have a navigation menu that helps users reach the page they want. This leads to a poor user experience, and visitors may leave and try some other website.
You need to make sure that your website has a straightforward navigation menu that takes users to the critical areas of your website.
Adding a search bar to your website’s header or navigation menu can also improve user experience. If users can’t find a link quickly, then they can try searching on your website.
However, the default WordPress search is not very good.
Instead, we recommend using SearchWP. It is the best WordPress search plugin on the market and quickly improves the search experience on your website.
SearchWP allows you to make everything on your website searchable, including custom fields, eCommerce attributes, custom tables, categories, tags, and more.
A lot of the time, poor user experience is caused at the end of a conversion path.
For instance, you might have users trying to submit your lead capture form, but something is stopping them from doing so.
Luckily, you can run split tests and manually test elements on your website to identify and fix problems.
Run A/B Split Tests to Figure Out UX Issues
An easy way to test your conversion elements is by running A/B split tests.
An A/B split test allows you to create two or more versions of a page with slight differences. It then shows users a different version randomly.
You can then compare the results to find out which variation of the page performed the best among your users.
The easiest way to run these tests on your WordPress website is by using Thrive Optimize. It lets you quickly create and run A/B tests on your WordPress website.
First, you will need to install and activate Thrive Optimize plugin. You can purchase the plugin with Thrive Architect or get it with Thrive Suite bundle.
Next, install and activate the Thrive Product Manager plugin on your website. You can download it from your Account Dashboard on the Thrive Themes website.
Upon activating the plugin, you need to go to the Product Manager page in the WordPress admin area.
Next, you need to check the ‘Install Product’ box under the Thrive Optimize and Thrive Architect products.
After that, click on the ‘Install Selected Products’ button to continue.
After installing the plugins, you will need to create or edit a post/ page and then click on the ‘Launch Thrive Architect’ button at the top.
This will show a popup where you can choose how to edit the page.
You can edit the page as a regular page using your theme template or as a landing page with a custom template.
If you choose a pre-built landing page, then you will be asked to choose a template.
Thrive Architect comes with dozens of beautiful templates for various niches to choose from.
After that, you will be able to edit your page in Thrive Architect’s page builder.
It is an intuitive design tool where you can point and click on any element to edit it or click on the ‘+’ button to insert new elements.
Once you have finished editing your page, don’t forget to click the ‘Save Work’ button to store your changes.
After that, click on the ‘A/B’ button in the right column to create a new A/B test.
To run your A/B test, you need to have at least two versions of a page.
On the next screen, click on the Add New Variation button to create a new version of your landing page.
It will now create a new variation, and you can start editing it using the Thrive Architect.
Make the changes to the page you think will work better than the previous version.
After that, simply click on the ‘Save Work’ button to store your changes, and then click on the ‘A/B’ button again.
You can choose how much traffic you want to send to each page variation and then click on the ‘Set Up & Start A/B Test’ button at the top.
This will bring up a popup where you can configure the A/B test settings.
You need to give your test a title and description. Afterward, you can turn on Automatic Winner settings and set minimum requirements for a variation to win.
Click on the ‘Next’ button to continue.
Finally, you will be asked to choose a goal for the test. For example, if it is a product page, then you may want to choose ‘Revenue’.
Finally, click on the ‘Start A/B Test’ button to finish the setup.
Thrive Optimize will now start showing the two variations of the page to your users and keep track of user interactions on the page.
You can view the test results anytime by visiting the Thrive Dashboard » Thrive Optimize page.
Once the test has run its duration, you can see which page has performed better for conversions or the goals you set during the test. You will then be able to make changes to improve the UX on your website.
A lot of time, you may not be able to run A/B split tests for all your pages. Luckily, there are other ways to test whether conversion elements on your pages are working.
Website owners are often just looking at the static representation of their website and not interacting with it like a real user would. That’s why many interactive failures go unnoticed for a long time.
This is when you will need to do some manual work. You can try to imitate a user journey as best as possible to complete a conversion.
For instance, if you run an eCommerce store, you can start from the page where your users usually land. Afterward, look at product pages, add items to the cart, and complete the checkout.
Within your UX audit, you must test all your forms, cart functionality, and checkout experience by interacting with those elements like a customer.
A user flow is a customer’s journey across your website. A user will usually take a predictable path to different areas of your website until they buy something or submit a form.
The best way to track user flows is by using MonsterInsights. It comes with a User Journey addon that allows you to see every step of a customer’s journey throughout your site, including the pages and products they looked at and how long they were there.
Note: You will need at least the Pro plan of the plugin to use the User Journey addon.
After setting up MonsterInsights, you need to go to the Insights » Addons page. From here, locate the User Journey addon and then install and activate it.
Now, MonsterInsights will show the user’s journey on individual orders. For example, in WooCommmerce, you can go to WooCommerce » Orders page and click on an individual order.
On the order details page, scroll down to the MonsterInsights User Journey section.
This will show you all the user interactions on your site with their times and durations.
If you are not using an eCommerce platform, then you can still track the user journey for your WordPress forms.
If you are using WPForms to capture leads, then it comes with user journey tracking that helps you track which path a user took to submit the form.
Like conversion elements, other areas of your website could disrupt user flow and block the path that leads them to become a customer.
You will need to manually evaluate user paths in Google Analytics to see where their journey abruptly ends. You can also simulate the user paths to see if you can come across a usability issue preventing the user from going forward.
Step 9: Evaluate Website Content Quality
Visual elements are not the only things that create a good or bad user experience.
Your website content plays a significant role in convincing users to stay on your WordPress blog or website and look around. It also helps search engines find your content more easily and send more visitors to your site.
We recommend performing a complete SEO audit of your website and optimizing your content for SEO.
All in One SEO comes with built-in SEO analysis, a headline analyzer, and site-wide SEO audit tools. All these features help you improve the quality and discoverability of your content.
You will also need to evaluate your content. For example, if a particular page is not ranking or converting well, then consider making it more comprehensive by adding more helpful content.
Don’t forget to check your content for spelling and grammar mistakes. They could make your website seem unprofessional and create a bad user experience.
We recommend using Grammarly. It is the best AI-powered writing tool that helps you automatically correct spelling and grammar mistakes.
Grammarly also has a free forever plan with spelling and grammar checks. However, we recommend buying a paid plan to unlock more powerful features.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
