Site speed ...

A vital SEO factor ... and a never ending problem ...

A problem that involves (too) many factors.

And we all know, that images take the most time to load on your website compared to anything else.

But using eye-catchy images is almost mandatory nowadays ... And obviously, each image will increase your page load time ...

This is why image optimization is so important.

And I'm not talking about a simple image optimizer plugin!

A truly efficient image optimization starts with an offline optimization.

First of all, you need to resize it to the exact display size. If you need a 500x200 px image, is pointless to upload it in its original 2500x1000 px version. Yes, Wordpress will resize it automatically according to your display dimensions, but that means additional calculations and requests, in other words, additional loading time. More than that, Wordpress wont change the file size and obviously, a 100K image will load faster than a 500K image. Not to mention the potential scalability issues ... If you are trying to display a 1377x860 px image as a 500x200 px element, you'll get a blurred & cropped result.

Second: the file type (format). Usually plain 2D graphics will have a smaller file size in GIF format and "real" 3D photos will have a smaller size in JPEG format.

Third: the compression level. A JPEG file can be saved with various compression levels (low, medium, high, max) and believe me, these settings can drastically decrease the file size.

And so on ...

The point: having an image optimizer plugin like EWWW Image Optimizer is a must. But a plugin can't and won't generate miraculous results if you haven't performed an efficient offline optimization.

More precisely, a really effective image optimization strategy includes three components:

• offline optimization

• optimization plugin

• lazy-loaded images

So let's see the third component. And let's start with the concept itself ...

How does lazy loading for images work? Well, basically, you are "delaying" the load of all those images which are not visible in the above the fold area.

In plain English: instead of loading all your images at once, lazy loading downloads only the images that will be visible on users screen. It replaces all other images with a placeholder image, and when the user scrolls down, your website will load the "new" images that are now visible in the browser’s viewing area.

It's a really simple and very efficient method that can help you to increase your spite speed, so I've decided to create this short tutorial to show you how easy is to set up a lazy-load solution for your Wordpress website.

Interested?

Let's dance ...