[Vitals] 웹 바이탈 (Web Vitals) #3 - 개선

웹 사이트의 개선에 가장 중요한 핵심은?

- 더 나은 웹 사이트 성능을 달성하기 위한 핵심 키워드는 크기와 순서 입니다. 

- 리소스 전송 파일의 크기를 줄일 수 있다면 더욱 빠르게 전송하여 시간을 단축 시킬 수 있고, 우선 순위에 따라 로드되는 순서를 조작 할 수 있다면 웹 바이탈 측정 결과가 더욱 향상 될 수 있습니다.

 

1. 호스팅 및 파일 전송

- 웹 성능은 웹 사이트의 파일을 전달하는 서버의 품질에서 시작됩니다. 서버 품질은 빠른 *TTFB(Time to First Byte)의 핵심이 되며 이는 더나은 FCP(First Contnentful Paint)로 연결 됩니다.

- 또한 CDN을 활용하여 사용자의 위치에서 물리적으로 가까운 지역에 있는 CDN 서버를 둔다면 리소스 전달 속도를 향상 시킬 수 있습니다.

* TTFB : 브라우저가 페이지를 요청한 시점과 서버로부터 첫 번째 정보 바이트를 수신한 시점 사이의 시간

- 요점 : 고품질 웹 호스트에 대한 비용을 지불하고 CDN을 고려하는 방법

2. 캐싱 활성화

- 정적인 데이터를 캐시하여 클라이언트에서 로드 할 때의 시간을 단축 시킬 수 있습니다. 

1) 브라우저 캐시

- 특정 웹 사이트에 방문할 때마다 다시 파일 다운로드 할 필요가 없도록 클라이언트에서 파일을 저장합니다. 

- 리소스를 요청하는 헤더에 Cache-Control 속성을 활용하여 서버 부하를 줄일 수 있습니다.

2) 공유 캐시

- 여러 사용자들에 의해 재활용될 수 있는 것들이 저장되는 것으로, 대표적인 공유 캐시는 프록시 캐시가 있으며 CDN을 사용하는 서비스는 리버스 프록시 캐시를 사용할 수 있습니다.

- 요점 : 캐싱은 웹 성능 개선에 매우 중요한 기능이므로 가능한 활용하는 것을 권장합니다.

3. Asset Compression

- 성능 개선 측면에서 파일은 크기가 작으면 작을 수록 좋습니다. 다만 품질을 유지하는 것과 크기를 줄이는 것이 병행되어야 합니다.

 

[파일 형식에 따른 크기 조정]

1) 이미지 : 다양한 무료 압축 도구들이 있으며 품질에 영향을 미치지 않으면서 이미지 파일 크기를 최대 50% 이상 줄이는 경우가 많습니다.

2) 글꼴 : 글꼴은 Google Fonts 와 같은 신뢰할 수 글꼴을 사용해야 하며 실제로 사용하는 글꼴만 로드해야 합니다. 또한 WOFF, WOFF2, TTF 등의 폰트 파일 확장자가 있으며 상황에 맞게 글꼴 파일 형식을 선택하여 최적화해야 합니다. 

3) 외부 서비스 : 외부 서비스 사용은 최소화 되어야 되며 사용하더라도 스크립트는 압축하여 사용해야 합니다.

4) 비디오 : 가장 거대한 대역폭을 소모하는 파일이 될 수 있으므로 최대한 압축하여 사용하여야 합니다.

5) 스타일시트 : 복잡한 스타일의 웹사이트 일 수록 CSS파일 압축 효율이 높기에 반드시 압축되어야 합니다.

 

[파일 크기 목표값]

- Image : 600KB

- Javascript:  200KB

- Font : 100KB

- CSS : 100KB

- 총계 : 1MB

 

- 요점: 웹 사이트에 필요한 것만 로드하고 해당 파일을 가능한 한 작게 만드세요.

4. 이미지 크기 및 포맷

- 이미지의 경우 전체 페이지 리소스의 절반 이상을 쉽게 차지할 수 있습니다. 그만큼 웹 서비스에서 무거우면서도 많이 사용되는 대표적인 요소입니다. 따라서 이미지는 압축을 하더라도 이미지의 크기 및 포맷을 신중하게 고려하고 선택해야 합니다 .

1) 크기

- 이미지의 크기는 쓰여지는 곳에서의 환경에 맞게 고려되어야 합니다. 예를들어 해당 웹 사이트가 PC/모바일 중 어느쪽에 중점을 둘 것인지에 따라 표현되는 이미지 크기가 결정됩니다.

2) 포맷

