I/O 2019에서 발표된 세 가지 새로운 웹 성능 출시 소식을 알아보세요.
Google I/O 2019의 'Speed at Scale' 세션에서 Google은 내년에 웹 성능을 개선할 것으로 기대되는 세 가지 사항을 발표했습니다.
이제 Lighthouse에서 성능 예산 지원
LightWallet은 성능 예산에 대한 지원을 추가하는 Lighthouse의 새로운 기능입니다. 성능 예산은 사이트 성능의 기준을 설정합니다. 더 중요한 것은 출시 전에 성능 회귀를 식별하고 수정할 수 있다는 점입니다.
LightWallet은 최신 버전의 Lighthouse CLI에서 사용할 수 있으며 설정하는 데 몇 분밖에 걸리지 않습니다. 자세한 내용은 이 안내를 참조하세요.
예산을 얼마로 설정해야 할지 모르겠다면 LightWallet 호환 예산 구성을 생성할 수 있는 실험용 성능 예산 계산기를 사용해 보세요.
브라우저 수준의 이미지 및 iframe 지연 로드가 웹에 도입됨
웹페이지에는 많은 이미지가 포함되어 있는 경우가 많으며, 이로 인해 데이터 사용량, 페이지 비대화, 페이지 로드 속도 저하가 발생합니다. 이러한 이미지 중 상당수는 화면 밖에 있으므로 사용자가 스크롤해야 볼 수 있습니다.
지금까지는 JavaScript 라이브러리를 사용하여 지연 로드 이미지를 해결해야 했지만 곧 변경될 수 있습니다. 올여름 Chrome은 표준화된 <img> 및 <iframe> 지연 로드를 웹에 제공하는 loading 속성에 대한 지원을 출시할 예정입니다.
loading 속성을 사용하면 브라우저에서 사용자가 화면 밖 이미지와 iframe 근처로 스크롤할 때까지 로드를 지연할 수 있습니다. loading은 세 가지 값을 지원합니다.
lazy: 지연 로드에 적합합니다.eager: 지연 로드에 적합하지 않습니다. 바로 로드합니다.auto: 브라우저에서 지연 로드 여부를 결정합니다.
<img src="io2019.jpg" loading="lazy" alt="..." />
<iframe src="video-player.html" loading="lazy"></iframe>
'사용자가 근처로 스크롤할 때'에 대한 정확한 휴리스틱은 브라우저에 따라 다릅니다. 일반적으로 브라우저가 표시 영역에 들어오기 직전에 지연된 이미지와 iframe 콘텐츠를 가져오기 시작하기를 바랍니다.
loading 속성은 Chrome Canary의 플래그 뒤에 구현됩니다. about://flags/#enable-lazy-image-loading 및 about://flags/#enable-lazy-frame-loading 플래그가 사용 설정된 Chrome 75 이상에서 이 데모를 사용해 볼 수 있습니다.
지연 로드 기능에 관한 자세한 내용은 문서를 참고하세요.
이제 Google Fonts에서 font-display를 쿼리 매개변수로 지원합니다.
이제 표시 쿼리 문자열 매개변수를 통해 모든 Google Fonts에서 font-display를 지원한다고 발표했습니다.
https://fonts.googleapis.com/css?family=Lobster&display=swap
font-display 설명자를 사용하면 웹 글꼴이 로드되는 데 걸리는 시간에 따라 웹 글꼴이 렌더링되거나 대체되는 방식을 결정할 수 있습니다. auto, block, swap, fallback, optional를 비롯한 여러 값을 지원합니다.
이전에는 Google Fonts의 웹 글꼴에 font-display를 지정하는 유일한 방법은 자체 호스팅하는 것이었지만 이번 변경으로 인해 자체 호스팅할 필요가 없어졌습니다.
Google Fonts 문서가 기본 코드 삽입에 font-display를 포함하도록 업데이트되었습니다 (아래 참고). 이를 통해 더 많은 개발자가 이 흥미로운 추가 기능을 사용해 보기를 바랍니다.
다음은 Glitch에서 여러 글꼴 모음으로 디스플레이를 사용하는 데모입니다. DevTools 네트워크 에뮬레이션을 사용하여 font-display: swap의 영향을 확인해 보세요.
동영상으로 자세히 알아보기
또한 고급 성능 패턴을 사용하여 사용자 경험을 개선하는 여러 프로덕션 우수사례도 다루었습니다. 여기에는 이미지 CDN, Brotli 압축, 스마트 JavaScript 게재 및 미리 가져오기를 활용하여 페이지 속도를 높이는 사이트가 포함되었습니다. 강연을 시청하여 자세히 알아보세요.