웹 페이지 성능 최적화
date
Feb 27, 2023
thumbnail
gsc
Done
public
public
slug
web-performance
author
tags
Web
Frontend
summary
측정 방법과 개선의 기록
type
Post
updatedAt
Oct 20, 2023 01:42 AM
Introdution로딩 속도의 중요성 - 이탈률웹 페이지 측정 방법 - Lighthouse측정 항목성능접근성검색 엔진 최적화 (SEO)PWA (Progressive Web App)현 블로그의 측정 결과성능접근성권장사항검색엔진 최적화 (SEO)PWA추천 항목 개선성능검색엔진 최적화(SEO)마무리참고
Introdution
우리는 이제 모바일 기기를 통해 웹 페이지를 접하는 경우가 많고, 모바일 기기에서는 빠르게 동작하는 웹 페이지가 매우 중요하다.
웹 개발자가 속도를 개선하기 위해서는 속도 개선하는 기본 테크닉부터 분석하는 방법, 브라우저의 동작 원리 등을 알아야한다.
최적화를 하기 위한 방법 및 실습 내용을 정리하고자 한다.
로딩 속도의 중요성 - 이탈률
인내심의 한계의 시간은‘3초’Google 소비자 통계에 따르면 모바일 사이트 방문자의 53%가 로드하는 데 3초가 걸리면 페이지를 떠난다고 한다.
통계와 같이 로딩 시간에 따라 사용자의 만족도가 크게 나뉜다. ( 최소한 3초 만큼은 넘기지 않도록 노력해야겠다.. )
그렇다면 웹 페이지를 더 빠르고 사용하기 쉽게 만드는 데 필요한 방법들을 찾아보자.
웹 페이지 측정 방법 - Lighthouse
우선 현재 제공하는 페이지의 상태를 알기 위해
Chromium 기반 브라우저에서 확인해보자
Chrome DevTools에서 Lighthouse 사용하는 방법- 브라우저에서 웹 페이지를 연다. ( Chrome, Edge 등 )
- Chrome DevTools(개발자 도구창)를 연다.
- 단축키 사용:
F12orctrl + shift + i- 마우스 사용: 웹 페이지의 오른쪽 상단 모서리의세 개의 점클릭 후기타도구에서개발자 도구선택
- 활성화된 개발자 도구창 에서
Lighthouse탭을 선택한다.
- 해당 탭에서
체크 항목(성능, 접근성, SEO 등)`을 선택 후실행버튼을 클릭한다.
Lighthouse에서 평가 결과를 생성하고 보여준다.
측정 항목
성능
Chrome DevTools에서 Lighthouse를 사용하여 웹 페이지의 성능을 측정할 수 있다. Lighthouse는 페이지의 로딩 속도, 페이지의 상호작용성, 페이지의 안정성, 페이지의 SEO 등을 평가한다. 페이지의 성능을 개선하려면, 페이지의 로딩 속도를 개선하고 낮은 성능을 가진 부분을 최적화해야 한다.접근성
웹 페이지의 접근성은 다양한 사용자가 페이지를 사용할 수 있도록 하는 것을 의미한다. 웹 페이지의 접근성을 개선하려면, 웹 페이지의
HTML, CSS 및 JavaScript를 수정하여 웹 페이지를 보다 사용하기 쉽게 만들어야 한다.검색 엔진 최적화 (SEO)
검색 엔진 최적화는 웹 페이지의 검색 결과 노출 순위를 개선하기 위한 방법이며, 검색 엔진에서 웹 페이지를 더 잘 인식하도록 하는 것을 목적으로 한다. 검색 엔진 최적화를 개선하려면, 웹 페이지의
HTML, CSS 및 JavaScript를 수정하여 검색 엔진에서 쉽게 인식할 수 있도록 만들어야 한다.PWA (Progressive Web App)
PWA는 모바일 기기에서 앱과 같은 사용자 경험을 제공하면서, 특별한 앱 설치 없이 웹 브라우저에서 실행된다. PWA를 구현하려면, 웹 페이지에 설치 가능한 링크를 추가하고, 서비스 워커를 사용하여 웹 페이지가 오프라인 상태에서도 작동하도록 만들어야 한다.현 블로그의 측정 결과
이 글을 작성하는 시점의
HARRIS91 블로그의 성능 결과이다.
( 오픈소스로 부터 블로그를 수정&개선 하다보니 성능 이슈가 보인다.. 조금씩 해결해 나가기로.. )Lighthouse의 결과
Lighthouse에서는 각 결과에 대한 이슈 및 개선 방법을 확인할 수 있다. 아래 내용에서 어떠한 항목들이 성능에 영향을 주었는지 확인해보자.
성능
접근성
권장사항
검색엔진 최적화 (SEO)
‘링크를 크롤링할 수 없음' 에서는 <a>태그의 href 속성의 부재에 대한 내용이었다.PWA
추천 항목 개선
Lighthouse에서 추천한 내용을 몇 가지 수정하고, 변화된 결과를 확인하고자 한다. 아래의 방법으로 개선을 시도하였다.성능
네트워크 페이로드가 커지지 않도록 관리하기원인
성능 개선을 위한 추천 항목 중 '네트워크 페이로드가 커지지 않도록 관리하기'는 폰트 파일이 크거나, 불필요한 자바스크립트 및 이미지 다운로드로 인해 페이로드가 커지고, 이로 인해 로드 시간(성능)에 영향을 준 내용이다.
조치
1. 폰트 파일을 줄임 ( .ttf → .woff2 확장자로 변경 )
2. 불필요한 자바스크립트를 제거
3. CDN(Content Delivery Network)을 사용하여 정적 파일을 캐시하고 빠르게 제공
적용한
Pretendard 폰트가 한글 폰트로 무거운 편이다. 그래서 CDN의 서버에서 폰트를 받아오도록 했다.
클라이언트 환경에서 다른 페이지를 통한 캐싱된 정보가 있다면, 재사용이 가능하기에 로컬에서 CDN으로 변경했다.
개선 결과
73점 에서 100점까지 상향 되었다. ✨
( 다만, 일부 페이지에서는 좀 더 낮은 91점도 측정됐다. 측정 시 마다 네트워크 등 영향이 있는 것 같다. )
검색엔진 최적화(SEO)
링크를 크롤링할 수 없음원인
검색엔진에서 링크에 대해
href 속성을 사용하여 웹사이트를 크롤링할 수 있는데, href 속성의 부재로 개선 내용에 추가되었다.
조치
불필요하게 선언된
<a>태그는 <span>태그로 대체하고, 그 외 태그에는 href 속성을 추가하였다.
개선 결과
91점에서 100점으로 상향된 것을 볼 수 있다. 🥳
개선 전
개선 후 (2023/02/26)
개선 후 (2023/03/23)
마무리
웹 페이지 최적화는 사용자 경험을 개선하고, 검색엔진에서 노출 순위를 향상 시키며, 성능을 향상 시키는 등 여러 가지 이점이 있다.
따라서 웹 페이지 제작 시 최적화에 충분한 주의를 기울여야 한다는 점을 알게 되었다.
이 문서에서는 부족하지만 간단한 분석 및 개선 방법을 정리해보았다.
앞으로는 웹 페이지 최적화를 진행하고, 사용자들에게 더 나은 사용성과 경험을 제공하는 개발자가 되기 위해 노력해야겠다.
참고
긴 글 읽어주셔서 감사합니다.
오탈자 및 내용 피드백은 언제나 환영합니다.
#Frontend#Web