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.
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!
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!
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.
After downloading, installing, and activating to your site. Travel to the settings found in the plugin.
You should then come to a screen that looks like this:
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
[code lang="js"]&amp;amp;amp;amp;amp;amp;amp;amp;nbsp;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"]&amp;amp;amp;amp;amp;amp;amp;amp;nbsp;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"]&amp;amp;amp;amp;amp;amp;amp;amp;nbsp;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.
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.
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.
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!