Slow image replacement to webp

Screenshot of chrome dev console with the load speed: https://snugscent.co.uk/wp-content/uploads/2022/11/Slow-Loading.png
LiteSpeed Report Number: UMLCFPJE

If a page is requested webp images are already replaced. Replacement doesn’t happen on-the-fly, because webp already exist, so loading time has nothing to do with webp replacement.

You have a lot of Javascript files to load and also a video file (winter.mp4). In sum almost 5MB has to load and much Javascript has to be parsed by browser. This takes time, too much time for fast page loading.

@serpentdriver Thanks for coming back to me.

The observations about webp replacement were made directly from the debug log of LiteSpeed. Replacement takes anywhere from 4 to 6 seconds (data from debug log) X 2 with guest mode enabled (Debug log: https://snugscent.co.uk/wp-content/static/debug.log).

Another important thing is that crawler runs every 4 hours, so all pages are cached quite frequently.

In addition, all other pages are having the same issue (Blogs, Categories, Products), and those don’t have that video ??

For some reason, I think that cache gets purged every now and then (auto purge is disabled), which forces LiteSpeed to cache the page and replace images again because I don’t think that images are replaced in non-cached pages.

Again, if you request a page there is no replacement, because replacement is already done if a page is cached. Which image type is loaded it depends on the browser and if a browser supports webp a specific cache copy of the generated (html) source is loaded for those browsers. Therefore there is no delay that causes more loading time.

You report more than 1 issue, but each issue is different. They have nothing to do with each other. Guestmode is Guestmode and crawler is crawler and webp is webp and loading is loading time, so let’s do one after the other.

First of all you should try to reduce the amount of data to load. This can’t be optimized, but causes much loading time.

is your server disk IO okay ?

any external/remote images involved ?

@snugscent

You should think about to remove social media sources like Google and Facebook. The way how Javascript requests are done to Google and Facebook hosts blocks rendering and loading of sources from your own host. You can verify it if you use any adblocker. If enabled loading is much faster.

After long hours of testing, I found the problem – Variations.

My products contained quite a few variations, one even had 121 of them. As per this thread variable product is the same as having multiple single products. This means that when 1 variation product with 121 variations is displayed in the categories, PHP actually loads 121 products.

And for some reason (probably, because of the above), LiteSpeed keeps replacing the “same” image over and over again (I did notice this behaviour in my debug log) until it reaches the last variation. After removing that single product with 121 variations, the loading time was reduced by half.

BTW, product categories without variable products load amazingly fast.

@qtwrk – yes, I did check I/O, nothing out of the ordinary. I am not serving any images (I think) externally – all are hosted locally.

@serpentdriver – I don’t think that removing GA, AW and FB snippets will increase TTFB, because that was my problem which was caused by variations. To avoid JS taking too longs, I have delayed the unnecessary JSs when the page is cached. I will probably do the same with trackers ??

• This reply was modified 1 year, 12 months ago by snugscent.

that makes sense

I once saw a product page with 700 variants , the page takes like “forever” to load , even with no images in it

not sure what we can do about such case , I will forward this to our developers

I have same problem. But my products do not have much variation. Also I have the same problem on my homepage. Whenever I activate webp images via Litespeed, my web pages take longer to interact and load. Here are my homepage Google Pagespeed values before and after webp images activation:

Before: https://drive.google.com/file/d/1p836Si_a5X1fel3quau5GwhNCvdrFnTw/view?usp=share_link

After: https://drive.google.com/file/d/11SysYINu9MkABF9evO8WMFKZx8zKIDu7/view?usp=share_link