I/O 2019에서 새롭게 출시된 세 가지 웹 성능을 알아보세요.
Google I/O 2019의 '규모에 맞는 속도' 강연에서 Google은 내년에 웹 성능을 개선할 수 있는 세 가지 사항을 발표했습니다.
이제 Lighthouse에서 성능 예산 설정이 지원됩니다.
LightWallet은 성능 예산 지원을 추가하는 Lighthouse의 새로운 기능입니다. 성능 예산은 사이트 성능의 기준을 설정합니다. 무엇보다도 출시 전에 성능 회귀를 쉽게 식별하고 수정할 수 있습니다.
LightWallet은 최신 버전의 Lighthouse CLI에서 사용할 수 있으며 설정하는 데 몇 분밖에 걸리지 않습니다. 자세한 내용은 이 안내를 참조하세요.
예산을 얼마로 설정해야 할지 잘 모르겠다면 실험용 성능 예산 계산기를 사용해 보세요. LightWallet과 호환되는 예산 구성을 생성할 수 있습니다.
웹에 브라우저 수준 이미지 및 iframe 지연 로드 도입
웹페이지에는 많은 양의 이미지가 포함되는 경우가 많으며 이로 인해 데이터 사용, 페이지 팽창, 페이지 로드 속도 저하의 원인이 됩니다. 이러한 이미지는 대부분 화면을 벗어나므로 사용자가 스크롤해야 볼 수 있습니다.
지금까지는 JavaScript 라이브러리를 사용하여 이미지 지연 로드를 해결해야 했지만 이 문제는 곧 변경될 수 있습니다. 이번 여름, Chrome에서 <img> 및 <iframe> 지연 로드를 표준화하여 웹에 제공하는 loading 속성 지원을 출시할 예정입니다.
loading 속성을 사용하면 사용자가 화면 밖 이미지와 iframe 근처를 스크롤할 때까지 브라우저가 오프스크린 이미지와 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를 지정하는 유일한 방법은 자체 호스팅이었지만 이번 변경으로 인해 그럴 필요가 없습니다.
기본 코드 삽입에 font-display를 포함하도록 Google Fonts 문서가 업데이트되었습니다 (아래 참고). 이를 통해 더 많은 개발자가 이 흥미로운 기능을 사용해 볼 수 있기를 바랍니다.
여러 글꼴 모음에서 디스플레이를 사용하는 Glitch에 관한 데모는 다음과 같습니다. DevTools 네트워크 에뮬레이션을 사용하여 font-display: swap의 영향을 확인하세요.
더 많은 동영상 보기
또한 고급 성능 패턴을 사용하여 사용자 환경을 개선하는 몇 가지 프로덕션 우수사례도 다루었습니다. 여기에는 페이지 속도를 높이기 위해 이미지 CDN, Brotli 압축, 스마트 JavaScript 제공, 미리 가져오기를 활용하는 사이트가 포함됩니다. 자세히 알아보려면 강연 동영상을 시청하세요.