Lazy Loading Gets You A Perfect Speed Test Mobile Result

Does your site pass the Google site speed test for mobile?

Website performance is critical. If your blog or website is slow to load, it is for bad for user experience.

No one is going to wait five or ten seconds for your site to load. Internet speed or download speed needs to be fast.

A slow website will increase your bounce rate and lower your conversion rate.

When you do a website speed test for your site, your desktop speed is usually much better than your mobile speed.

It is because most blogging and website programs are reasonably well built for desktop viewing, and use responsive design to deliver a mobile version.

While this is a practical solution, it has a significant drawback.

If your site is responsive, it will work on mobile devices. But the file sizes of your images are for desktop, so your mobile site speed is much slower.

If you do a Google Pagespeed Insights test, your result might be reasonable and in the green for desktop, but it looks like this for your mobile version.

When you consider that half, or even more, of your website visitors are using mobile devices, you really need to improve your page load time and mobile speed.

There are many free website speed test services you can use for performance monitoring.

However, not all speedtest apps measure mobile site speeds. So don’t be reassured by good results for your desktop site page speed.

WebpageTest allows you to select different mobile versions, so it is an alternative to Google.

Always make sure you can check your mobile version because devices connect with a much lower Internet connection speed.

If your results are unsatisfactory, you have work to do.

How do you improve your mobile performance?

Many factors contribute to slow site speed on both desktop and mobile.

Javascript and CSS files can load too early and block rendering. If you are using WordPress, you can fix this easily fixed by using a caching plugin.

You may have a problem with your web host that causes your TTFB (Time To First Byte) to be a little higher than half a second. However, most hosts are at most only 10 to 20 per cent above this time, which isn’t a big issue.

The biggest issue is almost always images.

When you add an image to a post, it is not compressed, sized or formatted for mobile.

You can use a plugin to help. Smush is a popular plugin for compressing images when you upload. The result will improve your desktop version a little, but not your mobile version.

To improve page load time on mobile, you need to serve much smaller images. But this involves a lot of work.

Until recently, the best solution was to have a separate mobile version of your site or to use AMP pages. Either way, all the images on the existing site had to be replaced with Next-Gen images.

The work involved in either solution could take weeks or months depending on the size of your site.

For most site owners, if you don’t know about an intersection observer API or an img src, data src attribute, class lazy, img tags or img class, then you won’t be building a new mobile site.

Let’s face it. It’s all too hard and time-consuming.

Luckily, now there is an easy way to fix mobile page load time

For the last few weeks, I have been beta testing a new way to make a mobile site really zing.

You might have heard of content delivery networks, lazy loading and deferred offscreen images.

If you haven’t, they are elements that only serve images as a page is loaded and as a user scrolls down the page.

You might have seen this in action on sites such as Medium.

When you first visit a site, an image will appear blurred for a split second. They are called placeholder images.

Then the image appears clearly in an instant.

This is lazy loading in action. As a user scrolls down the page, images are not loaded until they are needed. It makes a page work super fast, especially on mobile devices.

A lazy loader can be applied to any number of images on web pages.

But there is still one element missing from this solution. The images are not in Next-Gen formats.

Luckily, there is now a solution, so you don’t have to replace all your images.

Optimole is a WordPress plugin that does a lot of heavy lifting.

Not only does it lazy load images, but it also replaces your images with a new image URL that delivers Next-Gen images.

On top of that, it resizes images on the fly.

Putting Optimole to the test

I did a lot of tests, and every time I checked a page, it scored very high on a Google mobile speed test.

One of my tests was with a full-width webpage containing ten large uncompressed and unsized images.

In other words, I just slapped a pile of big images on a page and published it. (The images were courtesy of Pixabay, so they didn’t need creative commons attribution.)

When I tested the page on Google, this was the result.

Not surprising considering the size of all of the images.

Then I activated Optimole. You can see the settings I used below. That’s all you have to do.

So what was the result?

For desktop, a perfect score.

For mobile, a near perfect score.

On GTmetrix, close to perfect again.

Remember that these are real-world results for a page full of huge images in high resolution.

Installing the plugin and getting an API key took only a few minutes, and only a few seconds then to activate the settings.

So in less than five minutes, I had a near-perfect mobile page and site.

Learning more about Optimole

To see the plugin in action in the real world, visit the CodeinWP website. It is running on Optimole so you can run tests on its site speed.

You can check your site by going to the Optimole website. Click the Check my Site button and enter your site’s URL. You will see a list of all your images and the savings that can be made on your site.

If you have a small site, there is a free version of the plugin available. But if you have a large site, you might want to consider a premium option.

It has taken you longer to read this article than it will take to get your website running super fast for your mobile visitors. So what are you waiting for?

Note: I have no affiliation with this product. My Optimole review is based on my experiences as a user.