Site speed tips for images and videos

1.3K followers

4 years ago

Hey there,

How is goin'? All good, super fast sites out there, right?

Not mine by the way, I am still struggling and testing staff. I am now in the green area for desktop and orange from mobile for most of my posts - not bad.

As speed is good, we have to deal now with two new factors regarding site speed:

LCP - Largest contentful paint - should be less than 4 seconds
CLS - Cumulative layout shift - should be less than 0.25 seconds

What are these two?

LCP metric

Reports the render time of the largest image or text block visible within the view port.

Let's say your bigger image on your post is as large as 1 MB. It will load the last, being the biggest resource - should be less than 4 seconds in order that you'll pass this test.

CLS metric

Measures the sum total of all individual layout shift scores for every unexpected layout shift that occurs during the entire lifespan of the page.

Let's say you're using Lazy Load Plugin. In this case it is a possibility that when your image will finally load, will shift/ move your text. This should not happen for more than 0.25 seconds.

Why is this a problem for user experience?

Imagine that your visitor is ready to click on your link, the lazy load just finish loading an image, and the text moves. Your visitor will see that, and this is a bad experience according to google. Your rankings will drop, or if the case, will not rise.

Site speed tips for images and videos:

1. Do not use lazy load plugin for images

2. Do not use lazy load plugin for videos

Why? Because, let's say:

You're using lazy load plugin and win, maybe, 2-3 seconds. If you manage to find a plugin which lazy load both images and videos, is somehow good, but if you're using two plugins ... than it is really bad.

You're winning 2-3 second, maybe four, but how much are you loosing by having extra plugins on your site? And where LCP and CLS will be as per user experience metrics?

I bet you'll lose by using plugins!

Do not forget the training! It says clear, do not use plugins if it is not mandatory for your site!

They are not joking, the training need to be followed if you want success ;)

Solutions:

For images:

Edit images yourself! Don't be lazy, as lazy your site will be :))

Use images preferably no bigger than 50 KB.

Example: Featured image no bigger than 600x600 pixel (I only use 400x400) and images in the posts no bigger than 800x800 pixels ( I use 600x600)

In this case, let's say you have 6 images on your posts - should be less than 300 KB all together.

You see - no plugin required for that size. It is true though that you'll have to do all the resizing yourself, but ... we are hard workers, right?

And ... you'll not be having CLS issues, as your images will load in the same time with your text!!!

If you agree with my method, please consider resizing all your images before uploading them on your site. Do not upload them as they are, and use the WP resized.

It is not a good method, as it gives errors, especially with resizing the featured image. It is trying to use the big image instead of the one resized.

You get it, do it on your PC system, not on your site - the image resize.