◆ ESSAY
블로그에서 추가되는 이미지를 자동으로 최적화하기 위해 https://imgbot.net/ 을 사용하고 있다. imgbot을 사용하면, 새롭게 추가되는 이미지들에 대해서 최적화를 해주는 PR을 만들어 준다. https://github.com/yceffort/yceffort-blog-v2/pull/298 (빌드가 실패한 것에 대해선 정말 긴 히스토리가 있다, imgbot 때문이 아니다)
그러나 기존에 추가되었던 이미지들에 대해서는 최적화가 안되기 때문에, 이를 위해서 방법을 찾아보다가 아래와 같은 라이브러리를 사용했다.
brew install optipng
apt-get install optipng
find . -iname "*.png" -exec optipng -o7 {} \;
http://optipng.sourceforge.net/
PNG의 경우에는 굉장히 오래걸렸다.
brew install jpegoptim
sudo apt-get install jpegoptim
find . -iname "*.jpg" -exec jpegoptim -m80 -o -p {} \;
brew install gifsicle
sudo apt-get install gifsicle
find . -iname "*.gif" -exec gifsicle --batch -V -O2 {} \;
일괄적으로 모든 파일을 수정하기 위해서는 위 명령어를 사용했지만, GUI application도 있어서 필요할 때 사용하면 좋을 것 같다.
2편 끝에 남긴 "워커 경유 비용 500ms"를 확정하려 했지만, 대조군이 되는 하드 리로드는 하루 한 건이 안 됐다. 그래서 Playwright와 셰이핑 프록시로 대조군을 직접 만들어 재 보니 내비게이션에서 워커 비용은 2ms였고, 비용은 지연이 아니라 글 하나를 클릭할 때마다 배경에서 더 받는 바이트 쪽에 있었다. 랩과 실사용자 데이터 사이에 남겨 둔 간극은 글을 다 쓰고 나서야 103 Early Hints가 만든 측정 정의 차이였다는 것을 알았다. 서비스 워커 캐싱 딥다이브 시리즈의 세 번째 편이다.
1편의 일반론을 들고 이 블로그(Next.js App Router)를 오프라인에서도 열리게 만들었다. 첫 배포에서는 방금 읽은 글이 오프라인에서 안 열렸고, 두 번째 배포에서는 글은 열리는데 이미지가 전부 깨졌다. 소프트 내비게이션과 프리페치, next/image가 만든 함정들을 하나씩 고쳐 배포한 연대기와, 그 결과를 GA4 실사용자 데이터로 정산한 기록이다. 재방문자 FCP는 평균 634ms 좋아졌고, TTFB는 평균 525ms 나빠졌다. 서비스 워커 캐싱 딥다이브 시리즈의 두 번째 편이다.
서비스 워커는 사이트와 네트워크 사이에 선 프로그래밍 가능한 프록시다. 어디에 서 있는가, 캐시는 왜 썩는가, 배포했는데 왜 옛 버전이 보이는가, 무엇을 어떤 전략으로 담는가, 그래서 이걸 써야 하는가. 실무에서 마주치는 다섯 개의 질문을 붙잡고, opaque 응답이 104KB에서 6.6MB로 집계되는 실측과 상태 전이의 세부까지 내려간다. 『프런트엔드 성능 최적화 Deep Dive』의 캐시 장에서 못 다한 일반론이다. 서비스 워커 캐싱 딥다이브 시리즈의 첫 편이다.
🙇🏻♂️