How fast do you want your web pages to load? And how to speed them up…
I recently had a client contact me with concerns about the speed of her website. She had personally been feeling that her site was slow, and had also received some comments from her clients about the issue. It’s important not to dismiss these feelings and feedback because site speed is extremely important, especially when people are accessing your website on a mobile device. For example, Kissmetrics reported:
- 40% of people abandon a website that takes more than 3 seconds to load.
- A 1 second delay in page response can result in a 7% reduction in conversions.
But how do you know if these feelings are fact, to know if there truly is a page loading problem so that you can work out what to do about it?
First things first, I go to two websites to test the speed of a website:
I find Pingdom especially informative and relatively easy to read. Google’s tool, on the hand, can quickly become intimidating with all the tech- and developer- speak.
In Pingdom, the “page load,” “faster than” and “page size” numbers are quick and easy to read, and I especially like being able to compare the site speed based on different servers in different parts of the world. You see, if you are hosted in the US, your distance (and your clients’ distance) from your host’s servers matters as much for websites as driving time from your home does for Walmart. For example, US sites that are not hosted in Australia always benchmark about twice as slow as other countries. That’s one reason why hosts have servers spread all over the US, and perhaps the world.
So, if your customers are in the US then you don’t need to be worrying all that much about your site speed results out of Sweden or Australia.
How fast do you want your pages to load?
In a study conducted by Geoff Kenyon way back in 2011, (referenced here on webdesignerdepot.com) he determined these standards for comparing your website speed against the rest of the Web:
- if your site loads in 5 seconds it is faster than approximately 25% of the web;
- if your site loads in 2.9 seconds it is faster than approximately 50% of the web;
- if your site loads in 1.7 seconds it is faster than approximately 75% of the web.
The Web Designer Depot summarizes your goal nicely:
In Google’s Site Performance for Webmasters video, Maile Ohye, states that “2 seconds is the threshold for e-commerce website acceptability. At Google, we aim for under a half second.”
So let’s keep your goal simple shall we: Aim for 2 seconds!
How does your website’s speed compare to other websites?
Other than using Pingdom’s tool to see exactly how you measure up to other websites, you can also compare your site to Pingdom’s statistics based on websites that have used their tool in the past year:
- Average load time: 5 seconds;
- Average page size: 3Mb;
- Average number of images: 42;
- Average number of http requests: 89.
How do you speed up your website?
There are a LOT of ways you can work on speeding up your site. More than what we can cover in just one blog post. To be frank, the most important factor in your website’s speed is your host. In my client’s case, I knew this wasn’t an issue because we had just moved her website away from HostGator to a smaller, trusted website hosting company, and I personally had experienced (and measured) a dramatic improvement in her page load speed.
So what else was getting in the way of her pages loading fast?
The Pingdom reports showed me that her site loaded at 2.6 seconds from NY state. Just over 3s from Sweden. 4.5s from Australia. I was getting results as low as 1.32s from the Dallas servers.
Digging deeper, the page was measuring about 3.9MB, which if you compare to Pingdom’s averages above is quite large. The report also revealed that about 25% of the page load speed was coming from the large header image.
I popped over to the website and right-clicked on the main header image and chose “View Image Info” to reveal the size and dimensions of the image, which told me that it was over 2.6 megabytes, and it was a PNG. The majority of the page size was being taken up by this one image!
PNG or JPG?
PNG files are typically larger file sizes and are not easily “optimized.” Simply put, it’s difficult to make the file size smaller using image optimization programs which remove a lot of the unnecessary data in the image.
The only time I use a PNG in a website is when the image must have a transparent background to be able to see the backgrounds in the website behind it. Put another way, JPG images have colored in backgrounds and cannot have transparent space in the image.
So the first step is to make sure your images are JPGs whenever possible.
- When creating your images in a program like Canva, save them as a JPG rather than PNG
- If you have to edit an existing image in your website and if you don’t have the original artwork to re-work, right-click on the image in the website and “Save Image As” to your computer
- Then convert the image from a PNG to JPG using: http://png2jpg.com/
For example, I updated my clients header image on her home page to be a JPG instead of a PNG and reduced the file size from 2.6 MB down to 333KB using png2jpg.com
Image Optimization Tools
If you don’t use Adobe Illustrator or Photoshop to optimize your images at the time you “Save For Web” you can use some free online tools to reduce the size of the image even more with tools like https://tinypng.com/.
For example, using the 333KB header image on my client’s home page, I reduced the file size even more to 181KB! That’s a big change from 2.6MB!
I re-uploaded the image, and ran site tests again on Pingdom and it immediately knocked off at least half a second for most of the test locations – which already had such low site speed results that it’s hard to reduce significantly more! Because servers cache your website, it may take a few hours or perhaps even a day for the changes to be reflected all around the world, however, the tests that I ran seemed to reflect the change pretty instantly.
Now, TingPNG has a WordPress plugin that can automatically optimize your images when you upload them to your website but I strongly advise you – and my clients – to crop your images to the correct file size, and optimize them BEFORE you upload them to your website. Don’t make your website and it’s plugins do all the hard yakka for you because the code and activity required to implement your ideal images sizing and optimization also puts a lot of strain on your server and can slow down the website.
When you feel like your website is running slowly, find out if it’s just you (or your client) and run some site speed tests using a tool like Pingdom.
Contact your host to find out what they can do about improving your site’s speed, or find a new host that has a better reputation for speed.
Remove any unnecessary plugins on your website, and make sure your website’s software (ie. WordPress, theme and plugins) are all up-to-date.
And get to work on optimizing your images!
If you still have problems, I highly recommend you check out the site speed packages at https://wpboost.net/ and let the experts lend a helping hand to diagnose and fix your site speed problems once and for all.