Huge WordPress Page Speed Optimization by Image Editing

WordPress page speed optimization is one of the most important factors if you want to attract visitors to your website. Statistics have show that among people who use mobile devices, more than half of them will abort trying to open a website if it takes more than 3 seconds to load.

Hence, optimizing the speed of a website is crucial. In this article, I’m going to take a sample of websites and show how much you can, on average, speed up a website by CORRECT image editing ALONE. 

Website Selection for Our WordPress Page Speed Optimization

We are going to make the most homogeneous selection possible by choosing websites within the same industry and geographical location:

• Industry: plumbing
• Geographical location: Greater Copenhagen area

It can be argued that we could make the selection even narrower by considering factors such as for example the size of the company behind the websites and narrowing down services. However, in order to avoid making things too complicated, we will stick with this approach.

“…more than half of them will abort trying to open a website
if it takes more than 3 seconds to load…”

Outranking Local Competitors Within the Same Industry With WordPress Page Speed Optimization

That being said, by choosing websites that represent companies within the same industry and area, we gain a better understanding of what such companies can do to rank higher compared to their competitors.

And what if their patience runs out before the page is loaded? That means they might choose a competitor instead of you if you don’t improve your WordPress page speed optimization!

Now, Before Looking At the Actual Sample, We Are Going to First Look At:

• Google’s PageSpeed Insight – in order to measure site speed and MOST IMPORTANTLY WordPress page speed optimization potential
• The relevant metrics
• A few websites examples where we measure how much of the total WordPress page speed optimization potential is made up of correct image editing alone

PageSpeed Insights to Measure Website Performance

PageSpeed Insights is a tool developed by Google that anyone can use, without logging in, in order to see how well a website performs concerning:

• Speed
• Accessibility
• Best practices
• SEO

In this article we are only going to look at the speed factor.

WordPress Page Speed Optimization – Total Metrics

When entering a website, we will see a section showing us opportunities for improving the speed of the website, such as:

• Eliminate render-blocking resources
• Reduce unused CSS
• Reduce unused JavaScript
• Reduce initial server response time
• Serve images in next-gen formats
• Defer offscreen images
• Efficiently encode images
• Properly size images
• Minify JavaScript

Opportunities for WordPress Page Speed Optimization – By Correct Image Editing

The following opportunities for WordPress page speed optimization can be addressed through image editing alone:

• Serve images in next-gen formats
• Efficiently encode images
• Properly size images

The approach here is to evaluate the extent to which WordPress page speed optimization can be achieved by:

Using the Webp Format for Our Images

Next-gen images such as webp can achieve the same picture quality even though they have a significantly lower size.

Using the Correct Dimensions

Correct WordPress image dimensions will help with the website speed:

• 1200 x 900 px for featured images
• 1200 x 630 px for images within the actual post or page

Keeping the File Size Under a Certain Limit

The file size of an image is probably the most critical factor. I have seen many examples where pages have image sizes that are more than a MB – that really slows down the load time for the website!

Image files should preferably be below 100 kb. Sometimes you might need to go a bit beyond it if you need to illustrate some details in an infographic or similar. But on average this ought to be the rule of thumb.

We are now going to look at a few company website examples and see what can be done in order to improve their WordPress page speed optimization.

Jendrekson

Jendrekson is a company in Malmö, Sweden that renovates bathrooms for individuals and companies.

Jendrekson Website

Their website looks like this:

Next, we will enter their website address into PageSpeed Insights.

Jendrekson Main Results

In the results below we observe the following metrics:

• Website speed performance: 27
• Accessibility: 88
• Best practices: 92
• SEO score: 93

With a performance score of only 27, it is evident that they need to prioritize improving their WordPress page speed optimization as much as possible!

Time to interactive: 17.2 s in the test. This shows us how long it takes for the site to become fully interactive.

Now, we move on to the detailed results about what the website owner can do in order to improve their website speed.

Jendrekson Detailed Results

In order to improve website speed, the owner can:

• Eliminate render-blocking issues and save about 4.24 s
• Reduce unused CSS and save about 2.85 s
• Reduce unused JavaScript and save about 2.33 s
• Reduce initial server response time and save about 2.16 s
• Serve images in next-gen formats and save about 1.35 s
• Defer offscreen images and save about 0.3 s
• Efficiently encode images and save about 0.15 s

The total potential savings will hence be: 4.24 + 2.85 + 2.33 + 2.16 + 1.35 + 0.3 + 0.15 = 13.38 s

The image editing related savings consist of:

• Next-gen format savings: 1.35 s
• Efficiently encode images : 0.15 s

Total image editing related savings: 1.35 + 0.15 = 1.5 s

By dividing the total image editing related savings by the total potential savings we get: 1.5 / 13.38 = 0.11

In other words, image editing accounts for approximately 11% of our total potential speed savings.

Please note that “defer offscreen images” is not image editing related per se, and therefore we will not include that in our image editing related savings category.

We will now move on to the next company and their website.

24 Center

24 Center AB is a company that provides various services, among them plumbing, to cities in different parts of Sweden, one of them being Malmö.

24 Center Website

Their website looks like this:

Now, we are going to enter their website address into PageSpeed Insights as well.

24 Center Main Results

In the results below we this time observe the following metrics:

• Website speed performance: 67
• Accessibility: 97
• Best practices: 100
• SEO score: 82

This time, the website showed us a time to interactive delay of 4.3 s.

Now, we move on to the detailed results about what this website owner can do in order to improve their website speed.

24 Center Detailed Results

In order to improve website speed the owner can:

• Reduce unused CSS and save about 0.45 s
• Properly size images and save about 0.15 s

