Show HN: Jampack – 静的Webサイト最適化のための後処理ステップ

 (github.com/divriots)
4 ポイント 投稿者 GN⁺ 2024-03-26 | 1件のコメント | WhatsAppで共有

jampackとは？

  • jampackはバンドラーでもフレームワークでもなく、静的サイトジェネレーター（SSG）の出力を最適化して、ユーザー体験と Core Web Vitals のスコアを向上させる後処理ツール。

jampackでできることは？

  • <img> タグの画像をレスポンシブ化してさまざまな解像度に対応させ、loading="lazy" と decoding="async" 属性を追加してパフォーマンスを向上させる。
  • <picture> タグを使って複数形式の画像を含むレスポンシブ画像へ変換し、AVIF フォーマットにも対応する。
  • CDN 画像をレスポンシブ化し、さまざまな解像度の画像を srcset を通じて提供する。
  • 外部画像をダウンロードして最適化でき、_jampack フォルダー内に最適化済み画像ファイルを保存する。
  • 画面にすぐ表示される画像（above-the-fold）は高優先度で読み込み、スクロール後に表示される画像（below-the-fold）は遅延読み込みされる。

インライン重要 CSS

  • スタイルシートのダウンロードと解析中に発生しうる FOUC（Flash of Unstyled Content）を防ぐため、jampack は重要な CSS をインライン化し、残りの CSS は遅延読み込みする。

リンクのプリフェッチ

  • ページ内のリンクを事前取得して、今後のページ遷移速度を向上させる。quicklink により、ビューポートに入るリンクを動的にプリフェッチできる。

すべてのアセットを圧縮

  • jampack は 2 回目のパスで、まだ手が加えられていないすべてのアセットを圧縮し、同じ名前と形式を維持する。さまざまなファイル拡張子ごとに、それぞれ適した圧縮ツールを使用する。

さらに多くの機能！

  • jampack は npx @divriots/jampack ./dist コマンドによって、dist フォルダー内の静的 Web サイトを最適化できる。

jampack の使用事例

  • ‹div›RIOTS の Web サイト、keycloak.ch、bayjs.org など、さまざまな Web サイトで jampack が使われている。

jampack という名前の由来

  • jam: Jamstack に由来する。
  • pack: 90 年代の実行ファイルパッカー（Executable Packers）を連想させる。

ライセンス

  • このソフトウェアは MIT ライセンスの条件の下で公開されている。

GN⁺の意見

  • jampack は、Web パフォーマンス最適化に強い関心を持つ初級ソフトウェアエンジニアにとって有用なツールになりうる。特に Core Web Vitals のようなパフォーマンス指標を重視する開発者に役立ちそうだ。
  • このツールは画像最適化だけでなく、CSS や JavaScript の圧縮など多様な Web 最適化機能を提供し、ページ読み込み時間を短縮してユーザー体験を改善できる。
  • 批判的な観点から見ると、jampack のようなツールの使用は Web サイトの複雑性を高める可能性があり、誤って使うとかえってパフォーマンス問題を引き起こすこともある。したがって、導入前に十分なテストと検証が必要だ。
  • Web パフォーマンス最適化のためにはすでに多くのツールが存在し、たとえば Google の Lighthouse や WebPageTest のようなツールがある。こうしたツールと併用することで、jampack を使って Web サイトのパフォーマンスを総合的に分析し、改善できる。
  • jampack を導入する際は、Web サイトの構造と使用している技術スタックを考慮して最適化戦略を立てる必要がある。また、オープンソースツールを使うことでコミュニティの支援を受けられる利点がある一方、プロジェクトの継続性と保守に対する責任も考慮すべきだ。

関連記事

1件のコメント

 
GN⁺ 2024-03-26
Hacker Newsのコメント

  • あるユーザーは、自分が探していたものを見つけたと述べている。これまでは Sharp を使った自作スクリプトで画像最適化を行っていたが、Jampack を使うようになってその必要がなくなったという。Quarto の静的サイトをビルドした後に Jampack を実行したところ、フォルダサイズが 32% 減少し、今のところ目立った欠点はないとのこと。PageSpeed Insights を使って、Jampack 使用前後のパフォーマンス指標も共有している。

    • モバイルのパフォーマンス指標
      • Jampack 使用前: パフォーマンス 52、アクセシビリティ 73、ベストプラクティス 100、SEO 85
      • Jampack 使用後: パフォーマンス 49、アクセシビリティ 80、ベストプラクティス 100、SEO 92
    • デスクトップのパフォーマンス指標
      • Jampack 使用前: パフォーマンス 90、アクセシビリティ 75、ベストプラクティス 100、SEO 82
      • Jampack 使用後: パフォーマンス 85、アクセシビリティ 82、ベストプラクティス 100、SEO 91

  • 別のユーザーは、この機能を見て Apache と Nginx 向けの PageSpeed モジュールを思い出すと述べている。

  • あるユーザーは Jampack を気に入っており、使ってみたいと考えているが、批判的な人たちがどんな欠点を指摘しうるのかを尋ねている。このユーザーは、Jampack は C コードを最適化済みアセンブリにコンパイルするのと同じようなことをしていて、自分ではやりたくない作業を代わりにやってくれるものだと考えている。

  • 別のユーザーは、「重要な」CSS を特定してインライン化するという考え方に興味を持っている。本当は重要でない CSS を原理的に特定する方法があればよいと期待していたが、使われているライブラリはページをレンダリングし、どのルールが重要かをできる限り検出する方式を採っているようだと述べている。

  • あるユーザーは、SSG の出力に含まれる Unicode 範囲に応じてフォントを部分選択し、CSS で定義された font-feature-settings に基づいて OpenType 軸を固定する方法を見てみたいと述べている。

  • Jampack はとてもクールだと思っているユーザーは、Node.js を使うのが怖い人向けに Docker コンテナを作って利用を簡単にできないかと尋ねている。

  • Web ページのレイアウトが嫌いで学ぶ気もないが、ときどきやらなければならないというユーザーは、Jampack は素晴らしく見えると述べている。

  • 実運用で使われている静的サイトジェネレーターについて尋ねるユーザーがいる。こうしたツールを使えば出力をさらに最適化できるはずだと考えている。たとえば、Divjoy の React Web サイトを S3 バケットから配信できるシンプルな HTML に変換しようと一日中試していたが、うまくいかなかったという。自動的に S3 バケットへデプロイし、ドメインを向けられるツールが必要だとしている。

  • Jampack は、SSG とそのプラグインで対処しようとしている多くのユースケースをカバーしているように見えると述べるユーザーもいる。Astro や Eleventy を選ぶ理由が、別個のポストビルド段階を好むことにあるのか気になっているという。開発中の高速な再ビルドと、画像の幅宣言のようなものを導入することで生じうる微妙なバグを見逃す可能性との間に、トレードオフがあるかもしれないとしている。

  • 実際の例をメールで送ってくれる人たちに感謝を述べるユーザーもいる。このような支援にとても感謝しているという。