Decrease WordPress page load time and page size
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.
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.
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
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”
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!!
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).
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.