◆ 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도 있어서 필요할 때 사용하면 좋을 것 같다.
브라우저 동작 방식을 이해하기
조만간 웹사이트 하나씩 분석해 보겠습니다
🙇🏻♂️
블로그 마이그레이션 뒤 수식 글 LCP가 5.6초로 늘어난 원인을 추적했다. 일반 웹 글꼴을 실제 코드에서 제거하고 다시 빌드하자 수식 글 LCP는 5,650ms에서 2,352ms, FCP는 1,514ms에서 758ms로 줄었다. LCP 대상은 본문 문단에서 배너로 바뀌었다. 수식 전용 글꼴은 쓰는 글리프만 남긴 서브셋으로 바꿔 334KiB에서 26KiB가 됐다. 최초 비교 48회, 원인 대조 15회, 수정 전후 24회, 서브셋 전후 8회의 결과를 기록했다.