Chrome Lighthouse 소개 - 개발한 사이트의 성능, 접근성, PWA, SEO를 체크해보자!

Chrome Lighthouse 소개 및 사용방법

Chrome에는 Lighthouse라는 개발자용 도구가 있습니다. 이 도구를 이용하면 웹사이트의 성능, 접근성, PWA(Progressive Web App)  지원 여부, SEO(Search Engine Optimization) 등의 관점에서 잘 만들어져있는 사이트인지 체크할 수 있습니다. 거기다가 해당 사항들을 개선할 수 있는 방안까지 친절하게(?) 알려줍니다. 아마도 구글 등의 검색엔진에서 검색 결과를 보내주기 위해서 인덱싱을 할 때, 잘 만들어져있는 사이트인지 여부도 확인한다고 들은 것 같은데요(확실하지는 않습니다만, 검색엔진에 노출이 되고 싶은 많은 사이트들이 빠른 로딩을 위하여 서버 사이드 렌더링을 채택하는 것을 보면 영향이 있는 듯 합니다... 그걸 떠나서도 좋은 사이트를 만드는 것은 좋은 사용자 경험을 줄 수 있으니 그렇게 만드는 것이 좋겠죠!), 해당 도구를 이용하여 확인할 수가 있습니다. 그렇다면 개발자 도구를 열어서 확인해보겠습니다. 크롬 창에서 F12 키를 누르면 개발자 도구를 열 수 있습니다.

 

개발자 도구에서 Lighthouse 탭을 사용하여 Lighthouse 도구를 사용할 수 있습니다.

개발자 도구에서 Lighthouse 탭에 들어가면 도구를 볼 수 있습니다. (Lighthouse 탭이 안 보이는 경우에는 >> 버튼을 눌러서 더 많은 탭을 봐야할 수도 있습니다.) "Analyze page load" 버튼을 눌러서 웹사이트의 성적표(?)를 받아봅시다! 디바이스 종류를 "모바일", "데스크톱"으로도 설정이 가능하고 평가하고 싶은 항목을 넣거나 빼는 것도 가능합니다. 버튼을 누르면 도구가 열심히 평가를 해주는데요... 잠시 기다려보면 성적표가 나옵니다! 성적표를 스크롤해서 내리면 개선방안도 알려줍니다.

 

Chrome Lighthouse가 제 블로그에 점수를 매겨줬습니다! Accessibility에서 낮은 점수를 받았군요! 분발해야겠습니다.

Performance 항목 소개 - 성능

Performance는 성능에 대한 항목입니다. 웹사이트에 접속할 때, 얼마나 빠르게 웹사이트의 콘텐츠가 표시되는지가 제일 큰 평가요소가 되겠습니다. 

 

Performance 관련 메트릭을 소개한다면 아래와 같습니다.

• First Contentful Paint: FCP는 브라우저가 처음으로 DOM 상의 콘텐츠를 그릴 때까지 소요된 시간을 말합니다.
• Largest Contentful Paint: 화면상(뷰포트)에 보이는 제일 큰 이미지나 텍스트 블록이 화면에 그려질 때까지 걸리는 시간을 말합니다.
• Total Blocking Time: 화면에 처음 콘텐츠가 그려진 순간(FCP)부터 화면이 상호작용 가능해질 때(Time to Interactive, TTI)까지 걸리는 시간입니다.
• Cumulative Layout Shift: 화면상에서 예상치 못하게 콘텐츠가 움직이는 정도를 의미합니다. 페이지가 비동기적으로 로딩되면서 로딩된 콘텐츠가 표시되면서 기존에 표시돼있던 콘텐츠가 예상치 못하게 움직이는 현상을 의미합니다. (아마 다들 한번쯤 경험해보셨을 것 같네요... ㅋㅋㅋ)
• Speed Index: 얼마나 빨리 화면에 콘텐츠가 노출되는지에 대한 지표입니다.

일반적으로 Performance 개선방안으로는 콘텐츠를 minify하는 것, gzip 등으로 압축하는 것, 화면에 표시되지 않는 이미지는 defer할 것 등의 제안을 해주는 것 같습니다. 

Accessibility 항목 소개 - 접근성

Accessibility는 접근성에 대한 항목입니다. 웹이란 것은 모든 사용자들에게 접근이 용이하도록 하자는 철학을 가지고 만들어졌는데요. 그렇기 때문에 장애를 가지고 계신 분들에게도 접근이 용이하도록 웹사이트를 만드는 것이 중요합니다. 시각장애인 분들은 웹페이지를 스크린 리더(화면에 있는 콘텐츠를 TTS 음성 합성을 통해 듣는 방법)를 통해서 접근합니다. 스크린 리더를 사용하는 경우에는 HTML 마크업을 올바르게 사용하는 것이 중요합니다. 이미지 등에는 alt 속성을 추가하여 해당 이미지에 대해 설명을 추가하도록 합시다.

Best Practices 항목 소개

Best Practices는 실무에서 최선이라고 생각되는 방안들을 사용하고 있는지 여부를 의미합니다. 제 블로그의 경우, console에 error가 찍힌 것으로 인하여 Best Practices 점수가 조금 깎였네요.

SEO 항목 소개 - 검색 엔진 최적화

SEO는 Search Engine Optimization의 약자로서 검색 엔진이 크롤링하기 좋도록 최적화가 되어있는지에 대한 항목입니다. a 태그의 경우 href 속성이 잘 붙어있는지 여부, img 태그에 alt 속성이 잘 붙어있는지 여부 등을 고려합니다.

PWA 항목 소개 - Progressive Web App

PWA는 Progressive Web App의 약자로서 웹사이트를 스마트폰에서 앱처럼 사용할 수 있도록 해주는 기술입니다. 스마트폰 뿐만 아니라 컴퓨터에서도 프로그램을 설치한 것처럼 사용할 수가 있습니다. 웹을 통해 네이티브 앱 같은 경험을 줄 수 있는 기술이라고 할 수 있겠네요. 제 블로그 서비스를 제공해주는 티스토리는 해당 기능을 제공하지 않기 때문에 스크린샷 상에는 해당 항목이 평가되지 않았습니다. PWA 기능을 넣었다면 해당 항목도 평가되어 나오게 됩니다.

 

제 글을 읽어주셔서 감사합니다. 좋은 하루 되세요~!

 

참고문서

• First Contentful Paint: https://developer.mozilla.org/en-US/docs/Glossary/First_contentful_paint
• Largest Contentful Paint: https://developer.mozilla.org/en-US/docs/Glossary/Largest_contentful_paint
• Total Blocking Time: https://web.dev/tbt/
• Cumulative Layout Shift: https://web.dev/cls/
• Speed Index: https://developer.chrome.com/docs/lighthouse/performance/speed-index