Why Is My Website Slow?
Posted on 27 April, 2023
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:
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.
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.
Depending on your use case, if applied properly, some of these techniques can drastically improve the speed of your website:
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.
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.
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.
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.