인포그랩 공식 홈페이지 성능 최적화 후기

안녕하세요. 저는 인포그랩 프론트엔드 엔지니어로, 회사 공식 홈페이지인 ‘인사이트’ 개발 업무를 맡고 있습니다. 저는 인사이트 성능을 최적화하기 위해 평소 다양한 기술을 조사하고 적용하는데요. 최근 이미지 용량 축소, WebP 파일 포맷 사용, Subset 폰트 import, lazy loading 적용으로 인사이트 초기 로딩 속도와 렌더링 속도를 크게 줄였습니다. 이 글에서는 웹 성능 최적화(Web Performance Optimization) 기술 동향을 짚어보고, 이러한 기술을 인사이트에 적용한 과정과 성과를 소개하겠습니다.

웹 성능 최적화란?

웹 성능 최적화는 웹사이트 속도와 응답성을 개선하는 프로세스입니다. 캐나다 전자상거래 솔루션 기업 Shopify에 따르면, 페이지 로드 시간 최소화, 웹 서버 응답 시간 단축, 리소스 제공 개선, 데스크톱과 모바일의 웹사이트 기능 향상 전략이 웹 성능 최적화에 포함됩니다. 이미지 크기를 제한하고, 사이트 코드를 개선하며, 웹 서버가 비즈니스 요구 사항을 충족케 함으로써 웹사이트를 최적화할 수 있습니다. 그 결과, 사용자는 웹사이트를 더 빠르고 효율적으로 사용할 수 있습니다. 이는 검색엔진 최적화(SEO)를 개선하는 데도 도움이 됩니다.

웹 성능 최적화 중요성

웹 성능 최적화는 비즈니스에 다양한 이점을 제공하기에 중요합니다. 스페인 웹 개발, UX/UI 디자인 교육 서비스 Ironhack는 그 이점을 다음과 같이 설명합니다.

1. 사용자 경험 향상: 빠르고, 반응 속도가 높은 웹사이트는 긍정적인 사용자 경험을 줍니다. 이는 사용자 만족도와 참여도를 높입니다.
2. 이탈률 감소: 웹사이트가 빠르게 로드되고 원활하게 작동하면, 사용자가 웹사이트를 떠날 가능성이 낮아집니다. 이로써 이탈률이 낮아집니다.
3. 전환율 개선: 웹사이트가 더 빨라지면, 방문자를 고객으로 더 효과적으로 전환할 수 있습니다. 이로써 매출이 늘어납니다.
4. 비용 절감: 최적화된 웹사이트는 더 적은 서버 리소스가 필요합니다. 따라서 호스팅과 유지보수 비용을 줄일 수 있습니다.
5. SEO 이점: 구글과 같은 검색 엔진은 웹사이트 속도를 순위 결정 요소로 고려합니다. 웹사이트가 더 빨라지면 검색 결과에서 더 높은 순위를 차지해 가시성이 향상됩니다.

참고

구글 SOASTA Research에 따르면, 페이지 로드 시간이 길어질 때 이탈 확률은 아래와 같이 높아집니다.

페이지 로드 시간 증가에 따른 이탈 확률 변동. 출처=Google/SOASTA Research, 2017

– 페이지 로드 시간 1초 → 3초, 이탈 확률 32% 증가

– 페이지 로드 시간 1초 → 5초, 이탈 확률 90% 증가

– 페이지 로드 시간 1초 → 6초, 이탈 확률 106% 증가

– 페이지 로드 시간 1초 → 10초, 이탈 확률 123% 증가

브라우저 렌더링 과정

웹 성능 최적화의 주요 목표는 브라우저가 웹페이지를 빠르고 효율적으로 렌더링하도록 돕는 것입니다. 그러려면 브라우저의 HTML, CSS, JavaScript 처리 방식을 이해하고, 각 단계에 최적화 전략을 적용해야 합니다. 브라우저 렌더링 과정은 다음과 같습니다.

DOM, CSSOM 생성

HTML과 CSS 등 화면을 그리는 데 필요한 리소스를 다운로드합니다. 다운로드한 HTML은 브라우저가 이해할 수 있는 형태로 변환하는 파싱(parsing) 과정을 거칩니다. 이로써 요소 간의 관계를 트리(tree) 구조로 표현한 DOM(Document Object Model)을 만듭니다.

