이 페이지는 Cloud Translation API를 통해 번역되었습니다.

Aurora의 새로운 기능

Kara Erickson

Chrome의 Aurora 이니셔티브는 웹에서 사용자 환경을 개선하기 위한 Chrome 및 오픈소스 JavaScript 프레임워크 및 도구 간의 협력입니다. Aurora를 처음 사용한다면 소개 게시물에서 Aurora의 사명과 방법론에 대해 자세히 알아보세요.

2021년 이후 로드맵을 공개하지 않은 점을 감안하여 Google에서 지금까지 어떤 작업을 진행해 왔는지, 2023년에 진행 중인 몇 가지 흥미로운 프로젝트를 공유하고자 합니다.

최근 프로젝트 주요 정보

지난 몇 년 동안 Google은 Next.js, Angular, Nuxt와 같은 프레임워크와 협력하여 코어 웹 바이탈을 최적화해 왔습니다. 다음은 최종 업데이트 이후의 몇 가지 주요 사항입니다.

이미지

이미지는 성능 문제의 원인인 경우가 많습니다. 다음은 Google이 협력 중인 프레임워크를 사용할 때 개발자가 기본적으로 이미지를 최적으로 제공할 수 있도록 프레임워크 이해관계자들과 함께 추구한 몇 가지 방법입니다.

Angular 이미지 지시어

Google에서는 Angular 15에서 사용할 수 있으며 특히 13.4 및 14.3으로 백포팅된 Angular 프레임워크용 안정적인 이미지 지침을 게시했습니다. 이 지시어는 기본적으로 네이티브 지연 로드를 사용 설정하고, 우선순위 이미지에 fetchpriority 힌트를 추가하며, 반응형 이미지에 적절한 srcset 속성을 자동으로 생성합니다.

영향: Lighthouse 실험실 테스트는 이미지 지시어를 사용하기 전과 후에 Land's End 품질보증 환경에서 수행되었습니다. 데스크톱에서 콘텐츠가 포함된 최대 페인트 (LCP) 중앙값이 12.0초에서 3.0초로 감소하여 LCP가 75% 개선되었습니다.

슬라이드 비교: 네이티브 이미지 태그가 있는 웹사이트 One과 Angular 이미지 지시어가 있는 웹사이트 2 비교

이 지시어에 대한 자세한 내용은 블로그 게시물 Angular 이미지 지시어로 이미지 최적화를 읽어보세요.

`next/image` 개편

또한 Next.js팀과 협력하여 네이티브 지연 로드 및 fetchpriority HTML 속성과 같은 새로운 브라우저 기능을 사용할 수 있도록 이미지 구성요소를 업데이트했습니다. 새 버전은 Next 13부터 기본적으로 제공됩니다.

영향 : Google의 파트너인 Leboncoin은 next/image의 새 버전으로 전환하여 일부 페이지의 LCP를 최대 60% 개선할 수 있었습니다.

웹 글꼴

웹 글꼴 최적화는 글꼴 리소스의 전송 크기를 줄이는 것보다 더 많은 작업이 관련되어 있기 때문에 제대로 구현하기가 까다로울 수 있습니다. 웹 글꼴은 페이지의 레이아웃 변경 횟수 (CLS) 측정항목에 크게 기여할 수 있으며 글꼴 스왑으로 인한 레이아웃 변경을 최소화하려면 상당한 노력이 필요합니다. 다행히 Google은 웹 개발자가 이 작업을 훨씬 더 쉽게 수행할 수 있도록 프레임워크와 협력했습니다.

Next.js, Nuxt, Vite에서 글꼴 대체를 개선하기 위한 도구

페이지가 로드될 때 웹 글꼴에 더 잘 맞도록 페이지의 대체 글꼴 크기를 조정하는 Next 13의 기능을 출시했습니다. 이렇게 하면 글꼴 관련 CLS가 줄어듭니다. Google은 이러한 방법론을 Nuxt팀과 공유했고, 이를 통해 동일한 기본 알고리즘을 사용하는 nuxtjs/fontaine 모듈과 fontaine Vite 플러그인을 개발하게 되었습니다.

영향: Google 파트너인 Vox Media는 이 기능을 사용하여 일부 페이지에서 The Verge의 CLS를 0으로 줄일 수 있었습니다.

개선된 글꼴 대체 생성 및 글꼴 대체 프레임워크 도구 생성에 관한 블로그 게시물에서 자세히 알아보세요.

