Looking to resolve the “Serve images in next-gen formats” warning in PageSpeed Insights? This is a step-by-step guide for a WordPress website. This is for sites that are using S3 to host all media. The implementation that inspired this post used WP Offload Media, but the steps involving that tool are likely simple enough that they’ll carry over to other offloading plugins, so I’ve abstracted that part of the instructions to be plugin-agnostic.
Instructions
- Add the EWWW Image Optimizer plugin to your project (WP Packagist has it at the time of writing).
- Activate EWWW and go to its settings page
- Turn on Ludicrous Mode so you can see all settings
- Ensure both WebP Conversion and Force WebP are turned on (Force WebP is regrettable, but it’s necessary if you don’t have local copies of your images, as specified in the linked article).
- Save your settings changes.
- If you have pre-existing media, you’ll want to run a Bulk Optimize as outlined below to make sure all your images have a WebP version available.
- Use your media offloading plugin to copy all media from the bucket to the server if they aren’t there already.
- Run EWWW’s Bulk Optimize tool (Media > Bulk Optimize) with the WebP Only and Force re-optimize options checked. Theoretically, it should work without these checked, but both seem to skip over some items unnecessarily when unchecked, leading to an incomplete bulk optimization. If you want to compress as well, it may be best to do that in a separate optimization step.
- After all media has been converted, copy everything back to the bucket from the server.
- Now you need to choose a WebP delivery method. Go back to the EWWW settings and scroll to the bottom of the Basic tab where it says “WebP Delivery Method”. Picture WebP Rewriting was chosen for my implementation since it uses native browser functionality designed for exactly this purpose and requires no JS injection. If you have extra URL patterns that you want to be rewritten, add them to the WebP URLs section as described in this article, which is the same as the one linked for the Force WebP option above.
Hopefully, if you followed these instructions, you should now be serving WebP images to customers whose browsers support the format, all from your S3 bucket. You can delete the images from the server now if you want them only stored on the bucket.
