Google PageSpeed Ranking - The Low Hanging Fruit
This post will show the 'power website owner' how to make some easy improvements to the PageSpeed results for your small business website. [If you're not the type to tinker with your website, forward this to your technical help and ask two questions. Can you do this? How Much?]
A Little Background
Google's PageSpeed is a test used to help Google rank your website. Testing your website is simple, go to PageSpeed enter your website address and hit analyze. Google will test your site and display results with some helpful pointers for improving the performance (and ranking) of your website.
Why Do This?
Imagine you and your competitor have identical websites but your site ranks better on PageSpeed, which website would Google rank higher in the search results?
OK. Some Details Please.
Implementing Google's recommendations for your website is one step in your ongoing quest to improve your website's search engine ranking.
[BTW: In case you didn't know, implementing these recommendations could be thought of as Optimizing your website for Search Engines, or SEO for short!]
The Good News: This article will show you how to get at the 'low hanging fruit', the relatively easy stuff on your SEO quest. Many websites should be able to go from 'Poor' to 'Needs Work' - some of you may be able to reach 'Good' - at least on the desktop tab.
Let's get started.
Step 1 - Measure
Go to Google's PageSpeed and test your website. Take a look at the results (Mobile & Desktop tabs) for the line 'Optimize the following images'. If you see this message then your performance can easily be improved by replacing the images with optimized images, which are already zipped and waiting for you in the next step.
Step 2 - Get The Gold
After the PageSpeed test completes, scroll down and look for your special 'Easter-egg' of free goodies! For the purposes of this example you are only interested in the images, or more correctly the images that Google optimized correctly. Your next step is to filter out the 'false optimizations', the Googlebot is pretty good - but you still have to double check.
Step 3 - Gold Or Fools Gold? - You Decide!
Compare the old and new image with your favourite image viewer, if they look the same visually and have the same dimensions (i.e 800x600), then you should be ok to replace the image.
[More details on file size for anyone interested, for everyone else, skip to Step 4]
A Word about images. There is size and size and size. You will have to check all three and make an intelligent decision.
File Size, Image Size, Pixel Depth Size. What's All This Nonsense & Why Should I Care?
Anyone that knows me, knows I love simplifying technical jargon so smart people can understand it too!
When you are optimizing images - which really means make them load faster for your customers before they get bored and close the screen - there are three basic factors to keep in mind.
File Size (disk space)
If you were to put an image on a USB stick, how much space does it take? When we are talking about 'this size', we are (hopefully) talking Kilobytes (KBs) of file size. For reference, the image in Step 1 is 6.5KB. This is after putting it through https://compressor.io/compress before 'image optimization' is was 17.0KB in size. Heres the weird thing, 1.0KB is an amazingly small image - but that's not important - what is important is that file can be reduced to 6.5KB (or a weight loss of 62%, which, when you look at it this way, is pretty impressive)!
For my visitors that are on nice computers with really nice bandwidth packages, think about what you visitor (potential customer) has available to them when there are 'out on the road' trying to solve a problem with a cell phone on a bad wireless connection - in this case, less is better!
The bottom line: The smaller the file size (if it doesn't affect the visual display) the better.
File Size (Image Size)
This is a length by width measurement measured in pixels. A pixel is the smallest dot your computer screen can produce. If your customer has a computer screen with a different resolution (bigger or smaller) they will have a different pixel size, but generally, you can think of this as like a stand-up family photo frame on your desk. If that picture on your desk is only 4 inches by 5 inches then you don't need a picture that is 8 inches by 10 inches. This is a situation where websites like WordPress can help you AND hurt you at the same time.
You see WordPress wants to make it easy for you, that means fewer questions and more assumptions (i.e. I just want a website and I don't care how that ties into my business productivity).
WordPress will take your (for instance) 800x600 image and do a pretty good job of displaying it in a smaller space on the fly (like say 400X300) - BUT if you only wanted that image to appear once in the 400x300 format, it doesn't make sense to feed WordPress a bigger image and expect it to optimize it on the fly.
The bottom line: Do not upload images of a larger resolution only to have WordPress fix it on the fly. If you have a single image, let's call it image-A and you display it on your website in 3 different places in 3 different resolutions, consider a specific optimized image for each occurrence.
File Size (Pixel Depth)
NOTE: If your vision is colour impaired you may need outside help to deal with this part.
Back in the old days of computing, they boasted about 16 colours! After that is was 32,000 colours, then it went into the millions...
As you 'optimize' your images make sure the new image does not lack the depth, clarity, and perception. The idea is to reduce the file size and the image size without reducing the visual aspects that make it a good image. And there is only one way to make this determination - just look at it!
If you already have access to your hosting admin panel (cPanel, Webmin, Plesk, goPanel, custom,..) look for a File Manager type of icon. Alternately a program like FTP can be used, you will need the username and password which in most cases will be your hosting account username/password. If you're unfamiliar with FTP, it sets up a File Manager type session with your local hard drive in one window and your website in the other. FileZilla is a free open source FTP program that supports Windows, Mac OS & Linux.
The next bit of information you will need is the image location in your website's file structure. Go back to PageSpeed and hover over the first image to reveal the entire link.
Now you're ready to replace the images. To be on the safe side you can simply rename the original image, upload the new image and verify your website.
Try another PageSpeed test after all the images have been replaced. If you are using a caching plugin, you may have to clear the cache before PageSpeed can see the changes.
Achieving 'Good' PageSpeed results can be a slow process with many steps. Hopefully, you are one step closer. Feedback and comments on this tip are welcomed below.
Optimize Images Before Uploading
Google offers an image optimizer but this is obviously not the best method to use for new images. There are programs & websites that let you easily optimize images. I already demonstrated compressor.io, a search with your favourite search engine should uncover other options.