Tag: performance

The domain name system (DNS) is one of the cornerstones of the web. Without DNS lookups, it would be impossible to know which domain corresponds to which IP address (the location where a website’s files are hosted). As it is, these lookups can happen in milliseconds, allowing you to jump from website to website almost as quickly as you can click on a link.

Reducing the number of DNS lookups can help keep your website loading times in check. It’s a simple process you can undertake in a number of ways, but it can have a significant positive impact on the user experience.

Below, we’ll go over the basics of DNS lookups, how they work, and how to measure response times. Then, we’ll discuss how to reduce DNS lookups in WordPress. 

What is a DNS lookup?

The DNS is a distributed system that maintains records of which domains correspond to which IP addresses. This is essential to the modern web because it enables you to visit sites without needing to remember complex strings of numbers (google.com sounds a lot better than 64.233.160.0!).

A DNS lookup refers to the process of translating a domain name into an IP address. When you enter a URL in your browser or click on a link, a DNS lookup occurs in the background. The browser sends a request to a DNS ‘resolver,’ typically hosted by your Internet Service Provider (ISP). The resolver then looks in its local cache to see if it has the corresponding record, and if it doesn’t, it contacts a DNS server.

All of that process should happen rather quickly. If a website takes only a second or two to load, that means the DNS lookup occurs in just a fraction of that time. But, in some cases, DNS lookups can take an excessive amount of time. If that happens, you’ll want to optimize the process to avoid long loading times for your site.      

What is a good DNS response time?

A good DNS response time is typically under 100 milliseconds (ms). But, response times can vary depending on a variety of factors, including:

• The location of the DNS server. The further away the DNS server is, the longer it takes for the query to reach it. The same is true for the time it takes to return the information you’re requesting.
• If the server is under heavy load. A DNS server can take longer to respond to requests if it’s getting a lot of them simultaneously, just as with a normal site-hosting server. This is not a problem you can fix by optimizing your website but by changing DNS providers.
• How complex the DNS query is. Not all DNS queries are the same in terms of complexity. If a URL has multiple subdomains or multiple IP addresses associated with it, a DNS lookup can take longer. 

In general, faster DNS response times can result in faster website loading times, as the DNS lookup is the first step in connecting to a website. To put it another way, slow DNS response times can lead to a poor user experience.

How to measure your DNS lookup time on WordPress

There are a lot of ways to measure DNS lookup times for any website, including those built with WordPress. Generally, the easiest way to measure these times is with a third-party tool, which typically works similarly to page-speed-measurement software. Some popular options include:

• DNS Speed Benchmark. This is a free tool that allows you to test DNS lookup times from multiple locations around the world. Simply enter the domain name you want to test, and the tool will show you DNS lookup times in milliseconds for multiple locations.
• Dot-Com-Tools. This DNS checker enables you to run tests using servers from around the globe. It’s a helpful option because it provides you with an average DNS lookup time. 
• Browser Developer Tools. Most modern web browsers have developer tools that allow you to analyze network performance, including DNS lookup times. Accessing developer tools in Chrome, for example, is simple. Just right-click on a webpage and select Inspect or press F12 on your keyboard. Then, navigate to the Network tab and reload the page to get results.

It’s important to reiterate that DNS lookup times can vary a lot depending on where the original query comes from. You might get amazing lookup times from your computer if your web hosting server is close to you. But that might not be the same experience for users in other locations.

That type of variation will always exist. Still, if you’re seeing big differences in DNS lookup times after testing them using the tools above, that isn’t normal. Ideally, DNS lookup times shouldn’t vary too much, and if they do, you can optimize them to reduce loading times.

How to reduce DNS lookup time on WordPress 

There are many ways to reduce DNS lookup times on WordPress. A lot of these methods will also improve overall site performance. So, if your website is loading slowly, you might want to implement as many of these strategies as possible.

1. Install a reliable CDN plugin

Using a quality Content Delivery Network (CDN) can help you improve DNS lookup times thanks to DNS prefetching. This is a feature that prioritizes DNS lookups and then caches that information. Since the server only needs to check the cache for the IP address, the process is much faster than running a regular DNS lookup, at least for the end user.

CDNs typically have many servers located in different regions around the world. Each of these servers maintains a cache of frequently accessed domain names and their corresponding IP addresses.

By reducing the time it takes to perform DNS lookups, CDNs can improve website performance and the user experience. This way, visitors can access web pages more quickly, and you can reduce the load on your servers.

Overall, there are many reasons to use a CDN beyond reducing DNS lookup times. So, the decision isn’t so much whether to get one, as it is about deciding what the best option is for your website.

If you’re using WordPress, Jetpack offers an easy way to implement a CDN on your website. In fact, the CDN is available with the free plugin. You can enable it from Jetpack’s Performance & speed settings by selecting the option that says Enable site accelerator.

There are plenty of other CDN options available for WordPress, but they can be a bit more complicated to install and activate. 

2. Defer loading of JavaScript

Typically, a web page needs to load all JavaScript before it renders fully. Since JavaScript files can be quite large, this can significantly impact loading times. So, if you’re trying to reduce DNS lookups and improve site speed, you can also defer the loading of JavaScript. Or for that matter, any element that can delay the website from rendering.

But before we explore this option, it’s important to understand the difference between local and external JavaScript files. Essentially, deferring the loading of JavaScript files on your server won’t impact DNS lookup times. 

That’s because with these local files, the DNS lookup happens before a page starts to load at all. On the other hand, any external JavaScript files you call from your site involve their own DNS lookups.

Therefore, the ideal solution here is to defer JavaScript altogether, so that even third-party files won’t impact the user experience with additional DNS lookups. 

There are several ways to defer the loading of JavaScript. Jetpack Boost is an excellent option, since it enables you to defer all non-essential files by toggling one setting. 

If you have Jetpack Boost installed, go to Jetpack → Boost and look for the option that says Defer Non-Essential JavaScript. Simply enable that option, and you should see an immediate improvement in your site’s performance score at the top of the screen.

Keep in mind that deferring JavaScript manually involves editing your site code to add the defer attribute to script tags. Therefore, if you’re not comfortable dealing with code, a plugin might be the easiest option for you.

3. Enable DNS prefetching

DNS prefetching enables a server or browser to perform a DNS lookup in advance and to store or cache that information. That way, when a visitor tries to access the website, the information is available faster. This is because the lookup occurs locally instead of having to go through the full traditional route.

Most modern web browsers use DNS prefetching to some degree, but this doesn’t occur with all websites. For your website, you’ll need either the DNS resolver or a CDN to prefetch DNS lookup results.

Since you can’t ask a DNS resolver to prefetch results only for your site. Your best bet is to focus on the CDN side of things. Using a CDN, like the one available with Jetpack, will let you enable DNS prefetching for your site.

As we mentioned, the CDN is available with the free plugin, and you can enable it from Jetpack’s Performance & speed settings by toggling the option that says Enable site accelerator.

There are some other plugins that offer DNS prefetching. Still, it’s likely better to use a tool that can do more than just that. A CDN solution is an excellent choice, since it will also help improve your website’s performance in general (due to the reduced load on your servers).

4. Consider using a faster DNS provider

Using a different DNS provider can also help you reduce DNS lookup times. Some DNS providers may have faster and more reliable servers, better network connectivity, or more advanced caching techniques. All of this can lead to quicker DNS resolution times.

Your first step is to use a tool like DNSPerf, which shows you a list of the fastest and most reliable DNS providers. Once you decide on a new tool, you’ll need to create an account on their platform. The specific transfer process will depend on the DNS provider you’re currently using, as well as the one that you’re switching to.

Bluehost, for example, outlines the process of moving a domain to their platform in three steps:

• Prepare your domain. Disable any privacy settings, confirm contact information, obtain an authorization code, etc.
• Initiate the transfer. This requires a relatively straightforward process within your Bluehost dashboard.
• Check the progress from within your dashboard.

The process, in its entirety, usually takes a few days. It’s important that you also update any applicable nameservers and DNS settings with the new provider to ensure that your website and any additional services — like email accounts — work properly.

5. Minimize the number of CNAME records 

CNAME (Canonical Name) records are DNS records used to map one domain name to another. These records can help you create aliases for existing domain names, like subdomains or alternative domain names for a website.