- 이미지 포맷 중 JPEG는 압축에 적합하고 크기가 작습니다. PNG는 투명성이 필요한 경우에만 사용해야 합니다. 

- SVG는 작은 크기로 압축할 수도 있고 품질을 유지하면서 사이즈 변경이 가능한 부분 등, 다용도로 사용할 수 있으며 특히 아이콘과 로고에 사용하는 것이 좋습니다. 

- WebP는 구글에서 만든 이미지 포맷으로 PageSpeed Insights에서 적극적으로 권장하고 있는 이미지 포맷입니다. 

 

- 요점: 이미지는 속도에 심각한 영향을 미치므로 적절한 포맷과 크기로 저장해야 합니다.

5. Font Delivery

- 웹 글꼴은 로딩이 지연되면 레이아웃 변경 및 글꼴 교체를 유발하므로 특별히 주의해야 합니다.

• FOIT는 Flash of Invisible Text의 약자입니다. 글꼴 파일이 성공적으로 로드될 때까지 보이지 않는 텍스트가 렌더링되어 텍스트가 나타나는 것을 의미합니다. 텍스트가 부족하면 페이지에 의미 있고 소비 가능한 정보가 없다는 의미이므로 이는 바람직하지 않습니다.
• FOUT은 Flash of Unstyled Text의 약자입니다. 여전히 문제가 있는 FOUT은 글꼴이 로드될 때 시스템에 설치된 글꼴(예: Arial)이 다운로드한 글꼴로 갑자기 교체되는 효과를 나타냅니다.

- 현실적으로 웹 글꼴은 다운로드 해야하는 파일이며, 다운로드 속도가 즉각적이지 않기 때문에 FOIT와 FOUT을 100% 피할 수 없습니다.

- 기본적으로 대부분의 브라우저는 웹 폰트파일이 로드 될 때까지 텍스트가 표시되지 않습니다. 하지만 아래 CSS속성을 활용하면 이를 변경할 수 있습니다.

font-display('auto'가 기본값이며 'block'과 동일)

• block: 글꼴이 로드될 때까지 FOIT를 강제
• swap: 웹 폰트가 로드될 때 까지 대체 폰트를 사용 (폰트파일이 로드 될때까지 FOUT 상태)
• fallback: 100ms동안 텍스트가 보이지 않는 기간이 발생하며, 100ms 이후 폰트가 로드되지 않으면 대체 글꼴을 사용  
• optional: fallback 과 비슷하지만 이 설정은 웹 폰트 로드가 너무 느린 것으로 간주되는 경우 웹 폰트를 다운로드 할지 여부를 결정

- 마지막으로 폰트 포맷은 .woff2가 권장되고 있습니다. woff2는 압축되어 있고 웹 친화적이며 파일크기가 효율적입니다.

6. 렌더링 차단 Assets

- 렌더링 차단 Assets는 웹 로딩 프로세스의 순서를 방해하는 요소입니다. 페이지의 일부 Assets이 비효율적으로 로드되고 더 중요한 다른 파일이 로드되어야하는 시점에 로드되지 못하도록 차단합니다. 

- 따라서 모든 파일은 우선순위가 있고 그에 맞는 순서로 로드되어야 합니다. 간단히 표현하자면 가장 중요한 항목을 푸시하고, 다른 중요한 항목은 미리 로드하고, 중요하지 않는 파일은 지연 로드하는 것입니다. 이것이  PRPL 패턴의 핵심입니다.

* PRPL

• Pushing critical resources efficiently, which minimizes the amount of roundtrips to the server and reducing the loading time. (중요한 리소스를 효율적으로 푸시하여 서버 왕복횟수 및 로딩시간 최소화)
• Rendering the initial route soon as possible to improve the user experience (사용자 경험 개선을 위한 빠른 초기 경로 렌더링)
• Pre-caching assets in the background for frequently visited routes to minimize the amount of requests to the server and enable a better offline experience (자주 방문하는 경로에 대하여 사전 캐싱하여 서버에 대한 요청량을 최소화 )
• Lazily loading routes or assets that aren’t requested as frequently (자주 요청되지 않는 경로나 자산은 lazy-loading)
  
  

1) Top to Bottom

- 브라우저는 웹 사이트를 분석할 때 위에서 아래로 의 처리 순서가 있습니다. 

- 비동기 로딩 기술을 사용하여 예외를 생성하는 방법이 있지만 일반적으로 동기적으로 로드된 페이지는 실제로 Header 콘텐츠를 먼저 처리하고 Footer 콘텐츠를 가장 마지막으로 처리합니다.

