How to Speed up your WordPress Site and Optimise Images
Following up on the Basics of SEO post a while ago we know that site speed is of utmost importance. This is not only due to SEO but also catering for faster browsing requirements by mobile devices and the ever ‘in a rush’ readership.
If we take a site page without any images and flashy functionality we have a page that should load under a second. Providing you have good hosting that is.
Once we start adding images we tend to slow down a page load time. Images are important and add to the value of the message with good copy.
Heres what you need to get your page load times down.
This is by far the most important element if you want to go fast. Hosting will depend on where your site is targeting but in most cases if your site is international, you want to work with a host provider that has a presence globally.
Many folk bad mouth the likes of GoDaddy and CrazyDomains but for some of my international sites I have had better speeds than with smaller ‘local’ host providers. Cloud hosting is a good fix for this as will serve the page from the closest server geographically.
In a case where you are targeting a local population i.e. New Zealand, then you would want to host with a local hosting provider in NZ. Their servers will be NZ based thus will serve a page to New Zealander’s faster than a host provider based overseas.
Utilise Browser Cache.
If you are using WordPress then you can take advantage of cache plugins that will store a copy of your site in the browsers cache and also serve a cached version of your site via your host server.
I have had great success with Quick Cache and never had any issues with it. I have tried W3 Total Cache and WP Super Cache but had bugs, and issues from the moment I installed it. Pick whichever you prefer.
This is a large element of keeping your page load times down. Optimising images essentially means making sure that the image used on your site is as light as possible whilst maintain quality.
A few tricks that I use to keep images light whilst not sacrificing on quality are:
Get to know your site and dimensions. I know that the body copy section of my site is a total of 640px wide (at time of writing this). This means that if I insert an image it will only display at a maximum of 640 px and will be cropped to fit.
That means that I can safely crop / resize an image before uploading to 640px without loosing quality as this is the maximum it will display at.
Save your images for the web at a resolution of 72DPI as this will be sufficient quality whilst keeping the image on the light side.
Image Type and Lossy Compression
Saving as a PNG will give you the ability to seriously rip into the size of an image. Moreover, you are able to use advanced lossy compression to further shrink an image by at least 50% without loosing any quality.
UPDATE: TinyPng now also offer JPEG compression. This is by far the better solution (JPEGs) as they are simply lighter to start with. If you are using an image with transparency then you would obviously stick with PNGs.
My image ritual goes as follows:
- Resize and crop image to a total required size.
- Save image as a PNG
- Upload to TinyPng.com
Keeping your site load times low can be as simple as following the above steps. There are obviously many more things one can do but just following these basics can definitely help your load times.
Your turn, any tips or suggestions? Please share.
Just want to remind you that https://tinypng.com/ is the winner here. The rest of the tricks all help but TinyPng will knock an additional 50-80% off the total weight of an image. The quality loss is minimal at worst. Good luck folks!