These are notes that Brian McElaney and Amanda Kalk will be using to answer questions in our webinar chat. You may have been given this link directly -- welcome! Feel free to add comments with your questions below, and we will follow up with you!
-- John Young
Paste-able TL:DR;
You can set up a clean Chrome profile for testing using these instructions:
https://developer.chrome.com/devtools/docs/clean-testing-environment
If your Chrome setup is like ours, you have a bunch of useful extensions that impact page performance one way or another. You'll want to test without those extensions. You can run in Incognito mode -- but Incognito performance is different than regular Chrome performance. The best thing to do is to create a clean profile with no extensions, then run your tests using that profile. Here's instructions from Chrome Developer on how to do that
Paste-able TL:DR:
Follow these instructions to run a performance audit in Chrome Dev Tools:
https://developers.google.com/web/tools/lighthouse#devtools
Open Chrome Dev Tools: While in your clean profile, right-click or control-click on the background of the page you want to measure, and select Inspect.
Find the "Audits" Pane: At the top of the Dev Tools pane, look for the tab labeled Audits and click it.
Configure your report:
- At the top of the Audits pane, check "Clear storage", but don't check "Simulated throttling."
- Under "Categories", check "Performance". You can uncheck everything else to speed up the test; we're not looking at those right now.
- Under "Device", select "Mobile"
Now click "Generate report"!
At the top of the report, under "Metrics", look for "Speed Index". It's presented as a single number in seconds, like "Speed Index: 1.2s" or "Speed Index: 4.2s." Lighthouse will color the number to give you an idea of whether they think it's a good number or not.
Now, you have a single number you can start talking about with every member of your team. "Say, our Speed Index is 4.2 seconds. How do you think we can get that down?"
You can share this explanation from WebPagetest about the speed index so that your team all knows what is being measured. https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index
- Webpagetest.org provides a fantastic, fully-featured implementation of speed index measurement that includes videos of page load.
- If you really want to rattle some cages, try using the Visual Comparison tab and show a video of your page load right next to a video of a competitor's page!
- If you want to learn more about the details of how Chrome measures the Speed Index, Speedline is the node module that implements the Speed Index in Lighthouse.
- Here's Google's explanation of the speed index
- Here's WebPagetest's explatnation of the speed index. Here's the results of their seven-year-old benchmarking. If you're aware of a newer comprehensive benchmark, please let us know by dropping a comment below!