The total potential savings will hence be: 0.45 + 0.15 = 0.6

The image editing related savings consist of:

• Properly size images: 0.15 s

Total image editing related savings: 0.15 s

By dividing the total image editing related savings by the total potential savings we get: 0.15 / 0.6 = 0.25

In other words the image editing make up around 25% of our total potential speed savings.

We will now move on to the next company and their website.

Esos Bygg

Esos Bygg is a company located in Malmö, Sweden which conducts bathroom renovations. Plumbing will hence be one of their activities.

Esos Bygg Website

The company website looks as follows:

Now, let’s put their website address into PageSpeed Insights.

Esos Bygg Main Results

The website analysis on PageSpeed gives us the following metrics:

• Website speed performance: 71
• Accessibility: 92
• Best practices: 100
• SEO score: 95

The time to interactive delay turned out to be 4.8 s.

Let’s look at the more detailed results in regards to the WordPress page speed optimization potential.

Esos Bygg Detailed Results

In order to improve their WordPress page speed optimization the owner can:

• Eliminate render-blocking resources and save about 1.9 s
• Reduce unused CSS and save about 0.6 s
• Serve images in next-gen formats and save about 0.6 s
• Reduce unused JavaScript and save about 0.45 s
• Properly size images and save about 0.3 s
• Minify JavaScript and save about 0.15 s

The total potential savings will hence be: 1.9 + 0.6 + 0.6 + 0.45 + 0.3 + 0.15 = 4 s

The image editing related savings consist of:

• Properly size images: 0.3 s
• Serve images in next-gen formats: 0.6 s

Total image editing related savings: 0.3 + 0.6 = 0.9 s

By dividing the total image editing related savings by the total potential savings we get: 0.9 / 4 = 0.23

In other words the potential savings from image editing alone make up 23% of our total potential speed savings.

Full Company List

Our full sample is spread out across the Greater Copenhagen region and, as earlier noted, consists of websites belonging to companies involved in the same industry.

The Numbers

The following list brings up the name of each company, their website address, potential savings by image editing, the total savings potential as well as the potential savings by image editing in relation to the total savings potential.

Some Calculations

The mean savings potential of the total savings is calculated by ΣX / n where X is made up of the Image / Total value and n the number of entries (i.e. 31). We then get a mean of around 0.34, or 34%.

That means that these companies on average can increase their WordPress page speed optimization by 34% only by editing their images correctly!

The median we get by first calculating the location 50th percentile, i.e. LP =  (n + 1) * (P / 100) where n is the number of entries and P = 50. Our calculations give us that LP = 16.

We then order the Image / Total values in an ascending fashion and select the corresponding entry in the list (i.e. the 16th entry). The median turns out to be 0.3, or 30%.

Visual Representation of the WordPress Page Speed Optimization Potential

Now, let’s plot the numbers into a histogram in order to get a visual representation of how much of our WordPress page speed optimization can be achieved by correct image editing.

In this histogram we have made classifications on the X-axis in regards to how much of the total savings potential we can reach by image editing alone. On the Y-axis we see how many company websites that fall into each category.

As can be discerned by the histogram, there are quite a few companies that can increase their WordPress page speed optimization by quite a bit.

Conclusion

Both the numbers and the histogram clearly demonstrate that many website owners can get a lot closer to their optimal WordPress page speed optimization by just editing their images correctly during the content creation process.

Editing the Images for WordPress Page Speed Optimization

As earlier mentioned, the images need to fulfill three criteria in order to improve our WordPress page speed optimization as much as possible:

• Have a next-gen format such as WebP
• Be less than 100 kb for the most part. Somewhat higher might be okay in some cases if needed to illustrate details in the image.
• Have the following dimensions:
  • 1200 x 900 px for featured images
  • 1200 x 630 px for regular images in the post or page

Step I – Getting the Correct Dimensions With Canva

My preferred first step in order to obtain the correct size for the images is to use Canva. The reason for this is that it is quite easy to create a custom sized design that we can then upload other images into.

It is naturally possible to do this first step of our WordPress page speed optimization with GIMP or some image editing program, but in my experience it will be a lot easier to do it this way.

“Both the numbers and the histogram clearly demonstrate that many website owners
can get a lot closer to their optimal WordPress page speed optimization by just
editing their images correctly…”

The first thing that we need to do is to create a custom blank design. In this case we will choose dimensions of 1200 x 630.

After creating our design, we can easily upload whatever image we are going to use in our design and then click “share” and then “download”.

Step II – The Correct Compression Level With GIMP

After having downloaded the image we open it in GIMP.

In GIMP we do the following:

1. Click: File –> Export As… –>
2. Add “.webp” as the extension
3. Click: Export
4. Select the Image Quality
5. Click: Export

You might have to export it a few times in order to get the desired file size while adjusting the Image Quality (i.e. compression level). Preferably below 100 kb if there are no particular details in the image that need a higher contrast, like numbers for example.

We Are All Set

Just repeat this process with every image in WordPress and you will see how your WordPress page speed optimization gets a significant boost!

• Author
• Recent Posts

Johan Bengtsson

Johan Bengtsson holds a master of science degree in Economic Growth, Innovation & Spatial Dynamics and a C2-certificate in the Spanish language. He has extensive experience with SEO content writing, as well as the translation industry, within Europe and Latin America.

Latest posts by Johan Bengtsson (see all)

• Buenas prácticas en la traducción de contenido - March 3, 2024
• Contratar a un traductor español sueco experto confiable - September 6, 2023
• 8 Savvy On Page SEO Optimization Techniques for WordPress - March 25, 2023