Start with images to speed up your site
Chances are that your site is slower than it should be. Often, the most critical factor in determining your site’s page load time is the amount of data required to display your page. This “amount of data” is usually referred to as the size (or weight) of the page, and is usually measured in Bytes (such as MegaBytes, or MB).
Larger web pages take longer to load because more data has to be transmitted over the internet before your visitors can view them.
The data making up a web page is made up of a lot of separate files. Most web pages consist of HTML files, CSS files, JavaScript files, and images.
If you take nothing else from this post, remember this:
Usually, images are the largest files that have to be downloaded to display your site, so any discussion of speeding up your site should start with a discussion of images.
The good news is, there are some simple things you can do today, without a developer, to drastically reduce the burden placed on site speed from your web site’s images.
The key: reduce image file sizes to speed up your site
Do you really need this image?
A great first question to ask yourself: Do I even need this image on my site? If you’re loading an image into your site without a good reason, you should reconsider.
If you insist that your home page needs a “slider” with gigantic images in it, well…I’m here to stage an intervention.
Why? Completely removing an image from your site is the only method that can give you a 100% reduction in file size for a given image. Some of the other methods below will give you efficiency gains from about one to eighty percent, but if you’re serious about minimizing page size to speed up your site, eliminating an image is a great place to start.
Please don’t take this to mean that you should never use images. Graphics and images work great in a design when the images help to communicate something or otherwise enhance the purpose of the page. It’s up to you to determine when images are helping to enhance your site and when they’re hurting it.
As a good rule of thumb: I like adding one relevant and interesting image in a blog post, but generally I am very cautious about adding images to my content unless they are necessary to get my point across.
Is the image an appropriate resolution?
The width and height (usually measured in pixels) of your pictures should be appropriate for how you’re using that image in your layout. For example, an image that is 1200 pixels wide may be useful in a gallery view or as the main featured image on your homepage, but having an image of this size loaded into a smaller part of your layout, such as a sidebar, would be crazy!
Please, just scale down your images’ sizes appropriately before you put them on your site!
Use compression
This is related to the previous point because images with higher resolutions tend to be higher in file size, but you should seriously consider whether or not the file size of an image is acceptable for its use on your site.
If the image is going on your site, you should compress it. There are many tools that do this. The key is to start with “lossless compression” that will reduce your images’ file sizes without compromising their visual quality.
One great compression tool for Mac users is ImageOptim. It’s free and easy to use, as long as you can remember to compress your images before you upload them to your site.
Another tool that runs on your WordPress site and can automatically compress your images is WP Smush.
Recap
Image files usually represent a lot of your site’s “weight” and may be causing it to be slow for your visitors.
- If an image isn’t helping your site to serve its purpose; don’t use the image on your site
- Make sure you use the appropriate size images for the different areas of your page or site
- Every image you upload to your site should be run through a compression algorithm