When you try to access a web page like blog.example.com, the browser needs to perform a DNS lookup to resolve the domain name. If there’s a CNAME record involved, the browser needs to follow that chain until it hits an A name record. 

Those are the types of records that map actual domains to their final IP addresses. The more CNAME records you create for your website, the longer the lookup chain becomes, which means it takes longer to resolve the DNS.

To minimize the number of CNAME records, you can rely as much as possible on A records instead. Here are some guidelines to help you achieve that:

• Use A records for root domains. When configuring your domain, use A records to map the root domain to the IP address of your website’s server rather than using a CNAME record.
• Use CNAME records for subdomains. Use CNAME records for subdomains that point to other domain names, like a CDN or third-party service. This can simplify DNS management since those third-party services may change IP addresses.
• Avoid chaining CNAME records. If you need to use a CNAME record, that’s fine. But, you should avoid CNAME record chains since they only add to DNS lookup times.
• Use TTL wisely. Set the Time-to-Live (TTL) value of your DNS records appropriately. A longer TTL can reduce the number of DNS lookups required, but it can also increase the time it takes to update DNS records.

Changing all of these settings involves accessing your domain registrar or web host. The service you used to register your domain should provide you with options to change its corresponding records. If you’re not sure how to do this, you can contact the registrar or the web host for help.

6. Reduce the number of external hostnames

A hostname is a unique identifier that is assigned to a device or a service on a network. Hostnames are used to identify and locate network resources, like websites, servers, and devices, using the domain name system (DNS).

On your website, there are two types of hostnames, internal and external. Internal hostnames include links that point to other pages on your site. External hostnames refer to links that point to pages and resources outside of your website.

Every time a visitor clicks on an external link, that involves a DNS lookup. This shouldn’t be much of a concern to you, since you have no control over how long DNS lookups take for other sites. What you should care about are hostnames pointing to external files your site needs to load.

These files can be scripts, fonts, tracking pixels, and other resources your site relies on for critical features. Whenever possible, your goal is to host these files locally to reduce DNS lookups on your site.

Earlier in this article, we talked about deferring non-critical JavaScript until pages on your site render. That technique, in combination with reducing hostnames by hosting files locally, should have a significant impact on reducing DNS lookups and loading times.

7. Host third-party resources locally

Most modern websites rely heavily on third-party resources. That includes scripts, fonts, embedded videos, tracking pixels, and more. 

All of these tools are useful, but they come with a trade-off: Every third-party resource you add to your website means one or more additional DNS lookups that users have to deal with.

The solution to this problem is not to do away with third-party resources. What you want to do is host them locally whenever possible. This is perfectly workable when it comes to scripts and files like fonts, since they usually occupy very little space.

On the other hand, videos and tracking pixels are larger and more complicated. Tracking pixels, by their nature, need to connect with third-party platforms like Meta. But, you can reduce the impact of this third-party connection by loading them all at once using tools like Google Tag Manager. You can even opt to defer the tags until the page is loaded.

Moreover, when it comes to more top-heavy resources like videos, hosting them locally can have a significant impact on your server’s resources and performance. Having several users loading videos from your site can slow it down much more than a few DNS lookups.

To find out what third-party resources your website relies on, you can use a tool like PageSpeed Insights. When you run an analysis with PageSpeed Insights, it’ll return a list of suggestions on things you can do to improve your website’s performance. Here, you’ll find an entry that reads Reduce the impact of third-party code.

That list will show you which third-party scripts are slowing down your site. Each of those scripts involves DNS lookups, so you’ll need to determine which ones you can host locally and which ones are worth keeping as external.

8. Deactivate plugins that perform DNS lookups

Some WordPress plugins (e.g. tools that use tracking scripts, like live chat and analytics plugins) may perform DNS lookups depending on their functionality and how they’re coded. The plugins that do this typically require the use of external resources — like images, scripts, or other assets — which point to different hostnames. 

To load these resources, the plugin may need to perform a DNS lookup to resolve the domain name into an IP address. Similarly, some WordPress plugins may interact with external services, like social media platforms or analytics tools, which could require DNS lookups to establish connections and retrieve data.

If a plugin performs DNS lookups, it can have an impact on your site’s performance. You can minimize this impact by using DNS caching techniques as well as opting to use plugins that don’t rely heavily on third-party resources.

The problem with this is that it can be hard to determine which plugins perform DNS lookups. This involves either analyzing the plugin’s code or monitoring the network activity of the website while the plugin is active. Tools like browser developer consoles, network analysis tools, or server logs can be used to track the DNS queries and network connections made by the plugin.

Another alternative is to use a staging site to conduct a test. You could deactivate plugins one by one and see if it makes an impact on your site’s DNS lookup times. You can find instructions on how to do this in a previous section on measuring DNS lookup times.

Frequently asked questions about reducing DNS lookups

At this point, you likely have a good understanding of DNS lookups and their impact on site speed. But, just in case you have any lingering doubts, we’re now going to answer some of your most frequently asked questions about how to reduce DNS lookups in WordPress!

Why is it important to reduce DNS lookups?

The more DNS lookups a browser has to perform to visit a website, the longer it will take to load. Long loading times can have a negative impact on the user experience. 

In turn, this can make your website less effective, hurting things like sales and conversions. Therefore, reducing DNS lookups is key if you want your website to perform well.

Do DNS lookups impact user experience?

The short answer is yes. DNS lookups can impact the user experience if they take too long or a browser has to perform too many lookups to access any given page on your website.

As the number of DNS lookups increases, so does the time it takes to load a page. Users can be notoriously impatient when it comes to loading times, so it’s in your interest to reduce them as much as possible.

Do DNS lookups impact Core Web Vitals?

Google takes a lot of factors into consideration when measuring Core Web Vitals. Significant DNS lookup times can contribute to worse scores when it comes to First Input Delay (FID) and Largest Contentful Paint (LCP).

That impact is due to the fact that pages may not start or finish loading before the browser completes every associated DNS lookup. Therefore, by reducing the number of lookups, you can likely improve Core Web Vitals scores for your website. You can easily optimize your site’s Core Web Vitals using a plugin like Jetpack Boost.

What else can I do to improve my site’s performance?

There are a lot of ways to improve your WordPress website’s performance. Working to improve your site’s Core Web Vitals can be a great start. Aside from that, you can use a CDN, defer non-essential scripts, and optimize images with offsite hosting or lazy loading.

Reduce DNS lookups to improve your website’s performance

DNS lookups are a core aspect of the web. Without lookups and the DNS system, we would have to memorize lengthy IP addresses instead of user-friendly domain names. But too many DNS lookups on a single website can negatively impact your website performance and user experience.

There are a lot of ways to reduce DNS lookups and speed up a WordPress website. Some of the best methods at your disposal include using a CDN and deferring the loading of JavaScript. Additionally, you can change DNS providers or make an effort to minimize your CNAME records and external hostnames.

Do you want to reduce load times, improve Core Web Vitals scores, and improve the overall performance of your WordPress site? Jetpack Boost can help in just a few minutes. Built by the people behind WordPress.com, this is the go-to WordPress speed plugin for serious WordPress pros. 

If you’re a website owner, you’ve likely thought about site speed at least once in the past. After all, Google considers speed when determining where to place sites in search results. So, if your site is slow to load, you’re at a disadvantage when it comes to ranking. And we all know that higher rankings lead to more traffic.

So, how do you make sure your WordPress site is loading as quickly as possible? One way is to lazy load your images.

Lazy loading is a technique that delays the rendering of images and videos until they’re needed. Implementing this can speed up your site considerably, and the great news is that you don’t need to be a developer to put this to work.

Today, we’ll show you how to lazy load images and videos in WordPress using two methods: with a plugin and without.

What is lazy loading?

Lazy loading is a common technique used to improve page speed. The idea is simple: instead of loading all images on a page when a visitor first arrives, it only renders the images that are visible. Then, as the visitor scrolls down the page, more images are loaded as needed.

This means that if a visitor never scrolls down to the bottom of a page, images below the area of the page viewed are never loaded. Thus, lazy loading can save precious milliseconds (or even seconds) off your page load time.

