My Blog Just Got Faster: Cloudflare Workers and AVIF Support

2020-09-14

Matthias Endler

내 블로그가 더 빨라졌다: Cloudflare Workers와 AVIF 지원

원문은 Matthias Endler님이 2020-09-14에 게재했습니다. 이 블로그 구독하기

이 웹사이트가 빠르다고 말씀드렸나요? 네, 했죠, 여러 번이나요.

몇 가지 이유를 꼽자면 (평범한 것부터 살짝 미쳐가는 조짐이 보이는 것까지):

📄 정적 사이트
☁️ Cloudflare CDN에 캐시됨
🔗 HTTP/2 및 HTTP/3 지원
🚫 웹 폰트 없음 (아쉽게도)
✅ 엣지 워커 기반 애널리틱스 (Google Analytics 없음)
🌸 가능한 한 JavaScript 사용 지양; 내 사용 사례의 90%는 CSS로 해결됩니다.
🖼️ 페이지 리플로우를 방지하기 위해 HTML에 이미지 너비와 높이 지정
👍🏻 인라인된, 최적화된 SVG 그래픽과 직접 작성한 CSS
🚅 정적 WASM 검색 (지연 로드)
🏎️ 그래픽을 포함해 홈페이지 전체가 <10K(brotli 압축 기준)이므로 첫 번째 HTTP 왕복 안에 들어가야 합니다.
💟 심지어 파비콘까지 용량 최적화를 했습니다. 업데이트: 이 글 덕분에 이제 SVG 아이콘을 사용하고 있습니다.

그나저나 지금은 2020년인데, 모두 파비콘을 최적화하고 있잖아요, 그렇죠? …그렇죠!?

그런데 알고 보니 다른 대부분의 사이트들은 저만큼 사용자의 데이터 요금제를 신경 쓰지 않더군요. 사실 그건 완곡한 표현입니다. 전혀 신경 쓰지 않죠. 하지만 저에게는 가벼움이 곧 아름다움입니다!

잠깐, 이미지는요?

저는 다이어그램이나 일러스트에는 SVG를 선호합니다. 사진일 때만 JPEG나 WebP를 사용하죠.

솔직히 말하면, 저는 WebP를 그다지 좋아한 적이 없습니다. 요점은 MozJPEG으로 압축한 JPEG보다 작지 않을 수도 있다는 겁니다. 더 자세히 알고 싶다면 Mozilla 버그 트래커에서 벌어진 긴 논쟁을 읽어보세요. 지금까지도 Safari는 WebP를 지원하지 않습니다.

안녕하세요, AVIF 👋

차세대 이미지 압축 포맷인 AVIF를 소개합니다. 한번 보세요:

[ReachLightSpeed.com](https://reachlightspeed.com/blog/using-the-new-high-performance-avif-image-format-on-the-web-today/) — 출처: ReachLightSpeed.com

이미 Chrome 85와 Firefox 80에서 지원됩니다.
그때 마치 허리케인처럼 깨달음이 와서 🌪️:

😲 세상에, 이제 주요 브라우저에서 AVIF를 지원한다고!?
내 블로그에도 이걸 적용하고 싶어!

그렇기도 하고 아니기도 합니다.

저는 블로그에 Zola를 쓰고 있는데, Zola의 AVIF 지원은 아직 없습니다. 하지만 당장 쓰고 싶었죠! 그래서 (늘 그렇듯) 기존 JPEG와 PNG 이미지로부터 AVIF 이미지를 만들어내는 못생긴 Rust 스크립트를 후다닥 만들었습니다. 혹시 몰라 원본 파일은 그대로 보관해 두고 있습니다.

내부적으로는 Kornel Lesiński가 만든 cavif를 호출합니다.

데이터 절감 효과

블로그에 AVIF를 적용한 결과는 그야말로 인상적이었습니다:

브라우저 확인하기

잠깐만요… 여러분의 브라우저는 AVIF를 표시할 수 있나요?

저기에 “yup”이라고 보이면 준비 완료입니다.
“nope”이라고 보인다면 몇 가지 방법이 있습니다:

Firefox의 경우: 주소창에 about:config를 입력하고 avif를 검색하세요.
Chrome의 경우: 최신 버전으로 업데이트했는지 확인하세요.
Safari의 경우: 인생을 어떻게 살고 계신지 모르겠지만, 제대로 된 브라우저를 써보세요. 😏

해결책 I: 구형 브라우저를 위한 폴백

HTML의 좋은 점은 브라우저가 모르는 새로운 문법을 무시한다는 겁니다. 그래서 <picture> 요소를 이용해 여러분에게 맞는 포맷을 제공할 수 있습니다. (엄마 봐, JavaScript 없이도 돼!)

<picture>
  <source srcset="fancy_browser.avif" />
  <source srcset="decent_browser.webp" />
  <img src="meh_browser.jpg" />
</picture>

실제로 사용하는 코드는 좀 더 복잡하지만, 대략 이런 느낌입니다.

해결책 II: Github Pages의 잘못된 Content-Type

하지만 Github와 AVIF에는 골치 아픈 문제가 하나 있었습니다. 서버에서 Content-Type: application/octet-stream 헤더를 반환했던 겁니다.

그 때문에 이미지가 Firefox에서 로드되지 않았습니다.

제 페이지가 Github에서 호스팅되고 있기 때문에 제 쪽에서는 고칠 방법이 없었습니다. 지금까지는요! 오랫동안 Cloudflare의 Workers Sites를 써보고 싶었는데, 이 버그 덕분에 마침내 갈아탔습니다. 기본적으로 웹사이트 전체를 CDN상의 엣지 워커로 실행하는 방식이라 별도의 웹 서버가 필요 없습니다. 좋은 점은 이제 어디서든 — 심지어 외딴 곳에서도 — 사이트가 빠르다는 겁니다. 더 이상 서버까지 왕복할 필요가 없죠.

엣지 워커를 실행하면서 요청 및 응답 객체에 대한 완전한 제어 권한도 얻게 되었습니다. 워커 응답을 가로채기 위해 다음과 같은 멋진 스니펫을 추가했습니다:

if (/\.avif$/.test(url)) {
  response.headers.set("Content-Type", "image/avif");
  response.headers.set("Content-Disposition", "inline");
}

그리고 끝, 마법처럼 해결됐습니다. Firefox도 만족하죠. 응답 객체 수정에 대해 더 알고 싶다면 여기에서 읽어보세요.

Workers Sites의 또 다른 부수 효과는 프로덕션 배포가 이제 1분밖에 걸리지 않는다는 점입니다.

Cloudflare로 이전한 후의 성능 결과

유명 사이트들과 비교해도 전혀 꿀릴 게 없습니다:

더 읽어보기

How to Use AVIF: The New Next-Gen Image Compression Format — AVIF를 통합할 때 흔히 겪는 함정을 짚어주는 훌륭한 입문 글로, 이 글 덕분에 AVIF 지원을 추가하게 되었습니다.
AVIF has landed by Jake Archibald — SVG, JPEG, PNG, WebP, AVIF 등 다양한 포맷의 이미지 크기와 품질을 비교합니다.
avif.io — 데스크톱과 모바일에서 모두 동작하는 빠르고 설정 가능한 클라이언트 측 이미지 압축 도구입니다.
Squoosh — WebAssembly로 구축되어 AVIF를 지원하는 또 다른 이미지 압축 서비스입니다.
Tons of great examples on how to configure Cloudflare workers
Cloudflare Workers Sites