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