Additionally, lazy loading can also help you conserve bandwidth. This is especially important if you have people who visit your site on a mobile device. By deferring the loading of images and videos that are not visible, you can decrease the amount of data used.

How does lazy loading work?

In general, lazy loading works in one of two ways. WordPress, starting with version 5.5, adds an HTML5 attribute called “loading.” In this case, the browser handles all parts of the lazy loading process without the need for any extra JavaScript. 

Another method, developed before HTML5’s attribute, is through some creative JavaScript. In this case, an empty placeholder is served upon page load, then JavaScript is used to load images as they come into the viewport. 

Either way, only the images that are needed by the browser are loaded. Other images are loaded once a visitor scrolls down the page. 

There are a few different ways to do this, which we’ll discuss in more detail below. But that’s the gist of how lazy loading works.

What are the benefits of lazy loading?

There are three primary benefits to lazy loading images:

• Increased site speed
• Reduced bandwidth usage
• Better user experience

Increased site speed is usually the primary motivation for implementing lazy loading. By waiting to render unnecessary images, you can decrease your page load time. This is especially true if you have a lot of images on a page, or if your images are large.

Next, lazy loading can help you conserve bandwidth. If visitors never venture down the page, there’s no wasted bandwidth loading images that they’ll never see.

Finally, lazy loading can improve your user experience. This is because visitors don’t have to wait for all the images on a page to load before they can start engaging with your site. 

Does WordPress lazy load by default?

Yes, as of WordPress 5.5, lazy loading is enabled by default automatically upon installation. However, there are some ways to customize the experience that are pretty straightforward and intuitive. We’ll discuss these methods in more detail below.

Should I lazy load my images? Are there drawbacks?

In most cases, lazy loading your images is a great idea if you want to improve your page speed or conserve bandwidth. However, there are some potential drawbacks to consider as well.

Layout shifting

If you lazy load your images, the layout of your page may shift. For example, if you have a sidebar on the right side of your page, and you lazy load an image that’s located within it, the sidebar may move down to make room. This can be very disorienting for your visitors.

As a general rule, using placeholders is recommended to avoid this issue.

Potential hit to SEO

If you don’t do it properly, lazy loading images can cause search engines, like Google, to have trouble indexing them. Content is king when it comes to rankings, and in this case, you could lose valuable chunks.

Your images may no longer appear in search results and, depending on how important the images are in relation to the rest of the page content (like product images for an ecommerce listing), it could tank your regular search rankings as well. 

That said, if you set up lazy loading properly, this won’t be an issue. That’s why, unless you’re a confident developer, your best course of action is to use a lazy loading plugin or stick with the default lazy loading included with WordPress. 

Plugin conflicts

Additionally, lazy loading can cause issues with some WordPress plugins — like plugins that use images to generate social media previews. 

Any time you make changes to your site, you should test them thoroughly to make sure everything is acting as it should. 

And, in case something does go wrong, have a backup of your WordPress site handy for a quick recovery. 

How to enable lazy loading in WordPress

Lazy loading is now enabled by default in WordPress. If you’re not using a modern WordPress iteration (though we recommend you do), or if you want more granular control over the lazy loading process, you can do so using one of two distinct methods: using a plugin or adding code to your site.

1. Lazy load with a plugin

If you’re not an experienced developer, we recommend using a plugin because any time you edit the code of your site, you risk running into issues. Even if you have backups on hand in case you break something, it still may be best to simply use a reputable plugin. 

Jetpack Boost is a free plugin dedicated to helping you gauge and improve site performance. It offers functionality like: 

• Deferring non-essential JavaScript
• Optimizing CSS loading
• Lazy image loading
• Site performance testing

To get started with Jetpack Boost, download it for free from the WordPress plugin directory.

Or, in your WordPress dashboard, go to Plugins → Add New, then search for “Jetpack Boost” and click Install Now. Once installed, click Activate.

Next, go to the new dashboard menu option titled Boost. Then, click Start for free.

On the next page, scroll down to the large toggle that says Lazy Image Loading and turn it on. Now, take a look at your site and make sure that everything’s rendering properly and looks good. That’s it! Lazy loading is good to go with just a few clicks.

If you want to take things one step further and customize your site’s lazy loading, you can do so using code snippets, which you can add to your functions.php file. Or, you can insert them with a functionality plugin.

Here are just a few tasks you can accomplish:

1. Disable lazy loading on certain pages
2. Set a placeholder that displays until the image is loaded
3. Turn off lazy loading for specific images
4. Turn off lazy loading for a specific CSS class

For example, if you want to exclude a CSS class from the lazy loading process, you would use this code:

function mysite_customize_lazy_images( $blocked_classes ) {

    $blocked_classes[] = 'my-header-image-classname';

    return $blocked_classes;

}

add_filter( 'jetpack_lazy_images_blocked_classes', 'mysite_customize_lazy_images' );

For more details, check out the full lazy loading documentation.

2. How to lazy load images in WordPress without a plugin

As we mentioned earlier, WordPress, by default, enables lazy loading for all images that have set dimensions. You don’t need to turn anything on or add any code to do this. However, there may be times that you want to customize how this functionality works.  

For example, let’s say that you don’t want template images to be included. You would add this code to your functions.php file:

function disable_template_image_lazy_loading( $default, $tag_name, $context ) {
    if ( 'img' === $tag_name && 'wp_get_attachment_image' === $context ) {
        return false;
    }
    return $default;
}
add_filter(
    'wp_lazy_loading_enabled',
    'disable_template_image_lazy_loading',
    10,
    3
);

Or, perhaps you want to get super granular and turn off lazy loading for specific images. You can do this by assigning an extra image class to each image when added to a page or post and then adding that class to the following code in your functions.php file:

function skip_loading_lazy_image_48_large( $value, $image, $context ) {
if ( 'the_content' === $context ) {
$image_url = wp_get_attachment_image_url( 48, ‘medium’ );
if ( false !== strpos( $image, ' src="' . $image_url . '"' )) {
return false;
}
}
return $value;
}
add_filter(
'wp_img_tag_add_loading_attr',
'skip_loading_lazy_image_48_large',
10,
3
);

To add the image class skip-lazy in the above example to an image: 

1. Add the image to the page or post via the Media Library. 
2. After you’ve added the image, find your image settings. This may appear differently depending on whether you are using the Gutenberg Blocks editor, classic editor, or a site builder plugin. The ability to add a new CSS class is usually found in either the Advanced settings area (Gutenberg and classic editors) or towards the bottom of your image settings options (most other site builders). 
3. Add the class skip-lazy to the image and save your update.

You can learn more about the possibilities in WordPress documentation.

How to lazy load videos in WordPress

If you want to lazy load your videos, you can do so by adding code to the video itself in the post or page. This code should look something like this: 

<video controls preload="none" poster="one-does-not-simply-placeholder.jpg">

 <source src="one-does-not-simply.webm" type="video/webm">

 <source src="one-does-not-simply.mp4" type="video/mp4">

</video>

Frequently asked questions about lazy loading in WordPress

Want to learn more about WordPress lazy loading? We’ve answered some frequently asked questions below: 

Is lazy loading and deferring offscreen images the same thing?

Deferring offscreen images means waiting to load images until the rest of the critical, above-the-fold content has loaded. There are several ways to do this, but WordPress sites typically use lazy loading.

Essentially, lazy loading is a method of deferring offscreen images. 

Can I lazy load background images in WordPress?

Yes, you can lazy load background images if you’d like. Jetpack Boost turns on lazy loading for background images. However, depending on how your images are set up, it may not be able to identify all of them. For example, if the image is loaded through the background:url property, the plugin won’t read it as a picture and, therefore, won’t enable lazy loading for it.

In that situation, you can use a tool like Lazy Loader, which will allow you to select the specific background images you want to lazy load.

Can I lazy load a YouTube video?

Yes, you can! To do so, insert the following code snippet from WPOrbit into your theme’s functions.php file. If you’re not sure how to do this, check out our guide to accessing and editing the functions.php file.

<?php
// Do not include the above opening tag.
// WPOrbit code for lazy loading youtube videos. Visit: https://wporbit.net

