Make WordPress Load Faster

 

Ever wonder about how long it takes your website to load? There are a few things (that you can manage) that effect the amount of time it takes for your webpage to be fully visible (i.e., the load time)!

The load time of a site is one of the most important factors affecting how your viewer will perceive your site. Many people will simply leave your site and move onto another once if it takes more than just a couple second for your homepage to load up!

Here is a simple way to help improve your load times:

Include the ‘/’ at the end of your sitename when you post your URL in Twitter, FB, in Blogs, or any where else online.

Not to get too technical here, but try this instead…

Open up a new browser page and type in your domain name (as in https://digitalmaestro.com ) WITHOUT the last slash at the end. Go on, do it and watch what happens…. (Did you actually do it? I’ll wait for you…)

Check out the address bar now – notice that it is different! It is a slight difference, but a difference, nonetheless!

You type in: https://digitalmaestro.com

It eventually comes back with: https://digitalmaestro.com/

It might not seem like much, but that extra little slash means something happened! And I am here to tell you what happened (again in a not-so-techy-way!)

When you enter the address WITHOUT the slash, your browser actually goes out to the website and physically makes a connection to your hosting server located wherever it might happen to be. The server then has to determine if this address is a directory that has many files in it, or if it is an actual webpage file. This determination takes a little bit of time. Technically, a REALLY little bit of time. But, if you have an active site with thousands of people coming to it, those little bits of time will start to add up.

Bottom line – include the slash when you post your website address on Facebook, or in Twitter, or even in an email message.

Load Times & Optimize Images

Ever wonder about how long it takes your website to load? There are a few things that you can manage that affect the amount of time it takes for your webpage to be fully visible (i.e., the load time)!

The load time of a site is one of the most important factors affecting how your viewer will perceive your site. Many people will simply leave your site and move onto another once if it takes more than just a couple of seconds for your homepage to load up!

Here is another way to speed up how long it takes your website to load that deals with images.

We all know images are important to have on a site, but the truth is that a site WITHOUT images will load faster. If a picture is worth a thousand words, that is a lot to load! Just kidding 🙂 Seriously though, no pictures will result in a faster load time. With that said, I am NOT suggesting that you remove all the images from your website. That would be crazy! Your site would be boring, and you would probably lose a great deal of traffic!

With all that out of the way, take your images and Optimize them! When you create a graphic, you can usually, “Save For The Web” which makes the images more lightweight and makes them smaller. A smaller file will load faster than a large file! While the quality is less and should not be used if you are going to print the image, it certainly is more than worthy of being displayed on the web.

If someone provides you with an image, you can always go over to the site, Online Image Optimizer to optimize and see the difference in the quality of the image.

As an example, I optimized my old website header and went from 164 KB down to 54 KB in size! That is a savings of 67% on an image that loads on EVERY PAGE of my site! Is there a difference in the quality! Absolutely! However, does it matter? You tell me:

A portion of Original Header:	A portion of Optimized Header:

If you look closely, you can see a difference, but I think it is negligible – especially when most people do not scrutinize a banner that much! With that said, if you have a photography site where you are showcasing your work, you definitely want the best quality you can!

Optimize all the photos on your site and you will see a decrease in the time it takes to load each page.

Use the most recent version of WordPress.

This seems like a common-sense approach and something that you want to do anyway. The WordPress team works hard to improve the performance of the WordPress software. Each release has tuning and performance enhancements built in. Why no use them? Make sure the version of WordPress that you are running is up to date! (Before you upgrade your version, always make a backup!)

Make sure you are running the most up-to-date version of the plugins

you have installed. While it is a little more difficult to see if the newest versions are the most efficient (and load quickly) run some tests! See if a new version has an effect on loading. If it does, then you get to weigh the benefits of the latest version (additional functionality?) over a slower running site. Is it worth it?

Deactivate Unused Plugins!

Speaking of plugins, plugins use JavaScript and CSS to operate. When you have extra plugins that you are not really using, they still take time to load. Deactivate and uninstall any plugin that you can go without. I have seen many sites that have way to many plugins that just bog down a site! In this case, Less is More! Whittle down and evaluate which plugins you REALLY need (and use!) and toss the rest.

I have also seen a site that has been around that is using a plugin to provide functionality that the current version of WordPress incorporates! There is no need to have duplicate functionality working (and in fact it was causing a conflict since both were trying to do the same things!)

Add the Height and Width Tags to your HTML code.

This is a little techie, but you can add the Height and Width Tags to your HTML code. It is actually easy to incorporate with WordPress. When you insert an image via the Media Library, WordPress automatically adds this code for you. For example, the image at the bottom of this post has code that looks like this:

<img title="WordPress-3.2" src="//digitalmaestro.com/wp-content/uploads/2011/04/WordPress-3.2.jpg" alt="WordPress-3.2" width="300" height="224" />

I have seen people who go in and delete some of this info with the idea that ‘less is more’ – if I delete some of the code, it will load less code and therefore it will load faster! This is not the case!

With those ‘tags’, the browser will know how big the image is without having to actually load the picture initially. The browser will sort of put a ‘place holder’ there while the rest of the content (i.e., the words/your writings) gets loaded and as the reader is reading it. The browser will then go get the images after the text has been loaded.

While the overall length of time is not necessarily reduced in this case, the perception by your reader is that the page loads faster!

Use the right formats for images

I hope you already will be optimizing images as explained above, so make sure you are doing that! In addition, use the correct image format for what you are displaying.

Most of the time, JPeG (or .jpg) images are what you will use. This format is best used when you are using a photograph and you want the best-looking color.

Another type of commonly used format is the GIF format (or .gif). This format is generally used for clip art, drawings, logos, buttons, and what are known as ‘flat-images’. By the way, a cousin to the .gif file is the PNG format (or .png) – it is similar to the .gif, but can show more colors than the .gif. In comparison, the .png file is a little larger than the .gif file.

If you are showing a logo, there is no need to go with a larger file like the .jpg – use a .gif file instead.  You can use Photo Converter to convert your .jpg file to a .gif file.

You will notice that I did not go into a lot of technical aspects behind the ‘real’ difference with this format (noise, lossless, artifacts, etc.) – I wanted to keep it simple. If you want more details, let me know!

FYI – This image right here (Little Guy Waving Behind the Word Blog) is the example used above with the code snippet.