Imagify Vs RabbitLoader: Which One You Should Use To Improve PageSpeed

When optimizing images on your WordPress website, the first plugin that comes to mind is Imagify. Since 2016, this plugin has been used to optimize large images on a WordPress site. 

Several alternative PageSpeed performance optimization plugins are now available in WordPress. RabbitLoader is one of them, and it is popular for increasing your WordPress website’s PageSpeed score.

Imagify vs RabbitLoader

Let’s compare the most image optimization plugins Imagify with RabbitLoader in detail including their usability. Also, inspect the PageSpeed score in Google PageSpeed Insights for a particular website after installing them individually.  

Why Use Image Optimization Plugins

Image optimization tools improve the website’s PageSpeed performance by optimizing image files. This will provide a better user experience, a high conversion rate, a better SEO ranking, and so on. 

Provide A Better User Experience:

Providing a fast-loading website can significantly enhance your user experience. Users will engage with the content of the webpage and spend more time on the website if your website takes less time to load. So, it will reduce the higher bounce rates.

User Experience

According to  Marcus Tober, founder of Searchmetrics, “The best SEO strategy is to focus on the user”.

High Conversion Rate:

conversion rates

A fast-loading website leads to a better user experience. That means the average on-page time will automatically increase. So. if the user spends a huge time on your website then the conversion rate will automatically increase. 

Optimization for Mobile Devices: 

Mobile Optimization

Most people browse the internet on mobile devices. An image optimizer can speed up your website and make it mobile-friendly, which can lead to a good conversion rate. 

What Is Imagify?

Imagify is a popular image optimization tool available in the WordPress ecosystem. By using an advanced image compression algorithm, it can reduce an image file size.

Imagify helps you to speed up your WordPress website with lighter images by converting the original images to AVIF and WebP format. This plugin has a bulk optimization feature, that indicates you can optimize multiple images at once. 

Imagify Banner

By converting images into AVIF and WebP format, Imagify compresses them without affecting their quality. This is called lossless compression. However, some Imagify users reported a noticeable decrease in image quality after optimizing them with RabbitLoader. Furthermore, their free plan applies if the image file size is under 2 Mb. 

What is RabbitLoader

RabbitLoader is a PageSpeed performance optimization tool that applies all optimization techniques essential for improving PageSpeed performance, such as image optimization, CSS and JavaScript optimization, implementing web caching, and others.  

When using WP Media to speed up your website, you need to plug in more than 3-4 optimization tools. For speed optimization, you need to install WP Rocket and to get a premium Content Delivery Network (CDN) install RocketCDN. Whereas, to optimize the image you need to install Imagify. These all are chargeable. It also requires to installation of a lazy loading that is known as Rocket Lazy Loading.   

RabbitLoader banner

Sometimes using too many plugins can decrease the website’s PageSpeed. Plugins also have some code. So, when you are loading a page codes are also executed. It will significantly increase the web page loading time. It is best practice to you less number plugins.

When you are optimizing your website’s PageSpeed performance with RabbitLoader, it’s not required to install different plugins for PageSpeed optimization purposes. RabbitLoader itself is an all-in-one performance optimization tool. 

Imagify vs RabbitLoader: A Comparison Based on Core Features

Now you have some basic idea of WordPress plugins – Imagify and RabbitLoader. Both WordPress plugins optimize your website’s PageSpeed performance. But RabbitLoader has some core features that make it different from Imagify.

Imagify vs RabbitLoader: A detailed comparison

ImagifyRabbitLoader
Key FeaturesImagify plugin is used to optimize images only.RabbitLoader is an all-in-one plugin. 
Besides image optimization, RabbitLoader is used to minify HTML, CSS, and JavaScript files, enable lazy loading and CDN, and many more.
Free VersionA free plan is available in the Imagify plugin. But you can optimize only 20 MB per month.By installing the free version of RabbitLoader plugin you can optimize unlimited Images for 1000 pageviews per month.
PricingWP Rocket’s plan starts at $59. However, for image optimization, you need to install Imagify, which costs around $99. You also need to pay an extra $89 for Rocket CDN. 
So, in Total you need to pay $250/annum.
RabbitLoader pricing is starting from $191/annual. 
When you are installing RabbitLoader, no additional plugins are required. So, there is no extra amount you need to pay to optimize your website PageSpeed.
OptimizeIt can be done manually in the media library if you need to optimize the images instantly. This is a time-consuming process.When you are installing RabbitLoader, all optimization will automatically be processed.

