How to Optimize a WordPress Website

How to Optimize a WordPress Website

I am a minimalist with creating websites. When it comes to optimizing your WordPress websites, I recommend you take the minimalist approach, too.

What I mean by that is to improve your website, see what you can eliminate first instead of add. Simplify instead of complicate.

Reducing will not only increase the overall performance today, but it will be easier to maintain in the future.

First take a “speed test” to see how your website stacks up and what can be improved: Website Speed Test and/or Google Pagespeed Insights.

Check out a screenshot of my homepage test, which admittedly can use some improvement!

Optimize WordPress Website Speed Test

Here is my ultimate list for how to optimize a WordPress website:

1) Use a Reliable Website Hosting Service

Regardless of how much tinkering you do, this may become a limiting factor at some point. For low traffic websites, don’t get hung up on choosing a web host. Stick with a name you can trust.

I have used HostGator reseller hosting for the past 8 years and highly recommend them for local small business websites if you have a web design business.

For a single website, the shared hosting package will do the trick.

2) Move CSS to the HTML Head

Don’t use inline CSS within the HTML body to customize. Instead, load all the stylesheets in the HTML head before any page elements.

You can either code the CSS directly into the HTML head, or link to an external CSS file where all the styles are defined.

For WordPress, the theme design is contained within the style.css file in your active theme folder. You can add custom CSS properties to the bottom of this file to achieve the look you want.

3) Move All Javascript Files to the Bottom of the Page

If you have Javascript files at the beginning of the HTML body, it will block the rest of the page elements from loading.

The better method is to place all JS files or function calls at the bottom of the page. That way your static web page elements are in place before the interactivity is added with front-end code.

4) Combine/Minify CSS & JS Files

Every new file is an added request while the page is loading. There are plugins that can do the optimizing work for you by combining these various files into a single one to reduce the number of requests.

Not to mention that these files have empty space and tab characters for human readability. These can be “minified” to eliminate this white space and reduce the file size.

Check out the Better WordPress Minify plugin.

5) Reduce the Number of External Requests

It’s easy to go overboard with features, not realizing that you’ve added a lot of bloat to your website.

This can be anything from multiple custom fonts, YouTube video embeds, 3rd party services, etc.

Again, be mindful of how much you have added to the website, and if it doesn’t align with your #1 goal, remove it.

6) Reduce the Number of Images

Images are one of the main culprits to a non-optimized website. You definitely want high-quality photos to build trust with visitors. But always keep in mind the balancing act between a great looking website and a fast loading website.

Make sure each image placed on the website serves a purpose.

One common shortcut I’ll often see is an image used in place of text. Although this might improve your design, it’s not too SEO-friendly.

The better answer is find a similar font that will suffice, and use it across your website. Then remove any images that are solely words and not visually stimulating content.

This will replace multiple image requests with one font request.

7) Reduce the Size of Images

This is where things can get a bit technical. To reduce the size of each image, you need to have basic knowledge of how image files work.

The first step is selecting the correct file format. Your 3 options are JPG, PNG and GIF.

JPG are the most popular and used for real photos with a wide variation across the color range.

PNG are the best option for logo files, images that are mostly solid colors, and files with a transparent background.

GIF are most well known for animated images and memes with several frames joined together.

When it comes to optimizing your photo within Photoshop, choose the “Save for Web and Devices” option and pick the correct file type for your image.

For JPG, you will be able to adjust the quality (0-100) using a slider, with the lower quality resulting in a smaller filesize.

Use this file save method to generate the lowest acceptable quality in order to optimize load time. Often times, you’ll find that there is no perceivable difference between quality 50 and 100. And you can reduce the filesize massively in some cases.

8) Combine Images Into a Single File

This is a common web design technique using what’s known as an “image sprite”. It is especially useful with icons or graphics throughout your website.

For example, you can create a single image file that contains all of your social media icons. Then using the CSS background property, you can identify the position and display one at a time.

If you have a lot of graphics and utilize this technique correctly, you can reduce the number of requests from dozens to one.

9) Use Cache Plugin

Every time someone loads pages from your website, the files are being transmitted from your web host to their computer or mobile device.

If you have a lot of repeat visitors, you can make things faster for them by “caching” the most used files.

Caching simply means saving your website files to their computer so they don’t need to re-download them from your web host upon their next visit.

It sounds complicated, but can be setup painlessly with a WordPress plugin like WP Super Cache.

10) Check and fix any broken links on your page(s)

Broken links can halt the progress of a loading page, so it’s a good practice to check these on a semi-regular basis. This will also keep your website up to date if resources you linked to previously do not work.

There is a chrome extension that can automatically detect broken links on any page of your website. Use this instead of manually testing.

11) ADVANCED – Dedicated Hosting, CDN, Compression

These are not necessary from the beginning, but once you reach a certain level of traffic, you must put more energy into reducing the page load time.

The first thing we must address is hosting. The shared or reseller hosting might not be good enough with high-traffic websites. In those cases, you may want to move to a Virtual Private Server (VPS) or a dedicated host.

Both of those hosting services will provide your website more power to handle high volume traffic.

Another popular method to reduce load time is placing your images and files on a CDN or content delivery network.

Lastly, you can compress your website files which is similar to creating a ZIP file.

Don’t concern yourself with every single one of these. Take the speed test, choose one and see if you can make an incremental improvement!