Last updated on November 15th, 2019 at 08:45 pm
Four Common Image Mistakes Made by BloggersA fast loading blog is important for a number of reasons.
First, page load time is a major SEO factor. Google doesn’t want to send searchers to sites that take for-ev-er to load.
Second, the longer each page on your site takes to load, the less likely visitors are to stick around.
The number one factor slowing most blogs down is image issues. So, I’m going to show you how to compress blog images for a faster blog so that you can improve your SEO and keep visitors around longer.
Why Images Slow Down Your Blog
A website is built from various files like CSS, scripts, HTML and more. Each image on your blog is an individual file.
So, when you blog loads, the visitor’s browser has to load each individual file to create your web page.
To optimize loading, most sites use 1 or very few CSS files, some HTML files and a couple script files. Blogger.com uses a single file in XML format that includes both HTML, CSS and often scripts. This single file actually helps keep your site super fast.
But then you add in all your images and you may have 10, 20 or more image files loading on a page. And that can…slow…your…site…down…
RELATED POST: Four Common Image Mistakes Made by Bloggers
Step 1: Test Your Site Speed
When I’m troubleshooting sites for speed, I always run a quick, free test on Pingdom.com. This super simple tool is free and soooo useful.
To test your site speed, hop over to Pingdom’s Website Speed test and drop your blog web address into the URL box. You can even test each page or post individually, doesn’t have to be your main page.
Next, choose a server location under the Test from box. I usually pick the location closest to me. However, this is also a good way to test how fast your blog is around the world.
After you click the Start test button, it will take a few seconds for the site to test your blog. If it’s really busy you may end up in a queue but it won’t take long.
Speed Test Results
When the test is complete, you’ll see the Summary speed test results at the top of the page.
I’ve used one of our demo sites for the FelicityBlogger template as an example.
- The Load Time is 2.18 seconds. This is pretty good but can get better.
- The Page size is 9.6 MB and this is really too big. This means some rather large files are being loaded.
Under Performance insights, we have a couple issues. Unfortunately, since this is a Blogger site, these aren’t things we can’t fix. There is no way to Leverage browser caching with Blogger or to parallelize downloads across host names. The performance grade of B is really good for a Blogger site. But it can be better, or at least, the Load Time and Page Size can get better.
So, the Page size is something we want to address on this site.
Now, scroll down to find the Content size by content type. This breaks down the files that make up the 9.60 MB Page size.
87.6% or 8.41 MB of the Page size is coming from images. This is something I commonly see on every speed test I run. Image files are large and can really slow down your site, but there is something you can do to fix this and speed up your site.
Compress Blog Images for a Faster Blog
Image files are really code files with lots of code that make up your image. Some image files contain lots of unnecessary coding or white space that make the files larger than they need to be.
But you can compress blog images to reduce their size. When done properly, you won’t loose any image quality, either.
Favorite Image Compression Tools
I have 2 favorite image compression tools. Luckily, they’re FREE, easy to use and online.
I like these sites for a couple reasons:
- They’re FREE.
- They’re available online.
- You can upload multiple files (up to 20 at a time) to optimize.
- You have lots of control over optimization.
- You get a before/after preview of your compression changes.
These tools are:
- Compress JPEG – Use this site to compress your JPG (JPEG) image files.
- Compress PNG – Use this site to compress your PNG image files.
These 2 sites are sister sites and once you learn how to use one site, the other is very similar to use.
In the video below, I walk you through how to compress your images using both tools.
How to Compress your JPG and PNG Image files [VIDEO]
Followup Speed Test
Now, let’s run a new speed test on the Felicity demo site. I compressed my logo plus all of the images seen on the page. So, let’s take a look at the difference in Page size and Load Time.
Woah! OK, my page speed test stats are now:
- Load Time: 1.42 second. That’s a decrease of about 35%!
- Page size: 5.7 MB. So I reduced my page size by about 40%.
In addition, My site Performance grade went from a B to an A.
My Content size by content type for images also dropped from 8.41 MB to 4.47 MB.
And the thing about these results is that I only compressed my images by about 50%. I kept a quality level of 95% to maintain high image quality. I definitely could have made my images even smaller and gotten even better speed.
Compressing Blog Images = Faster Site
There you have it, an example of how to compress your blog images and the dramatic change it can make in your site speed. Happy blogging!