Google advertising revenue and traffic reduced by 20% with a 0.5 second slower Page load time. Amazon.com found that every 100ms increase in load time of amazon.com decreased sales by 1% (King, Andrew B.). If time is money then it’s time to improve your Website Page load speed.
There are numerous means of speeding up the loading of Webpage code such as enabling compression (e.g. GZIP), minification (reducing unnecessary space in JavaScript and CSS), compression and so on. Of course your WordPress Site will also benefit from being hosted by a good quality Host and as well as disabling unused Plugins or those that perform duplicate tasks.
One of the biggest culprits in slow loading Pages is usually images. The good news is that there are a few simple ways of making your images load faster which will make a big improvement to your Page load speeds. Page load speed is also a Search Engine Optimization (SEO) factor so it’s worth paying attention to faster loading images.
1. Correct Image File Type
PNG, GIF and JPG/JPEG generally cannot be used interchangeably and BMP and TIFF formats shouldn’t be used on Webpages! PNG and GIF are best for line-art such as logos whereas JPG format is best for photos. GIF supports less colours than PNG but GIF is good for line-art images with 256 colours or less. Using an inappropriate format will result in reduced image quality and increased file size (and so will be slower to load). The disadvantage of JPG is that it doesn’t allow for transparent backgrounds.
2. Lossless Image Optimization
This is absolutely the simplest means of reducing image file sizes whilst maintaining image quality. Yahoo provides a great free tool called Smush.it and here is how it is described:
‘Smush.it uses optimization techniques specific to image format to remove unnecessary bytes from image files. It is a “lossless” tool, which means it optimizes the images without changing their look or visual quality. After Smush.it runs on a web page it reports how many bytes would be saved by optimizing the page’s images and provides a downloadable zip file with the minimized image files’.
There is also a great WordPress Plugin that automagically ‘smushes’ images as you load upload them into the Media Library. The Plugin is called WP Smush.it.
3. Specify Image Dimensions in HTML
When initially laying out a Webpage, the browser uses various defined dimensions in CSS and HTML to calculate the layout of the WebPage and then starts to load the information to place into the layout. If the width and height of an image is defined then the Browser is able to complete understanding the layout and is able to start to load content such as text before having to load the image. If image dimensions aren’t defined then the Browser needs to load the image before loading the rest of the content. As images are generally slow to load due to their relatively large file size, waiting for an image to load before loading other content slows Page load speed.
WordPress by default includes the image height and width in the HTML when inserting an image into a Page or Post.
4. Correct Image Dimensions
Following on from the necessity of defining the width and height of an image in HTML comes the best practice of saving images in the same size as required for your Webpage/Website. In WordPress it’s possible to reduce the display dimensions of an image (as it’s possible in HTML). Whilst convenient, the full size of the image is still required to be transferred and processed by the browser and then the image size is reduced as defined.
It is far better to resize images to the required display size and then embed/insert the images at 100% image size.
5. Use Images Repeatedly
You may have noticed that on all good Websites a single image may be used in multiple places. This is hugely beneficial as a cached image may then be used in place of reloading a new image on a Page. To use a simple example, the Amazon.com logo is the same image on (almost) all amazon.com Webpages. Even although you may view multiple amazon.com Pages during a visit the Browser only needs to transfer the amazon.com logo once.
It’s a great idea to use the same images in your WordPress media library on different Pages and Posts particularly if you use a single image on many Pages or Posts.
There you have it, a few simple ways of improving your SEO through paying a bit more attention to the use of images on your Website.
Great tutorial! I learned things that I never knew before. Thank you for sharing it with us.