CSS도 HTML과 비슷한 과정을 거쳐 브라우저가 이해할 수 있는 형태로 변환합니다. 변환 결과, ‘CSSOM(CSS Object Model)’이라는 트리 구조가 생성됩니다. CSSOM에는 각 요소가 포함하는 스타일 정보가 있습니다.

렌더 트리

DOM과 CSSOM이 결합해 렌더 트리(Render Tree)가 생성됩니다. 렌더 트리는 화면에 표시되는 각 요소의 레이아웃을 계산하는 데 사용됩니다.

레이아웃

화면 구성 요소(노드)의 위치나 크기를 계산하고, 해당 위치에 요소를 배치합니다. 화면의 레이아웃을 잡습니다.

페인트

화면에 배치된 요소에 색을 채워 넣습니다. 배경색을 채우거나, 글자 색을 결정하거나, 테두리 색을 변경합니다. 이때 브라우저는 효율적인 페인트 과정을 위해 구성 요소를 여러 레이어(layer)로 나눠 작업합니다.

컴포지트

각 레이어를 합성합니다. 페인트 단계에서 설명했듯 브라우저는 화면을 그릴 때, 여러 레이어로 화면을 쪼개 그립니다. 그다음, 마지막에 레이어를 하나로 합성하는데 그 단계가 컴포지트입니다.

브라우저 렌더링 과정은 브라우저에서 직접 확인할 수 있습니다. 개발자 도구의 성능(performance) 패널에서 검사한 뒤, 메인 스레드의 작업을 살펴보면 아래 그림과 같이 파싱 작업이 이뤄진 걸 확인할 수 있습니다.

인포그랩 공식 홈페이지 ‘인사이트’ 메인 페이지의 성능 패널 참고 자료

웹 성능 최적화 방식

웹 성능에는 로딩 성능과 렌더링 성능이 결정적 영향을 미칩니다. 각 성능의 의미와 최적화 방식은 다음과 같습니다.

로딩 성능

로딩 성능은 웹페이지가 서버에서 사용자 브라우저로 전송되고, 초기 로딩이 완료되는 속도입니다. 로딩 성능에서는 페이지가 사용자에게 처음 표시되는 시간을 줄이는 게 중요합니다. 이미지, 동영상, 폰트 최적화 방식과 파일 압축 방식을 중심으로 로딩 성능 최적화 방식을 살펴보겠습니다.

1. 이미지, 동영상, 폰트 최적화 방식

   • 이미지: WebP와 같은 이미지 파일 포맷을 사용해 전송 크기를 줄여 페이지 로딩 시간을 단축합니다. WebP는 웹에서 이미지 압축 성능과 품질을 개선합니다. 이는 JPEG와 PNG보다 압축률이 더 좋으며 품질도 보장합니다.

     <!-- WebP 이미지 사용하기 -->
     <picture>
         <source srcset="image.webp" type="image/webp">
         <img src="image.jpg" alt="Description of the image"> <!-- 대체 이미지 포맷 -->
     </picture>

   • 동영상: WebM과 같은 비디오 파일 포맷으로 전송 크기를 줄여 페이지 로딩 시간을 단축합니다. WebM은 웹에서 비디오를 스트리밍하는 개방형 포맷입니다.

     <!-- WebM 비디오 사용하기 -->
     <video controls>
         <source src="video.webm" type="video/webm">
         <source src="video.mp4" type="video/mp4"> <!-- 대체 비디오 포맷 -->
     </video>

   • 폰트: WOFF2, WOFF와 같은 웹 폰트 파일 포맷을 사용해 페이지 로딩 시간을 단축합니다. WOFF2는 WOFF의 개선된 버전으로, 효율적인 압축 알고리즘을 활용해 폰트 파일 크기를 줄입니다.

     @font-face {
     font-family: 'MyCustomFont';
     src: url('font.woff2') format('woff2'),
          url('font.woff') format('woff'); /* WOFF 대체 폰트 */
          url('font.ttf') format('truetype'); /* WOFF 대체 폰트 */
     font-weight: normal;
     font-style: normal;
     }
     
     body {
          font-family: 'MyCustomFont', sans-serif;
     }

