Webp images on amp pages

Hi @hanswitteprins,

1. Do you advice using a cdn next to this? I was trying out bunnycdn, but am not sure if it really is helping.

I do not recommend using a separate CDN, and PhastPress does not support it. Using a separate CDN requires a second HTTPS connection to be made, which slows down page load. Instead, I recommend using a “full-site CDN” such as Cloudflare. This basically proxies your entire site through a CDN.

2 I find that amp pages (generated by the amp plugin) still use the images from the media-library instead of your much smaller webp versions. They load even faster, but the page-size is larger due to the images. Is there a way to change that with your plugin?

PhastPress does not optimize AMP pages because the changes it makes to script and stylesheet loading are not compatible with AMP.

If your AMP pages are loaded from Google search result, Google will optimize the images for you. But if you’re linking directly to AMP pages, that won’t work.

Because image optimization does not cause any problems for the validation of the AMP page, we should be able to do that in PhastPress even for AMP pages. I will look into it, but I can’t tell you when exactly this will be implemented.

–Albert

Hi @hanswitteprins,

It turned out simpler than I thought. I’ve just released PhastPress 1.66 which also optimizes images on AMP pages.

Please update to this version, and let me know if it works for you. ??

If PhastPress works well for you, I’d really appreciate it if you left a review here. Have a nice day.

–Albert

Hi Albert,

Thanks for responding so quickly and even more thanks for solving the problem. I hadn’t received a notice, so missed your reply until I looked just now.

I have done further testing and found that when I activate bunnycdn it caches and deliver the original images and files en like you say it doesn’t work and leads to longer delays in loading. So that’s out of the question. I already have cloudflare setup, so that would help. My total load time is now around 2.5-3seconds, which I find pretty decent as a starting point. The amp pages would help mobile users getting some more speed.

I can confirm that the update works like a charm and now the jpg images are also webp in amp pages. Only files it missed are the favicons and logo, but that are small files.

Learning about webp I understood that it also can replace png files. Is that something you would consider?

After your update, given my current settings, the amp page is now half the size of the normal page and loaded in a decent 2.1-2.3 sec with PageSpeed score A (99%) and YSlow score A (94%).

Also PageSpeed Insight gave the amp page an 82 mobile score and 98 desktop score so that’s much better than where I started. TTI of 3.8s on mobile is not great, but much better than the more than 14 seconds it was in the test.

I have two other questions, but I will add new threads for them, to not pollute this one. These are about a script problem in relation to the month view of the events calendar and deferred loading of media players until after a user has shown intent to watch a video.

Of course I will be happy to give you a 5 star rating on this plugin and the support.

Much thank.

Hans

Hi @hanswitteprins,

Learning about webp I understood that it also can replace png files. Is that something you would consider?

Because PNG images often contain visuals with sharp edges such as logos and screenshots, we don’t want to apply any compression which can lead to artifacts.

I was under the impression that WebP would cause such artifacts (like JPEG) but after some testing it seems that this is not the case.

I have now updated the PhastPress image optimization API so that PNG images are also compressed using WebP, when supported by the browser. You can see the effect on your site by removing PhastPress cache files in wp-content/cache/phastpress or wp-content/plugins/phastpress/cache, wherever you find them.

–Albert

Great thank you.

As I understood, wepb supports both lossless compression as the other kind, so that’s why it can replace both and should cause quality issues like you expected.

I wonder: Why isn’t there an option to clear the cache from within the plugin? I thought I had cache related issues lately when a page didn’t renew and I couldn’t find what cache was causing it, so I thought it would be good to clear the phastpress cache too. Read that I had to delete the folder, what I cannot do from within the admin environment. There are now so many different caches involved (nginx, wp-rocket, cloudflare, phastpress), that sometimes I just clear them all when there are issues. Would be nice to have the controls for that in wp-admin.

Thanks, Hans

Hi @hanswitteprins,

Yeah, there’s no cache clearing button because it should never be needed to clear the cache. PhastPress keeps track of the modification times of all processed files, so that when there’s a change, the cache is automatically updated.

In this case, where there is a change in the way the image processing API works, that doesn’t work.

But since it does come up regularly, I’ll add a button to clear the cache soon.

–Albert

Ok, so it should be bulletproof. Good to know. The request for a button might be mostly for reassurance of the users then. ??

In my case it seemed that the nginx helper didn’t clear the nginx cach enough, and it cleared only after I either saved the page again or cleared the cache via cpanel. So in the end it had nothing to do with your plugin, but when a cause of not refreshing a page isn’t clear, I often just want to make sure everything is refreshed, just to get a fresh start.

Thanks for the clarification.