https://github.com/zk-phi/zk-phi.github.io
GitHub Pages page
https://github.com/zk-phi/zk-phi.github.io
web
Last synced: 4 months ago
JSON representation
GitHub Pages page
- Host: GitHub
- URL: https://github.com/zk-phi/zk-phi.github.io
- Owner: zk-phi
- Created: 2019-07-09T09:56:52.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2025-12-27T07:03:05.000Z (6 months ago)
- Last Synced: 2025-12-28T23:15:00.332Z (6 months ago)
- Topics: web
- Language: Nunjucks
- Homepage:
- Size: 20 MB
- Stars: 0
- Watchers: 0
- Forks: 1
- Open Issues: 26
-
Metadata Files:
- Readme: Readme.markdown
Awesome Lists containing this project
README
https://zk-phi.github.io
おためし 11ty
直す気のないところ以外は lighthouse 満点までチューニングしてみた
- 画像の解像度が低すぎ → 元からこのサイズなので
- 小さすぎるリンクがある → 元から押されることを意図していないリンクが一つあるので
# workflows
- なんらかの branch を push すると lighthouse が走る
- `master` に push するとビルドが走って `gh-pages` に発射される
- 毎早朝にビルドが走る
## develop
`npm install` して `npm run develop` で開発用サーバー立ち上げ
## build
`npm run build` で静的ページが `_site` に生成される (`npm run serve` で確認できる)。
web フォントのサブセット化に必要なツール
```
pip install fonttools
```
を入れてから `npm run opt` すると、生成された静的ページがもろもろ最適化される。
# optimizations
試してみたこと。
## テンプレートレベル
(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`)
- `eleventy-img` でラスター画像の自動 webp 化 & lazy load
## ビルド後
(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 だけ初回レンダー最優先でインライン化しているので
# directories
- `_data`
- `lastUpdatedDate.js` ... GitHub からこのリポジトリの最終更新日を取ってくる
- `monthEmoji.js` ... それぞれの月を表す絵文字
- `recentActivities.js` ... 最近の僕の活動をいろんなフィードから取ってくる
- `_layouts` ... いろんなページで共通して使っている DOM 構造
- `css` ... css
- `fonts` ... web フォント
- `img` ... ラスター画像
- `js` ... js
- `pages` ... 各ページ (のテンプレート)
- `svg` ... SVG