2. 파일 압축 방식

   서버와 브라우저 간에 압축 파일을 전송해 브라우저 로딩을 빠르게 합니다. 아래는 파일 압축에 쓰이는 알고리즘입니다.

   • Gzip: 가장 널리 알려진 압축 알고리즘입니다. 이는 파일 크기를 최대 70%까지 줄입니다.
   • Brotli: 구글이 선보인 압축 알고리즘입니다. Gzip보다 최대 15~20% 더 적은 용량으로 압축합니다.

렌더링 성능

렌더링 성능은 브라우저가 HTML, CSS, JavaScript를 해석해 화면에 콘텐츠를 표시하는 속도입니다. 이는 사용자 인터페이스를 신속하게 표시하고 상호작용을 하도록 하는 게 중요합니다. 코드 최적화 방식을 중심으로 렌더링 성능 최적화 방식을 알아보겠습니다.

1. 코드 최소화: 불필요한 공백, 주석, 줄 바꿈을 없애 코드 파일 크기를 줄입니다. 이로써 브라우저가 코드를 더 빨리 해석하고 렌더링하도록 합니다.
2. 중복 코드 제거: 중복된 코드를 없애고 모듈화해 코드 효율성을 높입니다. 이로써 브라우저의 코드 해석, 렌더링 시간이 단축됩니다.
3. 비동기 로딩: 주요 콘텐츠를 먼저 로드하고, JavaScript와 CSS를 비동기 방식으로 로드합니다. 이로써 페이지 로딩을 차단하지 않고, 초기 렌더링 시간을 줄입니다.
   • JavaScript 파일은 <script> 태그에 async 또는 defer 속성을 사용해 비동기 방식으로 로드합니다.
     • async 속성
       • 스크립트를 비동기 방식으로 다운로드한 다음, 즉시 실행합니다. 페이지의 다른 요소보다 먼저 실행할 수 있습니다.
       • 독립적인 스크립트에 적합합니다(예: 광고, 트래킹 코드 등).
     • defer 속성

       • 스크립트를 비동기 방식으로 다운로드하되, HTML 파싱이 완료된 후 실행합니다. 스크립트가 로드된 순서대로 실행됩니다.

       • DOM이 준비된 뒤 실행하는 스크립트에 적합합니다(예: DOM 조작).

   • CSS는 비동기 방식으로 로드되지 않습니다. 그러나 이를 흉내 내려면 media 속성을 사용하면 됩니다.

     • 비주얼 중요도가 낮은 스타일이나 초기 페이지 로딩 속도를 개선하는 데 사용합니다.

인포그랩 홈페이지 성능 최적화 사례

앞서 언급했다시피 저는 인포그랩 공식 홈페이지인 ‘인사이트’ 개발 업무를 담당합니다. 저는 인사이트 유입을 늘리고, 인포그랩이 검색엔진에 잘 노출되도록 여러 기술을 조사하고 적용합니다. 그 일환으로 앞서 다룬 웹 성능 최적화 방식을 최근 인사이트 성능 개선 작업에 활용했습니다.

수행 작업

저는 인사이트 성능을 향상하기 위해 초기 로딩 속도에 가장 많이 신경을 썼습니다. 초기 로딩 속도를 높여 사용자가 인사이트를 떠나지 않게 하려 했습니다. 아래는 제가 수행한 작업입니다.

1. 이미지 용량 축소: 제가 최우선으로 수행한 웹 성능 최적화 작업입니다. 메인 캐러셀 어셋은 화질에 영향을 주지 않으면서 용량을 줄이는 도구 Tinify를 사용했습니다.
2. WebP 파일 포맷 사용: 인사이트에 WebP 파일 포맷을 사용하도록 설정했습니다. 브라우저가 WebP 확장자를 지원하지 않을 수 있는데요. 브라우저에 따라 알맞은 확장자를 다운로드 받도록 작업했습니다.
3. Subset 폰트 import: 사용하는 폰트만 import 하도록 Subset 폰트를 import 했습니다. 또 사용하지 않는 플러그인을 제거해 렌더링 속도를 높였습니다.
4. lazy loading 적용: 처음 렌더링 되는 이미지가 아니면 lazy loading 되도록 설정했습니다. 새로고침 시 캐러셀이 랜덤 배치되는 기능이 있긴 했습니다. 그러나 인사이트를 새로고침 할 때마다 레이아웃부터 다시 이뤄지는 걸 보고 lazy loading을 적용했습니다.

