How to Create Lightning Fast Websites On WordPress

How to Create Lightning Fast Websites On WordPress

Ever had to endure the painful process of watching a website unfold slowly?

I know you can’t stand it – just like us. In fact, over 47% of people expect a website to load in two seconds or less. Don’t miss out on the opportunity to make a sale or form a relationship because your website is slow!

At Lazarus, we believe every website should be blazing fast. Through the construction of many websites, we have found the techniques and plugins that lead to your website winning every internet race. After reading this article, you’re going to walk away with the ability to improve the speed of your own website and understand how we, as a company, improve the speed of yours.

1. Compress Your Images

Your website probably uses images to display products, experiences, or to beautify your pages. The file size of each of those pictures matter – we will explain why.

When an individual travels to your site, they will begin to load your webpage. To put this in perspective, LazarusCharlotte.com is 6MB. Although it doesn’t seem like a lot – our hard drives can store gigabytes (1000MB) of data – the lower the file size of your site is, the quicker it loads. When building your site, you might add a picture for one of the aforementioned reasons. That process might look something like you starting to search for the picture you like at Unsplash.com or a picture on your computer that you have already taken and once you have found it, you upload it to your website.

Lake with boats
Unsplash picture found here: https://unsplash.com/photos/5F_c9i3JP0I ? Thank You Jakob Owens

I decided to choose this one found here. You might be thinking, “Great! It is large which is most important to me, because all my visitors will see a crisp, high-quality picture.” Indeed, this picture will display nicely on your website but it will take a lot of strength from your own network to load it! That picture that we just downloaded from Unsplash is 753 KB – nearly 1 MB! And remember, this image is just one component of many in your website.

Remember our discussion about the size of LazarusCharlotte.com? This image is 1/6 of the entire size of our website. Don’t fear though, we can fix this in many ways.

We can use TinyJpg, a website that compresses your image for free!

Tiny JPG Homepage
Homepage of tinyjpg.com

After uploading our image that we downloaded from Unsplash earlier, we can download the compressed image. This compressed image has a file size that is 52% smaller than our original image!

tinyjpg.com after compression
tinyjpg.com after compression

We went from a file size of 772.0KB to 372.2 KB. For an image that is 2100 x 1400 (very large), this is great news for the speed of our website!

Another tool we can utilize to compress our images is the WordPress plugin: WP SMUSH.

WP SMUSH Plugin Page
WP SMUSH Plugin Page

After downloading, installing, and activating to your site. Travel to the settings found in the plugin.

WP SMUSH Settings
WP SMUSH Settings

You should then come to a screen that looks like this:

WP SMUSH Admin Panel
WP SMUSH Admin Panel

Here, you can click the big blue button ‘BULK SMASH’. Doing so will initiate this plugin to go through your media library and compress each image found. As you can see in the picture above, we saved 6.5MB on our site. That alone could be the difference between someone deciding to stay or leave a website.

One of our favorite features of this plug-in is that after installing it, WP SMUSH will automatically compress each subequent image that you upload. Not only will this save you tremendous amounts of time, but it will also speed up your website!

2. Minifying Your Site’s Scripts

When your users load your site, they will have to load all of the pictures like mentioned before in addition to your site’s contents (HTML), the code that makes it beautiful (CSS), and lastly, the code that gives your site function (JavaScript).

A simple JavaScript on your file might look like this:

[code lang="js"] var s = "I love fast websites!";

alert(s);[/code]

This code is great for humans because we can easily read and edit the line of code. If I wanted to change the message, I would simply go into the file and make the according changes.

[code lang="js"] var s = "I love really fast websites!";

alert(s);[/code]

Networks parse files differently than we do, though! It takes them extra time to go through each line and output the information on your website. In other words, the line breaks in your code adds bytes to the file size of your file. The more bytes a file is, the longer it will take the network to load that file.

For this simple example, our program above is 49B. It’s super small, but this is rarely the case for a file that is hosted on your site. Now when we minify it, the program looks like this:

[code lang="js"] var s = "I love really fast websites!";alert(s);[/code]

As a result, our program runs just like it did before. However, the file size of our program is now 44B. A difference of 5B allows the network to load the file faster, consequently improving the entire performance of our website.

Can we do this on our WordPress site? Of course we can! We love the Autoptimize plugin for doing this. After downloading, uploading, and activating you can head into the settings menu to start miniifying your files.

Autoptimize Plugin Picture
Autoptimize Plugin Page
Autoptimize Settings
Autoptimize Settings

All you have to do is click the boxes, and you will be on your way to having a faster site! Be careful though, checking one of the boxes may end up breaking your site. All WordPress themes are built differently and can react in unusual ways to certain actions. Be mindful of this when you are using this or any plugin that promises to speed up your site.

3. Load Your JavaScript files Asynchronously

On your WordPress website, you may have a handful of JavaScript files adding wonderful functionality to your website. Maybe it is a hover animation for a button or the processing of payment. JavaScript helps us do incredible things on all of our WordPress websites.

It is troublesome for the performance of your website if you have multiple JavaScript files all trying to load at the same time. You cannot guarantee or even assume that your JavaScript files are created with the most efficient algorithms – unless of course, you wrote it yourself! As a result, one JavaScript file may be blocking another one from loading if you are loading them all synchronously.

To rid yourself of this problem, download the Async Javascript plugin.

Async Javascript Plugin Page
Async Javascript Plugin Page
Async Javascript Settings Panel
Async Javascript Settings Panel

You can skip the steps the plugin wants you take and head to the settings tab to get started, but we recommend going through the steps. GTmetrix will actually inform you of your site’s performance and how to improve it. Based on the results from GTmetrix, you can select the best option for your site. This is an invaluable opportunty to review how your site is performing and the increase in performance after you have fine-tuned your async javascript settings.

Summary

Your website is undoubtedly one of your most important assets to your organization. Your customers want blazing fast sites to view. After reading this article you have the tools in your arsenal to create a fast WordPress website that you and your customers will love browsing.

To reiterate, we recommend that you first compress and optimize your images. We saved over 1/2 of a MB through our compression strategies! Then, minify and compress your JavaScript and CSS files. Every byte counts. Lastly, load your JavaScript asynchronously. No blocking scripts allowed.

Thanks for taking the time to read this. Let us know about your experience with improving the speed of your site. We are always looking to improve and we would love your input!