Imagify vs RabbitLoader: optimize an image

Both Imagify and RabbitLoader can optimize images to increase the PageSpeed. Now, which one can give you the best result?

  • Checking an Unoptimized Image Size:

Here, we can see the actual size of an unoptimized image is 93.6 kb. This is a large-size image file. It can increase the loading time of any website.

Without any plugin image size
  • Let’s Check the Image Size After Installing Imagify:

Now, we are installing Imagify in WordPress for image optimization.  Imagify optimizes the image in AVIF format and manages to reduce the size to just 63 kb from 93.6 kb.

With Imagify image size
  • Checking the Image Size After Installing RabbitLoader: 

Finally, by installing RabbitLoder in WordPress, the image size is reduced to 10 kb from 93.6 kb. That indicates good image compression. It also converts the image into AVIF format.    

With RL image size

Imagify vs RabbitLoader: Impact on PageSpeed Score

For a better understanding of the comparison between Imagify and RabbitLoader, we must analyze the PageSpeed performance of the demo WordPress website in Google PageSpeed Insights.

Let’s check the website’s speed without using any optimization tools:

Let’s check the website’s PageSpeed score without using any performance optimization tools. As expected the PageSpeed performance is not up to the mark.

In mobile mode, the website fails the PageSpeed test.  The Google PSI score is very poor, it’s only 33.  This is not good for any website, especially keeping the mobile-first policy of Google in mind. 

The core web vitals metrics that had affected the website’s performance are:

  • First Content Paint (FCP): 4.4s
  • Largest Contentful Paint (LCP): 7.2 s
  • Total Blocking Time(TBT): 1,450 ms
  • Cumulative Layout Shift (CLS): 0.001
  • Speed Index: 10.2 s
Without any plugin Mobile

In desktop mode, the PageSpeed performance score of 68, is not so high but it looks far better than the mobile version. 

Here the Core Web Vitals that affect the PageSpeed performance are:

  • First Contentful Paint (FCP): 1.9s
  • Largest Contentful Paint (LCP): 2.3s
  • Total Blocking Time (TBT):180 ms
  • Cumulative Layout Shift(CLS): 0.009
  • Speed Index: 3.7 s.
Without any plugin desktop

Checking the Website’s Performance after Installing Imagify:

After installing Imagify for image optimization purposes, let’s check the impact on the website’s PageSpeed score.

Well, in mobile mode the PageSpeed is just 37 which means no performance improvement after installing Imagify. Not only that, but the most disappointing thing is even after optimizing the images, the Total Block Time (TBT) is typically increased. 

Here, we can see the performance metrics that affect the PageSpeed:

  • First Contentful Paint (FCP): 3.7 s
  • Largest Contentful Paint (LCP): 5.4 s
  • Total Blocking Time (TBT): 2,650 ms
  • Cumulative Layout Shift (CLS): 0
  • Speed Index: 7.8 s
With imagify mobile

However, in desktop mode, the PageSpeed score is increased to 75 from 68. So, the optimized version of this website managed to achieve a respectable PageSpeed score.

Below are the Core Web Vitals metrics that decrease the performance:

  • First Contentful Paint: 1.9s
  • Largest Contentful Paint: 2.1s
  • Total Blocking Time: 130 ms
  • Cumulative Layout Shift:0
  • Speed index:2.6 s.
With Imagify Desktop

Let’s Check the PageSpeed Performance After Installing RabbitLoader: 

Here, we are installing the all-in-one performance optimizer RabbitLoader, to analyze the performance of the WordPress website PageSpeed. And, here’s the result.

In mobile mode, after installing RabbitLoader, the PageSpeed score improved drastically. While Imagify improved the score from 33 to 37, RabbitLoader improved the score to 75. 

Let’s see the improvement in the performance metrics behind this PageSpeed score improvement. 

  • First Contentful Paint ( From 4.4 s to 3.8 s)
  • Largest Contentful Paint ( From 7.2 s to 4.1 s)
  • Total Block Time ( From 1,450 to 160 ms)
  • Cumulative Layout Shift ( From 0.001 to 0)
  •  Speed Index ( From 10.2 s to 4.6 s)
