가장 빠르고 최적으로 최적화된 리소스는 전송되지 않는 리소스입니다. 애플리케이션에서 불필요한 리소스를 제거해야 합니다. 암묵적이고 명시적인 가정에 관해 의문을 제기하고 주기적으로 다시 검토해 보는 것이 좋습니다. 예를 들면 다음과 같습니다.
- 여러분은 항상 리소스 X를 페이지에 포함해 왔지만, 이 리소스를 다운로드하고 표시하는 데 드는 비용이 사용자에게 제공하는 가치를 상쇄하나요? 그 가치를 측정하고 증명할 수 있나요?
- 리소스 (특히 서드 파티 리소스인 경우)가 일관된 성능을 제공하나요? 이 리소스가 핵심 경로에 있나요? 아니면 있어야 하나요? 리소스가 핵심 경로에 있다면 사이트의 단일 장애점이 될 수 있나요? 즉, 리소스를 사용할 수 없는 경우 페이지의 성능과 사용자 환경에 영향을 미치나요?
- 이 리소스에 SLA가 필요하거나 적용되나요? 이 리소스가 압축, 캐싱 등의 성능 권장사항을 준수하나요?
페이지에 불필요하거나 더 심하게는 방문자 또는 페이지가 호스팅되는 사이트에 많은 가치를 제공하지 않으면서 페이지 성능을 저하시키는 리소스가 포함되어 있는 경우가 너무 많습니다. 이는 퍼스트 파티 및 서드 파티 리소스 및 위젯에 동일하게 적용됩니다.
- 사이트 A는 방문자가 클릭 한 번으로 여러 사진을 미리 볼 수 있도록 홈페이지에 회전식 사진을 표시하기로 결정했습니다. 페이지가 로드될 때 모든 사진이 로드되며 사용자가 사진을 탐색할 수 있습니다.
- 질문: 얼마나 많은 사용자가 캐러셀에서 여러 장의 사진을 보는지 측정했나요? 대부분의 방문자가 보지 않는 리소스를 다운로드함으로써 높은 오버헤드가 발생할 수 있습니다.
- 사이트 B는 관련 콘텐츠를 표시하거나, 소셜 참여도를 높이거나, 기타 서비스를 제공하기 위해 서드 파티 위젯을 설치하기로 결정했습니다.
- 질문: 위젯을 사용하는 방문자 수 또는 위젯이 제공하는 콘텐츠의 클릭연결을 추적한 적이 있나요? 이 위젯이 생성하는 참여가 이러한 오버헤드를 감당할 만큼 충분한가요? 또한 스크립트가 필요할 때까지 로드되지 않도록 하기 위해 로드 전략을 사용할 수 있나요?
불필요한 다운로드를 제거할지 여부를 판단하려면 많은 고민과 측정이 필요합니다. 최상의 결과를 얻으려면 페이지의 모든 애셋에 대해 주기적으로 목록을 작성하고 이러한 질문을 다시 검토하세요.
코어 웹 바이탈에 미치는 영향
코어 웹 바이탈 시작은 사용자가 웹을 사용할 때 경험하는 경험을 반영하는 일련의 측정항목을 제공하기 위해 Google에서 도입되었습니다. 코어 웹 바이탈을 위한 여러 최적화 전략이 있지만, 페이지에 특정 리소스를 로드할지 여부를 질문하면 웹사이트에서 이러한 측정항목을 개선할 수 있습니다. 다음은 코어 웹 바이탈별로 그룹화된 몇 가지 예시로, 이에 대해 고려해 볼 가치가 있습니다. 이 외에도 다양한 예가 포함되어 있지 않지만 계속 읽어보면 상상력을 펼칠 수 있습니다.
최대 콘텐츠 렌더링 시간(LCP)
최대 콘텐츠 렌더링 시간 (LCP)은 가장 큰 콘텐츠 (예: 히어로 이미지 또는 헤드라인)가 로드되는 시점을 측정합니다. 이 측정항목은 사이트가 빠르게 로드되고 있다는 느낌을 사용자에게 주는 중요한 지각 측정항목으로 간주됩니다.
일반적으로 다운로드하는 리소스가 적다는 것은 사용자가 가지고 있는 대역폭이 더 적은 리소스에 할당된다는 것을 의미하므로 LCP가 개선될 수 있습니다. 일반적인 예로는 지연 로드가 있습니다. 지연 로드에서는 사용자가 해당 이미지를 볼 가능성이 더 높다고 브라우저에서 판단하기 전까지는 페이지 로드 중에 표시 영역 밖의 이미지가 다운로드됩니다. 예를 들어 50개의 이미지로 구성된 큰 썸네일 갤러리가 있는 경우 그중 상위 10개를 제외한 모든 이미지가 지연 로드되면 브라우저가 사용 가능한 대역폭을 보다 효율적으로 사용할 수 있으며 사용자에게 표시되는 첫 번째 이미지가 더 빠르게 로드됩니다.
그러나 이미지를 더 적게 로드하는 것만이 아닙니다. 브라우저에는 각 리소스가 수신해야 하는 대역폭을 결정하는 내부 우선순위 지정 체계가 있습니다. 하지만 이러한 모든 리소스, 특히 높은 우선순위로 다운로드된 리소스가 있더라도 잠재적인 LCP 요소의 종속 리소스가 부족해질 수 있습니다. 네트워크 연결이 느린 경우 특히 그렇습니다. 종속 리소스는 페이지의 LCP 요소를 나타내는 이미지 파일일 수 있지만, 브라우저가 페이지의 LCP 요소로 결정될 수 있는 텍스트 노드를 렌더링하는 데 필요한 웹 글꼴 리소스일 수도 있습니다.
웹사이트의 텍스트 양이 많은 경우 페이지의 LCP 요소가 텍스트 노드일 수 있습니다. 좋은 글꼴 최적화 및 로드 전략이 많이 있지만, 텍스트 노드인 LCP 요소가 웹 글꼴 리소스에 의존하지 않고 로드되고 CSS와 HTML이 서버에서 도착하는 거의 즉시 페인트할 수 있도록 시스템 글꼴이 웹사이트의 요구에 적합한지 고려해 보는 것도 좋습니다.
레이아웃 변경 횟수(CLS)
로드하는 모든 리소스는 특히 초기 페인트 시점까지 다운로드를 완료하지 않은 경우 페이지의 레이아웃 변경 횟수 (CLS)에 기여할 수 있습니다. 이미지의 경우 CLS에 명시적인 크기 설정과 같은 방법을 포함하지 마세요. 글꼴의 경우 글꼴 로드를 관리하고 잠재적인 대체 글꼴 매칭을 관리하면 웹 글꼴의 스왑 기간 동안 변경을 최소화할 수 있습니다. JavaScript의 경우, 레이아웃 변경을 허용 가능한 양으로 줄일 수 있도록 스크립트가 DOM을 조작하는 방법을 관리할 수 있습니다.
페이지의 CLS에 기여하는 모든 리소스는 페이지 레이아웃이 충분히 안정적인지 확인하기 위해 어느 정도의 작업이 필요합니다. 특정 리소스가 필요한지 여부를 질문하면 페이지 로드 속도를 높일 뿐만 아니라 레이아웃 안정성을 유지하기 위해 필요한 인지 노력을 줄일 수 있습니다. 이렇게 하면 사용자 경험의 질이 크게 줄어들 뿐만 아니라 프로젝트에서 다른 목표를 추구하는 데 더 많은 시간을 할애할 수 있으므로 개발자 경험의 부담도 줄어듭니다.
다음 페인트와의 상호작용 (INP) 및 최초 입력 반응 시간 (FID)
다음 페인트에 대한 상호작용 (INP) 및 최초 입력 반응 시간 (FID)은 사용자 입력에 대한 응답성을 측정하는 측정항목입니다. 2024년 3월에 코어 웹 바이탈로서의 FID를 INP가 대체할 예정이지만 FID 최적화 전략은 INP에도 적용되는 경향이 있습니다. 또한 INP는 FID로 측정되는 첫 번째 상호작용의 입력 지연뿐만 아니라 모든 페이지 상호작용의 전체 상호작용 지연 시간을 추적하므로 일반적으로 FID에 비해 최적화하기가 더 어렵습니다.
INP와 FID는 JavaScript의 영향을 가장 많이 받는 경향이 있습니다. 왜냐하면 JavaScript가 웹 전체의 상호작용 환경을 대부분 구동하기 때문입니다. INP와 FID의 경우, 페이지 로드 중에 다운로드되는 스크립트 리소스의 양으로 인해 스크립트 평가 및 컴파일과 관련된 잠재적으로 비용이 많이 드는 작업이 시작됩니다. 시작 시 로드되는 JavaScript가 적을수록 페이지 경험의 중요한 지점에서 브라우저가 수행해야 하는 작업이 줄어듭니다.
시작 시 다운로드되는 JavaScript 리소스의 크기를 줄이는 전략(예: 코드 분할 및 트리 쉐이킹)이 있지만 프로젝트에서 사용하는 패키지를 감사하여 필요한지 확인하는 것이 좋습니다. 예를 들어 lodash에는 오늘날에도 여전히 유용한 메서드가 많지만 매핑, 감소, 필터링을 위한 Array 관련 함수와 기타 등 브라우저에서 즉시 제공하는 메서드가 함께 제공됩니다.
점진적 개선은 자바스크립트에 대한 유용한 접근 방식입니다. 더 강력한 기기와 빠른 네트워크 연결을 사용하는 사용자에게 추가할 수 있는 기준 (그러나 여전히 기능하는) 환경을 사용자에게 제공할 수 있기 때문입니다. 점진적 개선 원칙을 고수하든 그렇지 않든, 중요한 점은 있습니다. 다운로드를 피할 수 있는 모든 JavaScript 리소스는 사용자 상호작용에 더 빠르게 반응하는 경험을 제공할 수 있으며, 이는 웹 성능의 중요한 측면입니다.
결론
웹사이트의 불필요한 다운로드에 대한 감사는 빠른 사용자 환경을 제공하기 위한 한 가지 측면일 수 있지만 큰 효과를 낼 수 있는 잠재력이 있습니다. 요약하면 다음과 같습니다.
- 페이지에 자체 자산 및 제3자 자산의 인벤토리를 작성합니다.
- 각 자산의 성능, 즉 가치와 기술적 성능을 측정합니다.
- 리소스가 충분한 가치를 제공하는지 확인합니다.
- 불필요한 다운로드가 코어 웹 바이탈 및 지원 측정항목에 미치는 영향을 파악합니다.
이러한 방식으로 콘텐츠 효율성을 최적화하면 전반적인 성능이 향상될 뿐만 아니라 사용자의 대역폭이 낭비되지 않도록 하고 잠재적으로 사용자 중심 측정항목을 개선하고 더 나은 사용자 환경을 제공할 수 있습니다.