웹사이트 성능 최적화하기 with LightHouse

웹 개발 에서는 특히 성능이 중요하다. 어떤 부분이 개발한 웹에서 부족한지, 보완할 점은 무엇인지를 알기 위해 성능 측정을 해보자.

 

 

LightHouse

 

구글에서 개발한 웹 성능 측정기이다. 크롬의 개발자도구에 기본으로 내장되어 있어 F12 - LightHouse로 작동시킬 수 있다.

 

성능 측정

한창 프로젝트로 진행 중인 웹사이트를 측정해보았다. 성능과 접근성이 상당히 낮게 나온다.

 

아래쪽에서 원인과 해결 방법을 상세하게 알려준다. 따라서 한번 수정해보자.

 

성능 향상

Reduce unused JavaScript

React는 기본적으로 SPA(Single Page Application)이다. 웹 사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 변경하며 표현하는 것이다. 이러한 동작을 위해 하나의 파일에 모든 로직이 담기게 되는데 이에 따라 최초 로딩 시간이 길어지게 된다.

당장에 사용하지 않는 코드가 읽어진다는 뜻이다.

 

코드 스플리트를 적용해 해당 부분을 해결하고 성능을 향상할 수 있다.

[React] React.Lazy() (Code Splitting)

 

​이미지 크기 최적화

이미지 또한 컴포넌트 분리 및 Lazy를 적용하는 작업을 통해 비동기적으로 로딩될 수 있도록 하자. 또한 기본적으로 이미지의 품질을 낮추고 이미지의 크기를 정확히 명시해주어야 한다.

 

 

접근성 향상

접근성은 어떠한 장애가 있는 사람도 동등하게 웹에 접근하여 사용할 수 있게 하는 것이다.

위에서 accessible name과 alt가 정의되지 않았다고 알려주고 있는데, 두 가지 모두 보이스 오버와 관련된 항목들이다.

 

특히, alt 속성은 반드시 작성되도록 권장되는 속성이므로 잊지 말고 img 태그 사용시 작성하도록 하자.

 

 

결과

여러가지로 최적화를 한 결과 성능을 약 62%, 접근성을 약 20%정도 향상시킬 수 있었다. 사실 이 지표는 컴퓨터 환경에 따라 점수가 변화하니 절대적인 지표는 아니니 애플리케이션에서 부족한 부분을 보완하고 수치는 참고정도로만 생각하자!