`nuxtjs/google-fonts` 모듈

Google에서는 Nuxt팀과 협력하여 Google Font 성능 최적화를 위한 모듈을 출시했습니다. 이 모듈은 추가 서버 왕복을 방지하기 위해 Google 글꼴을 자동으로 다운로드하고 자체 호스팅하며 글꼴 인라인 옵션도 지원합니다.

서드 파티 스크립트

서드 파티 자바스크립트는 성능 문제의 잠재적 원인이며, 스크립트에서 예약한 작업으로 인해 사용자 상호작용이 실행되지 않을 수 있으므로 INP (다음 페인트) 상호작용과 같은 측정항목에 영향을 줄 수 있습니다.

서드 파티 스크립트용 `next/script` 구성요소

Next 12+를 위한 스크립트 구성요소를 빌드했습니다. 이 구성요소는 로드 중에 주요 경로가 차단되지 않도록 하이드레이션 후 스크립트를 기본적으로 로드합니다. 또한 Partytown을 통합하여 스크립트를 기본 스레드 외부로 완전히 이동하는 웹 작업자 모드를 제공합니다.

영향: Lighthouse 실험실 테스트에서 CareerKarma는 작업자 모드를 사용 설정한 상태에서 next/script component를 사용하여 LCP를 24% 줄였습니다.

자세한 내용은 Next.js에서 서드 파티 스크립트 로드 최적화 블로그 게시물을 참고하세요.

기타

프레임워크 개발자와의 파트너십이 코어 웹 바이탈 개선에 국한되지 않습니다. 또한, 우리는 새로운 기능을 더 많이 활용하고 개발자가 최첨단 웹 플랫폼 기능을 훨씬 더 쉽게 사용할 수 있도록 하기 위해 노력하고 있습니다.

컨테이너 쿼리 폴리필

Google에서는 1.0 출시를 향해 더 다양한 CSS 기능을 지원하고 성능을 개선하도록 컨테이너 쿼리 polyfill을 업데이트했습니다.

자세한 내용은 블로그 게시물 컨테이너 쿼리 Polyfill 내부를 참고하세요.

오로라의 다음 단계는 무엇인가요?

2023~2024년에 Google에서는 프레임워크 개발자를 위해 코어 웹 바이탈을 최적화하기 위해 여러 흥미로운 프로젝트를 진행할 예정입니다.

내년도에 중점을 둘 사항은 다음과 같습니다.

Next.js 및 Nuxt용 서드 파티 래퍼 구성요소: 래퍼 구성요소는 LCP 및 INP에 최적화된 방식으로 인기 있는 서드 파티 라이브러리의 로드를 용이하게 할 수 있습니다. 구성요소 태그를 DOM에 드롭하여 스크립트 태그 대신 서드 파티를 로드하면 프레임워크에서 최적의 로드 전략을 선택합니다. 자세한 내용은 RFC를 참조하세요.
Angular SSR 및 하이드레이션 개발자 환경: Google은 SSR 및 하이드레이션 프로젝트와 관련하여 Angular팀과 긴밀히 협력해 왔습니다. Google은 더 많은 애플리케이션이 LCP 이점을 활용할 수 있도록 SSR 사용의 개발자 환경을 업그레이드하는 데 중점을 두었습니다. SSR DOM 조작 기능에 관한 공식 RFC를 기대해 주세요.
Angular 이미지 지시문 및 nuxt/image 기능: 자동 사전 연결 힌트 생성, 기본 <img> 요소에서의 전환을 지원하는 이전 도구, <picture> 요소 지원, 자리표시자와 같이 Angular를 위한 여러 흥미로운 기능을 계획하고 있습니다. 또한 nuxt/image의 여러 새로운 기능에 관해 Nuxt팀과 협의할 예정입니다.
INP 연구 (프레임워크 간): 2024년에 다음 페인트에 대한 상호작용 (INP)이 최초 입력 반응 시간 (FID)을 대체함에 따라 Google은 프레임워크에서 INP 개선을 위한 지원을 확대하고 있습니다. 여기에는 프레임워크에서 INP 문제의 근본 원인을 분석하고 가능한 경우 프레임워크 사용자를 위한 기본 제공 솔루션을 만드는 작업이 포함됩니다.
속도계 3: Google은 2023년의 최신 웹 프레임워크 환경을 나타내는 차세대 벤치마킹 도구인 Speedometer를 구현하도록 돕고 있습니다.