수행 결과

저는 Lighthouse로 인사이트 성능 점수를 측정했습니다. Lighthouse는 웹 애플리케이션 성능, 품질, 정확성을 개선하는 오픈 소스 자동화 도구입니다. 저는 웹 성능을 최적화하기 전과 후 First Contentful Paint, Largest Contentful Paint, Speed Index 값을 Lighthouse로 각각 살펴봤습니다. 각 측정값 의미는 다음과 같습니다.

• First Contentful Paint: 초기 DOM 콘텐츠를 렌더링하는 시간. 첫 번째 텍스트나 이미지가 표시되는 시간
• Largest Contentful Paint: 페이지의 주요 내용이 화면에 렌더링 완료되는 시간
• Speed Index: 페이지의 콘텐츠가 시각적으로 표시되는 속도

아래는 Lighthouse로 측정한 웹 성능 최적화 전과 후 인사이트 성능 점수입니다.

1. 웹 성능 최적화 전

   
   Lighthouse로 측정한 웹 성능 최적화 전 인사이트 성능 점수
   
   

   웹 성능 최적화 전 인사이트 성능 점수는 61점으로 중간 수준이었습니다. 첫 번째 텍스트나 이미지가 표시되는 시간(First Contentful Paint)은 1.6초였습니다. 아울러 페이지의 주요 내용이 화면에 렌더링 완료되는 데(Largest Contentful Paint) 8.2초 걸렸습니다. 페이지의 콘텐츠가 시각적으로 표시되는 속도(Speed Index)는 4.0초였습니다. 세 지표 모두 시간이 길게 나와 ‘인사이트 성능이 긍정적 사용자 경험을 제공하는 데 방해가 될 수 있다’라고 판단했습니다.

2. 웹 성능 최적화 후

   
   Lighthouse로 측정한 웹 성능 최적화 후 인사이트 성능 점수
   
   

   웹 성능 최적화 후 인사이트 성능 점수는 98점으로 급상승했습니다. 세부 지표도 크게 개선됐습니다. 첫 번째 텍스트나 이미지가 표시되는 시간(First Contentful Paint)은 1.6초 → 0.8초, 페이지의 주요 내용이 화면에 렌더링 완료되는 시간(Largest Contentful Paint)은 8.2초 → 0.9초, 페이지의 콘텐츠가 시각적으로 표시되는 속도(Speed Index)는 4.0초 → 0.9초로 급격히 단축됐습니다. 초기 로딩 속도와 렌더링 속도가 확연히 줄었습니다.

맺음말

지금까지 웹 성능 최적화 기술 동향과 이 기술을 인사이트에 적용한 과정, 성과를 살펴봤습니다. 웹 성능 최적화 전략은 브라우저 로딩, 렌더링 과정을 정확히 이해하고 각 과정에서 일어나는 불필요한 작업을 제거하는 게 핵심입니다.

요즘 ‘숏폼’과 같은 짧은 콘텐츠 인기가 장기화하는 걸 보면, 사용자의 빠른 속도 욕구는 점점 더 높아지는 걸 확인할 수 있습니다. 소프트웨어 엔지니어는 ‘사용자가 느린 로딩을 기다려주지 않는다’는 사실을 기억하며, 웹 성능 최적화에 힘써야 합니다. 이 글이 여러분 서비스의 웹 성능을 업그레이드하는 데 도움이 되면 좋겠습니다.

참고 자료

1. Rich Moy, “9 Essential Strategies for Web Performance Optimization”, Shopify, 2024.7.8, https://www.shopify.com/enterprise/blog/web-performance-optimization
2. “6 Web Performance Optimization Strategies to Improve User Experience and Retention”, Ironhack, 2024.2.9, https://www.ironhack.com/gb/blog/6-web-performance-optimization-strategies-to-improve-user-experience-and-retentio
3. 유동균, “프론트엔드 성능 최적화 가이드”, 인사이트, 2022
4. “async vs defer attributes”, Growing with the Web, 2014.2.26, https://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html
5. the Pragmatic Dev, “How Does the Browser Render a Webpage?”, Better Programming, 2020.6.22, https://betterprogramming.pub/how-does-the-browser-render-a-webpage-75cdb53ba49d

DevOps와 GitLab을 효과적으로 도입하는 방법, 지금 인포그랩에 문의하세요.