How to Optimize Your Website

Graphic-Optimize_your_site-Blog

Today there are many ways you can get a WordPress website built inexpensively: Fiverr, your niece or nephew, a friend who knows how. You will hopefully get a good website that functions the way you want it to, but what may not happen is proper optimization of the website once it is launched.

Site optimization is a term you’ll see quite often, especially when you’re looking at online marketing options for your website. And, companies may create a picture that leads you to believe that it is a highly geeky thing that is done behind a black curtain that only the pros can do. I’m here to break that myth!

What is Website Optimization?

Optimizing a website is simply the process of making sure that it loads as quickly as possible. The range of factors that play into this runs from simple to geeky, so we’re going to walk through the simple ones that bring the most impact.

Website Optimization 101

Website hosting – the foundation

Where you host your website is very important, because it is the foundation for your site to load quickly.

The only “bad” thing that I don’t like with the big box hosting companies like GoDaddy, Bluehost or Hostgator is that the less expensive hosting packages they provide don’t give you the server resources to run your website. The actual space is enough, but the RAM (memory) is many times rock bottom minimal. As long as you’re the only one going to your website, it loads ok. But as soon as you start having more traffic to the website, it will bog down. Pages will load slowly, and I’ve had multiple issues with pages not loading and giving an error instead.

Short story for hosting — Don’t go for the less expensive package. Invest in the premium package. You don’t need to have your own VPS (Virtual Private Server), or Dedicated Server unless you’re getting a lot of traffic and need dedicated resources.

I wish more companies would provide hosting packages like we do [https://designbykiltz.com/our-services/web-hosting/ ] — where server resources are not a part of “what you get”, where every account has plentiful resources for what they need.

Checking to see if your hosting is adequate

So, how can you check to see if your hosting is fast enough? Using a service like GTMetrix you can test your site [https://gtmetrix.com/ ] (it’s free). For now, bypass the Score on the main report page and click on the waterfall tab.

This part of the report shows you everything that has to load on a particular page, and yes, there are some geeky parts. All you need to pay attention to is the purple part of the block. That is the amount of time that your site is “waiting” for something from the server.

There will always be some purple, but it should be minimal.

What size are your images?

When a web page loads, a big part of the load time are the images that need to be loaded. An important part of optimizing your website is to double-check and make sure that you’ve not just optimized image file size, but also resized the image close to what is actually needed.

When you have a big banner image, that image needs to be loaded before the page is “complete”. If you’ve uploaded a 3MB image that has dimensions of 4500px by 2000px, the entire 3MB file will need to load and the huge image will be scrunched down to the size you’ve specified for your banner.

A part of optimizing images is to install and use an image optimization plugin that reduces file sizes. But before you take that step, take the time to resize your images close to the max size you’re going to need. Instead of 4500px wide, you don’t need much more than 2000px wide — and you’ve effectively cut your file size roughly in half without running it through the optimizer.

Yes, WordPress does automatically create multiple sizes of an image. Use this to your advantage and review the settings of each of the images on your site. Click into a page to edit it. Go to an image and click on the image and go to the settings. Under “Size”, what is being used? IF it is set to full size, but the image is only meant to take up a small part of the page, change it to a smaller size. It can be a bit larger than what you actually need but you won’t have the huge image loading into a smaller space.

Using an image optimization plugin

Once you’ve got the right image size set for the images you use on your website, the next step is to use an image optimization plugin. There are a bunch of them out there, so we’re not going to recreate a resource. Themeisle has a good article where they test 6 plugins and provide a report.

There are also some cache plugins that have image optimization built into them. For example, our server is running on Litespeed, which includes a beefy cache ability. The Litespeed plugin has a section for image optimization, so for clients that host with us, we utilize that optimization instead of using a separate plugin.

Many optimization plugins also give you the option of serving up the new web format for images (WebP). As it optimizes your images, it will create an image with this format and work the magic behind the scenes to serve it up to the world.

WebP is a modern image format that provides superior lossless and lossy compression for images on the web. Using WebP, webmasters and web developers can create smaller, richer images that make the web faster. WebP lossless images are 26% smaller in size compared to PNGs. Source: Developers.Google.com

 

Helpful hint — never… never!! have the optimization plugin delete your original images!

Review the plugins your site uses

Plugins add functionality to a website. But sometimes when a site is built by someone with less experience, a plugin will be used instead of a few lines of code. It makes for “easy development”, but every plugin adds several lines of code to your website. We’ve seen websites with 90+ plugins… and they loaded slow.

Some plugins are for admin use only and don’t affect the page load time. We use a number of them as utilities on the back end. The ones that you need to pay attention to are the ones that provide a user experience on the front end.

Get to know your plugins. It may feel a bit intimidating to click on the Plugin section of the admin area. Don’t glaze over. Each plugin has a description so you can get a basic idea of what it does. And you can click a link for more details and to visit the plugin site.

This is something that we do when we audit websites. So, if you have questions after you’ve looked at what you have, reach out! We’d be more than happy to help define what you have.

We’ve worked with several clients where they had multiple people work on the site over the years. Each person that worked on the site just added their own list of plugins for the functionality they were creating without looking at what was there to audit what was needed moving forward. In one case, we were able to reduce the plugins by half, simply by removing what was no longer needed.

Use a good Cache plugin

Using caching on a website is the equivalent of putting your pages on speed dial for the world. The most current info is set and ready to quickly load when someone lands on your site.

Caching plugins run from extremely easy (and effective) to super geeky (and effective). The easiest one that I’ve ever used is WPRocket. It’s a premium plugin, but totally worth the price because of the ease of setup. The most challenging is W3 Total Cache. And there are a bunch of good ones in between. AThemes has a good review of the top cache plugins and includes this great table below (there are more results table in the article).

 

 

WPastra compares the top 15 cache plugins if you’d like a 2nd source for more data.