Finding The Roots Of The Issue
Trying to get to the bottom of your site speed issues can be a complicated task. Is it your images? Your theme? Your videos? Everything?
Here we’ll go over the tools you can use to find out what’s slowing your website down, and in the next chapters we’ll dive into how to fix your problems.
Step 1: Lighthouse
Lighthouse is the first tool you should use to diagnose your site speed problems. It can also evaluate your SEO and accessibility performance. Watch the video here to learn how to use Lighthouse to find your problems.
Step 2: GTmetrix
GTmetrix is the second tool you’ll use to diagnose your site speed in even more detail. It can show you the exact scripts used on your page, and how they impact your speed. If you sign up for a GTmetrix profile, you can track your changes in speed over time.
Lighthouse Opportunities
Images (See Chapter 2 To Fix)
Properly Size Images
The actual image file you’re using has dimensions that are far larger than it’s showing up as on your website.
For example, if you’re using an image with dimensions of 1000 x 1000 px, but it only displays on your website as 500 x 500 px, you need to resize your image, which will reduce it’s file size.
Defer offscreen images:
Serve images in next-gen formats:
JavaScript & CSS (See Chapter 3 To Fix)
Reduce Unused JavaScript
The actual image file you’re using has dimensions that are far larger than it’s showing up as on your website.
For example, if you’re using an image with dimensions of 1000 x 1000 px, but it only displays on your website as 500 x 500 px, you need to resize your image, which will reduce it’s file size.
Defer offscreen images:
Serve images in next-gen formats: