Google Chrome is one of the best browsers available having many hidden features. Especially the developer tools has features like pretty view of the minified CSS and JS files. Now you can do the complete audit of your website using Chrome developer tools with the integration of Lighthouse. Lighthouse is an open source software for doing automated testing for improving the performance of website and apps. In this article let us explain how to website audit using Chrome Lighthouse feature.
Getting Started with Chrome Audit
Open a webpage you wanted to perform the audit. Go to the menu “View > Developer > Developer Tools” or right click and choose “Inspect” option. If you are running Chrome on Windows laptop then just press F12 to open developer tools in Chrome.
- Go to the “Audits” tab on developer tools
- Click on “Perform an audit…” button to start the audit.
- You can add a site to perform a new audit by pressing the “+” button.
- After the audit, click on the download button to get the report of the audit on your computer.
Performing Website Audit
Chrome will show a popup screen with the following categories for the audit.
- Performance
- Progressive Web App
- Best practices
- Accessibility
- SEO
Select the required categories and click on the “Run audit” button.
Website Audit Results
The audit will take few minutes depending on the website. You can view the results inside the developer tools like below with the scorecard for each selected section. You can either view the results on the screen or download the report for later checking.
Scroll through different sections to find the passed results and the improvements required for your site.
Performance
The performance section shows the time taken to load the interactive viewable site along with many other useful metrics like first meaningful pain, first interactive, etc.
Other than metrics there are few other subsections available under “Performance” section. The opportunities section will show the possible options for improving the page loading speed. For example, you can get the unused CSS rules on the page that you can remove in order to improve the loading. performance.
The “Diagnostics” section will show the requests that are issued with highest priority referred as critical chain requests. You can reduce the loading time of the critical chain requests to improve the page loading speed.
Progressive Web App
Chrome Lighthouse tool will check the page for progressive web app guidelines. The “Progressive Web App” section shows the failed, passed and items that required manual check. Some of the factor checked for progressive web apps include the loading speed on 3G connection, content loads within viewport, use of HTTPS and redirect of HTTP to HTTPS.
Accessibility
The “Accessibility” section shows the opportunities for the accessibility improvements of you site. For example you can check the valid language is specified and elements are structured. Since all accessibility features can’t be tested automated the tool will also suggest the items required manual check.
Best Practices
The tool will test the app or site for the recommended practices for modern world and show the results under “Best Practices” section.
SEO
SEO is the new feature added in the Chrome Lighthouse audit. Search engine optimization is important for any site to ensure the search engines like Google and Bing can index the site and show in the search results. SEO audit will check the selected site for meta description, alt tags, page title, canonical tag. mobile friendliness and the indexability of the page.
Lighthouse Report Viewer
You can view the downloaded audit report using Notepad or TextEdit. But the content will not be in a readable format as you can see in the Chrome developer tools. You need an additional report viewer in order to read the content of the report. Go to Lighthouse report viewer page.
Drag and drop the report downloaded from Chrome on the box. You will see the report in Chrome in the same format you see inside developer tools.
Chrome Lighthouse Extension
Chrome also has a separate lighthouse extension for conducting website audit. This is essentially the same tool integrated within developer tools of Chrome browser. So you can use the extension in case if you don’t like to use developer tools.
You can go to Chrome web store and install the Lighthouse extension on your Chrome browser. It will add a lighthouse icon next to the Chrome’s address bar. Click on the “Options” to choose the categories for audit and then click “Generate report” button to run the website audit.
The website audit report will open in a new window after completion of the audit.
You can view this video from Chrome for Developers to get the complete details of Chrome Lighthouse.
Final Words
Now that you don’t need to look multiple tools to check your site’s performance. Chrome Lighthouse tool makes it possible to do complete website audit within the developer tools section of the browser. This is a good option for developers and site owners to conduct audit and take actions for improvement.