function iframelazy($content) {
        if(is_single()) {
                
        $content = str_replace('src="https://www.youtube.com/embed/','class="klazyiframe" data-src="https://www.youtube.com/embed/',$content);

	ob_start();
?>
	<script>
	var ytflag = 0;
		
	var myListener = function () {
    	document.removeEventListener('mousemove', myListener, false);
    	lazyloadmyframes();
	};

	document.addEventListener('mousemove', myListener, false);

	window.addEventListener('scroll', function() {
	if(ytflag == 0){
		lazyloadmyframes();
		ytflag = 1;
	}
	});
		
function lazyloadmyframes(){	
	var ytv = document.getElementsByClassName("klazyiframe");
	for (var i = 0; i < ytv.length; i++) {
		ytv[i].src = ytv[i].getAttribute('data-src');
	}
}

</script>
<?php
			
	$jqueryappend = ob_get_contents();
	ob_end_clean();

}

        return $content.$jqueryappend;
}

add_filter('the_content', 'iframelazy');

Does lazy loading impact SEO?

Yes, lazy loading can have a positive impact on your search engine rankings. Google considers site speed when deciding where pages rank in search results. And since lazy loading improves performance, it can also increase Google’s perception of your site.

If you do it manually, instead of using a lazy loading plugin, and make a mistake, it can have a negative impact on SEO by hindering search engines’ abilities to recognize your images. 

Does lazy loading impact user experience?

Yes, lazy loading can improve your user experience because it reduces your site’s load time, while still ensuring that visitors can view your content right away. This, in turn, can improve their perception of your brand.

Do I need a plugin to lazy load my content?

No, you don’t need a plugin to lazy load your content. Lazy loading is enabled in WordPress by default. However, if you want more control over the lazy loading process, you may want to use a plugin.

Is there a downside to lazy loading content?

There aren’t many downsides to lazy loading content. It improves your speed, user experience, and search engine rankings. However, it can occasionally cause odd shifting in your page layouts. Therefore, you should always test your site after enabling lazy loading.

Do I need to lazy load all my content?

No, you don’t need to lazy load all your content. You can choose to lazy load only specific elements, such as images, videos, or iFrames.

What else can I do to improve loading speeds?

In addition to lazy loading, there are a number of other ways you can improve the speed of your WordPress site, including:

• Using a content delivery network (CDN)
• Focusing on improving the same things that also improve Core Web Vitals.
• Optimizing your images
• Enabling browser caching
• Minifying resources

Speed up your site with WordPress lazy loading

Lazy loading your images is a great way to optimize your site’s performance and improve your overall user experience. Jetpack Boost offers the most convenient and robust way to enable lazy loading, while also providing other powerful speed tools. Ready to get started? Get Jetpack Boost!

Images and videos are a great way to make your web pages more engaging and interesting to visitors. But lots of images on your website can slow down your loading times. This can affect your pages’ search engine rankings and your site’s user experience (UX).

Fortunately, you can optimize and compress images to increase site speed. Whether you’re a WordPress expert or a complete beginner, you can find a method that works for you — like using a plugin, a simple online tool, or the image editor on your device. 

In this post, we’ll take a closer look at why you should consider optimizing and compressing images. Then, we’ll show you three ways you can do this and explore other useful strategies for speeding up image delivery.

Why compress and optimize your images?

Before you learn how to optimize images in WordPress, it’s important to understand why you might want to do this. The fact is that large, unoptimized images take up lots of bandwidth and can contribute to slow loading web pages. To give you an idea, when it comes to slow load times, just a four second delay can increase bounce rates by 24 percent.

Additionally, page speed is a ranking factor for Google. Therefore, slow loading times can lead to your pages appearing lower in the search results, making you less visible to searchers.

By optimizing your images, you can get your photos looking their best while using fewer pixels and bytes to serve them on the page.

When you do this, you’ll need to think about your preferred image format. For instance, a PNG is able to utilize ‘lossless’ compression, which doesn’t reduce file sizes too much. This enables you to retain image quality, making it a great choice for web graphics and icons.

Alternatively, you can use JPEG images. While the file size is much smaller, JPEGs can result in a poor quality image when compared to PNGs. In most cases, however, you won’t notice much of a difference. 

How to optimize and compress images in WordPress (3 steps)

Now that you know why image optimization is important for your website, let’s take a look at three steps to optimizing and compressing images for WordPress.

Step 1: Compress your images

Method 1: Use an online compression tool

An online compression tool is a quick way to reduce your image file sizes without any noticeable difference to the image quality. 

But, it does require you to revisit the website each time you want to add an image to your site. This can be fairly time-consuming, but some services do allow you to upload images in bulk. 

One of the most popular online compression tools is Tiny PNG. This is a freemium, user-friendly platform that’s suitable for complete beginners.

With it, you can compress up to 20 images at once, and you’re able to select your preferred format from JPEG, PNG, or WebP. 

All you need to do is upload/drop your image onto the website and the process begins immediately. This will only take a few seconds. Then, you can save your compressed images straight to your preferred cloud storage location or download the files to your computer.

Another useful online tool is Compress JPEG. Similar to Tiny PNG, you can compress up to 20 images at once and download them individually, or grouped together in a zip folder.

The advantage of Compress JPEG is that you’re not limited to JPEGs and PNGs. You’re also able to compress GIFs and PDFs. Although PDFs are document files, they often contain images, charts, and hyperlinks. 

Additionally, PDFs can be hundreds of pages long, which results in large file sizes. By compressing any downloadable PDF files, you offer on your site, you can avoid creating a negative experience for users, making your files easily shareable and accessible to anyone who opens them.

Method 2: Resize and compress images manually with an image editor 

Alternatively, you can resize and compress images with an image editor. This method gives you a lot more control over resizing and cropping your images, but it provides only very basic editing capabilities. 

Of course, you might prefer external editing tools (like Adobe Photoshop), but these can be expensive and most of this software comes with a steep learning curve. 

The most accessible method is to use the photo editor on your operating system. You can use your device’s native tool to reduce your image size, cropping out non-essential parts.

Here’s an example of how you might do this using the Photo application on macOS. Start by opening Photo and selecting your image. Then, hit Edit.

Here, select Crop and drag the corners to shrink your image.

You can also click on Custom to specify the exact height and width of your image. Simply type your dimensions into the box, and select landscape or portrait mode. The image will adjust instantly.

Alternatively, you might prefer to use one of the default options. For example, the Square setting can come in handy if you plan to post your image on social media.

If you decide against the changes you’ve applied, you can click on Reset to revert your image back to its original form. Then, when you’re happy with your image, click on Done.

As we mentioned above, you can also use third-party tools like Adobe Photoshop to resize and compress images.

If you opt for this method, it’s best to consider sticking to JPEGs and PNGs to keep file sizes small while retaining image quality. 

Step 2: Serve your images through Jetpack’s image CDN

A content delivery network (CDN) is a powerful tool that uses a network of servers to quickly and efficiently display your site to visitors based on their location. And while any CDN can help you improve your website speed, Jetpack’s image CDN stands apart due to its unrivaled Photon technology.

Photon starts by re-encoding each image to more modern and lighter formats, like WebP, which reduces file size and takes weight off of your server. Then, it optimizes each image based on the specific device and screen size a visitor is using, creating a bespoke experience for every individual. This means that each and every reader, customer, and client can get the best possible user experience on your site — great for branding, sales, and search engine rankings.

And setting up Jetpack’s CDN couldn’t be any easier. Here’s how you can get started:

1. In your WordPress dashboard, go to Plugins → Add new. Search for “Jetpack.”
2. Click Install now → Activate.
3. You’ll be prompted to connect Jetpack to your WordPress.com account, which enables you to make the most of the powerful features.
4. Return to your WordPress dashboard and navigate to Jetpack → Settings → Performance.
5. In the Performance and speed section, toggle on Enable site accelerator.

And that’s it! Jetpack will go to work right away.

Step 3: Install a speed optimization plugin 

Now it’s time to wrap up your efforts with a final boost of power. You’ll want a speed optimization plugin for this, and the best one to choose is Jetpack Boost. This tool can work automatically, constantly adapting as you add new images or content to your site. 

It will gauge your site’s performance in key areas and provide a report, so you can measure progress. Then, it goes to work to specifically target the metrics that are most important to both your visitors and to search engines. 