With RL Mobile

Finally in desktop mode, where the Imagify achieved a respectable 75 from the original PageSpeed score of just 68. RabbitLoader is managed to achieve a near-perfect PageSpeed score of 99 out of 100.

With Rl Desktop

So how RabbitLoader can achieve such a near-perfect score?

RabbitLoader reduced the FCP to just 0.6 from 1.9s. Where LCP became 0.7s from 2.3s, and TBT came down to 30 ms from 180 ms. Also, you can notice the CLS became 0 and the speed index is 1.2s. 

Unoptimized websiteAfter installing Imagify After installing RabbitLoader
Image’s size93.6 kb63 kb10 kb
Mobile version333775
Desktop version687599

Conclusion

In this article, you have understood the difference between Imagify and RabbitLoader. These two WordPress plugins are used to optimize your WordPress site. But without any doubt, RabbitLoader is a more affordable plugin compared to Imagify.     

Now it’s your turn. If you are a new website owner, install the all-in-one optimization plugin RabbitLoader. This one plugin will help you to optimize website large images, enable CDN, minify HTML, CSS, JavaScript files, and many more.

FAQ’s:

  1. Which format can be optimized?

These image optimization tools convert all PNG and JPEG images to AVIF and WebP images in the Next-Gen Formats gallery for optimizing the original image.

  1. What is WebP format?

WebP is an image format which is developed by Google to provide lossless compression for images on the website. The main goal of this format is to compress the image file size without affecting the quality.

  1. What is AVIF?

AVIF is the next-generation image format that is used to provide both lossy and lossless compression as well as features like animation and transparency. 

Document

Get The Best PageSpeed Score
For Your WordPress Website

All in One Optimization Plugin
No Coding Knowledge Required

3 Exclusive Easy Ways to Defer Offscreen Images and Videos to Load Pages Faster

Defer Offscreen images or videos are the ones that are positioned outside the screen (viewport) and hence not visible on the screen when a visitor loads a webpage. By indicating the browser not to load the resources currently outside the visible screen area, page load time can be improved.

Loading offscreen resources may affect user experience by downloading data that isn’t immediately required.

GTMetrix

A massive performance boost can be gained as the media elements contain graphics and are commonly the heaviest resources on any page. Smart lazy-loading also called deferred loading is the solution to such problems on a website.

What Will Happen If Offscreen Images Are Not Deferred?

If you don’t defer offscreen pictures, all such assets of your webpage will load at once when one loads your webpage. It will increase page load time, which will eventually lower user experience and performance score. Let’s explain it with an example.

Let’s imagine your webpage has 15 images and 2 of them are on the front fold. Now if a user visits your website. All 15 images will load at once even if only 2 images are visible and others are below the fold. Your whole HTML structure will block and nothing will render until all the images and other things are completely loaded.

Benefits of Defer Offscreen Images:

Decrease page load time:

Defer Offscreen Images decreases page load time as it loads only the visible images and hence reduces the number of images that need to be loaded. So, your webpage’s HTML structure will not be blocked. Because of this process, the rendering time also decreases.

Saving time and money:

The visitor can only view the generated images if they need them. The user who bounces immediately or doesn’t scroll down will have fewer bytes delivered to their computer. It is literally possible to save money by lazy loading if your CDN provider charges by data transfer and HTTP requests. Those on limited data plans can also save money by lazy loading.

Smart work:

Lazy loading saves computing power and processing time to render a webpage hence saving battery life for hand-held devices such as smartphones or tabs.

Up SEO Ranking:

As the load time decreases and also the site speed increases, the user experience will get better. This will take your website up to the SEO ranking.

Got the point. How to achieve it?

Method 1- use RabbitLoader

The easiest ad best way to defer the loading of resources is to use RabbitLoader on your website. If you are using WordPress, consider trying our free plugin to lazy load images with several other features to score best in Google PageSpeed Insights. Our services can be used for other platforms, including your in-house developed websites with PHP/ASP/NodeJs, etc.

  • Our service can defer pictures used in <img> tags as well as background images by automatically detecting and removing defer offscreen images from the critical rendering path.
  • We can lazy load many other heavies on network media embeds or Iframes such as Google Maps, YouTube/Vimeo videos and load them after the webpage is loaded and rendered.
  • We can lazy load iframes used for lead generation or other marketing forms and make sure they can still be served to visitors as soon as possible
  • Help save your server’s bandwidth or CDN cost as some resources are never loaded if the user doesn’t scroll till that point

