Why is your WordPress Website Slow?

There are millions of other blogs and websites that talk through plugins and quick & dirty ways to speed up your website, as well as millions others that explain the extremely technical details of minification and efficient coding. However, odds are good that there’s 1 main thing slowing down your website: the size of your images.

Quality of host can certainly be a factor, however. Certain hosts have cheaper price points than others. From our experience, you usually get what you pay for, but many people don’t have the robust websites that require fast hosting, and others still don’t have the traffic to merit $100/mo hosting payment. So, of course, there’s always a  market for dirt cheap hosting. If it makes business sense to get your website stood up on a cheaper host, then do it.

However, regardless of how fast or slow your host is, your website will be slow (100% of the time) if you’re trying to use incredibly large images on your website. The purpose of this post is to explain why images slow down your website, and how to fix it.

Image Size vs. Image Dimensions

This is one of the most common questions we get asked in terms of image sizing. There is not a direct correlation between the dimensions of an image (1200px by 2000px) and the size of an image (2.3 mb). If you were to keep the dpi (dots per inch) the same, then you may be able to make that correlation, but it’s important to understand the difference between image dimensions and image size.

When you go to a website, your data connection (whatever you’re paying for with Verizon or Charter or Comcast for an internet connection) has to download all of the information and content on a webpage to be able to display it to you in your browser. Text takes hardly any time to load at all – think nanoseconds with a good internet connection. Images, however, require significantly more data to load.

Think about it like this: when you’re at the gym and you’re working out, you can lift light weights relatively easily. You can also lift them many more times quicker than you could lift heavy weight. You will take longer to push out one rep on bench press lifting 300 lbs than you would with just the bar. Images are like heavy weights. The stronger your host is, the more weight it can lift and handle at a time. But at a certain point your images are so large that your host can take 10, 15, 20 seconds to load it to your device. You don’t need your host to try and lift heavy weights. You want your website to be as light and efficient as possible.

Whenever you’re pulling images off of a camera/phone/device, the image dimesions will likely be the same as the other images pulled off that device. However, the dots of the images can change based on camera settings (shooting in RAW or a compressed variation), so your file sizes may be different. Typically, the file size for an image pulled off a phone or camera can range anywhere between 5 mb and 40 mb depending on the settings. These images are to large to use effectively on a website, even with the most robust host.

On a mac, open up each individual image in Preview…

1. Click Tools
2. Click Adjust Size and see the “File size” changing as you adjust the dimensions and dpi of the image itself. Preview has it’s own image compression built into it, so you’ll likely notice the file size get smaller even if you don’t change any dimensions.
3.  Probably set the dpi to 72. Non-retina devices can’t display high-res images, and WordPress typically has the ability to upload images at double-size for retina devices.
4. Think through the application of each image. If the image in question is used for the main featured slider, it needs to be at least 1000 px wide, but probably under 2000px wide. If the image is for thumbnails or product images, probably no wider than 600px wide.
5. Change the image dimensions, making sure that the “respect aspect ratio” or “constrain proportions,” is checked.
6. Try and get file size down to 1.5 mb or lower.

Microsoft doesn’t have an easy way to adjust an image’s dpi out of the box, but you can change image dimensions in Microsoft Paint, which may help with the image size to a certain degree. You’ll have to use the Explore part of the computer to verify the image size after you resize it. We recommend downloading Gimp for image editing on a Windows platform.

1. Open image in Paint
2. Click “Resize” in the top left
3. Change the image dimensions, making sure that the “respect aspect ratio” or “constrain proportions,” is checked.
4. Check to make sure the file size is small enough.

Take a look at a waterfall report on your website and look for the bars that are the widest. The wider a particular bar is, the longer it takes for a browser to load it. It will be very easy to see what images take a long time to load. It may take you a couple hours to do it, but resizing all the images on your website then re-uploading them and changing them out will drastically increase your site’s load time.

Yes, shared hosting, peak traffic times, minification, inefficient coding, and many other things can affect the speed of your website. However, over 70% of the time in our business, the speed of a website is due to the size of the images. Make sure your images are the right dimensions and at a small enough file size for your website to run efficiently. It will save you so much time in the long run.