Jetpack Boost is quick and easy to install. You can opt for the free Jetpack Boost plugin, or upgrade to the premium version for more advanced features. 

Once activated, you can navigate to Jetpack → Boost in your WordPress dashboard.

Here, you can generate a score to assess your current performance across desktop and mobile devices. This will help you identify areas you need to improve. 

You’re also able to configure your preferred settings for the plugin. For instance, you might want to enable CSS optimization or defer non-essential JavaScript. This allows you to load your most important styles and images quickly.

To do this, simply slide the toggle across for the relevant setting.

The final option is lazy image loading. This is a neat feature that helps you boost speed by only loading images when they’re needed. 

Essentially, images that appear further down your page won’t be loaded until the visitor reaches them. It’s a great way to reduce the burden on your server. 

And one of the best parts about Jetpack Boost is that once you’ve configured your settings, the plugin runs in the background of your site, so it won’t weigh things down.

How to put WordPress speed optimization on autopilot 

Compressing images and graphics before you upload them to WordPress should become a regular part of your process. Then, with the right tools in place, your work is done! 

Jetpack Boost combined with Jetpack’s image CDN is the simplest way to put your WordPress speed optimization on autopilot. These tools work in the background of your site, so you can simply “set and forget” them, without having to bother every time you add new images to your posts or pages.

Jetpack’s CDN will automatically detect new images and add them to its network of servers,  immediately beginning to serve them in the appropriate file formats and resize them based on individual visitors’ needs. 

Jetpack Boost will continue to defer non-essential JavaScript and lazy load images, even new ones you add. Plus, with a paid plan, it will automatically generate critical CSS every time you make a change on your site. 

There are a ton of benefits that you can enjoy by putting speed optimization on autopilot:

• Productivity. You can free up time to focus on more important tasks instead of going back and forth between other tools.
• Reliability. You can rest assured that your site’s speed is optimized no matter what. 
• Speed. Optimization starts as soon as you upload new images or update content, and continues while you tend to other parts of your site.
• Accuracy. With manual processes, there’s always room for human error. You might make a mistake with the CSS, select the wrong file type, or input the wrong dimensions. With your speed optimization on autopilot, once you’ve configured your settings, you’ll get your images exactly how you want them every time.

With all that in mind, combining Jetpack CDN with Jetpack Boost is the best way to optimize your images and speed. You can maximize productivity, boost your search engine rankings, and provide an excellent user experience.

Additional steps to optimize your image delivery 

Now that you know how to optimize and compress images, let’s take a look at some additional steps that you can take to optimize your image delivery.

Resize your images for mobile devices

Resizing your images for mobile devices is another great way to speed up image delivery. This will help you create a responsive website with images that display smoothly across all screen sizes including smartphones, tablets, and desktops. 

This way, you can optimize the user experience for all visitors, no matter what device they use to access your website. This is important because mobile traffic accounts for nearly 60 percent of global web traffic. What’s more, in 2015, Google started rewarding mobile-friendly websites with higher search rankings.  

If you serve poorly-loaded content, glitchy pages, or missing images, you can severely disrupt your user experience and risk sending visitors elsewhere. A great solution is to install Jetpack CDN, which automatically resizes images for different devices. 

Avoid embedding images from external sources

Another factor that contributes to slow load times is image redirects. These occur when you embed images from external sources. Luckily, this issue is simple to resolve. 

To increase your website speed and optimize your UX, you can save the image to your computer, or to a remote location like the cloud. Then, you’re able to upload the image directly to your WordPress website. 

Optimize your image thumbnails

Finally, if you run an ecommerce website, you can boost image delivery by optimizing your thumbnails. 

Large and unoptimized thumbnails can delay your loading times, which can frustrate visitors. You might even end up losing customers as a result.

It’s important to make your thumbnail file sizes as small as possible. This is especially relevant for category pages where you might be displaying lots of thumbnails at once. That’s because lots of unoptimized images can significantly hinder your site speed.

Image from August Apparel

Additionally, where thumbnails are concerned, you might even prioritize file reduction over image quality — especially since your website visitors aren’t likely to notice a reduction in quality if the image is very small. 

What else can I do to speed up my WordPress site?

One of the easiest ways to speed up your WordPress site is to improve your Core Web Vitals score. This score is determined by a set of metrics used by Google to measure your site’s performance. For instance, LCP refers to the time it takes for the largest element on your page to load, like your hero image. 

FCP evaluates the time it takes for the first piece of content to load on your page. With very large image files, you can get poor LCP and FCP scores that can affect your search rankings. 

Other useful ways to speed up your site include minifying CSS, removing (or deferring) unused CSS, and deferring parsing of JavaScript. 

Optimize and compress your WordPress images

While visuals are a great addition to your web pages, too many unoptimized media files can weigh your site down. This can result in poor performance that damages the user experience. Luckily, you can fix this by optimizing and compressing images in WordPress. Then, no matter where your visitors live or what device they’re using, you can serve content quickly.

To recap, here are three steps to optimize and compress images for WordPress:

1. Compress your images with a tool or manually
2. Serve your images through Jetpack’s image CDN
3. Install a speed optimization plugin like Jetpack Boost 

Interactive page elements like dynamic search bars, advanced product filters, and sliders can make your site more user-friendly and engaging. But it’s impossible to create any of these features without using JavaScript or installing WordPress plugins.

Luckily, you can easily create JavaScript design elements by using jQuery in WordPress. You can do this manually or use a plugin to speed up the process.

In this post, we’ll introduce you to jQuery and discuss why you may want to use it. Then, we’ll show you two ways to add custom jQuery scripts to your WordPress site and review some frequently asked questions. 

What is jQuery? (and why you may want to use it)

Before you learn how to add jQuery scripts in WordPress, you’ll need a baseline understanding of jQuery itself. 

In a nutshell, jQuery is a lightweight, open-source JavaScript library that simplifies the way you can write and use this coding language.

It enables you to easily modify and enhance WordPress themes and plugins using JavaScript. This feature can be extremely helpful since JavaScript is essential for many features. 

For example, you need JavaScript for Ajax, event handling, and DOM transversal/manipulation. Ajax functionality, in particular, is practical and popular. Web developers use it to create instant search loading and advanced ecommerce product filtering.

An action from the user, like a click or a search, often triggers these JavaScript features. You also need jQuery to create additional client-side features like sliders, lightbox pop-ups, and more.

Is jQuery included in WordPress by default?

jQuery is such a useful and popular resource that comes included in your WordPress installation by default. You just need to know how to use it! In the next sections, we’ll teach you how to do this. 

What to do before adding jQuery scripts to WordPress

We’ll soon explain how you can add jQuery scripts in WordPress. But first, you should do a few things to safeguard your website before attempting to modify its core files.

Most importantly, it’s always recommended to create a backup of your site. That’s because even the slightest coding error to critical website files can do serious harm. When you make backups, you can easily restore your site to its previous state in an emergency.

If you’re not sure how to back up your WordPress site, or you’re just looking for a tool to streamline the process, Jetpack VaultPress Backup is an excellent option.

Jetpack VaultPress Backup automatically saves every change on your site. Then you can use one-click restores to recover your content quickly. Jetpack even allows you to restore your site from the Jetpack mobile app. Furthermore, if you run into any issues, you can get assistance from the best-in-class customer support — Happiness Engineers! 

To further protect your website, it’s also worth creating a WordPress staging site. Then, you can test your changes before pushing them live.

How to add custom jQuery scripts to WordPress

Now that you know more about jQuery and preparing your site for major changes, let’s discuss two ways to add custom jQuery scripts to WordPress!

Method 1: Add jQuery manually

First, we’ll show you how to add jQuery to WordPress manually. This method might be for you if you have some development experience and want full control over the process. 

It’s worth using a child theme so that any changes you make won’t be overridden when you update your theme. 

Step 1: Go into Compatibility Mode

One of the great things about jQuery is that it allows you to use some familiar shortcuts when coding. Most notably, you can use the $ symbol to represent jQuery. This can save you a lot of time, but some other libraries use this shortcut to represent something different.

Therefore, you’ll want to go into Compatibility Mode and create a unique alias for jQuery. This way, you will avoid conflicts with other libraries. 

