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:
