Quick Fix to Improve Website Speed for Search Engine Optimization Benefits
For the past two years, Google has evaluated a website's page speed as a factor when ranking search results. Despite the fact that digital marketing experts have been recommending site speed improvements for many years (see point #3 and more recently, point #4), the majority of bank and credit union websites we tested in the past year could realize a significant speed boost by just one simple change. In this blog post, we'll look at what it is and a few ways to fix the issue quickly.
Images are the Molasses of the Web
On many modern bank and credit union websites, photos or other images in .gif, .jpg, and .png format are the largest chunk of a page's payload (payload is the total number of bytes sent from a web server to the a visitor's browser), especially home pages. It is common for images to represent more than 50% of a home page's total payload! In other words, in a scenario where all of the content of a 2MB home page is served from a single server, if we can substantially reduce the file size of the images, we can also substantially reduce the page load time.
One solution, arguably the best from a performance standpoint, is to eliminate all images and photos from your web pages. In our scenario above, this would make a 2x improvement in our page load time. Of course, the page would probably be less beautiful and almost assuredly less useful for visitors. A better solution is to optimize our images to reduce the file size to the minimum necessary size without noticeably compromising image quality.
Optimizing Images for Speed on Websites
When we talk about optimizing images, what exactly do we mean? There are three key elements to a well-optimized image:
- Image format
- Image dimensions
- Image compression
If you're skilled with Photoshop or another capable image editing program, you can optimize your images before you even add them to your website. While this is definitely the best practice, many bank or credit union staff responsible for managing websites are not photo editing experts. Fortunately, there are some simple tips you can remember and some easy tools to use to optimize images without taking a Photoshop masterclass.
Image Format - JPG or PNG?
In nearly all cases, large graphics or photos on a website will be in either JPG or PNG format. Neither is universally better than the other; however, there are some simple rules that often hold true. For photographs that do not contain text, JPG will typically allow for a smaller (therefore faster loading) file size. For graphics that contain solid colors or text, such as logos, PNG will often provide crisp lines and legible text, while still compressing well. In all cases, if you're unsure which is going to be best, produce both formats and test the final compressed file size (more on compressing images later). Since many of the large images on bank and credit union websites are often photographs, JPG is quite often the best format that will offer the greatest compression.
Image Dimensions - Create Images Only as Wide and Tall as Necessary
The most egregious offense to page speed that we see routinely are images whose width and height are excessively larger than necessary. When creating a graphic for your website, if you will never display the image greater than 600 x 300 pixels, then you should never upload a 5000 x 3333 pixel version of that image. Even if your HTML code properly sets the display size to 600 x 300, your web server will still download the massive original file that will drag your page speed into the gutter.
Image Compression - Use Free Tools to Minimize File Size
Even if you ignore the previous two suggestions, this final tip is one you absolutely should do immediately since it takes no special skills, requires only minutes, and would yield a payload savings in nearly every bank and credit union website we've tested in the past year -- compress your images!
One of the best free tools for compressing JPG and PNG images is TinyPNG. This tool is free to use, performs remarkably well, and will handle large batches of files with just a few clicks. In four easy steps you'll likely see anywhere from a 10% to a 90% decrease in image file sizes:
- Download the images from your website to a folder on your computer
- Upload those images to the TinyPNG website
- Download the compressed images from TinyPNG
- Upload the compressed images back to your website, overwriting the old, larger versions
Using a CMS like WordPress or Kentico? No problem! If InetSolution developed your website in Kentico or WordPress, you already have our TinyPNG module installed automagically, so there's nothing you need to do as long as you're uploading your images into a media library.
If InetSolution did not develop your website, then there are third-party CMS plugins available for many popular content management systems that you can download and install. Once installed, these modules or plugins will usually automatically compress all new images you upload. Some plugins, such as the one for WordPress, can even automatically compress existing images, saving you the four steps above.
Other Recent Blog Posts
Find this useful?
Want to receive our monthly tip to make your website easier to use and safer? No spam, just good advice. Signup!
Interests