You can do this using the following code:

<!-- Putting jQuery into no-conflict mode. -->

http://prototype.js

http://jquery.js

<script>

var $j = jQuery.noConflict();

// $j is now an alias to the jQuery function; creating the new alias is optional.

$j(document).ready(function() {

    $j( "div" ).hide();

});

// The $ variable now has the prototype meaning, which is a shortcut for

// document.getElementById(). mainDiv below is a DOM element, not a jQuery object.

window.onload = function() {

    var mainDiv = $( "main" );

}

</script>

When you action the above script, you’ll be able to use $j as a shortcut instead of $. Alternatively, you could use the following:

<!-- Loading jQuery before other libraries. -->

http://jquery.js

http://prototype.js

<script>

// Use full jQuery function name to reference jQuery.

jQuery( document ).ready(function() {

    jQuery( "div" ).hide();

});

// Use the $ variable as defined in prototype.js

window.onload = function() {

    var mainDiv = $( "main" );

};

</script>

This code snippet will simply prevent any conflicts. Still, you’ll need to use the full name, jQuery, instead of a shortcut.

Step 2: Make a script file

Now that you have the code you need, you’re ready to make a script file. Create a file and give it a descriptive name like “my_new_script_file.js”. Make sure to use the .js extension and add your preferred compatibility code snippet at the top.

At this point, you’ll need to access and edit your theme files, which have their unique folders within your website files. 

Start by connecting to your website using your file manager or a free File Transfer Protocol (FTP) client like FileZilla.

Then, open your root directory. This should be named something like public_html or simply public. Alternatively, it could just be your website’s name.

Next, locate your active theme’s folder and create a new subfolder. Call it /js/. 

Finally, add your new script file to this subfolder. Its contents will differ depending on the feature you’re trying to implement. 

Step 3: Add a jQuery script to your functions.php file

Next, you’ll need to locate your theme’s functions.php file. Both parent and child themes should have one. This is where all manual customizations happen.

Since JavaScript requires enqueuing, you’ll need to use the wp_enqueue_script() function. Your code might look something like this:

function my_theme_scripts() {

    wp_enqueue_script( 'my_new_script_file', get_template_directory_uri() . '/js/my_new_script_file.js', array( 'jquery' ), '1.0.0', true );

}

add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

Make sure to substitute the name of your unique script file and add it to functions.php. This will tell your theme file to use the script file you created in the previous step.

Method 2: Add jQuery with a WordPress plugin

As we have just seen, adding jQuery manually can be time-consuming and a bit risky, especially if you’re not familiar with editing code in WordPress. So, now we’ll show you how to add jQuery with a WordPress plugin.

Step 1: Install a jQuery plugin

First, you’ll need to choose a jQuery plugin. Two of the most popular options are Simple Custom CSS and JS and Advanced Custom Fields.

For this tutorial, we’ll use Advanced Custom Fields. This tool helps you create engaging, interactive features with custom block types. 

The free version has plenty of useful block types for adding elements like button groups, Google Maps, color pickers, oEmbed, and much more. If you want all 30 custom blocks, though, you’ll need to upgrade to the paid version of Advanced Custom Fields. 

Once you’ve selected your preferred plan, simply install and activate the plugin as you usually would. Add any license keys under your plugin settings.

Step 2: Create a new custom field

After you’ve installed and activated the plugin, go to Custom Fields → Add New.

Here, you’ll need to create your first field group. Give it a title next to Add New Field Group. Then, click on Save Changes.

Now, you can start editing the new field. You can expand the options by clicking on Edit below the label.

First, open up the dropdown menu for Field Type, and select one.

Then, fill in the Field Label, Field Name, etc. If you continue to scroll down, you can modify additional settings like Location Rules and Presentation.

Depending on the location you select, you’ll be able to view your new custom block there. In the Block Editor, you can identify the block by the label you designated under Field Label.

When you’re finished, click on Save Changes. You can select the + Add Field button and repeat this process. After that, simply go to one of the locations you chose for your field and start customizing it! 

How to defer jQuery in WordPress

As we’ve discussed, there are plenty of reasons to use JavaScript and jQuery in WordPress. In fact, they’re crucial for certain interactive features that many users take for granted.

But the downside is that these sophisticated client-side elements might slow down your website. So, you may want to automatically defer JavaScript (and, by extension, jQuery) when your WordPress site loads. 

By deferring JavaScript, all the main elements on your site will load before the less critical JavaScript features. Of course, your site visitors probably won’t notice this happening, but it will likely improve their user experience (UX) because the page will appear to load faster.

If you want to automatically defer jQuery on your website, you can use Jetpack Boost to do so.

This plugin can drastically improve your website’s performance overall. As a result, you’ll be able to maintain all your preferred JavaScript features without compromising page speed.

In addition to deferring non-essential JavaScript, Jetpack Boost can optimize CSS loading and apply lazy image loading (among other performance optimizations). Using this tool, you can improve your Core Web Vitals scores and boost your site’s visibility in search results.

Frequently asked questions about jQuery in WordPress

Hopefully, we’ve clarified most of your doubts about jQuery in WordPress. Still, if we missed something, here are some frequently asked questions!

Can you change the jQuery version used in WordPress?

Sometimes themes and plugins can replace or add jQuery versions to your site. Therefore, it’s important to ensure that your version is always up-to-date. You can easily do this using a plugin like jQuery Updater or Version Control for jQuery.

Where can I check the jQuery version on my WordPress site?

You can usually check your jQuery version in a browser. In Google Chrome, simply navigate to your website on the front end. Then, go to View → Developer → JavaScript Console.

Enter jQuery.fn.jquery, and the console should return your site’s current version. 

Can you completely remove jQuery from WordPress?

The short answer is: yes. If you discover that using JavaScript on your site negatively impacts its performance, you may want to remove or ‘deregister’ jQuery. 

To do this, simply add the following code to your functions.php file:

// Remove jQuery

function vpsb_remove_jquery() {

    if (!is_admin()) {

        wp_deregister_script('jquery');

        wp_register_script('jquery', false);

    }

}

add_action('init', 'vpsb_remove_jquery');

Keep in mind you should only completely remove jQuery from your site if it’s drastically slowing down your pages. This likely won’t happen, though, since jQuery already optimizes heavier JavaScript code.

If your site’s speed has deteriorated after adding jQuery, a better alternative would be to use a solution like Jetpack Boost. It can defer non-essential JavaScript.

Can you replace jQuery with vanilla JavaScript?

It is possible to replace jQuery with vanilla JavaScript. But, it might prove challenging if you don’t have much development experience. So, you should consider hiring a developer if you need to do this.

Once again, it’s worth noting that replacing jQuery with vanilla JavaScript is probably unnecessary because jQuery already provides optimal JavaScript code. Most of the time, the minor performance effects of jQuery are usually worth the trouble, and deferring is typically a better option.

If you decide to go this route, it’s worth checking out this guide to adding JavaScript to WordPress. It can help you with the process.

Using jQuery in WordPress

Using complex JavaScript for engaging features on your site can drastically improve the UX and advance your goals. Unfortunately, you may not have the time or development skills to create these interactive elements from scratch. The good news is that you can use jQuery scripts to make this process easier.

To recap, there are two ways you can add jQuery to WordPress. First, you’re able to do this manually by going into Compatibility Mode and creating a script file. Then, add your new script to your functions.php file. Alternatively, you could use a plugin like Advanced Custom Fields to speed up the process and eliminate the need for manual coding.

When you use jQuery to add sophisticated design elements to your website, you can improve the UX and impress your visitors. But multiple interactive features could harm the performance of your web pages. Fortunately, Jetpack Boost can help optimize your site’s speed.

Adding visual elements to your site is an easy way to make your pages more engaging. You might include marketing banners, product images, galleries, or video tutorials. Unfortunately, including a bunch of files can weigh your site down and result in slower performance.

Lazy loading is a great way to relieve pressure on your server while increasing the loading speed of your website. It delays images from rendering for visitors until they’ve scrolled down to their place on the screen. Better yet, some lazy load plugins are free, easy to use, and come with extra features for website optimization. 

In this post, we’ll explore some of the best lazy load plugins for WordPress. Then, we’ll show you how to choose the ideal tool for your needs. 

