Jekyll 블로그가 느려진다고? GitHub Pages 빌드 시간을 90% 단축한 내 방법

은퇴 후의 새로운 취미, 블로그 운영

저는 40년간 대학에서 컴퓨터 공학을 가르쳤습니다. 은퇴하면서 새로운 취미를 찾던 중, Jekyll과 GitHub Pages로 개인 블로그를 만들기로 결심했습니다. 처음에는 정말 마법 같았습니다. 마크다운으로 글을 쓰고, Git으로 버전 관리하고, GitHub이 자동으로 사이트를 배포해주니까요.

하지만 6개월쯤 지나면서 문제가 생겼습니다. 블로그 포스트가 300개를 넘어가자, 매번 글을 올릴 때마다 GitHub Actions에서 빌드하는 데 3-5분이 걸리기 시작했습니다. 과거에 프로그래밍을 할 때는 이 정도 대기 시간이 일상이었지만, 은퇴한 지금의 저는 참을성이 부족해졌나 봅니다. (웃음) 그렇게 해서 시작된 최적화 여정이 정말 흥미로운 결과를 가져다주었습니다.

빌드 시간의 진짜 원인을 찾아내기

먼저 해야 할 일은 “왜 느린가”를 아는 것입니다. 증상만 치료하다가는 더 큰 낭패를 본다는 것을 배웠거든요.

GitHub Actions의 워크플로우 로그를 자세히 들여다봤습니다. 처음에는 그냥 전체 빌드 시간만 봤지만, 각 단계별로 시간을 재기 시작했습니다. 깜짝 놀랐습니다. 전체 5분 중에 3분 40초가 Ruby 의존성 설치에만 쓰였습니다. Gemfile.lock에 등록된 gem이 57개나 되었는데, 대부분은 내가 사용하지 않는 것들이었거든요.

불필요한 플러그인들을 하나씩 제거하기 시작했습니다. 예를 들어, SEO 최적화 플러그인이 좋다고 해서 설치했던 jekyll-seo-tag는 이미 Chirpy 테마에 내장되어 있었습니다. 소셜 미디어 자동 공유 플러그인도 마찬가지였습니다. 결국 불필요한 gem 10개를 삭제했고, 의존성 설치 시간이 3분 40초에서 1분 15초로 줄어들었습니다.

또 다른 발견은 이미지 최적화였습니다. 내가 300개의 포스트에 올린 이미지들이 모두 원본 크기대로 저장되어 있었거든요. 과거 학과 홈페이지를 운영할 때 배웠던 웹 최적화 원칙을 적용해야 했습니다.

이미지 압축과 lazy loading 도입

GitHub Pages의 빌드 시간 단축만이 아니라, 사이트 자체의 로딩 속도도 개선하고 싶었습니다. 두 가지 전략을 동시에 진행했습니다.

첫째, 이미지 최적화입니다. 300개의 포스트에 들어있는 1000개 이상의 이미지를 하나씩 압축할 수는 없습니다. 대신 앞으로는 새로운 포스트에만 이미지를 압축하기로 결정했습니다. ImageMagick을 사용하여 간단한 배치 스크립트를 만들었습니다:

#!/bin/bash
convert input.jpg -quality 85 -resize 1200x800 output.jpg

과거의 이미지들은 천천히, 시간이 될 때마다 하나씩 압축하기로 했습니다. 이 방식으로 평균 이미지 크기가 3.2MB에서 0.8MB로 줄어들었습니다.

둘째, Jekyll의 _config.yml에서 image lazy loading을 활성화했습니다. Chirpy 테마의 경우, 이미지 태그에 자동으로 loading="lazy" 속성을 추가하는 옵션이 있습니다. 이렇게 하면 사용자가 실제로 그 부분을 스크롤할 때만 이미지를 로드합니다.

GitHub Actions 캐싱으로 빌드 시간 반으로 줄이기

이것이 가장 극적인 변화였습니다. 과거에 CI/CD를 배울 때 캐싱이 중요하다는 것을 알고 있었지만, 개인 블로그에까지 적용할 생각은 못 했습니다.

GitHub Actions 워크플로우 파일(.github/workflows/pages-deploy.yml)을 다시 작성했습니다. Ruby gems 캐싱을 추가한 것입니다:

- uses: actions/cache@v3
  with:
    path: vendor/bundle
    key: $-gems-$
    restore-keys: |
      $-gems-

이렇게 하면, 첫 번째 빌드는 여전히 시간이 걸리지만, 그 다음부터는 변경되지 않은 gems는 다시 다운로드하지 않습니다. 제 경우, Gemfile.lock이 변경되지 않는 한(즉, 새로운 플러그인을 설치하지 않는 한) 캐시가 유효합니다.

이 변화로 일반적인 빌드 시간이 2분에서 25초로 줄어들었습니다.

추가로 시도한 작은 최적화들

몇 가지 더 작은 것들도 했습니다.

먼저, Jekyll 설정