Jekyll Build Speed Up!
종종 제 Github page는 빌드가 실패합니다. 물론 대략적인 이유는 알고 있었습니다. Github page는 약 최대 13분 전후 정도의 build time을 가질 수 있는데, 이를 넘어가게 되면 pending 되거나 실패합니다. 제 Jekyll의 빌드 시간이 15분 정도 걸리던 상태로 당연히 실패하는 경우가 발생했었죠.
이는 Github Page에서 Jekyll 사용 시 자동 빌드 기능을 제공하는데, 해당 기능에서만 제한이 있습니다. 별도로 Github action으로 구성하시만 빌드 Limit이 길기 때문에 크게 걱정은 없을 것 같습니다.
그래서 오늘은 제가 Jekyll 빌드 속도를 올릴 수 있는 방법들에 대해 이야기하려고 합니다.
Analysis
우선 빌드에 어떤 부분이 가장 많이 소요되고 있는지 찾아야 합니다. Jekyll은 build 시 --profile 이란 옵션을 통해 각 파일에 대한 빌드 소요시간을 알 수 있습니다.
bundle exec jekyll serve --profile
Filename | Count | Bytes | Time
--------------------------------+-------+------------+--------
_layouts/default.html | 790 | 131322.55K | 405.412
_includes/navigation.html | 790 | 61779.70K | 266.733
_includes/header.html | 790 | 42560.48K | 179.197
_includes/head.html | 790 | 52723.54K | 136.753
_includes/footer.html | 790 | 22425.51K | 88.645
_layouts/post.html | 649 | 8993.10K | 1.292
_includes/article-content.html | 113 | 2383.00K | 0.637
sitemap.xml | 1 | 95.25K | 0.518
_layouts/tag_page.html | 40 | 1630.02K | 0.453
_includes/social-links.html | 790 | 729.82K | 0.187
_includes/javascripts.html | 790 | 369.82K | 0.168
_layouts/redirect.html | 633 | 380.09K | 0.080
_includes/google-analytics.html | 790 | 318.62K | 0.074
_pages/archive.html | 1 | 133.15K | 0.066
search.json | 1 | 178.49K | 0.031
_includes/main.scss | 790 | 2453.32K | 0.03
....
그러면 어떤 부분에서 시간을 많이 잡아먹는지 알 수 있습니다.
My case
제 경우에는 의외로 navigation 쪽에서 큰 오버헤드가 발생했었는데, 이는 Liquid의 무분별한 사용으로 인해 발생한 문제였습니다. Liquid 문법이 페이지를 만들기 쉽고 편리하기 때문에 자주 사용되지만, 만약 빌드 되어야하는 파일이 많다면 이는 반대로 속도에 큰 영향을 줄 수 있습니다.
기존 코드를 보면 네비게이션(메뉴)을 위해서 모든 Post에 모든 Page의 이름을 읽어와서 넣어주는 로직이 있었느데, 이는 다시 말해 1,000개의 포스트가 있다면 1,000 x page의 갯수 만큼의 루프를 발생시켰었습니다. 굉장하죠 😮
<ul class="nav__list list-reset">
{% for page in site.pages %}
{% unless page.name == 'tags.html' or page.name == '404.html' %}
{% if page.show != 'none' %}
{% if page.title %}
<li class="nav__item">
<a href="{{ page.url | prepend: site.baseurl }}" class="nav__link">{{ page.title }}</a>
</li>
{% endif %}
{% endif %}
{% endunless %}
{% endfor %}
</ul>
그래서 아래와 같이 고정 데이터로 수정하엿습니다.
<ul class="nav__list list-reset">
<li class="nav__item"><a href="/about/" class="nav__link">About</a></li>
<li class="nav__item"><a href="/archive/" class="nav__link">Archive</a></li>
<li class="nav__item"><a href="/cullinan/" class="nav__link">Cullinan</a></li>
<li class="nav__item"><a href="/phoenix/" class="nav__link">Phoenix</a></li>
<li class="nav__item"><a href="/resources/" class="nav__link">Resources</a></li>
</ul>
덕분에 결과는 엄청났죠 :D
_layouts/default.html | 791 | 70615.56K | 149.066
_includes/head.html | 791 | 52790.21K | 147.258
_layouts/post.html | 650 | 9000.80K | 1.366
_includes/article-content.html | 113 | 2386.38K | 0.640
_includes/footer.html | 791 | 2164.44K | 0.602
_layouts/tag_page.html | 40 | 1632.33K | 0.452
sitemap.xml | 1 | 95.39K | 0.443
_includes/header.html | 791 | 2035.43K | 0.389
_includes/javascripts.html | 791 | 370.28K | 0.183
기존: 405+266+179+137+88 = 1075
현재: 149+147 = 296
결국 1075 - 296 으로 779 초의 시간이 절약됬습니다. 대략 10분이 넘는 시간이네요. 페이지 정상 노출되는지 테스트하고, github page에 반영해봤는데, 기존에 커트라인에 걸쳐있던 빌드타임이 5분 내로 끝나는 안정적인 모습이 되었습니다.
Speed-Up Tips
Optimize Liquid
제 사례를 보면 아시겠지만, 잘못된 로직의 Liquid는 빌드 타임을 굉장히 늘릴 수 있습니다. 그래서 이를 분석하고 줄여나가는 과정을 통해 좀 더 빠르게 만들 수 있습니다. 굳이 불필요한 반복문 등은 줄이고 Static하게 직접 찍어주는 형태로 전환하면 사이트의 구성에 따라 큰 효과를 얻을 수도 있습니다
추가로 liquid-c Gem도 있습니다. Liquid 문법의 처리를 C로 처리하면서 조금 더 속도를 올릴 수 있다고 하네요. 적용은 Gemfile에 liquid-c를 명시해준 후 패키지 설치(bundle install) 이후 빌드하시면 됩니다.
gem 'liquid-c'
Using Github Action
Github Page 배포의 기본 빌드는 Jekyll의 기본 옵션을 사용하여 빌드합니다. 그래서 모든 페이지를 빌드하기 때문에 속도가 느릴 수도 있습니다. 만약 속도가 문제가 되었다면 기본 Github page 기능으로 빌드하지 않고 jekyll-action 등의 Github action을 통해 빌드하는 것이 좋습니다.
Limit이 매우 큰 것도 좋지만, Action 자체에서도 캐싱을 사용하여 빌드 속도를 줄여주기 때문에 기본 빌드보다는 확실히 빠릅니다.
name: Deploy Job
on:
push
jobs:
jekyll:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: actions/cache@v2
with:
path: vendor/bundle
key: ${{ runner.os }}-gems-${{ hashFiles('**/Gemfile') }}
restore-keys: |
${{ runner.os }}-gems-
- uses: helaili/jekyll-action@v2
with:
token: ${{ secrets.GITHUB_TOKEN }}
Include Cached
jekyll-include-cache란 Gem을 통해 재 빌드가 불필요한 파일을 캐시하도록 명시할 수 있습니다.
gem `jekyll-include-cache`
위와 같이 Gemfile에 명시한 후 include 시 캐시가 필요한 부분(수정되지 않을 구간들)은 아래와 같이 include_cached 로 include 하면 좀 캐시하여 매번 새로 빌드하지 않게 됩니다.
{% include_cached header.html %}
Flags
limit_posts
jekyll 빌드 또는 serve 시 --limit_posts 플래그를 사용하면 posts의 갯수 제한을 걸어 빌드할 수 있습니다. 지정한 수 만큼의 최신 글만 볼 수 있기 때문에 로컬에서 글을 작성하고 실시간으로 결과를 확인할 때 유용합니다. (굳이 불필요한 파일까지 빌드할 필요가 없으니깐요)
bundle exec jekyll serve --limit_posts=10
incremental
jekyll 빌드 또는 serve 시 --incremental 플래그를 사용하면 변화가 있는 페이지만 리빌드하게 됩니다.
bundle exec jekyll serve --incremental