The seven best lazy load plugins for WordPress

Let’s take a look at seven of the best lazy load plugins for your WordPress website!

1. Jetpack Boost

Jetpack Boost is an all-in-one optimization plugin that increases your overall website loading speed. Not only will you have an efficient lazy loading tool, but you can also enjoy plenty of other features to improve your web performance. 

What’s more, Jetpack is one of the most beginner-friendly options on this list. With a clean, intuitive dashboard, it couldn’t be easier to navigate your way through. 

What really sets Jetpack Boost apart is that it’s built specifically to help you improve metrics like First Contentful Paint (FCP) and Largest Contentful Paint (LCP). Therefore, using Jetpack Boost can help you improve your Core Web Vitals, user experience, and search engine rankings.

Key features of Jetpack Boost

• Simple reports with an instant performance score across mobile and desktop devices
• An intuitive, clean dashboard to view your performance and adjust your settings
• Additional optimization tools that generate critical CSS, among other things

Pros of Jetpack Boost

• It provides SEO insights to enhance your search rankings and Core Web Vitals.
• It optimizes CSS loading and defers non-essential JavaScript.
• You can automate critical CSS with a premium plan.
• It’s made by Automattic — the people behind WordPress.com — so you can rest easy knowing it’s reliable and compatible with most popular themes and plugins.

Cons of Jetpack Boost

• While you can opt for Jetpack’s own CDN, you won’t be able to use a third-party CDN like Cloudflare. 

Ease of use

Jetpack Boost is incredibly easy to set up and maintain. You can install Jetpack Boost just as you would any other WordPress plugin. Then, simply head over to your dashboard and toggle on each of the settings individually.

Price

You can access many of its features through the free Jetpack Boost plugin. To use the automated Critical CSS feature, you’ll need to upgrade to a premium plan, starting at $20 per month.

2. Smush

Smush is a popular image optimization plugin, with over one million active installations. Besides lazy loading in WordPress, Smush also offers image optimization, compression, and resizing tools. 

Like Jetpack, Smush is very easy to use. In fact, once it’s installed, you can get it up and running in just a few seconds. Better yet, Smush is compatible with many themes, plugins, and browsers, so you can go about your business as usual. 

Key features of Smush

• Image optimization, compression, and resizing tools
• Automatic file compression as you upload images to WordPress
• The ability to view all Smush image data directly in your image blocks

Pros of Smush

• You can choose to optimize images individually or in bulk (up to 50 images at a time).
• You can limit the output locations of media like widgets, content areas, and thumbnails.
• Smush Pro comes with Smush CDN and WebP conversion, and it stores backups of your original images.

Cons of Smush

• Smush skips images over 5MB, which could be problematic for some websites like those with portfolios.
• The compression options with the free version may be too simplistic for some users.

Ease of use

Getting started with Smush is super simple. You can activate the features with just the click of a button. This instantly defers the loading of images below the fold. Simply head to the plugin’s settings, visit the Lazy Loading section, and hit Activate.

Price

You can use the free version of the plugin or opt for Smush Pro, starting at $7.50 per month. Additionally, you can test the tool first with a seven-day free trial.

3. Lazy Loader

Lazy Loader is a simple, straightforward plugin that does exactly what it says. You won’t get any fuss or frills with this tool. Instead, you can simply enable/disable lazy load on certain elements and add a spinner animation to loading content. 

Additionally, Lazy Loader can be applied to many types of content, including videos, iframes, audio content, images, and even backgrounds, scripts, and page styles. Therefore, while there are no fancy features to play around with, Lazy Loader is certainly a robust tool.

Key features of Lazy Loader

• The ability to lazy load background images and scripts with manual modifications
• A checkbox to enable/disable lazy loading for specific posts and pages 
• The ability to use the native lazy loading feature in browsers to modify iframes and images

Pros of Lazy Loader

• It defers the loading of all types of content, from page styling to iframes and scripts.
• You can disable lazy loading for images with specific CSS classes, and add filters for the plugin to process.
• It utilizes a “noscript” element as a fallback for disabled JavaScript.

Cons of Lazy Loader

• You’ll need to modify the markup to use it for background images not inserted with inline styles and scripts.

Ease of use

Lazy Loader requires a little more technical expertise if you plan on using it for background images not inserted with inline styles and scripts. But for any other elements, Lazy Loader is pretty easy to set up. Under Settings → Media, configure the exact options that you want, and the plugin gets to work immediately. 

Price

Free.

4. Optimole

Optimole is a full-service cloud-based system that offers lazy loading and resizing. It also enables you to optimize and compress images in WordPress. Plus, you can even take advantage of the Optimole CDN for faster content delivery. 

A unique feature of Optimole is that it replaces all image URLs with cloud-based URLs and compresses them on the fly. Moreover, you can enjoy extra features like format-based optimization, smart cropping, and watermarks.

The free version can handle 5K monthly visitors from over 200 locations. But if that’s not enough, you can always upgrade to the Pro version to accommodate 50K visitors per month. 

Key features of Optimole

• A global CDN at no extra cost
• Full support for page builders 
• Cloud image library support and AVIF support for lower image sizes

Pros of Optimole

• It doesn’t affect layouts, so you can improve your User Experience (UX).
• Optimole supports all image types including WebP and retina.
• It optimizes in real-time based on each visitor’s device.

Cons of Optimole

• Lazy loading isn’t as effective as other tools (sometimes the image is replaced with a blurred image momentarily).
• The Pro option is pricier than others on this list.

Ease of use

Optimole is a fully automated plugin. Therefore, you can “set and forget” the settings, and the tool works in the background of your site, requiring very little ongoing maintenance. Plus, you can uninstall Optimole just as easily, and your site will be left completely intact.

Price

There is a free version of the Optimole tool that is very functional. Alternatively, you can upgrade to accommodate more traffic, use the tool on unlimited sites, and access email support. Paid plans start at $19.08 per month.

5. LazyLoad by WP Rocket

LazyLoad is a powerful yet lightweight plugin with scripts weighing less than 10KB. We say powerful because LazyLoad takes care of all assets on your site, including avatars, thumbnails, iframes, background images, YouTube videos, and more.

It injects JavaScript into your header and delays images without using any JavaScript library like jQuery. With fewer HTTP requests, LazyLoad provides another way to boost speed and improve your LCP score.

Key features of LazyLoad

• The ability to lazy load images in post content or widget text
• Filters that deactivate lazy loading on some pages
• Automatic (or manual) lazy loading for background images

Pros of LazyLoad

• It targets specific goals such as improving metrics on PageSpeed Insights or boosting First Input Delay scores.
• It uses a “transparent” placeholder for images (as opposed to blurring images).
• It replaces YouTube iframes with a preview thumbnail.

Cons of LazyLoad

• Reviews claim that LazyLoad can disrupt image placement, layouts, and other design elements on your site.
• It isn’t the most mobile-friendly plugin.
• It receives less frequent updates than other lazy load plugins.

Ease of use

LazyLoad is easy to install and configure if you stick with the basic options. But, if you want to achieve greater control, like excluding certain pages from lazy loading, you’ll need to manually edit your functions.php file. 

Price

LazyLoad is a free plugin by WP Rocket. Additionally, if you already have the WP Rocket Cache plugin, LazyLoad is included.

6. Lazy Load for Videos

Lazy Load for Videos is one of the best lazy load plugins for video-heavy websites like portfolios or sites with embedded content from YouTube or Vimeo. It works by substituting any embedded video with a clickable image preview, which defers JavaScript.

Better yet, YouTube videos are also loaded in a privacy-enhanced mode. Plus, you can enjoy plenty of customization options, like tweaking the Play button or hiding related video suggestions once the video ends. 

Key features of Lazy Load for Videos

• No vendor lock-in and no custom shortcodes, so your videos will still work if you decide to stop using the tool 
• GDPR compliance, enabling you to display a privacy disclaimer above preview images
• A custom color for your Vimeo player and progress bar

Pros of Lazy Load for Videos

• You can set your embeds to autoplay if you prefer.
• You can hide annotations and YouTube controls to create a clean, neat space.
• It includes extras like pre-roll/post-roll advertisements that you can apply to all videos.

Cons of Lazy Load for Videos

