티스토리 블로그 최적화! Lighthouse로 성능과 지수 올리기

안녕하세요 하또또입니다.

 

블로그를 운영하면서 가장 궁금한 점은 "지금 내가 올바른 방향으로 가고 있는 것인가?"였습니다.

생각나는 대로, 쓰고 싶은 글이 있으면 있는 대로 포스팅을 작성하고는 있지만 개인 기록용 블로그가 아닌 이상

지금 블로그 운영을 잘하고 있는지가 궁금했었거든요.

 

네이버의 경우엔 블로그의 최적화를 상세하게 조화할 수 있는 사이트가 존재하고 티스토리도 비슷하게 블로그 차트라는 
사이트가 있지만 지수와 순위만 확인할 수 있어서 조금 아쉬웠지만 다행히 방법이 있었습니다.

 

티스토리 블로그 지수와 순위를 확인하고 싶다면 아래 포스팅을 클릭해 주세요😉

[Blog] 티스토리 블로그 지수 확인, 블로그 차트 등록 & 사용법

 

그것은 바로 쉽게 웹사이트의 성능을 확인하면서 최적화시킬 수 있는 Lighthouse 크롬 플러그인인데요.

오늘은 Lighthouse에 대해 포스팅을 해보겠습니다.

 

1️⃣ Lighthouse 크롬 플러그인이란?

Lighthouse는 웹사이트의 품질을 분석하고 최적화 개선점을 제안하는 오픈소스 도구입니다. Chrome 개발자 도구(DevTools)에서도 실행할 수 있지만, 크롬 확장 프로그램으로 설치하면 더 편리하게 분석 가능합니다.

 

Lighthouse에서는 코어 웹 바이탈 평가부터 시작해서 성능, 접근성, 권장사항, 검색엔진 최적화의 점수를 보여주고 점수를 높일 수 있는 해결 방안도 함께 제안해주고 있습니다.

✅ 주요 기능

1. 코어 웹 바이탈(Core Web Vitals) 평가
   • 웹사이트의 사용자 경험을 측정하는 핵심 지표(LCP, FID, CLS) 분석
   • 페이지 로딩 속도, 반응성, 시각적 안정성 개선 사항 제안
2. 성능(Performance)
   • 페이지 로딩 속도, 리소스 최적화, 렌더링 속도를 점검
   • 불필요한 스크립트 제거 및 캐시 최적화 추천
3. 접근성(Accessibility)
   • 장애인 및 다양한 사용자들이 웹사이트를 쉽게 이용할 수 있는지 평가
   • 색 대비, 텍스트 크기, 키보드 내비게이션 등의 개선 필요 여부 확인
4. 권장사항(Best Practices)
   • 최신 웹 표준 및 보안 가이드라인 준수 여부 분석
   • HTTPS 보안 설정, 콘솔 오류, 브라우저 호환성 체크
5. 검색엔진 최적화(SEO)
   • 페이지가 검색 엔진에 최적화되어 있는지 평가
   • 메타 태그, 구조화 데이터, 모바일 친화성 분석

---

2️⃣ Lighthouse 크롬 플러그인 설치 방법

 

우선 크롬에서 오른쪽 상단 -> 확장 프로그램 -> Chrome 웹 스토어 방문하기 순으로 클릭해서 

웹스토어를 들어간다음Lighthouse을 검색하여 확장 프로그램을 설치합니다.

 

 

그리고 Chrome에 추가를 클릭해서 설치하고 설치가 완료되면 아래 두 번째 이미지처럼 액세스를 허용해 주세요.

 

이제 블로그 켜둔 상태로 설정 후 Generate report를 누르기 전 옵션을 선택하셔야 합니다.

아래 Show results in 옵션을 선택하셔야 합니다

• PSI Frontend는 실제 사용자 데이터를 포함한 분석결과 제공하고 실제 트래픽 기반으로 분석합니다.
• Lighthouse Viewer는 시뮬레이션 데이터를 기반으로 분석

 

저의 경우엔 사용자 데이터를 포함하여 분석을 하고 싶어 PSI로 선택하고 Device는 Desktop(PC)로 선택하고 분석을 진행하였습니다.

 

 

저의 경우엔 사용자 데이터를 포함하여 분석을 하고싶어 PSI로 선택하고 Device는 Desktop(PC)로 선택하고 분석을 진행하였습니다.

---

3️⃣ 실제 사용자의 경험 분석

코어 웹 바이탈 평가에서 통과가 안 나왔다면 빠른 개선이 필요하다고 판단이 됩니다.

구글에서의 검색 노출과 직접적으로 연관이 있어 검색결과에서 밀려날 수 있습니다.

또, LCP는 콘텐츠 렌더링 시간으로 이 시간이 길어질 경우 방문자의 이탈과 연관되기 때문에 빠르게 개선을 하는 게 좋습니다.

---

4️⃣ 성능 문제 분석

 

제 블로그의 경우엔 권장사항을 제외한 나머지 항목에서 경고표시가 많이 보이네요. 많은 개선이 필요할 것 같습니다.심지어 성능은 61로 매우 낮고 중요하게 보이는 검색엔진 최적화에도 경고표시가 보이네요.

하단으로 내리면 이렇게 항목별 점수와 어떤 원인 때문에 점수가 낮아졌고 거기에 대한 해결 방안을 제시합니다.

하지만 해결방안을 제시를 해줄 뿐 우리가 모든 것을 해결할 순 없어 보입니다. 그러니 해결할 수 있는 선에서 수정하여 점수를 올려야겠네요.

제가 해결한 방법으로 점수가 오르면 다음 포스팅에는 점수 올리는 방법에 대해 포스팅을 작성해 보도록 하겠습니다.

 

 

구독하기👍 눌러주시고 자주 놀러와 주세요.

공감❤ ,댓글⌨은 저에게 큰 힘이 됩니다.

감사합니다.🤗

.

.

.

🙏잘못된 정보의 피드백은 댓글 남겨주세요.🙏

😁관련된 포스팅도 함께 읽어보세요.😁

 

구글 애드센스 광고 수익 높이기! CPC, CTR, 페이지 RPM 개념과 최적화 방법

구글 애드센스 광고 수익 높이기! CPC, CTR, 페이지 RPM 개념과 최적화 방법

구글 애널리틱스4에서 추적ID발급 방법 정리, 티스토리 구글애널리틱스 연동

[Blog] 구글 애널리틱스4에서 추적ID발급 방법 정리, 티스토리 구글애널리틱스 연동

티스토리 구글 서치콘솔 플러그인 등록방법 & 사이트맵 자동적용 방법

[Blog] 티스토리 구글 서치콘솔 플러그인 등록방법 & 사이트맵 자동적용 방법