{"id":43654,"date":"2018-04-23T21:01:58","date_gmt":"2018-04-23T13:01:58","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=43654"},"modified":"2021-03-24T22:28:27","modified_gmt":"2021-03-24T14:28:27","slug":"check-performance-quality-any-website-with-lighthouse","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/check-performance-quality-any-website-with-lighthouse\/","title":{"rendered":"Check Performance & Quality of Any Website with Lighthouse"},"content":{"rendered":"

Google is at the forefront of modern web design. It offers so many tools from Analytics<\/a> to DevTools<\/a> all with the aim of helping people make a better web.<\/p>\n

Recently it published another handy tool called Lighthouse<\/a>. This is a free automated testing tool that runs in the background of Chrome<\/strong>. It works like a mini website audit where it\u2019ll check the site\u2019s performance, speed, accessibility, and adherence to semantic best practices.<\/p>\n

Read Also:<\/strong> How To Measure Front-end Website Performance<\/a><\/p>\n

\"lighthouse<\/a><\/figure>\n

The Lighthouse extension was created primarily for progressive webapps<\/strong>. These are general webapps that run in the browser and behave like native apps, yet function like typical websites.<\/p>\n

PWAs are a huge part of the Lighthouse project. But the goal of Lighthouse is to help all web developers<\/strong> check the quality of their pages.<\/p>\n

This can include HTML\/CSS bug checking or looking for duplicate lines of code. Lighthouse also looks into web performance<\/a> with optimization tips for images, file sizes, HTTP requests, and so much more.<\/p>\n

All the main audit results appear right inside Chrome\u2019s DevTools<\/strong> so you don\u2019t even need to open a new window to check stats. All you need is a running version of Chrome and some time to sift through the Lighthouse audit results.<\/p>\n

Generally this breaks down into four categories:<\/p>\n

    \n
  • Performance.<\/li>\n
  • Accessibility.<\/li>\n
  • Best practices.<\/li>\n
  • Progressive Webapp properties.<\/li>\n<\/ul>\n

    Each category breaks down further into smaller properties with recommendations for UX improvements.<\/p>\n

    \"lighthouse<\/figure>\n

    At the click of a button you can pull audit results<\/strong> that\u2019ll help you radically improve website performance, speed, usability<\/a>, and pretty much every metric Google cares about.<\/p>\n

    If you wanna learn more skim through the main page<\/a> and read up on Lighthouse\u2019s many features.<\/p>\n

    You can also watch this presentation<\/a> from Google I\/O 2017 which first introduced Lighthouse to the dev community.<\/p>\n