Superfast WordPress Websites. Part 1. WEBP Images

1
By: | March 7, 2019 | Tags: , , , , ,

In this post I am going to show you how you can use WEBP for Superfast WordPress Websites.

I feel the need for Speed. I am obsessed when it comes to getting the fastest loading websites. The faster loading the website the better it is. There is nothing that infuriates me more than waiting for images to download, JavaScript to run or huge page loads to render.

As a website developer with over a decades experience I aim to get my sites to load in under 1 second especially on mobile devices that are notorious for slow loading websites.

In this first of many blog posts on Speed I am going to talk about images and how best to shrink down the file size without losing it’s quality so that it keeps the page load speed optimal. More specifically I am going to talk about the awesome new WEBP image format developed by Google.

First of all lets take a look a this image I posted on my Instagram Feed this morning. This first one is in JPEG Format…

Coding Image in JPEG
  • Save
This in JPEG Format is 6.10MB

After running it through Adobe Fireworks but still with the same dimensions of 5120px X 3840px it is now in JPG format..

smaller Coding Image still in JPEG
  • Save
After running it through Adobe Fireworks and saving it as a .jpg file its now a 5.86MB Size

Lets see the same image as a .png image now.

PNG Version of the Coding Image
  • Save
As a .png file and with the same dimensions its now a 25.2MB.

Clearly the .jpg wins in this case. But can we shrink it even more and get a smaller MB file size. Well If we upload the .jpg file to This Website we can by converting the image to WEBP.

Now the .webp is the winner and the smallest as uploading the .jpg file which was a 5.86mb, the conversion shrunk it down to 1.11MB. which is a significant saving without losing the quality of the image.

All that being said, .WEBP does not play well with WordPress yet and we have to edit some code to work with this. Incidentally when I first started to develop and code up this bespoke theme I decided to use as many webp images as I could in my Theme Development.

As you can see from the inspect element on this very blog. The background image is a .WEBP image just to prove that it does work with WordPress

inspect element on this blog
  • Save

In the theme development side of things it was just a simple case of uploading the converted .webp files to my assets folder and referencing them into my main stylesheet.

But this does not solve the problem we have when we want to upload .webp files to the Image Gallery via the WordPress Dashboard and serve the images up in blog posts/pages, slideshows and widgets.

There is however a solution to all this and without the help of adding yet another plugin to your website. While doing my Theme Development I added this code to my functions.php file…

/* ======= Enable WebP =======*/
//enable upload for webp image files.
function webp_upload_mimes($existing_mimes) {
    $existing_mimes['webp'] = 'image/webp';
    return $existing_mimes;
}
add_filter('mime_types', 'webp_upload_mimes');

//enable preview / thumbnail for webp image files.
function webp_is_displayable($result, $path) {
    if ($result === false) {
        $displayable_image_types = array( IMAGETYPE_WEBP );
        $info = @getimagesize( $path );

        if (empty($info)) {
            $result = false;
        } elseif (!in_array($info[2], $displayable_image_types)) {
            $result = false;
        } else {
            $result = true;
        }
    }

    return $result;
}
add_filter('file_is_displayable_image', 'webp_is_displayable', 10, 2);

The above is added to the themes functions.php file but I recommend you run a backup before editing this especially if you are using a downloadable pro theme or even genesis. As I am an experienced theme developer it’s easy for me to build one from scratch as add this kind of functionality to mine and my clients website.

The above is not the only code you need to add. Below is what you need to add to your config.php file in the root of your WordPress install.

define( 'WP_DEBUG', false );
define('ALLOW_UNFILTERED_UPLOADS', true);
/* That's all, stop editing! Happy publishing. */

And that is all there is to it. Other factors come into play when developing WordPress sites/blogs like this like Hosting, CDN’s, Theme Development and plugins.

I have excellent hosting and as a general rule I always explore different options to include into my theme before adding plugins (The les plugins the better) to keep page load fast and website file size down.

although I have not added this site yet to Stackpath CDN, Cloudflare or even activated the WP Rocket caching. My site speed is still pretty good. coming in is just over 5s on a desktop.

GT Metrix Pagespeed Report
  • Save
Pagespeed in Canada on gtmetrix.com

Obviously that’s not the best I want for my site but as I am still developing the site I will only add the cdn, cloudflare and caching capabilities after that will greatly improve my load times. Want to find out better ways to improve your website speed? Here is part 2 of building Superfast WordPress Websites

Any questions? Please leave a comment below and share this post amongst your followers on social media.

No votes yet.
Please wait...

GET ALL MY BEST CONTENT DIRECT TO YOUR INBOX

For value laden, high quality tips, tricks and tutorials to build a world beating blog or website

  1. Phillip Dews | at 1:33 pm

    Love your thoughts on this? I am constantly looking to improve my blogs speed results and images are just a small part of the process. Are there any other ways you can see to speed up blogs? What are your thoughts on Jetpack?
    Feel free to leave me a comment below.
    Phillip
    Phillip Dews recently posted…Superfast WordPress Websites. Part 2. StackpathMy Profile

    No votes yet.
    Please wait...

Would you like to share your thoughts?

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

CommentLuv badge
0 Shares
Copy link
Powered by Social Snap