Blog | Website Wizardry

Decrease WordPress page load time and page size

26/09/2013

Is your WordPress website image heavy? Does this hinder your visitors experience of the website by drastically slowing down the site?

Would you like to decrease your websites page load time and page speed? Well, with a little WordPress knowledge and a free plugin we can get your site back to how it should be.

In this (set up) example I am going to show you a website that we build a few weeks back; Lincolnshire.org.
One of Lincolnshire.org’s category pages (Accommodation in Lincolnshire) is very image heavy.

Each post in this category is pulling in a decent sized image (around 500 pixels wide), which is where the problem lies. The area in which the image shows is only 190px wide and therefore does not need a 500px wide image.

decrease WordPress page load time and page size

To get around this, the first thing to do is to change the size of the image being pulled. So, lets have a look at the code (below). As you can see, its just pulling in the generic thumbnail code.

basic WordPress thumbnail script We want it to pull in a image that has been resized to 190px wide by 12

0px height. To do this, we need to add the “add_image_size” function to our functions.php file as seen below. From there, we need to add in the image dimensions that we want WordPress to resize for us. You can find out more about this function here

add_image_size support to WordPress

Now that we have added the function to the functions.php file, we now need to tell the category page to pull in this specific “resized image. ” We do this by adding the image size name, which in our case is “cat-thumb”

after adding in add_image_size to category page

OK, so it would seem that we are finished, but no. If we view the source code, you will notice that it has not changed. but why??
Well, it has changed, but all of our current images do not have re-sized versions that match our request. This is where the FREE plugin “Regenerate Thumbnails” comes into play.

After you have installed the plugin and regenerated your Thumbnails, view the source code to notice that you are now pulling in the correct thumbnail sizes.. SUCCESS!!

after changing the snippet of code, WordPress works alot faster

So, what kind of effect does this have on our site? How does it help with our rankings, page load speed, page requests? I decided to take screen shots using Pingdom tools website test before and after we made the changes to take note of how this helps page load speeds and load time.

Before we made the changes, the website page size was 19.3mb (which is HUGE!) with a load time of 11.46 seconds (which is also very large).

pingdom tools before hand

After we made the updates, the website clocked in at 3.6mb with a load time of 7.98 seconds. I’m sure you can agree that this is quite a substantial change to its load speeds. As well as user experience.

lincolnshire_org_after