If you’ve never taken image optimization seriously and your WordPress site is slow, then you have the most to gain by doing it right. If your WordPress images are loading slowly, that usually means there is a problem. By focusing on your images, you can prevent a lot of issues related to site performance.
In this post, we’re going to cover why optimizing images is the best place to start when working on WordPress performance optimization. We’ll also go over some tips on how to get started if you need to fix WordPress images that are loading slowly.
Why you need to start with images when doing WordPress Performance Optimization
The web is now a multimedia-rich landscape with videos, podcasts and more images than ever before. Images can help your site stand out in a crowded media landscape, but they come at a cost. If you do not serve your images correctly, your site could be at a disadvantage. If you speed up image loading, you can improve your site’s performance, provide a mobile-friendly user experience, improve SEO and increase conversions.
Images are the Worst Offenders When They’re Done Wrong
Images that are oversized really weigh down your webpages.
If you’re aiming for a webpage file size of 1.5MB, and you add a couple of images that are 2MB each, you’re going to blow right past your budget with just one image.
But images can be much larger. The average size file that the average DSLR produces is between 4MB to 12MB! If you don’t know any better and use a 12MB image, or worse, more than one 12MB image, then you’re really going to screw up your page’s performance big time.
If you get those images to be less than a 1 MB combined, you could potentially cut 20MB from your page weight. Obviously this is a major exaggeration, but the point is to illustrate how much the excess can add up if you don’t do it right.
Something as simple as resizing your images can improve performance dramatically and help you save on hosting charges. Your host does charge you more for the diskspace all those huge images take up. That could cover your WPMU DEV membership right there
We are Living in a Mobile-First World, and I am Mobile-First Girl
Optimising your images for mobile ensures that you’re providing a great user experience for users on all kinds of devices so they keep coming back to your site.
Mobile devices have exploded in popularity, so much so that we now live in a mobile-first world. In July 2018, Google announced that page speed is a ranking factor for mobile searches.
This means when creating your sites, you need to make sure that you’re serving images that sized appropriately for mobile devices that are on slower data connections.
If you’re serving Retina images intended for desktop devices on a tiny viewport, you’re wasting data. For your visitors who don’t have unlimited data plans, this can be very frustrating and expensive.
Image SEO is Back to Being a Way to Drive Traffic
Not only has Google changed how mobile optimization affects ranking, but it has also changed the way image search results are displayed and this has resulted in profound changes to image SEO.
You can now drive traffic to your site when your images appear in image search.
In 2013, Google added a view image button to image search results. When someone would click on that button, they would be taken directly to the image instead of the webpage the image was on. Sites reported a 63% drop in traffic from image search.
In 2018, Google was forced to remove the view image button so traffic has started flowing once again. There is a lot of opportunities to get your images ranked well since SEOs have neglected SEO image optimization.
Image Optimization Affects the Bottom Line
Images can make your WordPress site slow if not served correctly and they can bring down your conversion rate.
If you’re selling products on your site, you can use Google’s mobile page speed test to show you how much potential revenue you’re missing out on. On the results page, scroll down to the bottom, and open the Evaluate the impact of a faster site section.
Not only will image optimization get your more conversions, it will also determine how many potential customers you get to begin with because of search traffic.
Google’s aim is to deliver the best user experience, from search to answer. If you’re providing a great user experience by improving the performance of resource-hogging images, then Google will rank your site higher in search.
How to Make Your WordPress Site Faster by Improving Images
Now that we’ve covered why images are the best place to start, I’m going to share some simple things you can do on your site to speed up image loading.
Delete Unnecessary Images
One of the easiest ways to cut page weight and make fewer HTTP requests, is to limit the number of images on your web pages. If a webpage takes more than 3 seconds to load, consider cutting assets and images that are not contributing to conversions.
Always Make Sure Your Images are the Right Size for their container
If your images are not showing when your site loads, it is probably because your images are way oversized and they’re taking too long to download. To fix this, you need to determine the size the image should be and then replace the image on your site with an image that is appropriately sized.
See our post on scaling images and watch the video below for a couple of methods on how to do this.
Use the correct format and use next-gen formats if possible
Some file formats are larger than others, with animated GIFs being one of the most inefficient file formats ever. You should use the correct format to suit your needs and help you produce the smallest file size possible.
Optimize WordPress Fast by Enabling Lazy Loading
Lazy loading is a quick and easy way to delay the loading of images and other assets that appear below the fold. If the image is not in the browser viewport, then the browser waits to download it so that it can serve what the visitor can see, much much faster.
Lazy loading is relatively easy to implement and there’s a lot of lightweight plugins to get the job done. The plugin file sizes are generally around 1-3kb and can be set up in just a few minutes. We’ve recently added lazy loading to both the free and pro versions of our popular Smush plugin.
Use a CDN to Speed Up Image Loading
CDNs have locations all over the globe so the data transfer required to load your images happens much more quickly. Using a CDN to deliver your images is an easy way to load images faster in WordPress.
While your host may include a CDN with your hosting account to improve the performance of your site, Smush Pro’s CDN was designed specifically with image optimization in mind.
Want an Easy Way to Optimize WordPress?
There’s a lot to figuring out what you need to do to make your WordPress site faster when you’re first getting started. If you don’t know where to begin, images are a safe bet. Properly optimized images yield a lot of different benefits and with all-in-one solutions like Smush Pro, it’s easy to dramatically improve the images on your site in just a few minutes.
Not only will the Smush Pro CDN deliver your images at lightning fast speeds, our CDN will also serve up the perfect size image for your users. In other words, leave the scaling to us! And with lazy loading and the ability to convert your images to next-gen formats, Smush Pro has everything you need to help you make your WordPress site faster.