- 이것으로 스크립트, 외부서비스, 중요도가 낮은 스타일시트 등 중요하지 않은 파일을 Footer에 가깝게 배치해야 합니다.

2) Lazy Loading

- 페이지 로딩 타임라인과 별개로 발생되는 이벤트

- 기본적인 리소스 로딩보다 구현이 복잡해지고, 이미지의 경우 표시되지 않다가 다운로드되어 갑자기 표시되는 현상이 발생 될 수 있습니다.

// example code
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            width: 400px;
            height: 1200px;
            padding: 100px 0;
        }
    </style>
</head>
<body>
    <img src="./images/img_1.jpg" loading="lazy"/>
    <img src="./images/img_2.jpg" loading="lazy"/>
    <img src="./images/img_3.jpg" loading="lazy"/>
    <img src="./images/img_4.jpg" loading="lazy"/>
    <img src="./images/img_5.jpg" loading="lazy"/>
    <img src="./images/img_6.jpg" loading="lazy"/>
</body>
</html>

- loading="lazy" 속성을 사용할 경우 브라우저 스크롤에 반응하여 뷰포트 영역에 근접할 때 이미지를 로딩합니다. 

- loading="lazy"의 경우 이미지 지연로딩은 간단하게 사용할 수 있으나 세세한 컨트롤이 어렵기 때문에 구현은 어려워지지만 세세한 컨트롤이 가능한 Intersection Observer API(교차 관찰자 API) 방식(Infinite Scroll library 활용)을 사용할 수도 있습니다.

3) Async or Defer 

- 브라우저는 HTML을 파싱하던 중 <script>...</script> 태그를 만나면 스크립트를 먼저 실행해야 하므로 DOM 생성을 멈추게 됩니다. 이러한 문제를 해결 할 수 있는 async와 defer 속성이 있습니다.

 

[Asnyc]

 - async 속성이 붙은 스크립트는 페이지와 완전히 독립적으로 동작합니다. 

 - 먼저 스크립트가 백그라운드에서 다운로드가 되며 HTML은 async 스크립트 다운을 기다리지 않고 그대로 실행됩니다. 

 - 이후 스크립트가 완전히 다운로드되면 브라우저는 DOM생성을 위한 파싱을 멈추고 스크립트를 실행하게 됩니다.

 - async 스크립트는 자신외의 스크립트에 영향을 주지 않습니다. 따라서 async 스크립트가 여러개인 경우에는 실행 순서가 제각각이 됩니다.

 

[Defer]

 - defer 속성이 붙은 스크립트는 페이지 또한 독립적으로 동작하며, 백그라운드에서 스크립트가 다운로드됩니다. 

 - 따라서 해당 스크립트를 다운로드하는 중에는 HTML 파싱이 멈추지 않습니다. 

 - defer는 async와는 다르게 HTML 파싱 중에 스크립트가 다운로드 되더라도 파싱을 멈추지않고 기다렸다가 DOM 준비가 완료된 후 스크립트가 실행됩니다.  

4) Preload, Prefetch, Preconnect

- 브라우저가 로드 우선순위를 지정하는 방식을 수정하기 위해 요소에 적용할 수 있는 속성이며 <link> 태그에 적용됩니다. 

<link rel="preload" href="style.css" />

• 현재 페이지의 로딩 중에 필요한 리소스를 미리 다운로드하여 브라우저 캐시에 저장
• 필요한 리소스가 실제로 사용되기 전에 이미 로컬에 캐시되어 있어 빠른 로딩이 가능
• 리소스를 중복 참조하면 중복된 개수만큼 리소스를 가져옴

<link rel="prefetch" href="style.css" />

• 현재 페이지에서는 사용되지 않지만 다음 페이지에서 사용될 리소스를 미리 다운로드
• 사용자가 다음 페이지로 이동할 때 해당 리소스가 이미 로컬에 캐시되어 있어 빠른 로딩이 가능
• 과도한 prefetch는 사용자의 대역폭을 낭비할 수 있으므로 신중한 선택 필요

<link rel="preconnect" href=”https://www.paperstreet.com/" />

• 특정 도메인과의 연결을 사전에 설정하여 해당 도메인과의 네트워크 지연을 최소화 (DNS Lookup, TCP/TLS handshake)
• CDN이나 외부 도메인과의 연결에 활용됨
• 구글 웹폰트 서비스 이용시 자동으로 설정되는 값

 

 

 

참고사이트

https://ko.javascript.info/script-async-defer

https://velog.io/@biosina1/1.-Intersection-Observer-API%EA%B5%90%EC%B0%A8-%EA%B4%80%EC%B0%B0%EC%9E%90-API#callback