We should optimize the GNOME core websites by converting our images to JPEG XL
While doing some work today on the core GNOME websites, I took a moment to audit our pages using PageSpeed Insights and found that one of our major issues is that we are using png/jpg images, and this is very suboptimal compared to webp. I did some initial testing and was able to reduce the size of the images on the frontpage by >11x with no noticeable drop in quality.
One of the recommendations offered by PageSpeed Insights was to use the Performance Lab plugin, which is basically a sneak peak at features due to make it into Wordpress core. One of the features of this plugin is that it will convert any jpg images uploaded into an equivalent webp version. The downside of this plugin is that it doesn't (yet) have a way to batch process this conversion to images already existing on the site.
I am asking for the following from @barthalion :
- Can we try to figure out a plugin or a method to bulk convert our current images into webp? There are plugins that will supposedly facilitate this, such as Imagify, but I didn't want to break anything without looping you in first. This is most important for shop.gnome.org where we have a huge collection of very large jpg images that have to be loaded. This was slowing down our page loading by multiple seconds on a new load. Also, as most of the jpgs are auto-populated on shop.gnome.org from Printful, I'd be interested to see if the Performance Lab plugin will convert them behind the scenes or not.
- This is not directly applicable to the webp request, but the other main source of our page loading slowdowns came down to synchronous loading of huge .css and .js files bundled with Wordpress and Oceanwp. There's some plugins to facilitate improving this and to help with async loading of files, such as Autoptimize, but I don't know enough about how this works to do this myself. I don't want to break the sites.