SEO 개선 전 PageSpeed Insights 성능 분석

대표 홈페이지 SEO 개선 작업을 시작했다.

메인을 포함한 4개의 메뉴 페이지와 개인정보처리방침, 이용약관으로 이루어진 사이트이다.

 

📍 기존 사이트의 한계

▪ 수동적인 작업 환경
- 동적 라우팅 미지원
- 불필요한 파일들과 미사용 코드
- 반복적인 하드 코딩

▪ 플랫(Flat) 페이지 계층 구조
- 사이트 구조 재설계 필요

 

📍 웹 퍼포먼스 도구를 이용한 현재 사이트 성능(SEO 포함한) 테스트

▪  웹 퍼포먼스 도구

- 웹사이트의 성능, 접근성, SEO 등을 분석하고, 공통적으로 Lighthouse 엔진을 기반으로 분석

- Lighthouse와 PageSpeed Insights가 있다.

📍 Lighthouse V.S. PageSpeed Insights

 

▪  Lighthouse는 크롬 DevTools 또는 CLI에서 직접 실행하다.
로컬 개발 환경에서 주로 사용하고, 브라우저에서 직접 실행 가능하다.
로컬 서버를 대상으로 분석하기 때문에 인증 필요한 페이지도 분석 가능하다.
세부적으로 모바일/데스크톱을 선택해서 설정할 수 있고, throttling 조절도 가능하다.

 

▪  PageSpeed Insights는 웹 기반의 서비스이기 때문에, 사이트에 접속 후 실제 배포된 사이트 URL을 입력하여 실행한다.

배포된 "공개" 웹 페이지만 분석 가능하다.
따로 세부 설정을 불가능하다.

 

▪  요약 

	Lighthouse	PageSpeed Insights
형태	크롬 DevTools 또는 CLI에서 직접 실행	웹 기반 서비스
사용 방법	로컬 개발 환경, 브라우저에서 직접 실행	https://pagespeed.web.dev 접속 후 URL 입력
분석 대상	로컬 서버, 인증 필요 페이지도 가능	배포된 공개 웹 페이지만 가능
세부 설정	모바일/데스크톱 선택, throttling 조절 가능	기본 설정 변경 불가능

 

📍 PageSpeed Insights(웹 퍼포먼스 도구) 성능 분석

아래의 결과는 앞으로 개선해야 할 홈페이지 테스트 결과이다.

실제 배포되고 있는 홈페이지를 분석해야 하기 때문에 PageSpeed Insights를 이용했다.

 

	PC	MO
Main
About
Product
Event
Contact

 

📍 개선 방안

▪ Vue3 VS Nuxt3
- Nuxt3 사용
    - Vue는 CSR 방식이기 때문에 SEO 최적화에 불리함.
    - SSR 지원하고 자동화된 작업 환경 지원하는 Nuxt 채택.