Making Images Load Faster On WordPress
It’s widely understood in the WordPress community that including images on your posts and pages increases their attractiveness to users. It’s been demonstrated that blog posts with relevant images can garner over 90% more total views than those without. So, if you’re blogging you should be using images.
However, the large images that tend to have the most impact also bring a cost in load times. All other things being equal, faster loading pages do better in the SERPs and produce a lower bounce rate than pages that force visitors to wait. Ideally, a page should load in less than 2 seconds. Bandwidth intensive pages also do poorly with mobile users who tend to have limits on how much they can download because of both bandwidth caps and slow connections. Your beautiful image-heavy page can improve user experience on the desktop while at the same time degrading it for mobile users.
We need to strike a happy medium between beautiful imagery and quick-loading pages, so, we’re going to have a look at what you can do to make sure your images aren’t slowing down your site any more than is absolutely necessary.
Optimize WordPress Image Sizes
The single best way to increase the speed at which images load is to reduce their size. However, in the age of retina screens there’s only so far we can go with image size reduction before they start to look bad.
JPEGmini is an excellent tool for reducing image size without reducing their quality. You can use the online JPEGmini service, but they also make available Mac and Windows apps that make it easy to process batches of JPEGs at the same time.
Another lossless image optimization tool is Smush.it from Yahoo, which works with PNG files as well as JPEGs and has a very handy WordPress plugin.
Check out this post to know about more image optimization plugins.
Use Image Sprites
If your page contains a lot of images, for each one it will make a request to the server. Every extra request to the server imposes a slight delay in the time a page takes to finish loading. The solution is to combine all those images into one image, called a CSS sprite, which will download with only one request. We can then use CSS to specify which part of the sprite we want to show at each position in the page.
Creating CSS sprites can be challenging, but there’s an online service that does most of the hard work for you: CSS Sprites Generator is a bookmarklet that will look at your pages, find the background images, generate a sprite, and inject the necessary CSS into the page so you can see it in action. The sprites and CSS can then be exported.
Lazy Load Images
Lazy loading is a process whereby only the images that are visible within the browser window are loaded. That gives the appearance that the page is loading more quickly because everything “below the fold” is only loaded when the user scrolls the page and approaches the images.
The best lazy loading plugin for WordPress is BJ Lazy Load.
Use A CDN
Content distribution networks take your site’s static assets, like CSS files, Javascript, and images, and distribute them to servers around the world so that they are served as speedily as possible and reduce the load on your website. One of the easiest ways to get a CDN up and running is to use a caching plugin like Super Cache. While Super Cache won’t reduce the size of your images, it will enable you to plug in a CDN like Amazon’s Cloudflare.
Implementing these simple techniques will allow you to give your users a beautifully image-rich experience on your WordPress without forcing them to wait.
About Graeme Caldwell — Graeme is associated with Nexcess as a inbound marketer. Nexcess is a leading provider of Magento and WordPress hosting. Follow Nexcess on Twitter at @nexcess
