Skip to main content

The Complete Website Speed Course

Chapter 1: Website Speed Diagnosis

Finding The Root Of The Issue: Website Speed Diagnosis

Finding the real reason for your slow website loading times can be a real headache. Is it your images? Your videos? Do you need to upgrade your hosting?

In this chapter, we’ll go over how to identify what exactly is causing your loading problems. How to solve those issues will be addressed in the following chapters, for now we are just focusing on diagnosing the issue.

Lighthouse: A Powerful Diagnostic Tool

Lighthouse is really one of the only tools you need to diagnose your website loading issues. It can generate several detailed reports for you: Performance, Accessibility, Best Practices, and SEO. In this guide, we’ll only be focusing on the Performance report. You’ll need Chrome to use Lighthouse. If you don’t have Chrome, you can also test your site speed with GTmetrix, the results will be similar, I just find Lighthouse to be more accurate.

Step 1

Visit the website you want to test. Make sure you’re using an incognito window, if you are on Chrome and have any browser plugins, it could impact your test and make it less accurate.

Step 2

Right click anywhere on the websites. A list of options will pop up. Click “Inspect”, which should be listed at the bottom of the options.

Step 3

A new section will open up, probably to the right side of the website, that will show all the HTML and CSS on your website.

At the top of that section you’ll see a list of options such as “Elements, Console, Sources” and more.

At the end of the list, locate the “>>” option and click on it. More options will pop up. Search for “Lighthouse” and click on it.

Step 4

The Lighthouse report screen will pop up. You’ll see a few different options to select from to generate your report.

  • Mode: I typically select “Navigation (Default)”.
  • Categories: “Performance” is the only one relevant to this guide, you can leave the others unchecked.
  • Plugins: Leave all unchecked.
  • Device: You’ll want to run two reports, one for “Mobile” and one for “Desktop”, each device might have different issues. You should focus on “Mobile” more, since that one will typically be slower.

Step 5

Analyze the report. You want to aim to be in the green for everything. We’ll go over everything in more depth in the following sections.

Lighthouse Metrics

Performance

This is the weighted score of all your metrics combined.

First Contentful Paint

The time from when the page starts to load, to the time when any part of the website is visible on the screen.

Speed Index

How quickly the contents of the page are visibly loaded.

Largest Contentful Paint

How long it takes the largest image or text block to load within the viewport. If we’re talking about a website, this would be how long it takes your hero section to load.

Total Blocking Time

The time it takes for users to be able to interact with your website. For example, if they click on a button and nothing happens, it’s being blocked.

Cumulative Layout Shift

How many elements shift to a different position on the page while your website is loading.

Lighthouse Opportunities

Lighthouse Opportunities will be listed below your metrics. These are indications of what you can do to increase your page loading time. It may not always be 100% accurate.

Image Opportunities

Properly Size Images

Your images are significantly larger than necessary. You’ll need to resize and compress them properly. You’ll learn how to fix this opportunity in chapter 2.

Defer Offscreen Images

Consider lazy-loading your images to lower the time to interactive metric. Optimizing your images properly can also help with this.

Serve Images In Next-Gen Formats

Convert your images to JPG. Use PNG for icons. Lighthouse recommends using WebP or AVIF, but those formats aren’t supported by older browsers.

Efficiently Encode Images

Compress your images or use a CDN.

Video Opportunities

Use Video Formats for Animated Content

Use MPEG4/WebM videos for animations instead of GIF. GIF’s are inefficient for delivering animated content.

JavaScript Opportunities

Reduce Unused JavaScript

You have JavaScript being loaded on your page that isn’t actually being used.

Eliminate Render-Blocking Resources

Render-blocking resources prevent the browser from loading your website. This is usually JavaScript or 3rd party resources (Like some kind of embed).

Minify JavaScript

Minifying your JavaScript will reduce it’s file size, while not breaking anything on your website. You’ll learn how to address this opportunity in chapter 5.

CSS Opportunities

Reduce Unused CSS

CSS is what makes your website look nice, but not all themes and plugins code their CSS files efficiently. Files that are loaded, but don’t actually impact the appearance of your website will be flagged as “Unused CSS”. You’ll learn how to fix this opportunity in chapter 5.

Eliminate Render-Blocking Resources

This can be CSS or JavaScript, but it is script that will keep your website from loading. You’ll learn how to address this opportunity in chapter 5.

Hosting Opportunities

Reduce Initial Server Response Time

This will relate to your hosting. If you’re using the cheapest hosting available, you can expect to see this opportunity. Sometimes fixing your images, JavaScript, and CSS will get rid of this issue because your server don’t have as much to load. You’ll learn how to fix this opportunity in chapter 6 of this guide.