Every now and then I come across slow-loading websites. I know there are a lot of factors that go into decreasing site loading speed. What’s good though is that most sites can be sped up with just a few simple tweaks. Here are a few thoughts for you to consider in case you think your site’s not loading as quickly as possible.
Optimize Your Images
See the featured image of the snail above? The original file size is 7.22 Megabytes. As displayed on my site, it has a file size of 41.91 Kb. What makes the difference? Image optimization.
There are two easy steps you can take to optimize your images for faster loading.
- Re-size your images
- Run it through optimization software
Re-sizing Images
The dimensions of the snail’s original photo are 4894 pixels wide x 3263 pixels tall. I don’t need it that big to use it in my blog post. I crop and re-size my blog post image dimensions to 1200 x 630 pixels. Why? Because that’s what Facebook currently uses for link sharing. It’s also a recommended size for Twitter and LinkedIn, and it works on Instagram too 🙂
Optimization Software
I run my images through TWO sets of optimization software. The first is a neat online tool called Tiny PNG (https://tinypng.com). Depending on my original source file, the optimized file is usually 10% to 80% smaller in file size. Yes, you read correctly. Up to 80% smaller.
The second round of optimization happens when I load the image to my site. I use a plugin called Imagify (https://imagify.io). I install this plugin automatically on sites I develop for my customers because it does such a good job at reducing file sizes while maintaining image quality. I can often reduce file sizes by another 10~50% with Imagify.
What About Image Resolution?
You can think of image resolution as a measure of image quality. The higher the resolution, the higher the quality. High resolution images are clearer, has sharper edges, and are more defined. Resolution is measured in Pixels Per Inch (PPI). When you change resolution, you are changing the number of pixels per inch.
In the early days of website design it was routine to change the resolution of images to 72 ppi. Interestingly, reducing resolution doesn’t impact the size of the file. What makes the most difference are the physical pixel dimensions of your image.
Other Factors
I’ve talked about reducing the size of a single image in this post. One of the slow sites I was looking at earlier has a 7 MB animated GIF as a major part of the homepage. If the site used a video instead, the file size of the video would be much smaller than 7 MB so the site would load considerably faster. For a detailed look at this topic, click here.
Another thing you can do is reduce the number of images on a page. One site’s homepage I looked at had DOZENS of slideshows. Just for fun, I saved the page as a complete webpage. This downloads every file in use on the page. The HTML page itself was 505 Kb. When all the images were added, the total file size was over 520 MB. Creating a faster loading page for that site would require a combination of image optimization and reducing the number of slideshows on the homepage.
There are many other factors involved in how long a page takes to load, from connection speed to the quality of your web hosting. These are great to consider. My suggestion is to start with the “low hanging fruit” of image optimization and see how far that gets you. Two free services you can use to test your web site’s loading speed are GT Metrix (https://gtmetrix.com) and Pingdom (https://tools.pingdom.com). They’ll give you a heap of information about how your site is downloaded and what you can do to speed things up.
I hope you found this post helpful. If so, please leave us a comment below. If you’re wanting help to speed up your site, please contact me and let’s talk!
Recent Comments