10 optimization tips to make your church, WordPress or personal website faster, stronger and lemony fresh

Tags: ,
Published on: 9/19/2013
Last modified on: 5/19/2014
by Kevin Duncan @kevinjduncan on Twitter

Have you ever visited a new website and waited 10 seconds for the homepage to load? Trick question, of course you haven’t. No one waits that long! An interesting fact, which I made up just now for the purpose of this blog post, is the average wait time a user will give your website to load before leaving is -3 seconds. That’s right, negative three seconds.

What can be done? Well, depending on your website, a lot. Or, a little. Some solutions you find out there online may be applicable to you, but many may not. Hopefully this blog post can point you in the right direction.

The following list is meant to be simple and is not all encompassing. There are many more optimization solutions out there; many of which I will touch on in the future. These are meant to be tips easy to implement, but it is assumed you at least have a basic knowledge of web design. Some tips, due to my not wanting this post to be too long, I will have to tease and go into more depth at a later date.

But first, before you can figure out where you need to go with your website, you need to find out where you are with your website. In short, how fast are you? Are you LoLo Jones, or are you Tommy Lee Jones?

Measuring your website’s speed

There are a few methods for measuring the performance of your website, but I’m most fond of two: Pingdom Website Speed Test and Google’s PageSpeed Tool.

Testing http://kevinjduncan.com on Pingdom, you’ll find my homepage gets a performance grade in the 90s and is in the top 5% of all sites tested when it comes to speed. That’s good. If you test it on Google, you’ll find the desktop version of my site gets a 93 out of 100. That’s also good. However, you’ll find the mobile version of my site only gets an 80.

What does this mean? Well, it means my website is very fast. It also means the mobile version of my website has room to improve. Finally, it means perfection has once again alluded me. The takeaway is we all can find ways to make our website faster. Even Google, using its own PageSpeed tool, falls short of perfection.

Optimizing your images

It goes without saying, but the fewer images you have on your website, the leaner your website will be. But whereas a site like mine can easily forgo more than a handful of images, a church or porfolio website most likely cannot. So, you need a plan.

1. Don’t use images when plain text will do. See my navigation links (for you desktop users) at the top of the screen? See my social media sites at the bottom? All plain text. It’s not always feasible, but when it is, skip using an image. Even a small image will finish second in a foot race with text.

2. Make the images you have smaller. Yahoo offers an easy, online tool called Smush.it. For free, you can upload your images and Smush.it optimizes them without changing their look or visual quality. If you use WordPress, you can install and use the WP Smush.it plugin.

3. Sprite your images (slightly advanced). Each image on your website means a trip for your server, which takes time. Rather than have multiple images and multiple trips, you can combine images into a single image. CSS is used to properly display the images. Sound complicated? It can be. However, if you use SpriteMe, it is fairly easy.

4. Use scaled images. If you are using SVG images, this tip doesn’t apply. For those using PNG, JPG or GIF images on your website, try to avoid having your images resized within your CSS or HTML code. If you need a 128×128 image, use an image that is 128 pixels wide and 128 pixels tall. Don’t use a 500×500 image and have your CSS/HTML resize it for you. The reason? A 128×128 image will use less bytes of data than a 500×500 image. And less bytes means faster response time.

Clean up your code

There’s no minimizing the impact good, valid code will have on your website. But beyond that, here are a few general tips:

5. Put CSS up top, JavaScript down bottom. When applicable (some of you might not have any JavaScript in your code), and when possible (sometimes a particular JS file needs priority), it is a good rule of thumb to keep your CSS (Cascading Style Sheets) at the top of your code and all your JavaScript files at the bottom of your code. For you WordPress users, this means moving the JS files in header.php to footer.php. Again, when you can.

A related tip to this one would be…

6. Defer JavaScript parsing. In addition to moving JavaScript to the bottom of your code, or possibly in place of moving it, you can defer the parsing of the JavaScript until after the page loads. Here’s how:

As an alternative, you could use the async attribute introduced in HTML5:

With async, the script will be run asynchronously as soon as it becomes available. But, warning, IE9 and later versions of Internet Explorer will not support it.

7. Have as few CSS and JavaScript files as you can. Remember earlier how each image on your website meant a trip for your server? Each individual CSS file and JS file means a trip for your server, too. Solution? Where possible, combine your CSS files into as few CSS files as you can. Ditto JavaScript files.

8. Use more ID’s, less tags in CSS. Did you know the ID selector in CSS is the most efficient? It’s true. Google says so, and you know Google wouldn’t lie to you. Tags are less efficient, but they aren’t the least efficient. That honor goes to the universal selector. Here are the four CSS selectors, listed from most efficient to least:

Your mileage with this tip will vary. Classes and tags have their place. Plus, a stylesheet consisting of 100% ID selectors would be an odd one and a VERY difficult one to maintain. It’s just something to keep in mind.

WordPress only

The following tips are specific to WordPress sites.

9. Install the W3 Total Cache plugin. As a rule, you should keep the number of plugins you use to a minimum. The W3 Total Cache plugin is an exception. There are other cache plugins out there, but none of them improved my site’s speed the way W3 did. It optimizes your site by increasing server performance and minimizing download times.

10. Keep your PHP queries to a minimum. Ever looked at your header.php file and seen all the “bloginfo” and similar references? You may have some in footer.php and sidebar.php, too. Well, every time you see one, that’s a query for your database. If you have a dozen of them, and they’re in your header, footer, or sidebar, they are queried every time a visitor visits your page. And if the visitor clicks on a different link to visit a different page on your website, that’s another dozen queries. And so on and so on. Now imagine you have hundreds of visitors a day. In other words, it can add up.

What can you do about it? Well, when you see this in your header.php file:

You can easily change it to:

That one change saves one database query. And if a thousand people visit your website, that’s one thousand database queries you saved from happening. Your database will be eternally grateful to you. But will it send a Christmas card? No, probably not.

This article on WordPress lists all the “bloginfo” references for you. However, before your proceed with this tip, here are two warnings: One, removing all “bloginfo” references will reduce the portability of your website because all those references you changed will no longer be valid once your website has a new URL. And two, changing your WordPress theme, your title, your description, etc. in the future will require changing PHP code. You won’t be able to change those things in your Dashboard anymore.

In other words, this tip is probably best left to those who, one, know what they are doing and, two, have a fairly static website. And by “static” I don’t mean your content doesn’t change. I mean the location of your theme, your site description, site title, etc.

Even if you decide to take this route, I would recommend leaving your <title> tag alone. That is unless you want every page and post on your WordPress site to have the same title. Which you don’t.

But what about…

I’ll touch on others, including Cloudflare, at a later date. And a few of these tips I may flesh out more. Hopefully this was a good starting point for many of you. And, if not, hopefully you enjoyed the photos of Tommy Lee Jones looking grumpy.

Sign up for free email updates:

Feel free to share:
Share on Twitter Share on Google+ Share on Facebook Share on LinkedIn Email This