Page Speed Insights
Last week we introduced Google’s Page Speed Insights, one of the popular ways of understanding site performance. Why is it so popular? Because the goal is to rank higher on Google, and PageSpeed Insights is Google telling us exactly what they value. That’s pretty valuable information. And it’s super-easy to access. Not only does Google make PageSpeed Insights available via the website, but you can also install the Google Chrome extension “Lighthouse”.
Lighthouse
Lighthouse allows you to analyze the page you’re currently on with just the press of a button. Don’t feel like installing yet another extension? No worries, if you’re using Google Chrome, you already have Lighthouse available and can run the report from inside the Lighthouse tab, found in the developer’s console window. You can reach it by right clicking in the page and selecting “Inspect Element” if you have developer tools enabled (in the browser settings) or by pressing Command + Option + J on Mac and Control + Shift + J on Windows.
Opening up this console may also show you any major JavaScript errors that may prevent your page from loading fully. Once the window is open, simply navigate to the Lighthouse tab, select the options you want, and click “Generate report”. One of the added benefits of using Lighthouse is the additional reporting it provides. In addition to Performance, there are 4 other key areas:
- Progressive Web App: Tests to ensure the web application can reach anyone and any device with a single code base.
- Best Practices: Tests to ensure the page meets best practice security standards.
- Accessibility: Tests to ensure the visually impaired/screen readers are capable of reading content on the page.
- SEO: Tests for baseline Search Engine Optimization factors.
These reports can show you even more insights and tips to improve the SEO value of your page.It’s a good idea to run both Lighthouse from your browser and PageSpeed Insights from Google’s website for comparison. If you’re running any extensions that add JavaScript to the browser, you may want to disable them for these tests or run your tests in incognito mode, which should disable them. This will give you more accurate test results. You may notice a difference in scores and find different hit points in the reports. It may take a minute or two to run your PageSpeed Insights report and receive your results. But, once you do, you’ll see an overall score and a breakdown of test results.
This information along with the loading screenshots can help illuminate potential speed bumps in our page’s load time. For example, you may have a large image at the top of your page, like a site banner or carousel sliders, that is taking a long time to load. Maybe you have some errors in your JavaScript that’s blocking the page from rendering. Or, maybe your server is just slow from handling the copious amounts of traffic you’re getting…Not a bad problem to have really. Either way, this will get you pointed in the right direction to fix it.You may have noticed that this report covers scores for both mobile and desktop. Just keep that in mind as we go through the insights in this report and remember “Mobile First” as we go through the optimization process.
The first section in the report is what Google calls “Lab Data.” These are the standards that Google will grade your page speed on, and include:
- First Contentful Paint – Time it takes for the first image or text to be rendered.
- Speed Index – Time to visual elements completely rendered (does not include scripts).
- Largest Contentful Paint – Time it takes for the largest area of text or image is rendered.
- Time to Interactive – Time it takes for the page to become fully interactive.
- Total Blocking Time – Total intermediate times between First Contentful Paint and Time to Interactive.
- Cumulative Layout Shift – Tests for movement of the content within the viewport (content viewing area).
You may have noticed that most of these checkpoints are focused on when content is being loaded on the page. Like we covered in the last episode, Google wants to be able to crawl your site faster, so the faster it can start seeing content, the better. So to do so we want to ensure anything that keeps the content from loading or that is “render blocking”, to a minimum and load anything that’s not essential after the content is loaded. The two major checkpoints that you’ll want to pay attention to are the Largest Contentful Paint or LCP and Total Blocking Time. These two factors make up for a combined 50% of your overall score, 25% each. Your aim should be to keep your LCP under a 2 second load time, and your Total Blocking Time under 300 milliseconds.
The Opportunities section is really where the meat and potatoes of this report are. This is where you’ll find areas of improvement that directly affect your page speed, as well as a description on how to improve them with links to further explanations. Be sure to join us next week when I’ll be going over some of the most common ways to improve your site’s performance. For now, I encourage you to run a report on your site and pay close attention to this section. You can also find further improvements in the Diagnostics section. Though, the factors in this section don’t directly affect your score, they can be helpful in pinpointing problem areas and informing your optimizations.
GTMetrix
You can also cross reference these reports with a GTMetrix analysis to give yourself a more complete understanding of your page speed. Though GTMetrix won’t give you the separation of Mobile and Desktop, it will give you an in-depth understanding of your load order, as well as other opportunities. GTMetrix measures a lot of the same points that PageSpeed Insights does, but on a different scale and with a bit more on page explanation. You’ll definitely want to check out the YSlow and Waterfall tabs in this report.
Next time, we’re going to wrap things up with 5 Actionable Steps you should be taking to optimize your site’s performance.