Lighthouse는 웹 페이지 성능을 측정해 품질 개선하는데 도움이 되는 구글 크롬 확장 프로그램입니다. Lighthouse를 소개하고 이해를 하는데 도움이 되는 용어 등을 쉽게 설명드리겠습니다.
크롬 Lighthouse
크롬 라이트하우스는 크롬 브라우저 내 개발자도구에 내장된 퍼포먼스 측정 도구입니다. 사용자 성능 측정은 사용자가 웹 페이지 로딩이 빠른지 느린지 여러 순간들을 정의하고 성능을 측정하는 지표로 무엇을 측정하는지 주요 항목을 살펴보겠습니다.
Lighthouse 가 측정하는 내용
1) Performance (성능) - 웹 페이지의 로딩 속도 등 실제 성능을 측정
2) Best Practices - Best Practices를 따라 개발되었는지 확인
3) Accessibility (접근성) - 접근성 확인, 폰트 사이즈, 메뉴간 간격 등
4) Progressive Web App - 웹과 네이티브 앱의 기능 모두의 이점을 가지도록 만들어진 서비스인지 체크
5) SEO - 검색 엔진 수집 최적화 측정
이글에서는 가장 중요한 성능과 접근성 항목에 대해 다룹니다.
성능
성능에서 측정하는 항목은 아래 6가지 입니다.
1) First Contentful Paint (10%) - 최초 콘텐츠가 포함된 페인트, 초기 DOM 콘텐츠를 렌더링하는데 걸리는 시간으로 쉽게 말하면 콘텐츠인 텍스트나 이미지가 출력되기 시작하는 순간을 말합니다.
- 글꼴 : FCP에서 특히 중요한 문제는 글꼴 로드 시간입니다.
2) Largest Contentful Paint (25%) - 가장 큰 콘텐츠가 포함된 페인트, 가장 큰 콘텐츠를 렌더링 하는데 걸리는 시간
3) Total Blocking Time (30%) - 총 차단 시간으로 마우스 클릭, 화면 탭, 키보드 누름과 같은 사용자 입력에 페이지가 응답 하지 못하도록 차단된 총 시간
- 자바스크립트 : 차단 시간을 늘리는 요인으로 불필요한 자바스크립트 코드, 파싱, 실행, 비효율적인 자바스크립트문 등이 있습니다.
4) Cumulative Layout Shift (15%) - 누적 레이아웃 이동, 사용자가 예상치 못한 레이아웃 이동을 경험
5) Speed Index (10%) - 속도 지수로 콘텐츠가 시각적으로 표시되는 진행 속도를 측정
6) Time to Interactive (10%) - 상호 작용까지의 시간, 즉 사용자가 페이지와 완전하게 상호작용할 수 있을 때까지 걸리는 시간으로 자바스크립트 초기 실행이 완료되어 사용자가 행동을 취할 수 있는 순간까지 걸리는 시간을 말합니다.
위 항목을 측정해 진단한 내용을 보여주고 개선할 사항을 볼 수 있습니다.
렌더링 차단 리소스 제거하기 (Eliminate render-blocking resource)
CSS 최적화
- 랜더링이 차단되지 않도록 head 태그 안에 첫 번째 페인트에 필요한 중요한 스타일을 인라인으로 추가합니다. 그런 다음 preload 링크를 사용해 나머지 스타일을 비동기식으로 로드합니다. 보통 티스토리의 경우 css가 하나만 로드되니 <head> 태그 안에 가장 위에 위치시킵니다. 그리고 CSS 안에 안 쓰는 폰트나 이미지 로드를 제거해 주세요.
<head>
<link rel="stylesheet" href="./style.css">
</head>
JS 최적화 - 자바 스크립트도 요소들을 동적으로 변경할 수 있기 때문에 HTML 파싱을 차단하는 블록 리소스입니다.
- DOM트리가 생성되는 도중에 script 태그를 만나면 스크립트 실행이 완료될 때까지 트리 생성이 중단되기 때문에 CSS와 반대로 문서 최하단인 </head> 바로 앞에 배치합니다.
자바스크립트 실행 시간 단축 / 사용하지 않는 자바스크립트 줄이기
- 코드 분할을 구현해 사용자에게 필요한 코드만 전송
- 코드를 축소하고 압축
- 사용하지 않는 코드를 삭제
기본 스레드 작업 최소화하기
기본 스레드 작업 줄이려면 서드 파티 자바스크립트 최적화, 크고 복잡한 레이아웃 스래싱 피하기, CSS축소, 사용하지 않는 자바스크립트 코드 삭제하기 등이 있습니다.
차세대 형식을 사용해 이미지 제공하기
JPEG와 PNG 보다 압축 및 품질이 뛰어난 AVIF와 WebP 이미지 형식을 사용하길 권장합니다.
CSS 축소하기 / 사용하지 않는 CSS 줄이기
CSS는 필요이상으로 큰 경우가 많기 때문에 최대한 줄이는 것이 도움이 됩니다. 색상값도 #000처럼 약칭을 쓰면 더 줄일 수 있습니다.
사용하지 않는 CSS는 브라우저에서 렌더링 트리를 생성하는 속도를 저하하기 때문에 시간이 늘어납니다.
| 관련포스트 |
| SEO | 블로그 트래픽 감소 원인과 해결 방법 |
| 구글 SEO 최적화 된 블로그 글쓰기 |
| SEO | 구글 검색엔진 최적화 기초 |
| Bing 웹마스터 SEO |
'웹 개발 > 웹사이트' 카테고리의 다른 글
| 301 리다이렉트 설정하는 방법 (.htaccess) (35) | 2024.08.12 |
|---|---|
| 웹프레임워크 | 부트스트랩 소개와 시작하기 (103) | 2024.08.09 |
| FTP 폴더 권한 변경하는 방법 (파일질라, 명령프롬프트) (22) | 2024.08.07 |
| MVC 패턴 구조와 흐름 파악하기 (108) | 2024.08.05 |
| 웹프레임워크 | PHP 프레임워크 소개와 폴더 구조 (79) | 2024.08.02 |
| 도메인 | 내 도메인 이메일 주소로 사용하는 방법 (107) | 2024.07.05 |
| 도메인 | SSL 인증서 종류(DV, OV, EV)와 인증 브랜드 (95) | 2024.06.28 |
| 웹호스팅 | 아이네임즈 대표도메인 변경과 도메인 관리 (93) | 2024.06.26 |
댓글