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.
