Why Is My Website Slow?

In today's digital age, having a website is crucial for any business or individual looking to establish a strong online presence. However, it's not enough to simply have a website. You need a website that performs well, loads fast, and provides a seamless user experience. In this post we'll discuss the following:

• How to measure website speed

• Different types of website performance issues

• Common performance bottlenecks

By the end of it, you'll be able to optimize your website's performance and deliver a better user experience to your visitors. So, let's get started!

How to measure website performance with Lighthouse

Lighthouse is a free, open-source tool developed by Google that helps you improve the quality of your web pages. It's designed to provide you with a comprehensive analysis of your website's performance, accessibility, best practices, and SEO.

Lighthouse runs automated tests on your website and generates a report that gives you an overall score out of 100, while also measuring individual performance metrics. This score helps you identify what needs to be improved on your website and how to go about it. For example, if your website has a low performance score, Lighthouse will provide you with specific recommendations to improve page load times, such as optimizing images or leveraging browser caching.

Even if you're not tech-savvy, you can still benefit from using Lighthouse. It's user-friendly, and the report it generates is easy to read and understand. By using Lighthouse, you can identify and fix website performance issues quickly, which leads to better user experience, higher search engine rankings, and ultimately more conversions.

Lighthouse is accessible one out of two ways:

1) Using Chrome, open up your devtools and navigate to the Lighthouse tab. From here you can click on "Analyze page load"

2) If you need something a little less technical, you can use Page Speed Insights and enter the URL you want to test there. Page Speed Insights uses Lighthouse under the hood, along with real user metrics who have visited your site.

Why is my website slow?

When it comes to website speed, there are several factors that can contribute to slow performance. It's not just one thing that we're measuring; it's a bunch of metrics that collectively contribute to your website's overall speed.

Here are some common website performance issues we've observed:

1. Slow to see anything on the screen: This issue is usually caused by long server response times, large page sizes, or slow JavaScript execution & loading.

2. Slow to load images or video: Images and video can make your website look more attractive, but they can also significantly slow down your website if they're not optimized. Large file sizes, improperly formatted images, and uncompressed videos can all contribute to slow page load times.

3. Website loads quickly but not responsive: In some cases, your website may load quickly, but it may not be responsive. This means that the user interface may be janky, or users may not be able to click on elements right away. This issue is usually caused by poor JavaScript performance, layout thrashing, or a large number of DOM elements.

By understanding what's causing your website to perform poorly, you can take steps to optimize it for speed and improve the user experience. In the next section, we'll introduce you to some powerful tools that can help you identify and fix website performance issues.

Time To First Bite (TTFB)

TTFB is a measurement of how long it takes for the server to send the first byte of data back to the user's browser after a request has been made. It's an important metric because it's the first step in the process of loading a website and can significantly impact the user's perception of website speed.

A slow TTFB can be caused by several factors, such as a slow server response time, a high number of database queries, or poorly optimized code. It's crucial to measure your website's TTFB to identify any issues that may be causing slow performance.

Ideally your TTFB should be around 250ms or less.

Although, TTFB can be an issue for any website, it's extremely common for website built on Wordpress that have too many plugins installed. If this is one of your issues, try doing a plugin audit and turn off any unused or bloated plugins.

Waterfall requests

When a webpage loads, it typically requests additional resources such as API requests, Javascript, CSS, font files and so on. Whenever possible you want to avoid loading these resources with a waterfall approach (sequentially, one after another) and load them in parallel.

Depending on your use case, if applied properly, some of these techniques can drastically improve the speed of your website:

• Leveraging prefetch and preloading

• Use dns-prefetch

• Script async and defer

The order in which you load your assets is more of an art than a science. General rule of thumb is to try and load the highest priority items first (what is immediately visible on page), and then defer loading the rest of the content after.

Lack of caching

In my opinion, adding HTTP caching is probably the easiest way to obtain the largest performance gains for your site.

Browser caching is the process of storing website files, such as images, CSS, and JavaScript, on a user's browser so that the next time they visit the website, these files can be loaded from their cache instead of being downloaded again from the server. This can significantly improve website performance and reduce page load times.

It's important to have browser caching enabled on your website because it reduces the number of requests made to the server and can help conserve server resources. It also improves the user experience by reducing page load times, which can lead to higher user engagement and conversions.

To determine if browser caching is enabled on your website, you can use tools like Google Lighthouse, which provides a "Uses efficient cache policy on static assets" metric in its report. You can also check the response headers of your website files to see if they include cache-control headers, which tell the browser how long to store the file in its cache.

Enabling browser caching on your website is relatively easy and can be done by setting appropriate cache-control headers in your server's configuration files or using caching plugins if you're using a content management system like WordPress.

One important caveat about caching is that it will NOT help on the first page load, but it will drastically improve performance for all subsequent requests.

Javascript

Placing JavaScript code in the head section of a webpage can significantly slow down page load times because the browser must download and parse the JavaScript before it can render the page. This can lead to poor user experience, especially on slower internet connections.

To improve website performance, it's important to use techniques like asynchronous and deferred loading of JavaScript code. The async attribute tells the browser to download and execute the JavaScript code asynchronously, without blocking the rendering of the page. The defer attribute, on the other hand, tells the browser to download the JavaScript code in the background and execute it after the page has finished rendering.

Reducing the amount of JavaScript code on your website can also improve performance. Unused or unnecessary JavaScript code can slow down the website and increase page load times. By removing unused JavaScript code, you can significantly reduce the size of the page and improve website performance.

JavaScript is an essential component of modern websites, but it can also significantly impact website performance if not used correctly. By using techniques like async and defer loading, and reducing the amount of JavaScript code on your website, you can improve website performance and provide a better user experience. In the next section, we'll introduce you to some tools and techniques for optimizing JavaScript on your website.

Images

Images can significantly impact website performance, particularly if they're not optimized for the web. There are several best practices for optimizing images on your website, including lazy loading, compression, and reducing image resolution.

Lazy loading is a technique that defers the loading of non-critical images until the user scrolls down to view them. This can significantly reduce the initial page load time and improve the user experience. Lazy loading can be implemented using JavaScript libraries like LazyLoad or by using built-in browser features like the "loading" attribute in HTML.

Compression is another important technique for optimizing images. By reducing the file size of an image, you can significantly reduce the time it takes for the image to load without sacrificing quality. You can use image compression tools like TinyPNG or Compressor.io to compress your images before uploading them to your website.

Reducing the resolution of images can also significantly impact website performance. If your website is not displaying images at full size, there's no need to upload them at their maximum resolution. By reducing the resolution of images to match the size at which they'll be displayed, you can reduce their file size and improve website performance.

In summary, optimizing images on your website can significantly improve website performance and provide a better user experience. By implementing techniques like lazy loading, compression, and reducing image resolution, you can reduce page load times and improve user engagement. In the next section, we'll introduce you to some tools and techniques for optimizing images on your website.

Do you need help improving your website performance?

This post is meant to serve as a very high level overview of common website performance issues. The topic is vast and can get complicated very quickly. Luckily, High Country Digital has your back!

We are offering a 100% free website performance audit for your website - just head on over to our contact page and request your performance report. After reviewing your site we will setup a 30 min call to walk through all your issues proposed solutions.