Speed Matters – Improving Website Performance

Google Page Speed Insights Results Header

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.

Is Website Speed Really That Important?

“The BBC found they lost an additional 10% of users for every additional second their site took to load.”
- Google

“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.

mobile-page-speed-new-industry-benchmarks-01-21.png#asset:354

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:

  1. Way back in 2010 Google announced that “...today we’re including a new signal in our search ranking algorithms: site speed.”
  2. In January 2018 Google announced that they are “Using page speed in mobile search rankings.”
  3. In March 2018 Google announced that they are “Rolling out mobile-first indexing.” Combine this with the earlier changes, and we now see that it the mobile web is here to stay, and this is where website speed is the most important.

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…

How to test your Website’s Speed?

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.

WebPageTest.org

This is our favorite. Period.

  1. Go to https://www.webpagetest.org
  2. Enter the website’s URL
  3. Run the test and review the results

web-page-test-org-results.jpg#asset:358

A few key areas to look at are as follows.

Load Time
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.

First Byte
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.

Timeline
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.

website-loading-timeline.jpg#asset:359

Google PageSpeed Insights

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.

  1. Go to https://developers.google.com/speed/pagespeed/insights/
  2. Enter the website’s URL
  3. Run the test and review the results

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.

google-page-speed-insights-results.jpg#asset:360


Along with calculating a score, Page Speed Insights also provides recommendations. These are targeted towards helping a developer understand the biggest opportunities for improvement.

How to Begin Improving the Speed of a Website?

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:

  1. Check and test your website’s backups. Before making any changes, you need to be confident that you have good backups for your website. Yes, things can go wrong.
  2. Closely review the recommendations from Web Page Test and Google PageSpeed Insights. Both of these reports will highlight the most important areas of improvement.
  3. In almost every instance, optimizing the images on the website is the easiest and biggest win. Look at the image analysis reports and resize, compress... and further compress the images.
  4. Then, continue working through the other recommendations one by one. It is a learning process, so expect to find some quick wins and others that are difficult to correct.

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.

How to Improve the Performance of a Website?

Tools Used

Here are a few of our favorites, though there are many great tools available.

Key Concepts

Gzip

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.

  1. Most servers will have gzip enabled by default. If not, you will need to contact the hosting company or make the change yourself.
  2. The second (and last!) step is to tell your web server what types of files it should serve through gzip.
    1. One easy way to do this is to update the .htaccess file (though there are good reasons not to use an .htaccess file and to edit the server config file instead: see this article)
    2. HTML5 Boilerplate is a great starting place for server configurations. Search for the section titled “Compression”.

file-compression-for-websites.jpg#asset:364

CSS and JS Minimization and Combining

While we’re on the topic of making things smaller, let’s consider minimizing and combining css and javascript files.

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.

unminified-vs-minified-css.jpg#asset:368

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:

  1. Use a gulp, grunt, or webpack to do this automatically in your build process.
  2. Use an app such as Codekit to handle this.
  3. Add a performance plugin to your website that creates this on the server.

Expires Headers

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.

How? 
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.

Load Javascript with Async or Defer

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.

By default, when the browser comes across a javascript file, it will stop and download that file before continuing. In some cases this is good. But the majority of the time it is better to use async or defer to tell the browser not to hold up everything. Using async will allow the browser to download the js file while processing the HTML. Using defer works similarly, but the browser will wait until the page is loaded before running the scripts.

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>

Content Delivery Network (CDN)

“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.

  1. Cloudflare - includes a simple to configure free version
  2. Amazon CloudFront
  3. StackPath (includes MaxCDN)
  4. KeyCDN
  5. Fastly

Website Image Optimization

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?

  1. Go to webpagetest.org
  2. Enter the URL and run the test
  3. Click on the Content Breakdown tab

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.

content-breakdown-image-size.jpg#asset:373

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:

  1. Resize images to the size they are displayed on the website. If image is used as a small thumbnail that is 200px wide, then you do not want to load an image that is 3,000 px wide.
  2. Save the file at a lower quality. For example, JPEG is a “lossy” image format. This means that files can be saved at a lower quality to reduce the file size. Often the file size can be decreased significantly before there is any visible change. A good place to start is to save them at 7/10 or 70% quality settings.
  3. After saving the file, run it through image optimization software to further decrease the size (we use ImageOptim). This will remove unnecessary data from the file and further compress it.

To take this a step further, consider a more controlled and automated process. In this case, consider the following additions:

  1. Save the image at multiple sizes based on the size and resolution of the visitors screen. For example, on a large desktop the image would load at one size. On a phone, a smaller image would be loaded. And on a phone with a high resolution screen a third size would be used. This is well supported in modern HTML/CSS, but is often not automatically built into a website design. We won’t get into the details in this post, as that requires its own set of research and recommendations.
  2. Save the image in multiple formats based on how it is used. For example, save images in the new(ish) WebP format. Not all browsers support this format, so both WebP and JPEG images would be required. This allows some visitors to receive the benefits of the WebP image format.

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!

godaddy-image-optimization-failure.jpg#asset:376

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.

Website Hosting & Server Configuration

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.

PHP Version
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.

Limit Redirects

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.

Implementing Performance Enhancements

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.

  1. Manually
  2. Using a software tool when developing locally (i.e. CodeKit)
  3. As part of a build process (i.e. Gulp, Grunt, Webpack)
  4. Within the CMS software powering the website (i.e. WordPress, CraftCMS)

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.

Platform Specific Website Performance

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 Specific Performance Recommendations

WordPress is one of the most common CMSs. Here are some things to consider when optimizing a WordPress website.

  1. Update Wordpress
  2. Update Plugins
  3. Remove unused Themes
  4. Limit the use of plugins. (Really, only use a plugin when absolutely necessary. And only use plugins that are well supported.)
  5. Use (limited) optimization plugins
    1. Caching, Minification, Combining Files, Page Caching, and Gzip
      1. W3 Total Cache
      2. Autoptimize
      3. WP Fastest Cache
    2. Cleanup and Improve Efficiency
      1. WP Optimize
    3. Image Optimization
      1. EWWW Image Optimizer Cloud
      2. Imagify
      3. ShortPixel
      4. WP Smush

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.

CraftCMS Specific Performance

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.

  1. NYStudio107 Blog
  2. CraftCMS Documentation

That's all Folks!

Get More Website Design Tips