You guessed it, the speed of a website is extremely important. It dramatically affects your visitors' experience.
Yet, that's not all. Search engines also use this as a factor in rankings – because they care about their users. But, you don’t need to take our word for it. We have some excellent sources proving this point. If you have a business or organization with a website, then it’s time to take note.
We'll begin with a short summary for those of you coming from the business side. Then we’re going to get into the technical aspects for the developer.
“The BBC found they lost an additional 10% of users for every additional second their site took to load.”
“By cutting average page load time by 850 milliseconds, COOK found they were able to increase conversions by 7%, decrease bounce rates by 7%, and increase pages per session by 10%.” – Google
And just for kicks, here's one more from Google.
These are a few of the tests showing the huge impact that seconds (or milliseconds) can make.
Why do these make an impact? Because visitors care. If it takes too long, they move on. Search engines connect people with the website that best meets their needs. Because of this, Google has continued to expand the importance of website speed in their search engine rankings. Let’s look at a quick timeline:
If you want to stay relevant on search engines such as Google, it’s (way past) time to focus on performance.
Ok, you believe that speed is important. Now what? First we need to know where we’re starting from…
We recommend a few free tools to begin with. These will give you a good overview of how the website currently performs. Also, they provide a list of the biggest opportunities for improvement.
This is our favorite. Period.
A few key areas to look at are as follows.
The acceptable amount of load time will vary a based on your goals. Less than 3 seconds is a rough baseline. Less than2 seconds is getting fast. Less than 1 second is blazing. Less is always better.
This is the time it takes to get the first byte of information back from the server. A high time here often means that the website is on a cheap hosting platform or that there are issues with the hosting. We like to see this less than .5 seconds. Again, lower is always better.
Fully Loaded / Bytes In
This is the total size of all the files sent to the visitor’s browser. There is no magic number here, but you guessed it, smaller is better.
The Filmstrip View link will show you a timeline of how the website looks as it loads. The perceived load time is almost as important as the actual load time. If the most important parts of the website load first then it will feel like the website loads faster.
This is a tool that Google has made available to test websites. And with 85% of the search market share, it’s worth keeping in mind what Google thinks is important.
Page Speed Insights will score the website for both desktop and mobile. It is unreasonable to expect to reach a score of 100/100. But, it is very reasonable to achieve a score in the 85-95 range.
Along with calculating a score, Page Speed Insights also provides recommendations. These are targeted towards helping a developer understand the biggest opportunities for improvement.
Now we know that website speed is important and that we have room for improvement. So, what steps can and should we take?
Many aspects of improving the speed of a website are quite technical. If implemented incorrectly, they can cause major issues on the website. So we would recommend always working with a developer to make adjustments.
When you're ready to get started, follow these steps:
Now that we’ve covered some of the essentials, it’s time to dive in to the actual how-to of improving a website’s speed.
Warning: Below is the technical part of this post. Feel free to leave these details to your web developer.
Here are a few of our favorites, though there are many great tools available.
Gzip refers to a compressed file format. It contains the same information, but in a smaller file size. Think of the good ol’ zip file.
When someone visits a website, the server sends the necessary files to the visitor. When enabled on the server, the files are compressed before they are sent. This results in less data being transferred – which means less time.
Is it worth implementing gzip?
Our website currently saves 78% of file size by using gzip. So, yes, it is a huge savings! All modern browsers support gzip. If a visitor is using an unsupported browser, they will automatically receive the non-compressed version. With no downside and a significant savings, it is an easy call – yes, you should enable gzip compression.
How to check if my website is serving gzip?
Many of the tools listed earlier will check this for you. Or if you want to quickly check if a website has gzip enabled, you can use checkgzipcompression.com.
How do I implement gzip on a website?
There are a few simple steps to take to add gzip compression to your website.
Minimizing CSS and JS
In case you’re wondering, yes, this is different than gzipping them. Minimizing the files removes whitespace, comments, non-required characters. The browser reads this file the exact same as the non-minified version. The only downside is that it is difficult for a human to read.
Here’s an example of a standard css and a minified css file. Both files read the exact same to the computer, but the one on the right is 28% smaller in file size.
Combining CSS and JS
Most websites include multiple css and js files. For example, you may be loading a framework (such as Bootstrap) and have your own custom css to add. Why does this matter? If you load each of these files individually, this requires multiple requests to send everything.
Instead, combine these files so there is only a single file to transfer. For example: boostrap.css + custom.css = styles.css
(HTTP/2 solves this by allowing multiple requests to be processed through a single connection)
How do you minimize and combine css and js files?
First of all, these concepts apply to other types of files as well, but css and js are the two most common. How to accomplish this depends on your development process. Here are a few options:
Now that we’ve optimized the files being sent to the browser, what’s the next step? To have the browser save the files so they are loaded locally next time it needs them.
By setting the expires headers. This tells the browser to keep the file that is being downloaded for a set period of time (such as a week, month, or hour).
Lucky for us, the HTML5 Boilerplate gets us on the right track again. Find the section titled “Expires headers”. Once again, this can be implemented through the .htaccess file or through the server configs.
(If you’re using a performance plugin such as on a WordPress website, this may be one of the configuration options)
A related topic is cache busting. What happens if you make an update to a file that the visitor already has downloaded? You need to have a way to let the browser know that the file it is saving is no longer valid. Check out this article from CSS-Tricks for examples.
As a browser goes through the HTML it downloads different pieces of the website that are needed. For example, when it comes across an image, it must download the file before it can be displayed.
The good news is, this is very easy to use. Just add the word async or defer to script tag.
<script async src="file.js"></script> <script defer src="file.js"></script>
“A content delivery network (CDN) refers to a geographically distributed group of servers which work together to provide fast delivery of Internet content.” - Cloudflare
Think of it this way. The website has an image that it needs to send to each visitor. With a CDN in place, a visitor in New York will receive this image from a server located on the East Coast. A visitor in San Francisco will receive this image from a server located on the West Coast.
There are benefits to this setup. Most importantly, it is faster because the files do not need to transfer as far.
Once again, there are many options available.
Images can quickly become a HUGE performance hit for a website.
Many websites use large photography to tell the brand story and draw visitors in. However, image files are large. They often make up the majority of the bytes sent from the server to the visitor’s browser. If done incorrectly, it can drastically slow down any website.
How do we see if images are slowing down a website?
This page shows the percentage as well as the total bytes of all the images loaded. The design of the website will determine how much is required. But if we’re looking at speed, then the less bytes the better.
Next, click on the Image Analysis tab. This will take you to Cloudinary’s image analysis for more details about each specific photo.
How to improve the images?
For a small website with only a few images, then you may want to make the adjustments manually. If so, follow these steps:
To take this a step further, consider a more controlled and automated process. In this case, consider the following additions:
Does it make a difference?
Let’s pick on GoDaddy today. They’re web people, so they should be doing it correctly, right? Well…
The screenshot below shows an image for an article on the home page. The image is not properly resized and optimized to fit the area that it is displayed. Using some of the basic techniques we just covered, we can decrease the file size by 78% without losing any significant quality!
When we consider that images make up the majority of the size of a website, then a 78% savings is huge!
In summary, images files are very large and should be carefully optimized. There are many ways to optimize images, resize them, and serve them in optimized formats. Often image optimization is ignored and this results in a slow website.
We probably aren't surprising anyone with this one. The website hosting platform can make a significant difference. This does not mean you need to learn how to manage your own dedicated server. But it does mean that some hosting companies are WAY better than others. Let’s just say, there are some well-known hosting providers that offer subpar performance (maybe those mentioned in the last section...)
Time To First Byte (TTFB)
As mentioned earlier, the Time To First Byte (TTFB) is a key metric for hosting performance. This will tell you the amount of time before the server sends the first data back. If this is slow (1+ seconds) then we would recommend contacting the host and/or looking at other hosting options.
We’re assuming the website is running on software using PHP (this includes WordPress, CraftCMS, and many other CMSs). The server will be running a specific version of PHP.
We have found many older hosting accounts are still running PHP 5.6. You don’t need to know all the details (and we don’t either). It is enough to say that PHP 7+ has significant performance improvements over PHP 5.6. Often there are no changes to the website necessary, just a change on the hosting platform. And this results in another performance boost for the website.
A redirect is when someone loads a page and it redirects them to another page. For example, a visitor may click a link going to claritysquared.com/old-website-page-path/ and be redirected to claritysquared.com/new-website-page-path/. Setting up proper redirects is important if your website structure changes or content is renamed.
But how does this affect performance?
When a visitor is redirected, it adds time to the process. Also, having too many redirects set up in the wrong way will slow down all pages of the website. This is because the server needs to review each request and see if any redirects apply.
This does not mean to avoid redirects completely. But instead be careful to use them in the right way and only when necessary.
Ok, we’ve covered a lot of so far. There are tons of different ways that websites can be built… and thus, many ways that these concepts can be applied. These changes can be made in four different ways.
I will leave it to others to talk about the pros and cons of each specific workflow. But whatever workflow you choose, be sure to build performance optimization into the process. It will result in better performing websites.
The CMS that a website uses must also be considered. While some CMSs are inherently faster than others, fast (or slow) websites can be built with each.
We won't go into a lot of detail for optimizing each platform, but let's look at a few quick examples.
WordPress is one of the most common CMSs. Here are some things to consider when optimizing a WordPress website.
These are just a few specific examples of ways to start optimizing a website that is built on WordPress. Remember, in the end, each plugin is just addressing some of the concepts that we covered earlier. They are not magic, but they can be a good place to start.
We love CraftCMS. It is an awesome platform to build custom websites. It is completely customizable and does not have unnecessary bloat. And, best of all for today's topic, it is inherently fast.
CraftCMS gets out of the way and lets you build a website using any or all the concepts we discussed earlier. However, there are still many ways to implement each of these concepts. We'll leave it to others to share more details.
Two good places to start.
That's all Folks!