So how did you go about speeding up your wordpress-powered webpage? Surely you’ve already minified your CSS and JS, you serve your page gzipped and you turned on caching ages ago. Here’s a fairly quick fix on image bandwidth.
Being cheap, optimization only goes so far
If you’re a proud cheapskate like myself as far as hosting is concerned, this usually means you’re on a shared plan with the usual lamp setup. Then that is where the optimization story normally ends, since sophisticated speed-up techniques like varnish aren’t readily available to you. Also, costly CDNs like Amazon S3 are out of the picture for publishers on a budget.
But fear not, as Google has come to help you once more, especially if images make up a reasonable share of your average page content.
Get ready to lose some bits
In an effort to reduce server load at Youtube and to go some way to free themselves from patent struggles, they’ve created the VP8 video codec, and released its lossy frame-minifying code as WEBP.
JPEG is also lossy, but it is decisively outperformed by WEBP, which is the much more recent of both compression technologies. PNG on the other hand is lossless, which makes it highly recommendable to store your original cuts or edits in this format. But you do not want to serve those files to your readers, even if your hosting plan includes unlimited traffic, because it slows down your site, which makes readers unhappy and will tend to make search engines rank your content worse than those of the other guy who did his homework.
Though only given native support by Chrome and Opera, WEBP can be universally used with the help of the nifty webpjs library, which, when served gzipped, only weighs in at around 28kB. In other words, if you have more 80kB of jpgs on each request, your miniscule trouble setting up your site and converting your images to WEBP will have been worthwhile.
Adding support for WEBP is easy, just install the wp-webp plugin from the WordPress Plugin Repository. If you don’t like clogging your WordPresses arteries with too much plugins, you can just add webpjs-0.0.2.min.js using enqueue script. However using the plugin may be more comfortable, since it only serves the support library if needed, sparing chrome users the additional and unneeded request.
You could just use WEBP on new posts, simply convert your photos and infographics before upping them into wp’s media library. For the sake of this tutorial, we’ll be less lazy than that.
Converting each and every one of the pictures in your media library could be rather time consuming. That’s why the gods invented batch processing.
Converting to WEBP, the fast way
– using your favourite ftp-client, copy your uploads-directory to your local harddrive, renaming it to something like uploads2webp
– fire up your webp-capable converter (I use XnConvert, which is available for nearly everyone as it supports Windows, Mac and Linux)
– in the input tab, select the uploads2webp-folder
– we don’t need no actions, so we’re skipping the actions tab
– in the output-tab, select output to folder. Select your output folder, make it a new, empty one, called something like uploadsASwebp
– as filename, enter {Filename}, if not already present.
– choose WEBP from the format-selector, and hit settings
– configure the details as you like, i suggest dropping the metadata and going with quality 80 for best results
– if your uploads are organized in subdirectories, you better check keep subdirectories
– hit convert
– if the processing is done, simply upload your uploadsASwebp-directory back into the wp-content with your ftp-client
– using tools/export in the WordPress admin interface, export all published stories to xml, make sure the file contains all your posts
– now better back this file up, in three places or more, email it to yourself, and put it on a thumbdrive
– next, go to all posts, select all published posts, and delete them
– empty WordPresses recycle bin, otherwise the process will not work
– now you’re pretty happy you made that backup, aren’t you?
– open up the xml file with your text editor, and open the search & replace dialog
– replace all instances of .jpg or .png with .webp and save the xml
– in the WordPress admin interface, select tools->import, and select WordPress
– if you haven’t used it before, you may have to install the WordPress Importer
– select the xml file, and import your posts back into your database
Now check if everything went right, and if it did, head over to pingdom or google page speed online and check how much smaller your site has become. Congrats!
Being perfectionist, don’t forget to gzip webpjs-0.0.x.min.js in the webp-plugin-dir, and if you’ve haven’t done that already, also add
AddEncoding gzip .gz
<filesmatch ".js.gz$">
AddType "text/javascript" .gz
</filesmatch>
to the .htaccess in the root of your wordpress installation.
Happy optimizing!