• There are some compatibility issues with the Jetpack “Shortcode Embeds” extension, BuddyPress, and the YouTube Embed WordPress plugin.

Ease of use

Like other plugins on this list, Lazy Load for Videos is super simple to install and manage. Plus, it’s easy to turn the plugin on and off at any time.

Price

Free.

7. a3 Lazy Load

Finally, a3 Lazy Load delivers an exclusive lazy loading service. It’s very easy to set up, even for beginners, and it’s mobile-friendly. 

While the plugin enables your pages to load faster, you can also toggle the setting for videos and iframes, thanks to a3 Lazy Load’s extensive customization options. Better yet, you’re able to include/exclude particular elements and even add some smooth transition effects like fade and spinner.

Key features of a3 Lazy Load

• The ability to use the plugin with content-heavy sites (it’s been tested with 1000 images)
• Lazy loading for thumbnails, avatars, widgets, custom post types, and more
• Full compatibility with WordPress embeds

Pros of a3 Lazy Load

• You can add fade and spinner effects to loading images.
• You can use the On/Off feature to include and exclude elements.
• It’s fully compatible with other useful plugins like WooCommerce, so you can integrate it easily with your online store.

Cons of a3 Lazy Load

• It only works with media that’s been added using core WordPress functions and won’t work with any custom written functions.

Ease of use

a3 Lazy Load is super easy to set up and customize for all user levels.

Price 

There’s a free version available, or you can upgrade to premium. Paid plans start at $24.99 per month for use on five sites. What’s more, you can try a3 Lazy Load free for 14 days and easily cancel the subscription if you decide against it.

The best lazy load plugin: comparison table

	Easy to use	Additional image optimization features	Fully compatible with popular plugins	Free version available
Jetpack Boost	Yes	Yes	Yes	Yes
Smush	Yes	Yes	Yes	Yes
Lazy Loader	Yes	No	Yes	Yes
Optimole	Yes	Yes	Yes	Yes
LazyLoad	Yes	No	Yes	Yes
Lazy Load for Videos	Yes	No	No	Yes
a3 Lazy Load	Yes	No	Yes	Yes

Verdict: what’s the best lazy load plugin for WordPress?

The best lazy load plugin depends on your website needs. For instance, if you have many high-quality images on your site, you might prefer a plugin that offers image optimization features like compression and resizing. 

Additionally, if most of your media files are videos or WebP formats, then it’s important to find a plugin with this capability since some tools will only work with JPEG/JPGs and PNGs. 

With Jetpack Boost, you can tick multiple checkboxes. While you’re able to enjoy extra features like Critical CSS and deferral of non-essential JavaScript, Jetpack Boost isn’t going to weigh your site down with a bunch of tools you don’t need. Instead, these features are used to enhance quick content delivery along with lazy loading.

Better yet, you couldn’t ask for an easier tool to set up and configure. Once it’s installed on your site, simply head to the dashboard, where you’ll use toggles to enable/disable each of the settings. Then, Jetpack Boost works in the background of your site, requiring little to no ongoing maintenance. 

How to choose a lazy load plugin

Now that you know the best lazy load plugins for WordPress, here are some ways to narrow down the right option for your site.

1. Make sure it matches your skill level

Some users might want a more hands-on tool with lots of control configurations and customization options. But for a beginner, all these settings can be intimidating. That’s why finding a lazy load plugin that matches your skill level is important.

If you don’t have a lot of tech experience, you’ll probably prefer a tool that’s easy to install and works automatically. There are plenty of options with “set and forget” options, so there’s no need to tinker around with complicated features and ongoing maintenance. 

2. Check for additional features

If you’re looking for a lazy load plugin, you might simply want a method to delay the loading of images below the fold. Some of these plugins, like LazyLoad and Lazy Loader, do just what they say on the box.

But, for more complex, content-heavy websites, you can benefit from tools that provide additional features to enhance your content delivery. For instance, if you have a portfolio, you might want optimization and compression tools. Meanwhile, photography websites could find a watermarking feature useful. 

3. Find out which image formats and sizes are supported

Typically, most plugins will accommodate popular image formats like JPEGs and PNGs. But not all tools offer lazy loading for animated images like GIFs or videos. Plus, some newer image formats like WebP and Retina might be ignored.

That’s why it’s important to ensure that the lazy load plugin you choose can support all the file types you intend to use on your website. Additionally, keep in mind that the free versions of some plugins are often a lot less powerful. Therefore, while a free lazy load plugin may seem like the best option in the short term, it might not work on large media files.

4. Make sure it’s compatible with other plugins on your website

The last thing you want to do is to get started with a lazy load plugin only to find that it isn’t compatible with other plugins essential to the running of your site. For example, if you own an online store, you probably rely on a platform like WooCommerce. Meanwhile, forum sites utilize specialized plugins like bbPress to gain functionality. 

If the plugin isn’t compatible with other software you’ve installed, you risk breaking your site. Therefore, it’s crucial to pay close attention to the integrations and compatibility of your preferred tool. A good example of this is the Lazy Load for Videos plugin, which doesn’t work with a specific extension of Jetpack.

In general, Jetpack Boost, because it’s made by the people behind WordPress.com, will work reliably with most themes and plugins.

Frequently asked questions about WordPress lazy load plugins

Now that you know how to choose the best lazy load plugin for your site, here are some of the most popular questions about lazy loading.

What makes a good lazy load plugin?

A good lazy load plugin can delay loading your images below the fold. Doing so speeds up the delivery of content that’s immediately visible to your users. While this is the default feature, you can also find lazy load plugins that offer additional features like image optimization, compression, and resizing tools.

On top of that, the best lazy load plugins are automated, easy to use, and compatible with popular plugins like WooCommerce. Plus, it’s vital to find a tool that doesn’t damage your UX or adjust the image quality too visibly since this can be frustrating for your visitors.

How much does a lazy load plugin cost on WordPress?

There are plenty of free lazy load WordPress plugins. But many providers also offer a paid option that might include extra features or handle larger file sizes. It’s important to note that some free tools can be very limited.

That’s why Jetpack Boost is a great option. There’s a completely free version that is super simple to configure. Once you’ve set it up on WordPress, you can lazy load images, defer non-essential JavaScript, and optimize Critical CSS. These settings enable you to speed up content delivery without spending a penny.

Is it easy to set up a lazy load plugin on WordPress?

Lazy load plugins vary in their ease of use. You’ll find more complex tools that require a more hands-on approach and configuration. But you can also opt for simple lazy load plugins that are easy to install and use. 

One of the best features of Jetpack Boost is that you can set it up with just a few clicks. Then, use toggles to enable or disable individual features. Plus, you can deactivate the plugin at any point without damaging your site.

What other features can I get with a lazy load plugin?

You can find lazy load plugins that offer a streamlined service. But if you want to access additional features, it’s worth choosing a tool that offers other features to improve the performance of your site.

Jetpack Boost is a great lazy load plugin because the lazy load service is simple but powerful. Better yet, you’re able to defer non-essential JavaScript, optimize Critical CSS, and with paid plans, you can even automate critical CSS. You can also pair Jetpack Boost with Jetpack’s CDN to further optimize and stabilize your web performance.

Boost your site’s performance with a lazy load plugin

While adding images is a great way to spruce up your site, too many photos can disrupt your UX with slow loading times. Fortunately, with the right lazy load plugin, you’re able to deliver content faster and keep your site running smoothly.

To recap, here are some of the top WordPress lazy load plugins:

1. Jetpack Boost: An easy-to-use plugin with additional features for speed optimization.
2. Smush: A popular image optimization plugin with compression and resizing tools.
3. Lazy Loader: A simple, fuss-free way to lazy load your images.
4. Optimole: A full-service cloud-based system that includes a CDN.
5. Lazy Load by WP Rocket: A lightweight but powerful plugin that helps you target specific goals.
6. Lazy Load for Videos: The best option for video lazy loading, with plenty of customization tools. 
7. A3 Lazy Load: A user-friendly plugin exclusively dedicated to lazy loading.

Overall, using Jetpack Boost is the best plugin to implement lazy loading on your site. Plus, with a bunch of extra features, you can optimize your entire web performance. Get started with Jetpack Boost today!