[홈페이지] 웹 성능 최적화까지 해보자-9

이번에는 롱보드를 소개하는 사이트인데, 흔히 볼 수 있는 홈페이지 구조를 가지고 있는 페이지를 최적화해볼 것이다.

총 4개의 페이지로 구성되어 있고, 각 페이지에서 롱보드를 소개한다.

메인 페이지를 중심으로 최적화를 진행해보자.

 

이 장에서 학습할 최적화 기법은 다음과 같다.

• 이미지 지연 로딩
• 이미지 사이즈 최적화
• 폰트 최적화
• 캐시 최적화
• 불필요한 CSS 제거

 

이미지 지연 로딩

저번에는 당장 사용하지 않는 컴포넌트 코드를 분할해서 초기 로드 속도를 높이는 컴포넌트 지연 로딩 기법을 적용해봤다.

이번에는 당장 필요하지 않은 이미지가 먼저 로드되지 않도록 지연시키는 이미지 지연 로딩 기법을 적용해볼 것이다.

이렇게 하면 사용자에게 가장 먼저 보이는 콘텐츠를 더 빠르게 로드할 수 있다.

 

이미지 사이즈 최적화

이번에는 이미지 CDN에 있는 이미지가 아니라 서버에 저장되어 있는 정적 이미지를 최적화해볼 것이다.

 

폰트 최적화

커스텀 폰트를 적용할 때 발생할 수 있는 문제를 알아보고 최적화해보자.

 

캐시 최적화

캐시는 자주 사용되는 리소스를 브라우저에 저장해 두고 다음에 사용하려고 할 때 새로 다운로드하지 않고 저장되어 있는 것을 사용하는 기술이다.

이번에는 캐시를 어떻게 적용하고 활용하면 좋을지 최적화까지 해보자.

 

불필요한 CSS 제거

사용하지 않는 CSS 코드가 서비스 코드에 포함되어 있을 경우 해당 코드를 제거해서 파일 사이즈를 줄이는 방법에 대해서 한 번 알아보자.

 

분석 툴

이번에는 크롬 개발자 도구의 Coverage 패널도 사용해볼 것이다.

Coverage 패널은 웹 페이지를 렌더링하는 과정에서 어떤 코드가 실행되었는지 보여 준다.

각 파일의 코드가 얼마나 실행됐는지 비율로 나타낸다.

특정 파일에서 극히 일부의 코드만 실행되었다면, 즉 퍼센트가 낮다면 해당 파일에 불필요한 코드가 많이 포함되어 있다고 볼 수 있다.

 

또한, 웹에서 서비스되는 이미지 압축 도구인 Squoosh도 사용해보자.

웹에서 간편하게 이미지의 포맷이나 사이즈를 변경할 수 있게 해주는 툴이다.

 

마지막으로, PurgeCSS라고, 사용하지 않는 CSS를 제거해주는 툴도 사용해보자.

npm에 등록되어 있고 CLI를 통해서 실행도 가능하고, webpack 같은 번들러에서 플러그인으로 추가해서 사용할 수도 있어 편리하다.