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.
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.
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.
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.
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.
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.
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.
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 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.
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.
Consider lazy-loading your images to lower the time to interactive metric. Optimizing your images properly can also help with this.
Convert your images to JPG. Use PNG for icons. Lighthouse recommends using WebP or AVIF, but those formats aren’t supported by older browsers.
Compress your images or use a CDN.
Use MPEG4/WebM videos for animations instead of GIF. GIF’s are inefficient for delivering animated content.
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.