workflows

develop

npm install して npm run develop で開発用サーバー立ち上げ

npm run build で静的ページが _site に生成される (npm run serve で確認できる)。

web フォントのサブセット化に必要なツール

pip install fonttools

を入れてから npm run opt すると、生成された静的ページがもろもろ最適化される。

試してみたこと。

(see _includes/layout/minimal.njk)

index.njk のクリティカルな css をすべてインラインに展開
- それ以外のページはキャッシュに期待して普通に配置
index.njk のフォントを preload
- css 側で font-display: swap な fontface を定義
追加の css, js をすべて遅延ロード
- 各種インタラクションなど、初回のレンダリングに必要のないもの
- js, css は requestIdleCallback でアイドルを待ってからロード (see js/loader.js)
  - loader.js 自体は defer で遅延ロード

(see .eleventy.js)

(see package.json)

glyphhanger で web フォントをサブセット化
- index.html 用とそれ以外用で別々にサブセット化
- @fontface の CSS をインライン化してあるので、 index.html だけ外から URL を書き換える
  - ※ html の minify 前に走らせないと、書き換え箇所が複数ある時うまくいかないっぽい
htmlmin で html (とインライン js, css) を minify
- タグ間のスペースまで消す設定にして、空白は margin でつける
- → フォントが後から読み込まれた時の CLS が小さい
- (※ この影響で opt 前後で空白の大きさが若干変わることがある)
uglifyjs-folder で js を minify
cleancss で css を minify
svgo で svg 画像を minify

(see js/prefetch.js)

サイト内リンクをほぼすべてアイドル中に prefetch
- mousedown (touchstart) で prerender
- 「最近の活動」ページだけリンクがすごく多いので自重
全ページ共通で使用している CSS などもアイドル中に prefetch
- index.njk だけ初回レンダー最優先でインライン化しているので

_data
- lastUpdatedDate.js ... GitHub からこのリポジトリの最終更新日を取ってくる
- monthEmoji.js ... それぞれの月を表す絵文字
- recentActivities.js ... 最近の僕の活動をいろんなフィードから取ってくる
_layouts ... いろんなページで共通して使っている DOM 構造
css ... css
fonts ... web フォント
img ... ラスター画像
js ... js
pages ... 各ページ (のテンプレート)
svg ... SVG