I am a geek, suggest me some other ways-

Nice to meet you. We are happy to discuss some of the modern methods we are using internally to best optimize the payload served from our client’s websites. We have discussed in the past how to reduce the image size without losing its quality, and in this post, we are going to focus on various loading techniques to separate out critical and non-critical elements and make the best use of the bandwidth and computation power available on the visitor’s device.

Our research starts from the key idea that only those media elements should be loaded with a high priority which is displayed inside of the viewport. And we know for sure, any such resource requested after TTI (Time to Interactive is the point after which a webpage is capable of reliably responding to user inputs.) is not flagged as a violation in the Lighthouse audit.

Method 2- use “loading” HTML attribute

The <img> tag which is used to embed an image into the document now supports a new attribute called “loading” which tells the browser how the source specified for this element should be loaded. The “loading” attribute is optional and can have two possible values if present-

  • loading = "eager” – If this value is set, the browser loads the image immediately irrespective of the element’s visibility or the position with respect to the viewport
  • loading = "lazy" – The image loading is deferred till the browser thinks that the element is going to be visible soon. Typically it happens when a user scrolls the page and reaches a point precalculated by the browser when the load triggers.

Example-

<img loading="lazy" src="example.webp" alt="image-example" class="img-css-rules">
Defer Offscreen images

Challenges with this approach-

  • For every page, it’s a tedious task to identify pictures appearing above and below the fold and set the appropriate value for the ‘loading’ attribute in advance
  • One size can not fit all. The page may have pictures placed in such a way that on a desktop browser, 6 images appear above the fold, but on a mobile browser, only 3 pictures are appearing on the screen. This attribute can not help you in this situation.
  • You can take the help of JavaScript to set the appropriate values but that may increase the load on the main thread and thus increase the TBT (total blocking time) score of the Lighthouse audit.
  • The feature is not yet supported by some browsers. For a full list of supported browsers with their versions, see the below table.

Browser Compatibility for loading HTML attribute

This feature is now supported by almost all modern browsers except IE, Safari, and Firefox for Android. All Chromium-based browsers may not support it below version 77.

image-lazy-load-support
Image credit –mozilla

Method 3- attach JS listener to elements visibility event

The Intersection Observer API can let your JavaScript listener function know when exactly an element might be entering to viewport or in close proximity. You can then modify the DOM to set the correct source to load the media. This API gives you a superfine control to adjust margins around the viewport to give you buffer time to load the resources without the user observing any broken experience.

user-mouse-scroll

This JavaScript API is used by many plugins along with a fallback or polyfill to lazy load elements on the webpage. You can go on writing it on your own or can pick a plugin like lazysizes and get started quickly.

Example

The below example covers the basic concepts of using this API for an HTML page-

See the Pen
Lazy loading images using IntersectionObserver – example code
by ImageKit.io (@imagekit_io)
on CodePen.

Browser Compatibility for Intersection Observer

This feature is now supported by almost all modern browsers except IE. You can use a polyfill available for Intersection Observer.

interaction-observer-support
Image credit –mozilla

Things to take care of when lazy loading resources

  1. Consider using a placeholder image of small size but similar dimensions to the original image to avoid layout reflow and calculation which is expensive
  2. It’s not a good idea to lazy load images appearing above the fold which should be visible to the user as soon as the page is loaded. This can also impact the CLS score of Core Web Vitals.
  3. Heavy JS functions written to achieve this goal can increase the load on the browser’s main thread and impact the user’s interaction
  4. If a visitor scrolls the page too fast, they may reach a point where the media is still to be loaded. You need the right balance and observe interactions carefully.

For Rabbit Loader users, we have added this as an opt-in feature where iframes and pictures can be routed via our CDN and lazy-loaded in the best possible way across browsers without site owners putting any extra effort. Once enabled, defer offscreen images used in a webpage can be automatically deferred to boost page loading time and improve the speed index.