Speed Up WordPress Using WEBP Images

When using WordPress to build a website, the site can start out running pretty fast, but can very easily become over-bloated. Every extra plugin, every poorly optimized image, and even YouTube videos or Google Fonts can impact on how fast a page loads.

To see how you measure up, head over and run a free site speed test right now.

If you get a page load time of over 2seconds, then it could be worth your while reading on.
(and just as a word of caution, use any site metrics as a benchmark, not as a difinitive).

The 4 Key Factors To Speeding Up WordPress

  1. Use a website hosting platform that is optimized for WordPress;
  2. Minify your content and scripts by using Autoptimize or similar wP-plugin;
  3. Be careful about what you put on each page, and when it becomes visible to your users
  4. Optimize your images and make sure they load fast;
    1. Overview

      Although other speed factors are mentioned above, such as hosting and minification, this article is going to focus on presenting images.
      This is one major area that can have a massive impact on site speed, and so does deserve special attention.

      If you are wanting to learn more about the other topics, we will link to those related pages as they are available.

      So What Is WebP?

      Imagine you are walking around an art gallery. You see an oil painting that really catches your eye.
      The painting expresses a feeling you want to share with someone, and decide to send it to them.
      The art gallery has a souvenir shop where you can buy copies of the paintings on display.
      You see a full sized version on canvass, but then think how difficult that would be to send to your friend. It would need to be folded or squashed down to stand any chance of getting to them.
      On another stand, you see a postcard of that same painting. Perfect you think. It will fit perfectly through their letterbox.
      You see, you chose the right size for the purpose. You chose the format that would suit the job, rather than making it more difficult.

      Move this thinking on to a website. Why would you try to squeeze an oil painting onto your page, when the postcard would have been the more ideal?

      Why Does The Size of The Image Matter?

      If you use a big image on your site, you are essentially sending a big file to the site visitor’s browser. The browser then sees that it has to resize the image to make it fit.
      This means there is much more data being transmitted, and it takes the users browser more time to resize.
      Yes, we are talking milliseconds, but if you do this several times on one page, you can soon see how this will slow down your site, and deteriroate any good experience a visitor might have.

      If you send the right sized image however, the file will arrive much quicker for your site visitor to see, and the browser will not need to do much work at all to make it fit the space it has been given.

      How to Optimize Images for Speed

      WordPress does do some of the work for you, and can help you to create the diffeent sized images, but a lot of the time, a developer doesn’t even bother to say what sizes are needed each time an image is placed somewhere different.

      The starting point has to come from you. You must spend at least some of your development time, looking at the front end of the site, seeing what your visitors see, rather than being locked in the back end, thinking your work is excellent, but without bothering to check.

      It sounds pretty obvious doesn’t it? I can tell you though that it certainly isn’t that obvious in our own experience.
      We have had many web designers working in our teams over the years, and very few of them ever bother to look at their work in an incognito browser, and to get a true visitor experience.

      We can’t even begin to count how many times web designers have made changes, and when we check, they are simply wrong.
      Web designers have a habit of self-belief in their work, which means they don’t even bother to look and see.

      But you are different, you are already checking that every image is placed on a page in the right format, and is checked from a non-logged in state to see that it is working correctly.

      And now, you have set the site up in good stead. You can now turn your attention in how to get those images delivered to your visitors, no matter whether they are on a 26″ Apple Hi-def screen, or a 5″ mobile phone using 3G.

      Where WebP Comes to Save The Day

      WebP is an image format created by Google, that delivers superior compression for images on the web.
      Google state that:

      • WebP lossless images are 26% smaller in size than comparible PNGs;
      • WebP lossy images are 25-34% smaller than comparable JPEG images;
      • WebP supports transparency, typically providing 3 times smaller file sizes than with the PNG format.

      That’s certainly looks like a great improvement, but how can you leverage this to improve the performance of your website?

      How to Create WebP versions of Your Images?

      First up, don’t get too carried away just yet.
      WebP is not fully supported across all browsers, so you can’t simply remove the old jpg or png images.
      You need to leave the old ones where they are, and look to create the more optimized WebP images as the preferred option to serve up where they are accepted.
      Don’t worry, most of the major browsers already support WebP, such as Google Chrome, Firefox, Opera, and even MS Edge (with an already activated extension).

      So that aside, let’s look at how we optimize our own images, and how you should consider this too.

      Using ShortPixel Image Optimization Plugin

      ShortPixel have added the option to create WebP image versions alongside the existing images, at no extra cost, when optimizing your site images.

      ShortPixel was already one of our GoTo Plugins for WordPress, being easy to integrate with Autoptimize, and extremely cost effective too. In fact, for smaller websites, there could be no cost at all, using their free plan.

      Now, since version 4.1, you can simply turn on WebP conversion through the ShortPixel Advanced Settings option.

      ShortPixel explain that the WebP versions of the images are only generated when the images are optimized. So if you need to add the WebP versions of the images after you optimized the images, the easiest way would be to:

      • Restore the images to their originals;
      • Check the option “WebP Versions”;
      • Relaunch the bulk optimization.

      Then, when it comes to turning on and using the WEBP images, it gets even easier:

      ShortPixel explain:

      • Without Changing the Page Code:

      Checking the “Without altering the page code (via .htaccess)” option will insert a new block of code into the .htaccess file, which will make sure that: A. if your browser supports WebP images and B. if you have both jpg/png and WebP versions of an image, then the server returns the WebP instead of the jpg/png. This has the benefit of serving directly WebP files without altering any of the page code.

      • Altering the page code.

      Now you can use the WebP format by simply checking the corresponding “Altering the page code, using the tag syntax” option in the advanced settings tab of Short Pixel and all your tags will be replaced with tags that include also the .webp images, thus letting the browser choose the best version according to its capabilities.
      The tag also contains a Generate WebP markup tag for fallback reasons, thus also allowing the styles to remain in place.

      UPDATE: LiteSpeed Cache Plugin Now Supported

      For this you need to do two things:

      1. Add this constant in wp-config.php: define(‘SHORTPIXEL_USE_DOUBLE_WEBP_EXTENSION’, true);
      2. Activate the LiteSpeed’s Advanced settings;
      3. Activate the WebP delivery options;
      4. Do not activate LiteSpeed’s option to generate the WebP files – ShortPixel will generate them when optimizing the images (If you already have optimized images, you will need to do a Media Library Restore and then run the bulk again).

      You can now enjoy a faster site that smartly uses WebP images!

Tags: , , , , ,
 
Next Post
Picture showing the Logo of CommonSenSEO Lincoln and a map of the city of Lincoln, UK
Northamptonshire Local SEO Agency

Wellingborough Local SEO Agency – Northamptonshire

Leave a Reply

Your email address will not be published. Required fields are marked *

CommonSenSEO Weekly YouTube Show